正直PageSpeed Insightsの点数は上がらない！？少しでも良くなるようにやった事 | 福岡のホームページ制作はマリオ君にお任せ

本日はPageSpeed Insightsで少しでも点数が良くなるようにやったことをご紹介させていただきます。

PageSpeed Insightsは天下のグーグルさんが提供しているサービスでホームぺージ（webサイト）の表示速度は図ることができ数字でパフォーマンスをお知らせしてくれるツールです。検索窓口にURLを入れるだけで数字で状態を診断してくれて、改善点がある場合は改善点を教えてくれます。

検索数などを見ることができるグーグルアナリティクスやクエリやインデックスなどを確認できるサーチコンソールなどの友達的なサービスです。

多数あるとされているSEO対策の評価の中にホームページの表示の速さが入っていて表示が速いほど評価が高くなるとされていますので、PageSpeed Insightsでの評価はとても気になるところです。

そこで、PageSpeed Insightsのパフォーマンスを上げるためにやったことを簡単にご紹介させていただきます。

PageSpeed Insightsで計測

今回はお客様のサイトで診断しながら順にやったことをご紹介します。改善できる項目を一つ一つ消していきます。基本的にパフォーマンスが悪いのは携帯電話の方なので今回は携帯電話のパフォーマンス例となっています。

まずはPageSpeed Insightsの検索窓口に対象のURLをいれて診断します。

今回の例はこんな感じ

パファーマンスの数字は30です。

そして改善できる項目・診断結果はこちら

この状態から改善できる項目・診断に出ている赤三角を消せるものを一つ一つ消していってパフォーマンスを上げていきたいと思います。

それではやっていきます。

画像要素でwidthとheightが明示的に指定されていないを改善

診断の上から５行目にでている

「画像要素でwidthとheightが明示的に指定されていない」

を改善していきます。これは単純にimgタグにwidthとheightをいれれば改善されます。

HTMLの書き方でレスポンシブデザインの場合imgタグにwidthとheightをいれずに作ることがありますがグーグルさんはレイアウトシフト防止などの観点からwidthとheightの記述を推奨しています。

imgタグにwidthとheightを入れていない場合は上記診断がされますので、入れるだけで赤三角は消えます。

<img src="〇〇" alt="" width="500" height="500">

上記の記述です。（数字は例です）

widthとheightをいれることで先ほど診断の上から５行目にあったものがなくなりました。

正直弊社はwidthとheight結構いれていませんので随時お客様のサイトも改修していきたいと思います。

ちなみに、全国の検索上位に表示されているホームページ制作会社様のソースコードを20社ランダムに計測したところ約３割の6社様はwidthとheightをいれずに制作されていました。弊社は流されやすいので周りの会社様の動向も今後見ていきたいと思います。

widthとheightをいれて修正した結果のパフォーマンスの数字はこちら

まさかの6アップです。
※この数字は診断するタイミングなどで大きく変動しますので、上がる場合もありますし、下がる場合も若干あります。

画像系の改善

続いて画像系になります。
先ほどの改善できる項目の上から3つと5つ目です。

「オフスクリーン画像の遅延読み込み」
「次世代フォーマットでの画像の配置」
「適切なサイズな画像」
「効率的な画像フォーマット」

こちらはワードプレスを使用されている方はプラグインがおすすめです。
（この項目の最後におすすめプラグインをご紹介しています。）

プラグインを使用したくない方は下記の対応となります。

■オフスクリーン画像の遅延読み込みは画面に表示されていない画像は遅延読み込みしてファーストビューを速くしてねってことです。
■次世代フォーマットでの画像の配置はjgpとかpngでなくてwebpを使って画像を軽くしてねってことです。
■適切なサイズな画像はそのままであってないサイズがあるよってことです。
■効率的な画像フォーマットは次世代フォーマットと同じ感覚です。

オフスクリーン画像の遅延読み込み改善方法

対策としては項目をクリックして指摘のある部分を修正していきます。オフスクリーンに関してはlazyを入れていきます。

lazyload.jsを使用して対応する方法などがありますが、lazyload.jsの場合だとダミー画像の準備や記述が長くなるので少し手間がかかってしまいますのでマリオ君はネイティブlazy-loadをメインで対応しています。

