PSIの結果を参考にレンダリングを妨げるリソースを修正してみた

今まであまりページの表示速度は気にしていませんでした。

Googleの検索順位にそこまで大きな影響はないという記事もいくつか目にしました。

ただ使用感として、読み込みが速いに越したことはないのは間違いないと思います。

自分は極端に読み込みの遅いサイトですとすぐ離脱してしまいます。

「一度PageSpeed Insightsで計測してみて、問題があるようなら修正しよう」と考え、当サイトの表示スピードを測定した次第です。

PageSpeed Insightsで計測した修正前のスコア

PageSpeed InsightsとはGoogleが提供しているサイトで、特定のウェブページの読み込み速度や、改善点を提示してくれます。

今回は当サイトのトップページを測定しました。

モバイルの計測結果がこちら。

デスクトップの計測結果がこちら。

・・・どちらもあまりよくありませんでした泣。

診断結果最上部の「レンダリングを妨げるリソースの除外」に着手

PageSpeed Insightsの改善点指示には、先頭に以下の文言が記載されていました。

・・・なるほど、わからんｗ。

「First Paint」という言葉を理解できれば、文章全体が腹落ちしそうだったので、ChatGPTで調べてみました。

以下、ChatGPTの回答です。

Webページの「First Paint」とは、ユーザーがブラウザでページを開いたときに、最初に何かが表示される瞬間のことです。もし、ページがなかなか表示されない場合、それは何らかの「リソース」（たとえば画像やスクリプト、スタイル）がその表示を遅らせている可能性があります。

なぜリソースが「First Paint」をブロックするのか？
ページを読み込む際、ブラウザはまず必要なファイル（HTML、CSS、JavaScriptなど）をダウンロードします。これらのファイルが大量だったり、重かったりすると、表示が遅くなります。

具体的に原因となったページを確認してみた

表示が遅れる原因となっていたファイルは以下の通りでした。

1. WordPressブロックエディタのCSS
2. Cocoon親テーマ関連のCSS
3. Cosoon親テーマディレクトリにあるFontAwesomeのCSS
4. Cocoon子テーマ関連のCSS
5. jQueryファイル×2
6. GoogleFontsのCSS

対策は1-4・5・6の3つで別れました。

内部サーバーにあるCSSの読み込み高速化

上記1-4の対策は比較的簡単でした。

「Cocoon設定」の中に「高速化」の項目があったからです。

「CSSを縮小化する」だけでも1-4は改善した気もしますが、せっかく高速化できるならと他のチェックボックスも有効化しました。

「Googleフォントの非同期読み込みを有効にする」もオンにすることで、6も修正されないか？と思いましたが、そうは問屋が卸しませんでした泣。

Lazy Loadをオンにしなかったのは、下記の理由です。

• 「Wordpress5.5からLazy Loadが標準機能になりました」という記載を見て、標準Lazy Loadの範囲外まで手を加える必要性はないと感じたため
• アクセス解析を兼ねるタグが動作しなくなる懸念があったため

私の場合「EWWW Optimizer」というプラグインで画像圧縮を行った際、試しに遅延読み込みの機能もオンにしたところ、ブログ村のPVポイントを解析しているタグが読み込まれなくなりました。

ある日ブログ村のマイページを見ると「ブログ村からの流入数（OutPoint）＞ブログのトータルPV数」という成立しないはずの数字が表示されており「なんでだろう？」と首をひねっていました。

「もしかして遅延読み込みが原因で、訪問者様がフッター近辺までスクロールしないとPVが計測されなくなったのでは？」と仮説を立て遅延読み込みを解除したところ、PVポイントの計測が元に戻りました。

ブログデザインにも関係するところなので、悩ましい部分でもあります。

jQueryファイルをフッターで読み込む

5の対処はjQueryの読み込み場所をフッターに変えるといいとの情報を入手。

いくつかのWordpress系サイトで、同じコードが紹介されていることに気づきました。

コードの大元はCocoonフォーラムに記載されていたものでした。

Cocoon製作者のわいひら様記載のコードなので、信頼できる内容だと思います。

//-------------------------------------------------------
//JavaScriptをフッターで読み込む
//-------------------------------------------------------

function is_footer_javascript_enable() {
	return true;
}

