Lazy-Loadとは？ PSIスコア改善方法2023

アタル

2023年4月14日 (金)
2023年5月23日 (火)

　"PSI" は、Google PageSpeed Insights の略で、緑色表示となる「パフォーマンス90点以上」が目標です‼️

　デスクトップ（PC）と携帯電話（スマホ）　別々で表示され、この数値が100点に近づくほどサクサク表示される指標となります。

　少なくとも80点を切ったら対策が必要なため、簡単かつ効果がある順で「改善方法」を説明いたします。

　「ネイティブLazy-Load」や「JSライブラリによるLazy-Load」適用、「アップする画像や動画の最適化」方法などをご紹介❗️

はじめに

　JS：JavaScript（Javaとは異なるプログラム言語）

　PSI パフォーマンススコア 5つの改善方法
　簡単かつ効果がある順のため、順番にお試しください‼️

「ネイティブLazy-Load」適用

「JSライブラリによるLazy-Load」適用

重いJS・CSSファイルなどを、preload

アップロードする画像や動画の最適化

その他の改善方法

　 WordPress 5.9 以降をご利用の場合、 1. の「ネイティブLazy-Load」は自動適用済み のはずで　通常その設定を変更する必要はありません。（ FirstView 対応を含む）

Lazy-Load：遅延読み込み（遅延ロード）と訳され、FirstView以外のHTML要素表示を保留すること
ネイティブLazy-Load；ブラウザが持つ機能のみで、Lazy-Loadを実現する比較的新しい方法
JSライブラリによるLazy-Load：ネイティブLazy-Load以前から存在する、Lazy-Load実現方法
preload：重いJSやCSSなどを、ファイル単位で事前読み込み する速度改善方法
FirstView：ブラウザでスクロールせずに 最初に表示される画面領域で、PC（タブレット）とスマホではかなり領域は異なります

（注）FirstView のHTML要素を Lazy-Load 対象にすると、逆に PSI スコアが減点されます。

　ネイティブLazy-Load は2023年3月現在 『静的な img 　 iframe 』要素のみが対象のため、それ以外（ Twitter・Instagram 埋め込み時や、ソースコード表示用ライブラリ利用時など）を Lazy-Load する場合は JSライブラリ を利用する必要があります。

　静的：「動的」の反対語で使用。
Twitterツイート、Instagram、TikTokの埋め込み要素は blockquote （Twitterタイムラインは a 要素）ですが、対応JS実行後 iframe （要素を含む）要素が 動的に 生成されます。

　3. まで適用して PSIスコアのパフォーマンスが90点以上を越えれば良いのですが、 4. 以降は大幅なスコアアップは望めず地道な対応となります。

Lazy-Loadとは？

　Lazy-Load を利用しない場合、ページ内のすべての要素のレンダリングが終わるまで 待たされるため、『表示時間』がかかります。

　（スクロールしたら表示される）FirstView 以外の要素のうち、表示されるまで時間がかかる要素のレンダリングを後回しにすれば、時間がかかりません。

　『表示時間』が減少するほど、 PSI の「パフォーマンス」スコアは 100 に近づきます‼️

　この遅延処理は Lazy-Load と呼ばれ、日本語では 遅延読み込み または 遅延ロード と訳します。

1秒など 指定時間経過後に、（保留していた）JSの実行やCSSの適用などを行う
スクロール時に新たな要素が現れる（またはその直前）たびに、「ファイル・ダウンロードを含めた要素のレンダリング」を行う

　2. の遅延方法で Lazy-Load した場合、スクロールしなければファイル・ダウンロード自体行わないためスマホのパケ代節約になりますが、要素ごとにJS関数を呼び出す場合は　1. と比べて高度な処理となります。

　Lazy-Load 実現方法は、「ブラウザ機能のネイティブLazy-Load利用」と「Lazy-Load・JSライブラリ実装」の2つです。

js cssコードのインライン組み込み

　css：Cascading Style Sheets の略。HTMLの各要素をどのように見せるのかを指定する仕組み
　js ：JavaScriptの略。ブラウザ上で動作するプログラム言語。Webサイトに動きをつけたり、ボタンなどの動作を制御。