ネイティブlazy-loadはブラウザがサポートしてくれていてimgタグにloading=”lazy”をいれるだけで簡単に画像を遅延読み込みすることができます。古いブラウザには非対応ですが、そこまで厳密に対応する必要がないとの判断で、こちらで対応しています。

<img src="〇〇" alt="" width="500" height="500" loading="lazy">

次世代フォーマットでの画像の配置改善方法

次世代フォーマットでの画像の配置は改善できる項目をクリックしてでてくる詳細をみながらwebpに変更していきます。

webpに変換するのはオンラインツールなどで簡単にjpgやpngをwebpに変換できますので変換自体は簡単にできます。

さるわかさんなど

基本的には拡張子がwebpになるだけです。

<img src="img/test.webp" alt="" width="500" height="500" loading="lazy">

こんな感じです。

webpはIEや古いブラウザでは対応していないので、完璧に対応したい方はpictureで画像をわけて記述すると対応可能です。

<picture>
	<source srcset="img/test.webp" type="image/webp" width="500" height="500" loading="lazy">
	<img src="img/test.jpg" alt="" width="500" height="500" loading="lazy">
</picture>

webp対応ブラウザの場合はsourceが表示され、非対応ブラウザはimgが読み込まれます。
他にはhtaccessで切り替えることもできます。htaccessの方がhtmlの記述は楽になります。

これで効率的な画像フォーマットも併せて大体消えます。

適切なサイズな画像

適切なサイズな画像は上記二つを直すと基本消えますが、消えない場合は診断できる項目をクリックして詳細を表示し、サイズを確認して修正してみてください。

ワードプレスプラグインEWWW Image Optimizerで対応

ワードプレスでホームページを制作されている方はプラグインのEWWW Image Optimizerで上記4項目を簡単に対応することができます。

こちらは、手作業でやると何時間もかかるような作業が５分もあれば完了するすぐれものです。

画像の遅延読みとアップロードした画像を自動でwebpに変換してくれ、尚且つアップロード済みの画像もwebpに変換してくれます。

これで

「オフスクリーン画像の遅延読み込み」
「次世代フォーマットでの画像の配置」
「適切なサイズな画像」
「効率的な画像フォーマット」

の対応は完了です。
上記を対応すると

４項目すべて赤三角が消えました。
気になるパフォーマンスの数字は

37で1増えました。

ウェブフォント読み込み中のテキストの表示を改善

お次はウェブフォント読み込み中のテキストの表示の赤三角を消します。

こちらはグーグルフォントを使用しているサイトなのでこちらが表示されています。

これを消すのはfont-display:swap;をウェブフォントのCSSの＠font-faceに追加すれば消えますが、グーグルフォントをサーバーに設置しサブセット化することで

改善できる項目の一番上に出ている

「レンダリングを妨げるリソースの除外」

もあわせて改善することができますのでグーグルフォントはサーバーにサブセット化して設置しました。

グーグルフォントをサーバーに設置する方法は下記にて詳しく説明しておりますのでご覧ください。

関連こっちもみてね

グーグルフォントを直接サーバーに設置してサブセット化でサイト高速表示

グーグルフォントをサーバーにサブセット化して設置したらこんな感じになりました。

ウェブフォント読み込み中のテキストの表示が消えてレンダリングを妨げるリソースの除外の短縮できる時間が8.87sから3.40に改善されました。

そしてパフォーマンスの数字は

5アップの42になりました。

スクロールパフォーマンスを高める受動的なリスナーが使用されていませんの改善

だいぶ赤三角が減ってきました。

続いてはスクロールパフォーマンスを高める受動的なリスナーが使用されていませんの改善方法です。

こちらは、jqueryを読み込んでいるサイトにでるようです。

対処方法は下記をコピペで赤三角を消すことができます。
※すいませんなんで下記を入れると消えるか意味は理解していません↓

<script>
//スクロールパフォーマンス対策
jQuery.event.special.touchstart={setup:function(e,t,s){t.includes("noPreventDefault")?this.addEventListener("touchstart",s,{passive:!1}):this.addEventListener("touchstart",s,{passive:!0})}},jQuery.event.special.touchmove={setup:function(e,t,s){t.includes("noPreventDefault")?this.addEventListener("touchmove",s,{passive:!1}):this.addEventListener("touchmove",s,{passive:!0})}},jQuery.event.special.wheel={setup:function(e,t,s){this.addEventListener("wheel",s,{passive:!0})}},jQuery.event.special.mousewheel={setup:function(e,t,s){this.addEventListener("mousewheel",s,{passive:!0})}};
</script>

