以前から天下のGoogleさんから「サイトの表示スピード上げないと順位落ちちゃうかもね」と遠巻きに脅しのような情報が発信され続けております。
※表現は個人の偏見フィルターが入っています。頭の良い人たちはもっと穏やかな表現をするものです。
Web制作を生業にしているので仕事柄コーディング作業は切っても切れないもので、
年々デザインデータは重くなるのにコーディングは削るというジレンマに悩まされるエンジニアも多いのではないでしょうか？
個人的には５Gとか言ってんだからゴリゴリ重い画像切り出しまくってもサクサクだから良いんやないか。。。と思うこともありますがそういうわけには行かないみたいです。
まあ、劣悪なネット環境でもコンテンツが問題なく表示された方がいいというのはわかります。
僕自身読み込みが３秒以上経ったら離脱します。時は金なりということですね。
一言で「サイトスピードUP」と言ってもやり方は様々で
・書き出した画像を劣化させ軽量化を図る。
・JS、CSSを改行潰してコンパクトにする。
・サーバーサイドで動いているphpなどを静的ファイルにしてしまう
などなど
アプローチは多種多様です。
とはいうものの「サーバーサイドで動いているphpなどを静的ファイルにしてしまう」とかは導入コストから考えて現実的ではないしリスクも伴います。
Js、cssを圧縮してコンパクトにってのは軽減できる容量が画像に比べ、カスみたいなもんです。
となると最小限の労力でインパクトを与えるには画像周りの対策を行うのが一番ということになります。
昔、しょうもないB級映画で爆弾魔が言っていた気がします。
どんなしょうもない映画も観てみるもんです。
というわけでサイトで使用されている画像をガンガン劣化させて軽量化しましょうという話になるのですがそうは問屋が下ろしません。
画像の書き出し品質の低減はしくじると目に見えてガビガビな結果になってしまいディレクターやクライアントに指摘され結局書き出し直しという流れになります。
書き出しの時間が無駄になる上にサイトが重くなります。にもかかわらず出来上がったサイトが重いとか言われます。
最悪ですね。なので皆さん書き出しの品質に関してはうまいことやりましょう。これは腕の見せ所です。
気合で頑張ってください。
では粘着質な人に捕まったら重たいサイトで諦めるんかという話なのですがそんな時の遅延ロードです。
どんなもんかと言いますと、
とりあえず画面に出てる分だけ画像出してあとは実際使うときに改めて読めばいいんじゃね？という良い言い方をすると効率の良い悪い言い方すると横着な手法です。
実際に幾つかのサイトに実装してみたのですが重い画像を何枚も使用しているサイトは劇的に変わります。
考えてみれば当たり前です読み込み放棄してますから。
前置きが長くなりましたが本題です。
遅延ロードにもいろいろありますが有名どころが「Lazy Load」と「lazysizes」でしょうか僕はよくわからなかったので最初「Lazy Load」を使って後で「lazysizes」を使用しました。
結果「lazysizes」でいいかという結論に至りました。
「Lazy Load」https://github.com/tuupola/lazyload
「lazysizes」https://github.com/aFarkas/lazysizes
機能としてはどちらも正直あまり変わりません。
やってること同じなので大差はないです。
ではなぜ「lazysizes」を選んだかというとサイトの表示スピードを計測してわかりやすくスコアで出してくれるGoogleさんの「PageSpeed Insights」で露骨にスコアが良くなるからです。
「lazysizes」はGoogleさんに推奨されてます。
つまり長いものに巻かれました。
同じくらいの労力ならインパクトが強い方を選びます。そういうことです。
まあ厄介なのが「PageSpeed Insights」スコアが時間帯や環境によって安定しないのと出してくる提案が「画像を次世代フォーマットで読み込んで！」とか割と無茶言ってくるので正直好きではありません。
これのスコアページのキャプチャ撮ってきて軽くしてとか言われるとイライラするエンジニアの方もいることでしょう。
ちなみに僕はイライラする側の人間です。
僕は「lazysizes」を選択しましたが「Lazy Load」も素晴らしいものだと思います。
どっちを使用するかは自分で考えて決めればいいのかなと思いました。
