JetPackのphoton機能の新常識？photon使うと「画像の遅延読み込みが出来なくなる」はもう古い
どうも。
記事タイトルのセンスの無さに笑いがこみ上げてきますがご勘弁…ｗ
主にJetPackという有名なプラグイン経由で使えるようになる「photon」という機能について以前も掘り下げたのですけども最近になってまた「これは…？」という、言いたいことが出来ちゃった事態になりましたので記事にしてみようかと思います。
ぶっちゃけ前回の記事書いた後すぐ使わなくなってたんですけど、もう一回使おうかな、と思い直した次第で。
photonの弱点克服？
photonの致命的な弱点とは？
以前お調べした際、photonには弱点としてLazyLoadを有効にすると画像が表示されなくなる（共存出来ない）、といった情報がありました。
実際僕も使ってみたところ確かに、読み込み前の背景色及びスピナー（クルクルしてるやつ）が表示され続けるだけで待てども待てども画像が表示されず全くダメでした。
このことに関しては、紛れもなく本当のことなんですけども。
真・LazyLoad？
今回Luxeritasのアップデートにて「Intersection Observer」というものが導入されました。
僕は与えられることしか能がありませんので、こいつが何者なのかはよくわかってませんｗ
…が、画像遅延読み込み機能であることというのはわかりました。LazyLaodのいち形態という解釈で良いんだと思います。
詳しい解説はLuxeritas開発者のるな様がしてらっしゃいますのでこちらをご覧くださいまし。
https://thk.kanzae.net/dev/wp-themes/luxeritas/t9516/早速アップデートさせていただき、こちらの機能を有効化してみたんですが少しばかり気になることが。
スマホで見ると少し読み込みタイミングが遅い気が。
白地が思いっきり見えてから数秒後に読み込まれるので少し恥ずかしいやらもどかしいやら。
たぶん古い機種使ってるから、って原因も考えられるかもしれません。PCだとスーッと表示されていきますからね。
まぁ慣れれば気にならんのですが、出来れば早く画像を持ってこれんかな～と思い、ダメもとでphoton使ってみると…。
普通に表示されるし、気のせいの可能性もありますがあんまり目立たない感じに！
これにより画像を非同期で読み込みつつ、軽いフットワークで持ってこれるんじゃね？と思った次第ｗ
Intersection Observerを使用する場合のみphoton有効化しても全然大丈夫ですね。
あっ…ちなみに僕は再び停止しました。（WPFCもろとも）
ロリポップ先輩のCDN一本に戻してますんで、またその辺の話もします。
「photonの何が悪い」とかではありませんのでご安心をｗ
普通に表示は早くなるし、ページスピードインサイトのスコアもWPFCとphoton使ってる方が高いです。
ただキャッシュが強力過ぎて、Webフォントとかの編集加えてもブラウザキャッシュまでクリアせなアカンのが面倒くさいので今は外してます。
調整終わったらまた復帰する…かもｗ