　js や css はファイル単位で読み込むだけではなく、HTML内に インライン組み込み も可能です。
　（投稿記事内にインライン記述すれば、その記事内でのみ js や css が有効）

　以下のように、css は style タグ、js は script タグで囲むだけ。

　通常、css は /headタグ直前、js は /bodyタグ直前に組み込みます。
　すでにその場所に style 要素、 script 要素が存在する場合は、それぞれの要素内に css または js コードを追加してもかまいません。

<head>
  <!-- 省略 -->
  <style>
    div.separator {
      text-align: center;
    }
  </style>
</head>

<body>
  <!-- 省略 -->
  <script>
    const nodes = document.querySelectorAll('img[loading="lazy"], iframe[loading="lazy"]');
    console.info(nodes);	//for Debug
  </script>
</body>

　※ 次で説明するコード挿入ではなく、css や js をファイル単位で読み込む（組み込む）場合は
「JIN JS読み込み」や「AFFINGER CSS読み込み」などのキーワードで検索してください。

head内 /body直前へのコード挿入と WAF

　head要素内 または /bodyタグ直前に、（scriptタグで囲んだJSコードを含む）HTMLコードを挿入すべきケースがあります！
　少し前まで WordPressなど一部の CMS（コンテンツ管理システム）では、コード挿入方法が複雑でした。

　有名な WordPressテーマ は、最近 head内　 /body直前へのコード挿入が 設定画面から簡単にできるようです。

　「JIN head挿入」や「AFFINGER /body挿入」のようなキーワードで検索すると、コード挿入の説明記事 が見つかるはずです。
　SWELL と Cocoon テーマは、以下の記事を参考にしてください！

　WordPressなどでレンタルサーバを利用している場合、WAF（サーバ用のファイアウォール機能）を一時的に「無効」（または除外設定）にしないと上記のような重要な変更が反映されない場合があります。
　除外設定が可能なら「自宅の固定ネット回線のipアドレス」を一度登録すれば、重要な変更時でも「WAFの無効／有効」切り替えを行う必要がありません。

　第三者からの不正攻撃を防ぐため、最後に必ず WAF を有効に戻す のを忘れないように‼️

　その他のレンタルサーバの場合は、「レンタルサーバ名 WAF」のようなキーワードで検索してみてください。

改善方法

「ネイティブLazy-Load」適用

  <img loading="lazy" height="270" width="480" src="https://i.ytimg.com/vi/P-vR-8Mx4Dk/mqdefault.jpg" alt="YouTube-movie-image" title="YouTube：待望すぎるアップデート！ iOS16.4新機能まとめ" >

  <iframe loading="lazy" height="270" width="480" src="https://www.youtube.com/embed/P-vR-8Mx4Dk" title="待望すぎるアップデート！ iOS16.4新機能まとめ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen >
  </iframe>

　適用条件は簡単です‼️

　静的な img 　 iframe 要素に、

① loading="lazy" 属性
② height 属性指定
③ width 属性指定

　3属性を記述するだけでOKで、
　WordPress であれば ① を記述する必要もありません。

　（注）②＋③ は、以下のようなインラインCSS指定も可。

  <img loading="lazy" style="height:360px; width:640px;" src="https://i.ytimg.com/vi/P-vR-8Mx4Dk/mqdefault.jpg" alt="YouTube-movie-image" title="YouTube：待望すぎるアップデート！ iOS16.4新機能まとめ" >

loading	説明
"lazy"	Lazy-Load する
"eager"	（loading属性の記述省略時も含め）Lazy-Load しない
"auto"	Lazy-Load するか、しないかをブラウザが判断

2023年3月現在、 img 　 iframe 両要素のみが対象
WordPress5.7にて、ページ内の「img・iframe」全要素に対し loading="lazy" 自動追加
WordPress5.9にて、FirstView対応のため ページ最初の両要素のみ loading="lazy" 自動除外
WordPress のテーマによっては、オプション設定で「ネイティブLazy-Load」対象／非対称を　多少制御できるかもしれません

　「ネイティブLazy-Load」利用時の注意点は、以下の2つ❗️

