WordPressプラグイン

ブログの表示速度が遅い時の対処法「lazy load」使い方・設定手順

ブログの表示速度が遅い時の対処法「lazy load」使い方・設定手順

今回は、ブログの表示速度が遅いのを改善させるのにおすすめなプラグイン「lazy load」の使い方・設定手順について詳しく解説していきます。

あなたは実際に、ブログ(サイト)を運営していていて

  • 重い
  • 表示速度が遅い

といった事を感じる事はありませんか?

それって、あなたが思うようにあなたのブログ(サイト)を訪れたユーザーもそれによってストレスを感じている可能性があるんですよ。

それによって、ブログ(サイト)の滞在時間・離脱率につながり、あなたのサイト価値を下げているかもしれません。

もちろん重くなる原因としては、サーバーのせいだったりもしますが、ブログ(サイト)の記事自体が重くなっているなんて事もありえます。

というのも、画像が重い原因になってたりするんですよね。

今まで、インターネットサーフィンをしている時に、文字は表示されているのに画像だけ出てこないという経験はありませんでしたか?

ようは、それだけ文字に比べて画像のデータ量は多くて、表示するのに時間が掛かるんですよね。

そこで今回ご紹介するのが、ブログの表示速度が遅いのを改善させるプラグイン「lazy load」になります。

私も実際に使用していて、オススメプラグインになりますので、是非ご活用下さい。

岡田康平
岡田康平
こんにちは、岡田康平です。

なぜ私が在宅ワークで、家族全員が楽しめるこんなライフスタイルを送れているのか?

期間限定で、私が自由なライフスタイルを手に入れた方法について特別公開しているので、是非見ていってくださいね。

プラグイン「lazy load」はブログの表示速度を改善する?

画像表示速度UP「lazy load」使い方・設定

「Lazy Load」というプラグインは、簡単にいうと、サイトの表示速度をアップさせるためのプラグインです。

サイト(ページ・記事)の表示速度は、何によって変わってくるのかご存知ですか?

実は、そのページ内のデータ量によって変わってくるんですよ。

表示するために読み込むためのデータが少なければ、早く表示することができますし、多ければ表示は遅くなるというわけです。

データ量で一番軽いのは、文字、その次が画像、そして最後が動画といった感じですね。

ちなみに、画像ファイルのデータは、テキストデータに比べて数倍のデータ量の大きさになるんですよね。

だからといって、画像を使わないわけにはいきません。

というのも、説明する時に必要だったり、ユーザーが記事を読んでいるのを飽きさせないためにも、効果的だからです。

しかし、画像も大量に使っていれば、表示速度は遅くなってしまいます。

岡田康平
岡田康平
それではどうする?という事で、ここでオススメなのが「Lazy Load」というプラグインになります。

このプラグインの役割としては、画像を遅延ロードしてくれるんですよね。

表示速度UPのために遅延…どういうこと?!って思いました?笑

例えば、1ページに100枚も画像があれば、それは表示速度が遅くなるわけですが、それがなぜかというと、1ページを表示するのに100枚の画像を一気に読み込もうとするからです。

「Lazy Load」は一気に100枚を読み込むのではなく、画像が表示される場所にスクロールした時に見える画像だけを読み込むようにします。

なので最初に読み込む画像は1枚だけとなり、その後は必要に応じて表示をさせていくので、結果的に表示速度がUPするという仕組みになってくるのです。

 

3つのメリット

画像表示速度UP「lazy load」使い方・設定

「lazy load」を利用すると実際にどんなメリットがあるのでしょうか?

ここでは具体的に考えられる利点についてご紹介していきます。

 

①データ通信料の節約

近くまでスクロールしなければ、画像ファイルの読み込みがされないため、ページの途中でリンクを踏んで別のページに遷移した場合や閲覧をやめた場合は、見た部分までの画像データだけを読み込みます。

特にスマホの場合、毎月のデータ通信量の制限があったりするので、データ通信量を無駄にさせない設計にした方が、ユーザー思いである事が分かります。

またスマホの場合、サイトのコンテンツが縦長に配置されることになるため、lazy loadによるデータ通信料削減の恩恵は大きいです。

 

②SEO効果

Googleは『表示速度はSEOに影響する。』と発表しています。

表示速度が早ければ早いほどユーザービリティー(読者さんの利便性)は上がるので、それは当然の事ですよね。

ですのでブログやメディアサイトを運営する場合は、規模が大きくなればなるほど表示速度には気を配るべきと言えます。

やっぱり、ユーザーにストレスを与えない、ユーザーの事を第一に考えたブログ(サイト)がグーグルが求めているものになるので、それを考えると、このプラグインは外せないですね。

 

③直帰率の低下

Webの世界では表示速度が2秒遅くなると直帰率が50%も高まるという事が言われているのはご存知ですか?

直帰率とは、サイトに訪れた読者さんが次のページに行かずそのままサイトを閉じてしまう事を言います。

Googleは検索順位を決める上で、この直帰率というのをとても重視してると思われます。

確かにご自身でwebを利用した時の事を思い出してみると、なかなか表示されないブログ(サイト)をじっと我慢して待つ事はあまりしないですよね。

そこにしか書かれていない載っていない事となれば我慢するかもしれませんが、たまたま訪れたブログ(サイト)だと表示が遅ければ見るのを辞めるのは考えれば、当たり前ですよね。

という事で、

  • 直帰率が高ければ価値の低いブログ(サイト)
  • 直帰率が低ければ価値の高いブログ(サイト)