jqueryを使うときにはセットで上記をいれるのがいいかもしれません。

上記をいれるとスクロールパフォーマンスを高める受動的なリスナーが使用されていませんの赤三角が消えますがパフォーマンスの数字は変化はありませんでした。

静的なアセットと効率的なキャッシュポリシーの配信の改善

お次は静的なアセットと効率的なキャッシュポリシーの配信の改善です。

こちらはグーグルさんがキャッシュの設定をしてもっと表示速度速くしてねってことを言っています。

改善方法は.htaccessに下記をコピーすると上記の赤三角を消すことができます。

AddType font/woff2 .woff2
AddType font/woff .woff
AddType font/otf .otf
AddType font/ttf .ttf

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 6 months"
ExpiresByType image/gif "access plus 6 months"
ExpiresByType image/jpg "access plus 6 months"
ExpiresByType image/jpeg "access plus 6 months"
ExpiresByType image/png "access plus 6 months"
ExpiresByType image/webp "access plus 6 months"
ExpiresByType image/svg+xml "access plus 6 months"
ExpiresByType application/x-javascript "access plus 6 months"
ExpiresByType text/x-javascript "access plus 6 months"
ExpiresByType application/javascript "access plus 6 months"
ExpiresByType application/x-javascript "access plus 6 months"
ExpiresByType text/js "access plus 6 months"
ExpiresByType text/javascript "access plus 6 months"
ExpiresByType application/x-shockwave-flash "access plus 6 months"
ExpiresByType font/woff A12960000
ExpiresByType font/woff2 A12960000
ExpiresByType font/ttf A12960000
ExpiresByType font/otf A12960000
ExpiresByType font/vnd.ms-fontobject A12960000
</ifModule>

画像とかCSSとかjavascriptやフォントなどにキャッシュの期間をいれたものになります。これを入れることによって赤三角は消えます。

最初はキャッシュの期間を1monthsの１ヵ月でやっていたのですが、赤三角が消えなかったので６か月に変更しました。ほかの方の情報ではそんなことは書いてなかったので自分だけ？？かもしれません。

フォント部分は直接秒数を入れています。

これで改善できる項目はこんな感じになりました。

パフォーマンスの数字は

変化がありませんが、赤三角が残り２つとなり改善されました。

残り2つの改善は・・・

残り2つ赤三角がありますが、こちらは改善できませんでした。

メインスレッドの処理の最小化はワードプレスのプラグインの削除やjavascriptの軽量化などで改善できますが、これ以上削除するものがないので改善はここまで。

レンダリングを妨げるリソースの除外は、scriptをbodyタグの閉じタグの前などに設置し読み込みを後にしたりしていますが、これ以上の改善はできませんでした。

ちなみにグーグルアナリティクスなどもレンダリングの邪魔をしています。グーグルさん提供なのに・・

巷で有名なワードプレスの高速化プラグインAutoptimizeを使ってHTMLの圧縮やCSSの圧縮などをしましたが、効果がありませんでした。


あとは、改善というよりかは何かを削る作業になるかと思います。
（スクロールをやめるとかウェブフォントの使用をやめるとか）

ちなみに、scriptとウェブフォントをやめた状態で計測すると

83点でした。

やはりscriptとウェブフォントはかなり負荷がかかっているようです。
しかし、ホームページの表示速度ももちろん重要ですが、見やすさやデザインの差別化も当然重要なので、そこはバランスが重要かと思います。
（極論速さをもとめてしまうと、テキストだけのサイトになってしまう）

現状点数は42点ですがスマホでサイトを開いた時に体感でストレスは感じていないのでOKとしています。

このバランス調整がwebデザイナーの腕の見せ所かなーと思っています。

以上になります。

いかがでしたでしょうか。正直PageSpeed Insightsの点数はあまりあがりませんでしたが、改善できる項目の赤三角は可能な限り消すことができました。

皆様のサイト表示速度アップに少しでも役に立てれば幸いです。
※上記2つの改善方法がわかりましたら追記させていただきます。

それではまた。