Webサイトの読み込み速度は、かなり重要です。SEOにも関係するらしく、何より、サクサク動くサイトは気持ちがいい。逆を言うと、重いサイトに長く滞在しようとは思わないです。
このブログは、Retinaディスプレイに対応させるために、画像のサイズを2倍で使っているため、重くなりやすいんです。旅系の記事だと、一記事20枚の画像を使うこともあって、そうなると読み込むのにすごい時間がかかる。
画像圧縮など色々試したのですが、それでも重くてどうしようか….と思って見つけたのが、「LazyLoad」。スクロールするたびに画像を読みこんでくれるので、何十枚写真が連なっていようが、サイトの最初の読み込み自体はかなり早くすみます。僕はこのプラグインだけで、3秒くらい表示速度が改善されました。有名なサイトだと、Rocketnewsとかも、これを使っています。
ただ、インストールしたままの状態だと画面をスクロールするたびにチカチカして、あまり良くないので、読み込みを遅らせながらも、チカチカさせない方法を書いていこうと思います。早ければ、1分くらいで終わります。
LazyLoad活用法(作業時間:1分〜5分程度)
1.プラグイン画面で、「Lazy Load」と検索し、そちらをインストールし、有効化する。
2.プラグイン編集画面でLazyloadを選択。
3.上記画像のように、Lazy-load/js/lazy-load.jsを選択し、distance: 〇〇を400〜600に指定。おすすめは400です。
以上です。
”200”の状態だと、画面下部の200pxを読み込むようになっていて、ちょっと早くスクロールすると画面がチカチカして表示されます。なので、もっと余裕をもって読み込むようにすれば、それが改善します。色々試した結果、400くらいが一番いいんじゃないかと。
ということで、Wordpressの表示速度に悩んでいる人、画像を多用する人向けに書いてみました。悩んでいる人は、是非試してみてください。
▼初心者にもわかる、Wordpressの作り方を書きました。
本格的にブログを始めたい人向け!誰でも簡単に、Wordpressをインストールする方法 | Hibilog | 世界一周と日常と考察ブログ