ワードプレス高速化!プラグインa3 lazy loadで簡単設定

サイト高速化

a3 Lazy LoadをインストールしてWordPressを高速化しよう

a3 Lazy LoadをインストールしてWordPressを高速化した時のイメージ画像

サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです

どんなに良い記事を書いて、有益な情報を発信したとしても、サイトの読み込みスピードが遅かったらGoogle検索の評価が下がるだけでなく、せっかく訪れてくれたユーザー(訪問者)がすぐさま、サイトから離脱する可能性も高くなります。

ユーザビリティを高めるため、Google検索で高評価を得るためにも、サイトスピードの高速化はサイト運営者にとって必須のものとなっています。

今回は、サイトスピードを高速化する方法の1つである「画像の遅延読み込み」を可能とするWordPressプラグイン「a3 Lazy Load」の解説をしていきます。

「a3 Lazy Load」ってどのくらい高速化できるの?

今回、サイトスピードを計測できる以下の3種類のサイトを使用して、それぞれのプラグインでの点数の比較をしてみました。

PageSpeed Insights

Pingdom

GTmetrix

まず、それぞれのサイトごとの結果を見てみます。(5回計測した中のMAX値)

左がプラグイン導入前、右がプラグイン導入後となります。PageSpeed Insightsについてはモバイル表示での結果になります。

  • PageSpeed Insights  43 ⇒ 50
  • Pingdom       83 ⇒ 83 
  • GTmetrix         73 ⇒ 88

これまで、様々な高速化の方法を試してきた中でも、今回のプラグインは点数の上がり幅が大きいです

ちなみにPageSpeed InsightsのPCでは、「99」という点数になりました。

Lazy Load系のプラグインは3種類あります

検索で、「Lazy Load」と検索すると大体3種類のプラグインが出てきます。

1つめは「Lazy Load」。これは昔からあるプラグインで、大抵は検索結果でも上位に表示されます。

プラグイン「Lazy Load」の画像

2つめは「BJ Lazy Load」。最終更新が1年前なので少し古いって感じですね。

プラグイン「BJ Lazy Load」の画像

3つめは「a3 Lazy Load」。今回一番点数が良かったプラグインになります。

プラグイン「a3 Lazy Load」の画像

今回は、それぞれのプラグインでの点数の比較をしてみました。

Lazy Load系のプラグインは3種類あるけど、どれが一番速い?

3種類のプラグインがあって、一体どれが一番効果があるのか???って考えた時、色々調べてみても比較しているサイトがなかったから、今回実際に比べてみました。

検証方法は、3種類のプラグインをダウンロードして、それぞれ1つずつ有効化して、「PageSpeed Insights」⇒「Pingdom」⇒「GTmetrix」の順で計測を行い、合計5セット繰り返しました。

結果は、

プラグイン検証結果の画像

色がついている欄がそれぞれで最も速かった事を表しています。

例えば、「PageSpeed Insights」の1回めでは、「a3 Lazy Load」が50を計測して1番になっています。

これは、総合計の点数を表していますが、それぞれ大きな差が出ていなかったので、次に「PageSpeed Insights」にしぼって細かく計測しました。

これについては「Lazy Load」⇒「a3 Lazy Load」⇒「BJ Lazy Load」の順番で、それぞれのプラグインを有効化して5セット計測しています。

プラグイン詳細検証結果の画像

結果を見ると多少バラけていますが、全体的に「a3 Lazy Load」が高点数となっているのが分かると思います。

ということで、今回の3つの「Lazy Load」系プラグインでの効果検証の結果は、

「a3 Lazy Load」が一番効果あり

といえると思います。

そもそも「Lazy Load」って何???

「Lazy Load」系のプラグインはサイトスピードUpに効果があることが分かりましたが、そもそもどういった事なのか簡単に解説します。

「Lazy Load」は訳すと「レイジーロード」と読みます。日本語に訳すと、

Lazy=動きがのろい

Load=データの読み込み

つまり、「データの読み込みスピードが遅い」って直訳できます。

あれ??読み込みスピードが遅いのに、サイト表示の高速化が可能なの???

って思われるかもしれませんが、ここでいう読み込みスピードは「サイトに表示される画像の読み込みスピード」の事になります。

クリックされてサイトが表示されるとき、色々なプログラムが動くわけですが、表示される画像の読み込みも同時に開始されます。