PSI スコアが悪くなるので、FirstView の上記2要素の loading="lazy" 属性は外す
Safariブラウザでバージョン 16.3以下 の場合 <img> 要素のみデフォルト対応のため、 <iframe> 要素対応は Safariブラウザの設定変更 が必要

　 2023年3月27日リリースされた　Safari16.4 以降で、「ネイティブLazy-Load」が　<img> に加え　<iframe>　デフォルト対応に‼️

① iOS16.4（iPadOS16.4）以降 であれば、Safari16.4 以降を含みます

② Mac の場合、（Safariのメニュー）[Safari] - [Safariについて]　でSafariのバージョンを確認可能

YouTubeのサムネイル画像（静的なimg例）

  div.separator {
	text-align: center;
  }

<div class="separator">
  <img loading="lazy" height="270" width="480" src="https://i.ytimg.com/vi/P-vR-8Mx4Dk/mqdefault.jpg" alt="YouTube-movie-image" title="サムネイル：待望すぎるアップデート！ iOS16.4新機能まとめ" >
</div>

YouTube埋め込み（静的なiframe例①）

　以下 iframe 要素は、標準的な「YouTube埋め込みコード」の width height 属性値を 16:9（YouTube公式・推奨）の比率で変更後 loading属性を追加したコード。

  div.separator {
	text-align: center;
  }

<div class="separator">
  <iframe loading="lazy" height="270" width="480" src="https://www.youtube.com/embed/P-vR-8Mx4Dk" title="待望すぎるアップデート！ iOS16.4新機能まとめ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen >
  </iframe>
</div>

（注）FirstView 内での表示や PSIスコアが悪い場合は、「埋め込み」から「画像リンク」への変更がオススメです‼️

　下記サンプルどおり、サムネイル画像をクリックまたはタップすると、別タブで指定動画が再生されます。
　（スマホにYouTubeアプリをインストール済みの場合、アプリにて再生）

　上記URLの /embed/ 以降（ P-vR-8Mx4Dk ）が「YouTubuの動画id」。
　"https://i.ytimg.com/vi/P-vR-8Mx4Dk/mqdefault.jpg" でサムネイル画像を取得可能。
　（ YouTube動画のサムネイル画像の詳細 ）

　「フリーの動画再生アイコン」をサムネイル画像の中央に重ねるため、「2つめのimg」のCSSクラスに overlap-center を指定。

FirstView 表示と思われる場合、img 要素内の loading="lazy" 属性は 2つとも削除してください。

  div.movie {
	position: relative;
	text-align: center;
	max-width: 100%;
  }
  .overlap-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
  div.movie img:hover {
	opacity: 0.5 ;
  }

<div class="movie">
  <a href="//www.youtube.com/watch?v=P-vR-8Mx4Dk" target="_blank" >
    <img loading="lazy" height="270" width="480" src="https://i.ytimg.com/vi/P-vR-8Mx4Dk/mqdefault.jpg" alt="YouTube-movie-image" title="YouTube：待望すぎるアップデート！ iOS16.4新機能まとめ" >
    <img loading="lazy" class="overlap-center" width="100" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkcDl-9PS9iDhhQfTPB363hnYDFTknOEy8YzzBHw63-h-2UFmFW9bvimESmyANjrWxzSUB14POLsCQPl-mic4nEEbBCsYJg_aY_KBt2Gle89uL1Hd1RwV-IIwcEe4SlmY7sOw0MmImpDy9aL_uAa6-9AwvkKPhY2VGCckfDoJfhYTxhMpP6lODwdHHLA/s0-rw/movie_play.webp" alt="movie_play_icon" >
  </a>
</div>

　筆者が利用している "Google Blogger" 無料ブログの画像サーバはパラメータ（ /s0-rw/ の部分）で画像サイズ・フォーマット変換・解像度指定などが可能ですが、URLが長いのだけは何とかして欲しいものです。

　（注）サムネイル画像をクリック（タップ）した時点で「iframe要素・埋め込み」に置き換える方法もありますが、JSをかなり記述しないといけないため以下「記事リンク」のみ貼っておきます。

