Insightsの関連記事すべての関連記事を見るブログの表示速度はユーザビリティやSEOに関わる重要なポイントです。「できるだけ速く表示」するように改善しましょう。Insights(外部)https://developers.google.com/speed/pagespeed/insights/?hl=ja」では、表示高速化のための課題が明らかになります。そのひとつが「オフスクリーン画像の遅延読み込み」。Load」で簡単に解決する方法と結果を紹介します。「オフスクリーン画像の遅延読み込み」修正前のスコア「オフスクリーン画像の遅延読み込み」の修正前後でどれほどの改善が見られるのか判断します。Insightsで計測しました。当ブログのひとつの記事をモデルケースとして採用しています。知らないとマズイ!脚本の書き方7つのルール脚本は最低限のルールに則って書かなければならない。ルールは大まかに7つある。これらは常識ともいえる初歩的なことだが、プロの脚本家も実践している重要なことだ。初心者は、最初が肝心なのでしっかりと身につけてほしい。続きを読むその結果は下記です。「オフスクリーン画像の遅延読み込み」を解決することで、スコアの数値がどれほど改善されるかを検証します。改善アドバイスまず「オフスクリーン画像の遅延読み込み」の意味を理解します。オフスクリーン画像とは、「画面に表示されていない画像」という意味です。画面に表示されていない画像は、遅れて読み込むよう調整してください、という内容になります。一般的に、ブラウザにホームページを表示する際には、htmlやphp、cssやJS、画像やiframeなどを順番に読み込みます。なかでも画像は容量が大きくなりがちです、また、ブラウザに表示されていない画像であっても、すべての画像を読み込もうとします。結果、Webページ全体の読み込みに時間がかかり、表示速度が遅くなるのです。「オフスクリーン画像の遅延読み込み」に対処すると、画面に表示されていない画像の読み込みを一旦ストップします。その間に、Webページにとって重要なhtmlなどを読み込むのです。画面をスクロールして、実際に画像を埋め込んだ場所までたどり着いたときに初めて、その画像を読み込みます。この処理を「オフスクリーン画像の遅延読み込み」というのです。Insightsでは、表示されていない画像を遅れて読み込むことで、ページ速度が高速化するとアドバイスしています。「オフスクリーン画像の遅延読み込み」の解決アドバイス)オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。WordPressでホームページを構築している場合、プラグインをインストールして有効化するだけで解決します。Load」は、img画像の遅延はもちろん、iframeなどにも適用可能です。画像を表示させるタイミングを調整したり、読み込み時に表示させる低画質の代替画像も設定できます。Load」を追加して有効化します。Load」の設定を確認します。設定リンクデフォルトで問題ないでしょう。botと呼ばれるシステムが巡回しています。新しくできたWebページなどを見つけると、インデックスしていく役目を担っている仕組みです。インデックスされるものはhtmlなどテキストファイルのほか、画像も対象となります。botに見つけてもらえない可能性があります。画像がインデックスされないと、画像検索などからホームページへ流入するアクセスが減るかも知れません。botには画像を見つけて貰う必要があるのです。botに見つけてもらうようにします。下記のファイルを開いてください。以上でカスタマイズは終了です。「オフスクリーン画像の遅延読み込み」の対策を行った結果を確認します。Insights(外部)にアクセスし、冒頭と同じページをチェックします。」後のパソコン表示速度のキャプチャ画面モバイル:30→31パソコン:62→64「オフスクリーン画像の遅延読み込み」の対策を行ったことでスコアが向上しました。Insightsの「改善できる項目」から「オフスクリーン画像の遅延読み込み」の項目が消えていることを確認してください。以上で、「オフスクリーン画像の遅延読み込み」の対策をしてWebページの表示速度を改善する方法は終了です。)トラックバックは利用できません。この記事へのコメントはありません。返信をキャンセルする。