このとき、沢山の画像を使用していたら、全て同時に読み込みを行うから、サイトが表示されるスピードが遅くなります。

例えば極端な話で、10枚しか画像を使用してないサイトと100枚画像を使用しているサイトではどちらが速いと思いますか????

考えるまでもなく少ない枚数のサイトですよね。

あれ???そうしたら、サイトには多くの画像を使えないの???ってなりますよね。

そこで役に立つのが「Lazy Load」系のプラグインになります。

「Lazy Load」=「画像読み込み遅延」は、表示される画像の制御を自動で行ってくれます。

仕組みは、

クリックされてサイトが表示されました。

    ⇓

ここで読み込まれる画像は全ての画像ではなく、ユーザーが見えている画面のみです。下部の見えていない部分はまだ画像が読み込まれていません。

    ⇓

ユーザーが画面を下にスクロールしていきます。

    ⇓

スクロールされて表示された画面の画像が自動的に表示されていきます。

画像を一気に表示させるのではなく、スクロールに合わせて遅れて表示させる機能

これが、「画像読み込み遅延」という機能です。この機能により、読み込みスピードが早くなり、サイトの高速化を実現できるということになるのです。

それでは、続いて「a3 Lazy Load」のインストールから設定までの流れを解説していきます。

「a3 Lazy Load」インストール

それではWordPressプラグインの「a3 Lazy Load」をインストールしていきます。

このプラグインは日本語対応になってませんが、それぞれの設定項目について詳しく解説していきますので心配無用です。

このプラグインをインストールするためには2通りの方法があります。

  • 「a3 Lazy Load」配布サイトから直接ダウンロード

プラグインを配布しているサイトから直接ダウンロードを行い、サーバ内のWordPressディレクトリに直接インストールする方法になります。これはディレクトリ構造が分かっている方にオススメの方法になります。

  • WordPress管理パネルのプラグイン新規追加からインストール

WordPress管理パネルの「プラグインを新規追加」からインストールする方法になります。直接ダウンロードに比べこちらの方が直感的にインストールできるので初心者の方にオススメの方法です。

「a3 Lazy Load」配布サイトからダウンロード

まずは、プラグインを配布しているサイト(WordPress.org)へ移動し、ダウンロードをクリックします。

サイトはこちらになります。↓↓(配布サイトは別タブが開きます)

a3 Lazy Load

こちらのサイトでダウンロードしたプラグインを「/wordpress/wp-content/plugins」ディレクトリにアップロードします。

a3 Lazy Loadのzipファイルの画像

ダウンロードしたプラグインを展開します。

a3 Lazy Loadフォルダの画像

アップロードが完了したらWordPress管理パネルから「インストール済プラグイン」をクリックします。すると、

プラグイン管理画面の画像

プラグイン一覧の中にインストールされたのが分かるので、「有効化」をクリックします。有効化後は管理パネルにある設定画面からいつでも設定を変更できるようになります。

※この時、ディレクトリに直接アップロードした場合は必ずファイルの所有権の変更を行っておきましょう。

これで、直接インストールする方法は完了しました。

詳しい設定方法については、後ほど解説します。

WordPress管理パネルのプラグイン新規追加からインストール

次に紹介するのは管理パネルからプラグインをインストールする方法になります。

まずは、管理パネルから「プラグイン新規追加」をクリックします。