Googleマップ埋め込み（静的なiframe例②）

  div.separator {
	text-align: center;
  }

　下記のように「埋め込みコード」に loading="lazy" 属性が既に含まれているため、FirstView に埋め込む場合は同属性を削除します。

<div class="separator">
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3239.6524107850873!2d139.81086989773158!3d35.71017029023211!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1680335656485!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="東京スカイツリー" >
  </iframe>
</div>

「JSライブラリによるLazy-Load」適用

　Lazy-Load 対象が 静的な <img> と <iframe> 　2要素のみの場合、ブラウザ機能の ネイティブLazy-Load のみ適用すれば充分で、JSライブラリを追加導入する必要はありません。

　しかし、 Twitter・Instagram・TokTokなどの SNS や、 Prism.js・highlight.jsなどのソースコード表示用ライブラリをサイトのページに埋め込む予定がある方は、（ネイティブLazy-Load と混在してもまったく問題は無いため）JSライブラリ 事前組み込みをオススメします‼️

　「ネイティブLazy-Load」はブラウザまかせでユーザーはレンダリング開始タイミングなどを選べませんが、「JSライブラリによるLazy-Load」の場合は細かく設定できる場合が多いようです。

（注）WordPress ご利用の場合はお手軽な「Lazy-Load対応プラグイン」も選択肢の一つですが、細かい設定はできません。

投稿記事は「ネイティブLazy-Load」適用で記述

　「セキュリティ対策などで、JSを無効にしたブラウザ環境」（当然、JSライブラリも動作しない）では ネイティブLazy-Load 表示させるため、投稿記事は「ネイティブLazy-Load」適用で記述しておきます。

　WordPress5.9 以降であれば投稿記事の状態に loading="lazy" 属性が自動反映されますが、height・width 属性の記述を忘れずに❗️

　その後、 </body> 直前で「JSライブラリによるLazy-Load」が適用されるよう（メモリ内のDOMツリーを）JSで書き換えれば、汎用性が高くなります。

　「JSライブラリ設定」や「JSライブラリ変更」時に、投稿記事を毎回修正するのは大変ですので…

　以下にサンプルを載せますが、「JSライブラリによるLazy-Load」が適用されるよう CSSクラスの追加 や src 属性値を data-src 属性値にコピー など、JSで行います。

  const nodes = document.querySelectorAll('img[loading="lazy"], iframe[loading="lazy"]');

  nodes.forEach(function(node) {
    if ( !(node.tagName === 'IMG' || node.tagName === 'IFRAME') ) return;
    if ( !node.hasAttribute('src') ) return;
    node.setAttribute('data-src', node.src);
    if (node.tagName === 'IMG') {
      node.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
    } else {
      node.src = 'about:blank';
    }
    node.removeAttribute('loading');
    node.classList.add('my-lazyload');
    //console.info(node);	//for Debug
  });

　（上記JSコードは、 </body>  直前に挿入します）

　01行め：loading="lazy" 属性を追加した  img 　 iframe  要素を抽出
記事本文に限定する場合などは、引数のCSSセレクタを
　'.entry-text img[loading="lazy"], .entry-text iframe[loading="lazy"]'
のように変更（親要素の追加指定、筆者のブログテーマの場合）してください

　03行め：抽出した全要素をループ処理（04〜14行め）

　04、05行め： img 　 iframe  要素以外は、処理スキップ
src属性を持たない場合も、処理スキップ

　06行め：src属性を dagta-src属性にコピー（URLのセット）

　07〜11行め：src属性値に  img  要素なら '透明gif画像' 、 iframe  要素なら 'about:blank' をセット

　12行め：loading属性を削除
　13行め：JSライブラリで再抽出しやすいよう、任意のCSSクラス 名を要素に追加

有名な遅延読み込みJSライブラリ

　「ネイティブLazy-Load」は Chromeブラウザで2019年からサポートされたため、それ以前は「JSライブラリによるLazy-Load」のみが Lazy-Load実現方法でした。

　有名な「JSライブラリ」には lazysizes.js と lazyload.js などがありますが、lazysizes.js が約2年前から、lazyload.js に至っては約4年前からアップデートされていません。

