ようこそ L′s Info Blog へ。
ブログ管理人のレイトンです。
皆さんは、こんな話って聞いたことありませんか？
- ユーザーライクなサイトは、読み込みの速さが重要！
- GoogleのPageSpeed Insights でスコアが～～以上でないと、検索上位に上がりにくいよ！
- 画像の多いサイトは、画像遅延読み込みなどを積極活用しよう！
- 遅延読み込みとは
- Webサイトで表示される画像を「一括で読み込まず、各画像の個所に合わせて必要な分だけ読み込む」仕組みのこと。
画像を一括で読み込む場合に比べて、JavaScriptやCSSの読み込みが早くなるので、サイト全体の表示スピードが速くなります。
JavaScriptやCSSについては、詳しく知らなくても問題ありません。
気になるという方は、下にリンクを貼っておきますので、そちらからどうぞ。
JavaScriptについて
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 の解説ページを見る「これらの内容をそっくりそのまま聞きました！」って事は、中々ないと思いますが、似たようなことはよく耳にするかと思います。
これに関しては、テーマごとの特性＋求める読者層によって十人十色だと思いますので、深くは語りません。
今回は、読み込みを早くしてページを早く表示したい方向けの解説をしていきます。
そして、今回解説するプラグインは「a3 Lazy Load」です。
ブログ初心者の方への おすすめプラグインまとめもありますので 下のリンクからどうぞ。
始めに
本記事では、WordPressのプラグイン「a3 Lazy Load」について解説していきます。
こんな方におすすめ
ブログを始めたばかりで、どのプラグインを入れたらよいか分からない方
画像を多用しているので、何か対策をした方がよいかなと考えている方
画像の最適化は行っているが、未だにページの表示速度が遅い方
プラグインの導入手順
- WordPressのダッシュボードから プラグイン をクリック
- 読み込み後、画面上部の 新規追加 をクリック
- 読み込み後、画面右上の検索窓に「a3 Lazy Load」を入力し Enter 又は 少し待機
- 「参考画像 ③の手順実施後表示される画面」が確認出来たら、今すぐインストール をクリック
プラグインの初期設定
- WordPressのダッシュボードから 設定 をクリック
- 画面が切り替わったら、項目の中から a3 Lazy Load をクリック
- 画面が切り替わったら、Lazy Load Activation をクリック
- Enable Lazy Load が ON になっていることを確認
- 補足
- 設定項目が結構ありますが、基本的に設定はデフォルトのままで問題ありません。
このプラグインは、画像の遅延読み込みを主としていて、それ以外の設定項目はないですし それ以上を求めるなら他の手段になりますので。
まとめ
今回は、ブログ初心者の為のプラグイン解説第5弾 として
「a3 Lazy Load」の解説をしました。
画像の遅延読み込み？何ですかそれ？って方は結構いらっしゃると思います。
ざっくりと解説すると、序文で書いた「画像の読み込みをユーザーに合わせる」という説明がしっくり来るんではなかろうかと。
もう少しだけ詳しく説明すると以下のような感じです。
通常、サイトはページの読み込みがされた時点で全ての要素を読み込みしようとします。
そうなると、画像が大量にあるページは当然読み込みに時間が掛かってしまいます。
その結果
読み込み遅いなぁ。
時間掛かりそうだから、別のサイトで探そうかな。
という結果になってしまう訳です。
そこで出てくるのが、画像の遅延読み込みです。
- 画像の遅延読み込みについて、少し詳しく説明
- ページを表示する際に、最初の文章とそのエリアにある画像のみを読み込み、他エリアにある画像は 最初のページ表示時点では読み込みません。
各エリアの画像は、ユーザーが文章を読み進めて 次の画像に近づいたら読み込みされます。
前提として、記事全体に、画像を使用しているとします。
ページを表示する際に、最初の文章とそのエリアにある画像のみを読み込み、他エリアにある画像は 最初のページ表示時点では読み込みません。
各エリアの画像は、ユーザーが文章を読み進めて 次の画像に近づいたら読み込みされます。
※上のブロックが少し詳しい説明です。
小難しいお話となってしまいましたが、プラグインを使って読み込み速度の改善を図りましょうというお話でした！
今回は、この辺りで記事を終わりにしたいと思います。
もしここまで読んで頂けた方がいらっしゃいましたら、格別の感謝を。
至らないところもあると思いますが、指摘等ありましたらコメントでご指摘頂けると助かります。
それでは、また。