プラグインの検索に「a3 Lazy Load」と入力します。(コピペ可

プラグインを追加画面の画像

このように表示されるので「今すぐインストール」をクリックします。

有効化ボタンの画像

有効化をクリックしてインストールが完了します。

管理パネルからプラグインを見てみると、以下のようにインストールされているのが確認できます。

プラグイン管理画面の画像

プラグインのインストールの解説はこれで終了です。

次は実際に設定を行っていきましょう。

a3 Lazy Load」の設定方法

「a3 Lazy Load」の設定方法をイメージした画像

ここでは具体的な設定方法について解説していきます。

設定を行いたい場合は、上図のプラグイン一覧画面から「a3 Lazy Load」したの「setting」をクリックするか、

管理パネルの設定から「a3 Lazy Load」をクリックすれば設定画面になります。

設定はいくつかの項目がありますが、基本的にデフォルトのままで大丈夫です。

「a3 Lazy Load」設定画面①の画像

遅延読み込みを有効にするかどうかの設定です。「Enable Lazy Load」を「ON」にしてください。

「a3 Lazy Load」設定画面②の画像

画像の遅延読み込みの設定になります。遅延読み込みの有効にする画像(サイト内の画像、ウィジェット、サムネイル投稿、プロフィールアバター)の種類を選択できます。問題が起こらない限り全て有効でかまわないです。

「a3 Lazy Load」設定画面③の画像

動画やiframeタグの遅延読み込みの設定で種類ごとに選択できます。こちらも問題がなければ全て有効でかまいません。

「a3 Lazy Load」設定画面④の画像

「a3 Lazy Load」設定画面⑤の画像

特定のページやカテゴリー、トップページやアーカイブ別に遅延読み込みを除外する設定になります。どこか遅延読み込みをしたくない箇所があれば設定して下さい。

「a3 Lazy Load」設定画面⑥の画像

JavaScriptの読み込みをどこで行うかの設定になります。基本「FOOTER」で良いと思いますが、テーマによってはレイアウトが崩れる可能性があるのでその場合は「HEADER」を選択してください。

※この設定は、お使いのテーマやJavaScriptの読み込み設定を既に設定してある方は注意が必要な項目になります。

「a3 Lazy Load」設定画面⑦の画像

モバイル用テンプレートプラグインを使用しているときに無効にするかどうかの設定です。もし使用していないのであれば、有効にで問題ありません。

「a3 Lazy Load」設定画面⑧の画像

遅延読み込み時のエフェクトや色の設定です。

何回か色々なパターンを試してみましたが、エフェクトの違いがそこまで分かりませんでした。色については原色系は非常に目立ちます(笑)。

「a3 Lazy Load」設定画面⑨の画像

遅延読み込み時に表示されている場所からどこまで先まで読み込むか設定できます。「0」を設定すると画像が表示されるときに初めて読み込みが開始されますので、スクロールに追いつかない感じです。他のサイトを見ると「400」を推奨していますが、「300」あれば高速でスクロールされても問題なく表示されます。

まとめ

3種類のプラグインの比較検証からインストール、設定方法について解説してきました。

自分の場合、「a3 Lazy Load」プラグインを使うことでサイトの表示が目に見えて高速化して、サイト表示スピード計測でも大幅な上昇を見込めました。

画像を多く使用しているサイトでは効果的なプラグインと考えられます。

冒頭でも書きましたが、サイトスピードはSEO対策としても有効な手段の1つになります。

ユーザビリティを上げるためにも、是非「a3 Lazy Load」を活用してみて下さい。

その他の高速化の方法についても色々解説していますので、良かったらブックマークをお願いします。

[徹底解説!]プラグインAutoptimizeで簡単サイト高速化
WordPressプラグイン「Autoptimize」でサイト表示スピードをUpさせよう!! サイト表示の高速化は、サイトを運営している方たちにとって、重要なテーマです。 どんなに良い記事を書いて、役に立つ情報を発信したとし...
[2019]徹底解説!!ワードプレス リビジョン削除で高速化
そもそもリビジョンって何なの??? 皆さんはワードプレスに搭載されているリビジョンという機能はご存知でしょうか??? 記事を作成していく過程において、要所要所で下書き保存をしたり、プレビューをチェックしながら進めていくと思います...
WordPressプラグインで高速化の効果を検証してみた!その1
WordPressプラグインで高速化の効果を検証してみた 今回は、多くの種類があるWordPressプラグインの中でも「高速化」を狙えるプラグインを使用してみたら、実際どのくらい高速化できるのかということを検証しました。 そもそも高速化...
画像圧縮プラグインEWWW Image Optimizerの使い方
ワードプレスを高速化!プラグインEWWW Image Optimizerで画像を圧縮しよう ここでは、ワードプレスプラグイン「EWWW Image Optimizer」を使用して画像の圧縮方法について解説していきます。 何のため...
わずか3分!SNSアイコン表示Offでワードプレスを簡単高速化!
SNSアイコンを表示オフにしてワードプレスを簡単高速化! ここでは、使用しないSNSアイコンの表示設定をオフにして簡単にWordPressを高速化する方法について解説していきます。 このページを見ているということは、Word...
レンダリングを妨げるリソースの除外を行ってサイトスピード改善!!
「レンダリングを妨げるJavaScriptの除外」を改善しよう!! SEO対策を行う上でユーザビリティをUpさせる為にサイトスピードの改善は避けて通れません。 そもそも「レンダリングを妨げるリソースの除外」って一体何なのか?...

コメント

タイトルとURLをコピーしました