　WordPress「SWELL」有料テーマは最初から lazysizes.js を組み込み済みで、設定で「ネイティブLazy-Load」のみから「JSライブラリ利用のLazy-Load」に切り替えできるみたいです。

オススメは、Defer.js

　2019年リリース後少なくとも毎年バージョンアップされている「Defer.js」をオススメします‼️
　2023年もすでに2回リリースされ、不具合対応も速く、利用していて安心。
　作者はベトナムの方ですが、日本語も勉強されているので不具合があれば（英語以外に）日本語でも報告可能。

　1.81KByte（約1,810半角文字）の超コンパクト実装のため（ファイル読み込みだけではなく）インライン組み込みも推奨されており、機能も豊富です。

　上述の15行のコードで「JSライブラリ対応」に書き換えた後、Defer.js の Defer.dom関数 呼び出しを行うだけで「ネイティブLazy-Load」を代用でき、PSIパフォーマンスにも貢献。

  Defer.dom('img.my-lazyload', 0, null, null, {rootMargin: "100% 0%"});
  Defer.dom('iframe.my-lazyload', 0, null, null, {rootMargin: "150% 0%"});

　最初のパラメータは CSSセレクタ のため、CSSクラス「my-lazyload」を付加した <img> と <iframe> 要素をレンダリング対象として指定。
　最後のパラメータは Intersection Observer API の options で、CSSの margin のように指定してレンダリング・タイミングを調整可能。

（ 2023/05/23 　rootMargin には絶対指定の場合 px 相対指定の場合 % を利用しますが、Chromeブラウザにて 0px または 0% と指定しないとエラーになる場合があるため修正しました）

　 JSファイルや CSSファイル、SNS埋め込みやソースコード表示用ライブラリなど、ほとんど何でも Lazy-Load 対象にできます‼️

　画面に表示される少し前から遅延ロード させたり、遅延ロード時要素ごとに（インライン）JS関数を実行 や、 遅延ロード後に CSSクラスを追加（つまり、CSS効果を遅延可能） するなどの　オプション機能も用意されています。

　Twitter・Instagram・TikTokなどのSNS埋め込み、Prism.js・highlight.jsなどのソースコード表示用ライブラリなどを Lazy-Loadするには、個別対応で JSコードを追加しないといけません。

　サンプルとして「Twitter / Instagram 埋め込み」と「Google AdSense 広告」対応を以下で説明しますが、筆者が「Defer.jsライブラリのセットアップや詳細利用方法」を説明した以下の記事を書いていますので、お読みください。

Twitterツイート／タイムライン、Instagram

　ツイート埋め込みコード blockquote 要素、タイムライン埋め込みコード a 要素　後の
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
の部分は、すべて削除してください‼️

　Instagram 埋め込み埋め込みコード blockquote 要素　後の
<script async src="//www.instagram.com/embed.js"></script>
の部分は、すべて削除してください‼️

　「HTMLのパース（解析）」と「DOMツリーの構築」後、
　700ミリ秒 = 0.7秒後に全ツイートとタイムラインをレンダリング。
　1000ミリ秒 = 1秒後に全Instagram埋め込みをレンダリング。

　「Twitterツイート or Twitterタイムライン」を埋め込んだ時のみ、Twitter指定JSを実行。
　Instagramを埋め込まなければ、Instagram指定JSを実行しません。

　最後のパラメータを true にすると、（マウス操作など）ユーザーがアクションを起こすまで、指定JSの読み込みが保留されます。
（指定した遅延時間後 すぐに 指定JSの読み込みを開始するのであれば、最後のパラメータを false に変更してください）

　（下記JSコードは、 </body> 直前に挿入します）

  const tw_EmbedTW = document.getElementsByClassName('twitter-tweet');		// TWeet
  const tw_EmbedTL = document.getElementsByClassName('twitter-timeline');	// TimeLine
  if (tw_EmbedTW.length !== 0 || tw_EmbedTL.length !== 0) {
    Defer.js('https://platform.twitter.com/widgets.js', 'twitter-js', 700, null, true);
  }

  const instaEmbed = document.getElementsByClassName('instagram-media');	// Instagram
  if (instaEmbed.length !== 0) {
    Defer.js('https://www.instagram.com/embed.js', 'insta-js', 1000, null, true);
  }

