WordPressプラグイン

高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法

lazy load - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法

この記事ではサイト高速化プラグイン「Lazy Load by WP Rocket」をご紹介します。

Lazy Load(遅延読み込み)とはウェブページの画像読み込みを必要な分だけに減らして、サイト表示を高速化するプラグインです。

例えばスマホユーザーの場合、ウェブTOPページの画像は表示するもののスクロールしないと見れないページ下の画像は後から読み込む仕様になっています。

ブログ記事などはユーザーが読みやすくするために画像をたくさん入れることが多いですが、そのためにどうしても表示速度は遅くなってしまいますよね。

しかし、2017年のGoogleの調査では読み込みに3秒以上かかるとモバイルユーザーの53%が閲覧を止めるという結果が分かっています。

モバイルユーザーはウェブページの読み込み時間が長いほどの直帰率は高くなり、

読み込み時間が3秒だと1秒のときの32%増、
5秒だと同90%増、
6秒だと同106%増、
10秒だと同123%増になってしまいます。

bounce rate google - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法Source: Google/SOASTA Research, 2017.

GoogleはSEO的にもサイトが「モバイルフレンドリーか?」という観点を重視していますので、サイト運営者にとってサイト表示速度は非常に大事であることがわかります。

ぜひ「Lazy Load by WP Rocket」を入れて高速化しておきたいですね…!

「Lazy Load by WP Rocket」の設定方法はとても簡単ですし、設定後は放置でOKなので本当に入れない理由がないプラグインです。

ちなみに同様のプラグインとして「Lazy Load」もありますが、違いとしては「Lazy Load by WP Rocket」の方は対象項目が選べて、レイアウトもイケてる(!)程度なのでどちらを使用されても問題ないかと思います。
 

Lazy Load by WP Rocketインストール方法

WordPress管理画面からプラグインを新規追加する

lazyload wprocket 1 - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法

Lazy Load by WP Rocketをインストールするために、WordPress管理画面で「プラグイン > 新規追加」と進んでください。

右上のプラグインの検索で「Lazy Load by WP Rocket」と入力し、対象プラグインの「今すぐインストール」を押せばインストール完了です。
 

Lazy Load by WP Rocketを有効化する

lazyload wprocket 2 - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法

インストールが完了したら同様に「有効化」のボタンを押しましょう。

これでLazy Load by WP Rocketは使用できる状態になりましたが、念のために設定を確認してみましょう。
 

Lazy Load by WP Rocketの使い方&設定方法

lazy load 1 - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法

有効化したらそのまま使用することもできますが、プラグイン設定の中身がわからないと不具合が合った際に何が原因か全く検討がつかなかったり、同様のプラグインを入れてしまって競合するケースもあります。

そのため、簡単にLazy Load by WP Rocketの設定について確認しておきましょう!
 

設定画面に移動

lazyload wprocket 3 - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法

WordPress管理画面で「設定 > LazyLoad」に進んでください。
 

設定画面の説明

lazyload wprocket 4 - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法

青枠はLazy Loadの機能の説明であり、画像、iframe、動画はユーザーに表示されている場合のみページに表示されることが記載してあります。

ここでiframeはインラインフレーム要素と呼ばれるもので、HTMLページに他サイトのページを埋め込むものです。Google MapsやTwitterの埋め込みを想像していただければ間違いないです。

赤枠はLazy Loadを適用する項目を選択できます。ここでは、

・Images
・Iframe & Videos

を選択してください。

その下の「Replace YouTube videos by thumbnail」にチェックを入れてしまうと、サイト内のYouTube埋め込みがサムネイル画像に置き換わってしまうので注意してくださいね。

最後にページ下部の「SAVE CHANGES」をクリックしたら完了です。設定作業、お疲れ様でした!
 

サイト表示速度を確認しよう

サイト表示速度を測定することで自サイトがGoogleから速度に関してどの程度の評価を得られているか、そして客観的なユーザービリティを数字で把握することができます。

測定はGoogle公式ツールの『PageSpeed Insights』を使用します。

ちなみに本サイトの測定結果はこちらとなります。

pagespeed after 1 - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法プラグイン導入後

当然、こちらのスコアで100点を取ったからと言ってすごくSEOが強くなるということはないですが、スコアが低いのは減点や離脱率の増加につながるのできちんと対策していきましょう。

また、WordPress高速化系のプラグインを入れる前後はきちんと測定して効果があったかどうか検証しましょう。

プラグインによっては逆効果だったり、プラグイン同士が干渉するということも良くありますのでご注意ください…!

こちらの記事で紹介しているEWWW Image Optimizerは画像を圧縮するプラグインであり、Lazy Load by WP Rocketと相性が良いので是非合わせて導入してみてください。
 

まとめ

lazy load 2 - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法

この記事ではLazy Load by WP Rocketmの使い方と設定方法をご紹介しました。

設定自体はかなり簡単だったかと思います。

しかし、これだけの作業でサイトの表示速度が向上するので、まだ入れていない方はこの記事を参考に是非入れてみてください。

また、こちらの記事でさらにWordPressブログを高速化するプラグインをご紹介しているので是非ご確認してみてください。

WordPress高速化にはコード最適化やキャッシュ系プラグインを入れる必要がありますが、これらをいくつか入れてみて実際に成果を得られたものだけ紹介しています。

autoptimize cache enabler e1581331367430 - 高速化プラグイン『Lazy Load by WP Rocket』の使い方と設定方法
【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法WordPressは高機能で便利な反面、サイトが重くなりやすいという欠点もあります。 しかし、Googleは"Webmaster Ce...
 

PC1台で自由なライフスタイルを実現する無料メルマガ

RELATED POST
『ブログ×外注化』で月40万円を稼ぎ、独立起業するための思考や情報を学ぶメールマガジン
無料登録はコチラ
ブログで月40万円を稼ぎ、自由なライフスタイル目指す無料メルマガ
登録はコチラ