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

psi_score (CatchImage)

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

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

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

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




はじめに

 JS:JavaScript(Javaとは異なるプログラム言語)


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


  1. 「ネイティブLazy-Load」適用
  2. 「JSライブラリによるLazy-Load」適用
  3. 重いJS・CSSファイルなどを、preload
  4. アップロードする画像や動画の最適化
  5. その他の改善方法


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

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

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



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

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

 jscssファイル単位で読み込むだけではなく、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>

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





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

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

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

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





 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つ❗️


  1. PSI スコアが悪くなるので、FirstView の上記2要素の loading="lazy" 属性は外す
  2. 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-movie-image


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.jslazyload.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です



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





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行め:削除したコードから asynctype="defer-adsense" (属性値は任意)に置き換え、この <script> 要素の実行を保留

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

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

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

 以下は、TwitterInstagram の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 ポイント スコアがアップするみたいですよ。






Macブログ ランキング アイコン
最後まで読んでいただき、ありがとうございます。 また、お越しくださいませ。
// アタル
For follow LINE Reader Group!Subscribe to this blog on Feedly!

Next Post Previous Post
No Comment
Add Comment
comment url