【SEO】PageSpeed Insights対策No.2 - オフスクリーン画像の読み込み遅延
今年も元気にクリぼっちのみやびです。
もう、マジで来年こそ相手見つけないとやばい。
さて、表記の件、前回の続きだ。
PageSpeed Insights（以下PSI）は、スクリーンの外の画像は読み込む必要ないんだから、読み込まないようにしてね〜と警告してくる。
確かにごもっともな意見だが、
これさ、無理じゃね？
うん無理だよ。
普通に。
現に、諦めてる人が大半だろう。
だって、HTMLにimg要素記述している限り、無理でしょう、ほんとに。
勝手に読み込みしちゃうもん。
というわけで、なんとか遅延読み込みを作ってみたってのが、今回の記事。
ちなみに、画像遅延読み込みで有名なスクリプトライブラリは、
だ。
導入も簡単だし。
ただ、実は、PSIの要求を満たすものになっていない。
スピードが若干足りないのだ。
というのも、jQueryを使用していることで、jQuery読み込み後でないと、動かないので、
その間に読み込みが開始された画像に関しては、警告を受けてしまう。
そこらへんをクリアするには、どうしても、ネイティブJSを使う必要がある。
実は以前、画像遅延読み込みスクリプトを作ったことがある。
Lazy Load導入がどうしてもうまくいかず、仕方なく自作したもの。
だが、jQueryを使用している以上、どうしても限界があった。
そこで、ネイティブを使用し、改良を加え、完全に、画像読み込み前に読み込みをシャットアウトするスクリプトを作ることができた。
置き場所はここ
（zipファイルがダウンロードされるはず）
使用方法は、headに、スクリプトを読み込むだけだ。
<html> <head> <script sec="/common/js/simagesloading.min.js"></script> </head> <body> <img src="images/hoge.png"> </body> </html>
一応、IE、モバイルデバイスで動作が確認できている。
またpicture要素にも対応している。
ちなみに、同スクリプトは、必ず、head内で読み込むように。
でないと、画像の読み込みが開始してしまう恐れがあるからだ。
よって、前回エントリーの、スクリプトのインライン出力を使わないといけないかもしれない。
以上で、PSI対策に関してのエントリーは終わりだ。
三つの課題をクリアすることで、モバイルの点数もだいぶ安定するかと思う。
どうか、お試しあれ。
本当に、今回のアップデートには閉口したよ。
検索市場はGoogle寡占な感が強くなってきたと思いますが、使用画像にまで制限入れんのはほんとどうなんだろうねそれって。
（のくせブラウザの表示はまだまだ差異があって、コーダー殺しという）
今後どうなることやら。