であるという事で、表示速度が遅くなればなるほど直帰率が高まってしまうので、できる限り表示速度は早めめた方が良いというわけです。

 

ブログ表示速度改善プラグイン「lazy load」使い方・設定方法

画像表示速度UP「lazy load」使い方・設定

では実際にあなたのサイトに「lazy load」を取り入れる方法を解説していきます。

インストール自体は他のプラグインと同じですし、設定も数秒で終わるくらい簡単です。

これだけで表示速度がUPするの!?っていうレベルですが、UPするのでご安心を!

 

インストール方法

  1. WordPress管理画面の左下にある「プラグイン」をクリック
  2. 「新規追加」をクリック
  3. 右上にある検索窓に「Lazy Load」と入力して、検索
  4. Lazy Loadが見つかったら、「今すぐインストール」をクリック
  5. インストール完了後、「有効化」をクリック

他のプラグインを利用したことがある人はやったことのある操作ですね。

インストール自体も、10秒程度の短時間で終わります。

インストールが完了したら「lazy load」の設定を行いましょう。

 

設定方法

初期設定のままでも使うことができるのですが、初期のままでは画像読み込みがあまりにも追いついて来なくてイライラする可能性が考えられます。

そのため、もう少しだけ画像の読み込み範囲を広げる設定をしておくのがオススメです。

  1. 管理画面左下の「プラグイン」からLazy Loadの「編集」をクリック
  2. 画面右側の「lazy-load/js/lazy-load.js」を選択
  3. このファイルを開くと、上の方に「distance:200」というコードが表示されるため、「200」を「400」に書き換える

たったこれだけの設定になります。

この設定を行っておくと、今までよりもゆとりを持って画像が読み込まれますので、かなり軽快にスクロールしていても画像表示は追いついてくれて、サクサク進めます。

 

ブログの表示速度が遅い時の対処法は他にある?

画像表示速度UP「lazy load」使い方・設定

プラグイン「lazy load」を導入する事で、だいぶサイトの表示速度が速くなった事を体感できると思います。

ですが、サイトの評価につながるとなればできる事はなんだって試したくないですか?

だからと言って、プラグインの入れすぎが原因でサイトが重くなる場合もあるので、そうなってしまえば本末転倒です。

必要なものだけをしっかりと取り入れる事が大事になります。

そのコツコツとした小さな積み重ねがいいブログ(サイト)構築に繋がってきて、収益につながるわけです。

そういう事で、他にもサイトの表示速度に関係する事項についてご紹介していきます。

思い当たるものがあれば改善してみてくださいね。

 

画像の最適化

フリー素材の画像などを利用する場合、web上でダウンロードした画像をそのまま載せてしまうと以外と容量が大きい場合があります。

画像は大きさだけではなく「ファイルサイズ」を小さくする必要もあります。

同じサイズでも高画質の写真は低画質の写真に比べて重くなります。

適切なサイズにしたうえでファイルサイズも最適化することがお勧めです。

それらを手作業でするのは面倒、わからない、という方はプラグイン「EWWW Image Optimizer」などを利用すると簡単になりますので、取り入れてみてくださいね。

 

キャッシュ系プラグイン

キャッシュとは例えば、一度開いた事のあるブラウザのページをデータとして残しておいて、次に同じページを開くときに静的データとして瞬時に呼び出す事で、表示速度をアップさせるものです。

キャッシュ系のプラグインを使う事でサイトが軽くなる可能性があります。

キャッシュ系プラグインはたくさん種類がありますが、中でもオススメなのが「WP Super Cache」です。

このサイトでも紹介や設定方法の説明をしていますので良ければご覧ください。

あなたに読んで欲しい記事

 

無駄なものを排除する

画像はテキストで説明が難しい部分の説明などに有効ですが、必要以上に使い過ぎているとサイト表示を遅延させる原因になります。

重要なのはご自身で入力する文章の方ですので、画像は補足程度に考えていく事も大切です。

また、収益を上げる事に憑りつかれてアドセンス広告やASP案件の広告を多用し過ぎたりしませんか?

アドセンス広告なども結構容量が重くなる原因だったりしますし、あまりにたくさん表示させているサイトは、あまりユーザーに良い目で見られません。

広告自体も貼れば貼るだけ収益が上がるといったものではないので、最適な場所に最適な枚数を設置する事を意識していきましょうね。

 

『ブログ 表示速度 遅い lazy load 使い方 設定手順』まとめ

ブログの表示速度が遅い時の対処法「lazy load」使い方・設定手順

今回はサイトの表示速度UPさせるのにおすすめプラグイン「lazy load」の使い方・設定手順について詳しくご紹介してきました。

設定自体とても簡単ですし、誰でも利用できるので、このプラグインはすぐ設定する事をオススメします。

というのも、ブログ記事を書いていく上で画像は必要不可欠ですが、ブログ(サイト)の表示を重くする最もな原因にもなります。

是非、プラグイン「lazy load」を取り入れて上手に画像を利用して、評価が高い読みやすいサイトを目指してみましょう。

岡田康平
岡田康平
ちなみに、ツイッターはサイトの表示速度にあまり影響がない感じがしますが、インスタは画質が良過ぎるため、非常にサイトの表示速度を落とす傾向にあります。

なので、インスタはあまり使用しない方がいいですね。

2児のパパが自由になった方法を
メールマガジンで公開中!!


 

(※1)登録直後に自動返信メールにて限定プレゼントをお届けしています。
(※2)お預かりしたメールアドレスなどのプライバシー情報は厳守致します。
(※3)いつでもメール内の解除リンクから解除出来ます。