こちらを子テーマのfunctions.phpに追記したことで、jQueryのエラーは解消されました。

*実行する際は必ず事前にバックアップをおとりください*

Google FontsのCSS対策

デスクトップ用ページのグローバルナビゲーションに使用しているアイコン読み込みに必要な部分です。

どうもGoogle FontsのCSS読み込みが特にPageSpeed Insightsのスコアを下げていたようでした。

修正したところ、特にデスクトップで大きく数字が改善しました。

こちらについてはお手本になるサイトを見つけることができず、ChatGPTを使いながら試行錯誤して修正しました。

最終的にCocoon子テーマのhead-insert.phpの該当箇所を下記の通り変更しました。

【Before】

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

【After】

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"/>
</noscript>

以下、個別に変更内容を記載します。

preloadを使ったstylesheetの適用遅延

フォントを 事前に読み込む (preload) 指示を出しつつ、スタイルシートとして適用する処理を遅延させました。

フォント読み込みは先行させるものの、スタイルシートの適用は「ちょっとまて」とストップさせている状態です。

onloadイベントで、読み込みが完了した後にrel=’stylesheet’に切り替えてフォントを適用。

これにより、最初の描画に影響を与えずにフォントが読み込まれるそうな。

バリアントを固定値に変更

バリアントとは？というところですが、Optical Size（光学サイズ）、Weight（太さ）、Fill（塗りつぶし）、Grade（コントラストやシャープさ）などのフォントファミリーのデザインに関する要素です。

私は最初、すべての数値を読み込ませる設定をしていましたが、固定値に変更しました。

読み込ませるデータ量を減らすのが目的です。

&display=swapを足した

ページを読み込んだ際、カスタムフォント（まさに当サイトのデスクトップ版グローバルナビゲーションのアイコン）が読み込まれない場合、内部サーバーにある代替のフォントが読み込まれる機能とのこと。

・・・代替フォントって内部にあるのだろうか？・・・

と考えていましたが、アイコンの代わりに文字が表示されることを何回か確認しました。

こちらもスコア改善に効果があると思いたいです。

noscriptタグでJavascriptが無効なブラウザ対策

Javascriptを使って読み込みを遅延させていますが、Javascriptが無効になってしまう場合があります。

noscriptタグを使うことで、通常方法でスタイルシートを読み込ませるフォールバック用のコードを追加しました。

First Paintの阻害要因を取り除いた結果

一通り対策を行ったあとのスコアは以下の通りです。

【モバイルの結果】

55→61

微増といったところ。

【デスクトップの結果】

62→93

一気に30近く上昇しました。

モバイルのスコアが低かった原因を特定

デスクトップのグローバルメニューにつけているアイコンのCSS読み込みによって、大幅にスコアが低下していることが判明しました。

問題を切り分けるために、テーマをCocoonの親テーマに変更したところ、モバイルのスコアが90に。

・・・ということは、私が後からCocoon子テーマに加えた変更の中に原因がある可能性大。

グローバルメニューアイコン関係のコードを全て削除してみたところ、スコアが15-20ほど上昇。

マジかよ・・・Orz。

前述したhead-insert.phpのコードを以下へさらに変更。

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap" as="style" media="(min-width: 768px)" onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap"/>
  </noscript>

画面幅が768px以上のケースにしか、グローバルナビゲーションのアイコンを読み込ませないようにしました。

しかし、このままだとモバイルのメニューにアイコンの代替文字が表示されてしまうため、CSSに下記コードを追記。

/*767px以下*/
@media screen and (max-width: 767px){
   .material-symbols-outlined {
    display: none;
	}
   }

これでモバイル版のメニューにはアイコン代替の文字が表示されなくなりました。

改善後のモバイルのスコアはこちら。

色々と勉強になりました。

おわりに

デスクトップの表示スピードは目に見えて数値が改善した一方、モバイルはまだまだでした。

むしろモバイルの方が重要なので、問題を洗い出しつつ時間に余裕のあるタイミングで修正していきたいと思ってます。

サイト訪問者様にしてみればアイコンのデザインより表示スピードの方が重要でしょうし、優先順位を間違っていたなと。

今回やったことは以下の通りです。

同じ悩みを抱えている方へ少しでもヒントになれば幸いです。

最後まで読んでいただき、ありがとうございました！