【画像付き】Googleアナリティクスの使い方を基礎から徹底解説
SEO対策
PageSpeed Insightsで「オフスクリーン画像の遅延読み込み」と提案された場合、何を示しているのか、具体的な対策を紹介します。
株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。
目次
表示
閉じる
オフスクリーン画像の遅延読み込みとは、ページ内の画像を一気に読み込まず、ブラウザに表示されている画像だけ先に読み込む技術です。
これによってページの表示スピードが上がります。
オフスクリーン画像の遅延読み込みは、PageSpeed Insightsで提案された場合のみ実施すると良いでしょう。 むやみに全ページに取り入れると、かえって高速化を妨げるおそれがあります。
オフスクリーン画像の遅延読み込みは、表示スピード改善のための施策の1つです。 表示速度が遅いと「直帰率が上がる」「SEO順位が下がる」などのリスクがあるため、PageSpeed Insightsのスコアが低いページは早めに改善することをおすすめします。
「Page Speed Insightsを活用しきれているか不安」という方は、こちらのページもご覧ください。
【最新版】Google Page Speed Insightsの使い方を解説!ページの表示スピードを上げようここからは、オフスクリーン画像の遅延読み込みの方法を紹介します。まずは、WordPressのプラグインを使った方法です。
オフスクリーン画像の遅延読み込みの設定ができるプラグインは、複数あります。 複数のプラグインでオフスクリーン画像の遅延読み込みの設定をすると、不具合が起こり得るため、設定が重複しないよう注意しましょう。
「EWWW Image Optimizer」は、アップロードされた画像を自動で圧縮するプラグイン。 オフスクリーン画像の遅延読み込みの設定もでき、画像の最適化に有効です。
設定方法は次の通りです。
WordPressのプラグイン追加画面からEWWW Image Optimizerをインストールし、有効化します。
「EWWW Image Optimizer」の設定画面で、「基本」タブ内の「遅延読み込み」にチェックを入れます。
「Autoptimize」でも、オフスクリーン画像の遅延読み込みが設定できます。
ソースコードを最適化してサイズを軽減させるプラグインとして紹介されることが多く、導入することでPage Speed Insightsの「レンダリングを妨げるリソースの除外」の施策にもつながります。
設定方法は次の通りです。
WordPressのプラグイン追加画面からAutoptimizeをインストールし、有効化します。
「Autoptimize」の設定画面で、「image」タブ内の「Lazy-load images」にチェックを入れます。
WordPress以外のサイトでは、jQueryライブラリにある「lazyload.js」を実装することでオフスクリーン画像の遅延読み込みが設定できます。
設定方法は次の通りです。
対象画像のimgをdata-original属性に設定し、class属性を追加します。
<img data-original="sample.jpg" class="lazy">
lazyloadを呼び出す下記のコードを追加します。
<!-- jQueryライブラリ読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> <!-- lazyloadライブラリ読み込み --> <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"> <!--Lazy Load起動 --> <script> $(function() { $("img.lazy").lazyload(); }); </script>
上記のjQueryライブラリは簡単に実装できるものの、画像がインデックスされないというデメリットもあります。
そこでGoogleが推奨しているのが、JavaScriptの機能の1つであるIntersection Observerです。
設定方法は次の通りです。
オフスクリーン時に読み込ませるための、軽量なダミー画像を用意します。
imgのsrc属性にダミー画像を指定し、data-src属性に遅延読み込みさせる画像を指定します。
表示ズレを防ぐために、画像サイズの指定も必ず行いましょう。
<img src="picture/dummy.jpg" data-src="sample.jpg" class="imgdelay" width="" height="" alt="">
下記のスクリプトを記述します。
<script> document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img.imgdelay")); if ("IntersectionObserver" in window) { let lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { let lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; if (typeof lazyImage.dataset.srcset === "undefined") { }else{ lazyImage.srcset = lazyImage.dataset.srcset; } lazyImage.classList.remove("imgdelay"); lazyImageObserver.unobserve(lazyImage); } }); }); lazyImages.forEach(function(lazyImage) { lazyImageObserver.observe(lazyImage); }); } else { // Possibly fall back to a more compatible method here } }); </script>
古いブラウザでもオフスクリーン画像の遅延読み込みが機能するよう、polyfillというライブラリを読み込ませます。
<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
本記事では、PageSpeed Insightsで「オフスクリーン画像の遅延読み込み」と提案された場合の対処法を紹介しました。
表示スピード改善のためには、PageSpeed Insightsで提案された施策を地道に実施していくことが大切です。
なかなか効果を感じられなければ、高速化の成功率85%以上を誇る「株式会社アダムテクノロジーズ」へご相談ください。
WEBサイト表示スピード高速化サービス資料 無料ダウンロードするWordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。
しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。
WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。
「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。
「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。
成果報酬型WordPressサイトの高速化サービス 『HP爆速くん for WP』の詳細はコチラ