　01行め：Twitterツイートの埋め込みコード内に含まれるCSSクラス「twitter-tweet」にて、要素を抽出
　02行め：Twitterタイムラインの埋め込みコード内に含まれるCSSクラス「twitter-timeline」にて、要素を抽出

　03行め：ページ内の「ツイート＋タイムライン」埋め込み数がZEROの場合、04行めは実行されません
　04行め：ページ内の「ツイート＋タイムライン」埋め込み数に関わらず（合計要素数が1以上の場合）、「指定JS（削除した部分のURL）」を </body> 直前で一度実行すればOKです

　 ※ スクロール時に対象要素が現れるたびに個別レンダリングも可能ですが、Twitter と Instagram は少し複雑なコードを書かないといけません。
　別記事としてわかりやすくまとめましたので、ぜひご覧ください‼️

Google AdSense 広告

　（注）今後は「AdSense広告コードの改変」とみなされる可能性もあるため、ご自身の判断のもとで行ってください‼️

　以下は、Google AdSense レスポンシブ広告のサンプルコード。
　以降、ca-pub-123456 の部分の数字は、ご自身の「サイト運営者ID」に置き換えてください。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456"
     crossorigin="anonymous"></script>
<!-- yyyymmdd_responsive_square -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

　すべての「AdSense広告コード」から、先頭部分の
　 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456" crossorigin="anonymous"></script>
　を削除します。

<script type="defer-adsense" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456" crossorigin="anonymous"></script>
<script>
  Defer.all('script[type="defer-adsense"]', 1000, true);
</script>

　（上記htmlコードは、 </body> 直前に挿入します）

1行め：削除したコードから async を type="defer-adsense" （属性値は任意）に置き換え、この <script> 要素の実行を保留

3行め：<script> 記述のままで Lazy-Loadするには、「Defer.jsライブラリ」の Defer.all関数を利用
　その他にも、Defer.all関数は「JS同期実行」、Defer.js関数は「JS非同期実行」機能を提供の違いあり

　パラメータ１：CSSセレクタ で、「type="defer-adsense"」属性を付加した <script> 要素を指定
　パラメータ２：遅延時間をミリ秒（1000だと1秒）で指定。　省略値は ZERO
　パラメータ３：false だと遅延時間後に実行、true だと（マウス操作など）ユーザーがアクションを起こすまで、指定した <script> 要素の実行を保留。　省略値は false

　※ 「type="deferjs"」属性を指定すれば、 Defer.all関数の呼び出しも省略可能。
Defer.jsライブラリは type="deferjs" 属性を付加した <script> 要素を順番に（同期実行で）、Defer.all関数を省略値のままで自動的に呼び出す仕様です。
（ パラメータ１の省略値は、type="deferjs" ）

　筆者が利用している JetTheme ではテーマ（テンプレート）内に最初からDefer.jsライブラリが組み込まれていて type="deferjs" がすでに利用されているためか、不具合が発生しました。
　専用の属性値を利用し、不具合が無いことを確認できた 上記コードを掲載しています。

　【参考記事】

重いJS・CSSファイルなどを、preload

　preload とは「リソース（プリロード）ヒント」とも呼ばれる機能で、「HTML解析中に、バックグラウンドでファイルをダウンロード希望」とブラウザに対してヒントを与えます。

　（ブラウザ判断ですが）バックグラウンドで指定ファイルがダウンロードされた場合、利用時のダウンロード時間が短縮されるため PSI パフォーマンス・スコアが良くなることが多いようです。
　筆者の環境では、Prism.js用のCSS+JSファイルを preload しただけで、5ポイント以上アップしました。

　なお、Defer.js ライブラリの Defer.all 関数で指定したJSスクリプトには、preload が自動適用されます。

　ほとんど何でも preload 可能ですが、以下の例ではファイルサイズが大きめの Prism.js 用のCSSファイルとJSファイルを preload しています。
　jsファイルの場合 as='script' 、 cssファイルの場合 as='style' と指定。

