Wordpressの読み込みを高速化させる、「LazyLoad」の活用法 | Hibilog | 青木優のインバウンド観光と日常と考察ブログ
 

WordPressの読み込みを高速化させる、「LazyLoad」の活用法

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 | 世界一周と日常と考察ブログ


 

Tags: ,

«  //  »

コメントはこちら







Print


 
About Hibilog

青木優の日常と考察ブログです。

Home

About Me

人生でやりたい100のリスト

世界一周、海外旅行の持ち物

写真たち

Popular Posts