こんにちは、@Yuuです。

最近自分のブログの読み込み速度があまりにも遅く、夜も眠れないぐらいに悩まされております。
睡眠時間は安定の6,7時間なので、バッチリ寝てる気もします。

自分のブログの読み込み速度が遅い理由はいくつかあります。
その中でもデカイ問題が、画像が多く、その画像サイズが大きいというものです。

例えばwidth: 80px, height: 80pxのサムネイルを表示する領域に、width: 350px, height: 350pxの画像を使っていたり・・

おバカな設定を色々してしまっているワケです。

早めに画像を適切なサイズにはしようと思っていた矢先に、以下の記事を見つけまして↓

つまりこの「Lazy Load」を使えば画像を後読みすることで、ページの読み込みが速くなると！

画像が重い自分のサイトには「導入してみるしかない！」と思い、WordPressのプラグイン「Lazy Load」を導入してみました。

WordPressのプラグイン「Lazy Load」

Lazy Loadとは

そもそも「Lazy Load」てなんじゃらほい？という話。

普通にWebページを開いた時、そのページに表示する画像を全て読み込もうとします。

画像をそこまで使っていないページならまだしも、画像を沢山使っているページの場合、まだ表示されていない画像も読み込むせいで、ページ全体の読み込み時間が必要以上にかかってしまう、という問題が起きるわけです。

読み込み時間が遅いページであまり開きたくないですよね？
まぁ、まさにこのサイトの事なんだんですが。。。

そこで出てくるのが「Lazy Load」という技術。

ユーザーが表示している画面内の画像しか表示しないようになります。
ユーザーがスクロールし、表示する必要のある画像が出たら読み込んで出力する、という技術が「Lazy Load」。

何それ、すごい。
惚れそう・・。

Lazy Loadを導入する前に

導入する前に、僕のブログの読み込み速度を貼っておきます。

速度の計測には以下のサイトを使用させて頂きました。

GTmetrix | Website Speed and Performance Optimization

こちらのGTmetrixを使用した場合、左下に表示されているPageSpeedが「A」か「B」ぐらい出た方がいい、みたいな記事を見た事があります。

とにかく「D」というのはめちゃくちゃ遅い..！というわけです。

Lazy Loadを導入してみる

Lazy Loadは追加する方法は、
サイドバー -> プラグイン -> 新規追加で「Lazy Load」と検索すると以下のように出てくるのでインストールします。

Lazy Loadの導入はこれだけで完了。
特にこれ以外に設定する事はありません。
カンタンですね！₍₍ (ง ˙ω˙)ว ⁾⁾

もしもLazy Loadを導入した後に、画像の表示されるタイミングが不自然に感じた人は、先ほどご紹介したサイトに改善方法が書かれているので試してみるといいかもです。

Lazy Loadを導入後

では導入後の結果です。

おぉ！すごい！10%以上も速くなってるー！
しかも「C」ランクになってるー！
やったー！(๑•̀ㅂ•́)و✧

個人的には導入前と導入後で若干ではありますが、体感速度として早くなったかなぁと思います。

僕のようにサイトに表示している画像サイズが大きい人、また画像を沢山使っている人は、Lazy Loadを導入してみると価値があるかもです。

あとがき

ブログを運営していると悩まされる事が色々あるなぁ、と思う今日この頃。

自分でWordPressのテーマを作ったからオリジナリティがあるサイトにはなったかなぁと思うけど、その変わり表示速度が遅かったりと悩みが尽きぬ日々です。

もっと速く表示出来るようにしなきゃ・・。

自分で悩んでは1つ1つダメなところを直していく、という作業も楽しいですけどねー。

今後も少しでもタメになる記事を、そして使いやすいサイトを目指して頑張ります！

ではでは
今回はこの辺で！ヽ(•̀ω•́ )ゝ✧