　 ※ head 要素内に記述します❗️

<head>
  <!-- 省略 -->
  <link as='style' href='https://past.gadgets-geek.net/css/prism.css' rel='preload'/>
  <link as='script' href='https://past.gadgets-geek.net/js/prism129.js' rel='preload'/>
  <!-- 省略 -->
</head>

　以下は、Twitter と Instagram のJSを preload する例です。

<head>
  <!-- 省略 -->
  <link as='script' href='https://platform.twitter.com/widgets.js' rel='preload'/>
  <link as='script' href='https://www.instagram.com/embed.js' rel='preload'/>
  <!-- 省略 -->
</head>

（注）投稿記事のみに埋め込みする場合など、「条件分岐」の利用を推奨します。
　以下は、WordPress 利用時の「条件分岐まとめ」記事。

アップロードする画像や動画の最適化

　「パソコンOS添付の標準アプリ＋Webツール」のみでも以下手順で可能なため、まずはお試しください。

　投稿記事ごとに、埋め込んだ画像や動画の表示「サイズ・品質」を一つずつ最適化する作業で、地道な作業となります。
　ファイルサイズ（KByte）が大きい画像（動画）ファイルから、順に処理していきましょう。

　スマホで撮影した画像を、そのままアップロードしていませんか❓
　表示するピクセルサイズを決定し、最適なファイルサイズ（KByte）に加工してから、アップロードします❗️

　以下の最適化作業を行う前に、PCを基準にして表示するピクセルサイズを決定し、そのサイズに画像変換しておきましょう。

　※ Windows10/11なら OS標準添付の「フォト」アプリ、Macなら OS標準添付の「プレビュー」アプリでも画像サイズ変換可能です。

WebP画像への変換

　全画像を、主要なブラウザでサポートされている「WebP」フォーマットに変換します。
　（WebPは PSI推奨画像フォーマット）

　「 WebP 一括変換ツール」のオススメは、以下！

ファイルサイズ（KByte）の最適化

　全画像を「WebP」フォーマットのまま、適切なファイルサイズ（KByte）に圧縮します。

　「ファイルサイズ（KByte）一括圧縮ツール」のオススメは、以下！

サムネイル画像（aタグ）の利用

　パンダの TinyJPG を利用しても PSIパフォーマンス・スコアが改善されない場合は、「サムネイル画像」をクリック（タップ）後に本来の画像（動画）をダウンロードするように（HTMLモードで）書き換えます。

　 <a> 要素は、PSIのパフォーマンス・スコアに影響しません‼️
　また、Lazy-Load指定できない FirstView 領域の場合でも、有効な対処方法です。

　サムネイル画像は、より「小さなピクセルサイズや低解像度」の画像を別に用意してアップロードします。
　パラメータ指定で画像サーバが（アップロードした本来の画像ファイルから）「小さなピクセルサイズや低解像度」の画像を生成可能な場合は、サムネイル画像をアップロードする必要はありません。

　具体的には <a> タグのhref属性にはオリジナルの「大きなファイルサイズ（KByte）の画像」、 <img> タグのsrc属性にはサムネイルの「小さなファイルサイズ（KByte）の画像」を、URL指定します。
　※ 動画の場合の最適化方法は既に説明済みのため、こちら（後半のコード）を参照してください。

　（注）FirstView以外の <img> 要素には、loading="lazy" 属性を忘れずに❗️

  div.separator {
	text-align: center;
  }

　src属性値のURLには、ファイルサイズ（KByte）が小さい「サムネイル画像」を指定‼️

