【loading=”lazy”】GoogleのPage Speed Insights でサイトを測定してみた

freo

はじめに

Googleサーチコンソールからサイトのスピードを改善するべきと指摘を受けたので、調べてみた。

[PR]

ブログの実測値

Page Speed Insights

3回ほど試してみたが、ほとんどスコアは変わらなかった。

パソコン用では81とまずまずのスコア。

20211020101930.jpg

しかし、モバイルでは42と散々な結果になった。

20211020101931.jpg

診断後の改善項目では、使用していないjabascriptの削除が効果的と提案されたが、ほとんどがGoogle関連のスクリプトなので外すことはできない。
提案の中に画像の遅延処理ってのがあったので少し調べてみた。

[PR]

画像の遅延処理

Lazy Load とかいう技術らしく、ブラウザでサイトを開いたときにページ内の画像を見える部分のみダウンロードする仕組みで、スクロールのアクションをトリガーとして下の画像をダウンロードすることにより、体感的に表示速度を上げるとともに通信量を抑える効果があるとのこと。

[PR]

効果は不明

期待したのだが、いくつかのページで実験してみた結果、数値の変化はほとんどなかった。
ただし、スマホでの表示速度は多少上がった気がするが、サーバーの負荷状態にもよるため、はっきりしたことは分からなかった。

freoのエディタを改造する

Google が推奨している技術でもあるため、導入することとして、エディタのデフォルトに設定する。

/templates/internals/admin/ にある、iframe_media.htmlを編集する。

102行目から104行目あたりにある、<img 【ここに追加】src=~>の間に、

loading=&quot;lazy&quot;

を追加する。

title="&lt;a href=&quot;{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}medias/{$freo.query.path}{$file.name}&quot;&gt;&lt;img loading=&quot;lazy&quot;  src=&quot;{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}media_thumbnails/{$freo.query.path}{$file.name}&quot; alt=&quot;{$file.memo|default:$file.name}&quot; title=&quot;{$file.memo|default:$file.name}&quot; width=&quot;{$file.thumbnail.width}&quot; height=&quot;{$file.thumbnail.height}&quot; /&gt;&lt;/a&gt;" {elseif $file.width and $file.height} title="&lt;img loading=&quot;lazy&quot; src=&quot;{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}medias/{$freo.query.path}{$file.name}&quot; alt=&quot;{$file.memo|default:$file.name}&quot; title=&quot;{$file.memo|default:$file.name}&quot; width=&quot;{$file.width}&quot; height=&quot;{$file.height}&quot; /&gt;"

画像を挿入してみる

freoの画像挿入フレームを開いてマウスをロールオーバーすると、次のように表示されていれば成功です。

20211020102130.jpg

おわりに

このlazyLoad という技術はブラウザに依存する部分も多いとのことなので、効果が出ない場合もあるとのこと。
しかし、W3Cの標準にもなっているので、各ブラウザも順次対応すると思われます。
導入して損はないかな。
20210522081916.png

コメント

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