<div class="separator">
  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfhDTVvgr_BNV5QEQ9_BAg8ujSWeYwfEZtxPdVTQtWk0obRTFBNvLZ1SARL_Th_e_hyizQsNS3OyDfMRxGzajeNy5YTSn387CK2cHB-a0j9rCrrZ6zMUK0xOpS9d7Ju0gGlQCMrrOSv5ioRvjI2L3QS8MWZzj9afTJODkBugDReNKEhPGiCAKSZLhZQ/s0-rw/original.webp" target="_blank" >
    <img loading="lazy" height="320" width="427" data-original-height="960" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfhDTVvgr_BNV5QEQ9_BAg8ujSWeYwfEZtxPdVTQtWk0obRTFBNvLZ1SARL_Th_e_hyizQsNS3OyDfMRxGzajeNy5YTSn387CK2cHB-a0j9rCrrZ6zMUK0xOpS9d7Ju0gGlQCMrrOSv5ioRvjI2L3QS8MWZzj9afTJODkBugDReNKEhPGiCAKSZLhZQ/s427-rj-l20/original.webp" alt="thumbnail_image" title="サムネイル画像：クリックで拡大" >
  </a>
</div>

　（参考）Google Blogger ブログの【画像生成パラメータ】
　（上記 2つのURLの違いは「パラメータ」部分のみ）
　/s0-rw/　アップロードした画像のサイズと解像度のままで、WebP指定
　/s427-rj-l20/　長辺（data-original-width="1280"）を 427ピクセル（1/3サイズ）に変換後、jpeg変換して、品質20% 指定

　（注）品質指定は、jpegフォーマットのみ可能なため。
　サムネイル画像をダウンロードすると確認できますが、約10KByteのjpeg画像を生成。

その他の改善方法

　WordPress などでレンタルサーバを利用している場合「キャッシュ」設定を適切に行うと、PSIのパフォーマンス・スコアが改善することがあります。

　筆者が利用している Google Blogger 無料ブログは基本的に動的ページのみの対応でキャッシュが無効化されているため、以下の記事を紹介しておきます。
　うまくいけば、携帯電話（スマホ）・デスクトップ（パソコン）とも 3 〜 4 ポイント スコアがアップするみたいですよ。

最後まで読んでいただき、ありがとうございます。　また、お越しくださいませ。
// アタル

#AdSense #DeferJS #JSライブラリ #PageSpeedInsights #preload #Twitter #WordPress #YouTube #ネイティブLazy-load #画像最適化 #遅延ロード #遅延読み込み Bloggerカスタマイズ

Lazy-Loadとは？ PSIスコア改善方法2023

はじめに

Lazy-Loadとは？

js cssコードのインライン組み込み

head内 /body直前へのコード挿入と WAF

改善方法

「ネイティブLazy-Load」適用

YouTubeのサムネイル画像（静的なimg例）

YouTube埋め込み（静的なiframe例①）

Googleマップ埋め込み（静的なiframe例②）

「JSライブラリによるLazy-Load」適用

投稿記事は「ネイティブLazy-Load」適用で記述

有名な遅延読み込みJSライブラリ

オススメは、Defer.js

Twitterツイート／タイムライン、Instagram

Google AdSense 広告

重いJS・CSSファイルなどを、preload

アップロードする画像や動画の最適化

WebP画像への変換

ファイルサイズ（KByte）の最適化

サムネイル画像（aタグ）の利用

その他の改善方法

Follow (Popular Ranking) Button

Popular Posts

Categories

Hashtag

Blog Archive

はじめに

Lazy-Loadとは？

js cssコードのインライン組み込み

head内 /body直前へのコード挿入と WAF

改善方法

「ネイティブLazy-Load」適用

YouTubeのサムネイル画像（静的なimg例）

YouTube埋め込み（静的なiframe例①）

Googleマップ埋め込み（静的なiframe例②）

「JSライブラリによるLazy-Load」適用

投稿記事は「ネイティブLazy-Load」適用で記述

有名な遅延読み込みJSライブラリ

オススメは、Defer.js

Twitterツイート／タイムライン、Instagram

Google AdSense 広告

重いJS・CSSファイルなどを、preload

アップロードする画像や動画の最適化

WebP画像への変換

ファイルサイズ（KByte）の最適化

サムネイル画像（aタグ）の利用

その他の改善方法

Follow (Popular Ranking) Button

Popular Posts

パンダの TinyJPG が WebP 、 PNG 、 JPEG 計3種類の画像フォーマット 圧縮 に対応！ TinyPNG

Twitter Instagram 埋め込みをスクロールで遅延読み込み