PageSpeed Insightsのスコアを上げるためにしたこと（2023年7月）

トップページの PageSpeed Insightsのスコアを上げるために、いろいろ試みました。
結果、モバイルでもほぼ100点のスコアにすることができました。
PageSpeed Insightsの項目を見て、手当り次第対処法を探していきましたが、振り返ってみると優先順位があることに気づきます。
WordPressサイトの高速化では「幹」から「枝葉」の順番に検討していくとよいとわかりました。

WordPressサイト高速化の大きな考え方

そのページに必要ない要素をなくす
見えない要素を後回しにする
そのほかの効率化の工夫
内容をわかりやすくする

PageSpeed Insightsのスコアを上げるためにしたこと（2023年7月）

一番、明確に効果があったのは、Plugin Load Filter でページごとに必要なプラグインを切り分けたことです。

1. ついに PageSpeed Insightsで合格した

ついに、PageSpeed Insightsで「携帯電話」の「ウェブに関する主な指標の評価」で「合格」しました。

https://pagespeed.web.dev/analysis/https-chiilabo-com/ev8o9syc36?form_factor=mobile

ギリギリ LCP が 2.5秒を下回ることができました。

正直、個人向けレンタルサーバでは難しいかな、と思ったのですが、なんとかクリアできました。

ちいラボでは mixhost を利用しています。

目次に戻る

2. そのページに必要ない要素をなくす

サイト高速化で一番効果があったのは、なるべく要素を減らすことでした。
特に、今回はトップページだけでも最適化したいと考えました。
ですので、トップページにいらない要素はどんどん省いていきました。

そのページに必要ないプラグインを無効化する
そのページに必要ないフォントを省略する
そのページに必要ないサイズの画像を読み込まない
そのページに必要ない機能をなくす
そのページに必要ないスタイルを無効化する
そのページに必要ないスクリプトを無効化する

ほかの「最適化」をする前に、まずはそのページに付加されている要素を吟味して、必要ないものを省きましょう。

[WordPress] サイト高速化のために不要なプラグイン処理を減らした（Plugin Load Filter, Site Kit by Google）

ページ表示速度を改善するため、Plugin Load Filterプラグインでトップページの Site Kit などを無効化した。PageSpeed Insights のパフォーマンスが「54」から「70」に改善できた。（「使用していないJavaScriptの削減」が 2.4 s ➤ 0.4 s に）プラグインの取捨選択は、サイト高速化にとってもオススメだね。ページの読込みが遅い気がする【54】モバイル端末でのトップページの読込みがやや遅い気がします。（2023/07/02 ...

サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]

サイト表示の負荷を減らすために、FontAwesome 5 から 4 に変更しました。CSSで一部で FontAwesome 5のアイコンフォントを利用していたので、FontAwesome 4 に変えました。Largest Contentful Paint を速めるのに、ちょっと効果がありました。項目FontAwesome 5FontAwesome 4パフォーマンス9294First Contentful Paint1.9 秒1.8 秒Largest Contentful P...

[PHP] 不要なCSS/JavaScriptを無効化する（wp_dequeue_style, wp_dequeue_script）

トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45sスクリプトサイズ0.77MB0.69MB不要なスタイル・スクリプトを見つける前回は、不要なプラグインを無効化しました。今回は不要なスタイル・スクリプトを削除していきます。前回はこちら。スタイル・スクリプトを一覧するショートコードは、過去に作っ...

印刷用スタイルをメインCSSから分けた

@import print（CSS）かんたんな方法としては、CSS内で別CSSをインポートする方法があります。@import url("print.css") print;しかし、この方法ではCSSがブラウザのキャッシュに入ってしまって更新されません。ブラウザにCSSの更新を伝えるには、CSSのURLバージョン情報を付加して呼び出す必要があります。また、読込みも遅いようなので、分ける意味がないかも。「@import url」は読み込み速度が遅いみたいで、style.cssに全...

「最大コンテンツの描画」のRender Delayを減らす（Largest Contentful Paint）

LCP（Largest Contentful Paint）の数値を改善できないか、「Render Delay」に注目してみました。使っていないアイコンフォントを軽量化したら、少し改善しました。項目前後Largest Contentful Paint2,900 ms1,760 msRender Delay2,250 ms1,020 msLargest Contentful Paint の Render Delay が大きい気がする「Largest Contentful Pain...

プラグインや機能ごとに無効化の方法が違うので、そこの理解が大変です。

[PHP] jetpack.cssを無効化する

Jetpackプラグインを有効にすると、CSSとJavaScriptが読み込まれます。/wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0これを無効にします。/** Jetpackを有効にした際に読み込まれるCSSを無効化*/add_filter( 'jetpack_implode_frontend_css', '__return_false' );こちらもどうぞ。

フォームの要素にラベルが関連付けられていません（input#focus_retriever, iframeTracker）[PSI]

PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」として、「input#focus_retriever」が問題になっていました。js-iframe-trackerを無効したら解決しました。iframeTrackerは、リンククリックを計測するためのjQueryプラグインです。フォームの要素にラベルが関連付けられていませんPSIで「input#focus_retriever」にラベルがない、と表示される。フォームの要素にラベルが関連付けられ...

【断念】Cocoonテーマの「カルーセル」の代替プラグインを探した

たびたび Cocoonテーマのカルーセルの処理が重い（slickプラグインのjQuery）のが気になります。別のプラグインに切り替えてみることにしました。新規記事の「カルーセル」表示できるプラグインを探します。しかし、結論、現状のカルーセルのちょうどよい代替は見つからず。また、Cocoonテーマのモバイル用メニューの表示でも jQuery に依存しているので、jQueryに依存しないカルーセルを探す意味がないことに気づきました。プラグイン合わなかった点Smart Slider...

「カスタム検索（サイト内検索）」スクリプトを除外した（cse.google.com/cse.js）

カスタム検索のスクリプト（cse.google.com/cse.js）が重そうです。asyncによる遅延読込みを試しましたが、あまり効果がありませんでした。結局、カスタム検索ボックスをトップページに載せるのではなく、別ページに分けてリンクを設置することにしました。遅延読込みのdeferとasyncまずは、スクリプトの読込みを遅延させることを考えました。<div class="gcse-searchbox-only"></div><script defer src=""></s...

[Cocoon]「pinit_main.js」を削除するには？（Pinterest）

Lighthouse Treemapで読み込まれている JavaScriptを見ていると、「」というコードが目に留まりました。これは、Pinterestでシェアするため画像選択処理を記述したスクリプトです。CocoonのSNSシェアの Pinterestが有効だと、フッターに「」の読込みが挿入されていました。 <?php //Pinterestシェアボタン用のスクリプト if (is_singular() && (is_top_pinterest_share_button_v...

目次に戻る

3. 見えない要素を後回しにする

次にすることは「後回し」です。
とにかく始めの画面を速く描画するために、それ以外の部分を後回しにします。

ただし、順序関係・依存関係があるものは注意しないと不具合になってしまいます。

スタイルの読込みをなるべく遅延させる
スクリプトの読込みをなるべく遅延させる
画像の読込みをなるべく遅延させる

スクリプトとスタイルの遅延読込みのしかた[PSI]（WordPress）

CSSは、とりあえずCocoonの「CSS縮小化」で除外できました。jqueryは、wp_enqueue_script でフッター読込みに変更しました。レンダリングを妨げるリソース久々に PageSpeed Insights（PSI）のスコアを見て、サイト設定をメンテナンスしています。「レンダリングを妨げるスクリプト」がちょっと残っているのが気になりました。画像と同じようにスクリプトも遅延読み込みすることができます。script deferJavaScriptはscrip...

【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress]

PageSpeed Insightsで「レンダリングを妨げるリソースの除外」を見てみると、jqueryに関する2つのスクリプトが目につきました。（Google CDN）jquery.min.js?ver=3.6.1（Cloudflare CDN）jquery-migrate.min.js?ver=3.0.1これを除外できないか試みてみました。jQueryスクリプトを入れ替えjQueryのスクリプトを入れ替えてみます。（参考）jQuery CDNfunction refresh...

【未解決】ページのスクロールパフォーマンスを高めるには？[jquery.min.js, PSI]

PageSpeed Insightsに「イベントリスナーをpassiveにしなさい」という注意書きがありました。どうも jQuery 関係に問題があるようですが、わかりません。jQueryそのものを除くことも考えましたが、Cocoonテーマ内のいろんなプラグイン（カルーセル（slick）とか画像拡大表示（baguetteBox）など）が利用しているので、ちょっと難しそう。スクロールパフォーマンスを高める受動的なリスナーが使用されていませんエラーが気になる。たぶん、放っておい...

画像遅延読込みやカルーセル削除でサイト軽量化を試してみた

【82】さらに（一時的に）画像遅延読込みを有効にしてみたトップページをどこまで軽くできるのか検証するために、無効にしていた「画像遅延読込み」を一時的に有効にしてみました。確かに「オフスクリーン画像の遅延読込み」が改善します。これは、かなり大きく影響するね。【90】さらに（一時的に）カルーセルを無効にしてみたあとは、試しにトップページの「カルーセル」も無効にしてみました。カルーセルは見た目がよいのですが、動的なレイアウトで画像読込みが多いので、やや重い処理です。「適切なサイ...

【未解決】印刷用に表示したときだけPHPの処理したいけど…（メディアクエリとPHP）

メディアクエリが「print」のときに、画像遅延読込みを無効にしたいです。しかし、functions.php からメディアクエリを取得する方法がわからないので、とりあえず、front_page だけで画像遅延読込みを有効にするようにしてみました。/** WordPress デフォルトの画像遅延表示機能を停止する 2023-06-29 */function disable_img_lazy_load (){ wp_reset_query(); if (! is_front_pa...

目次に戻る

4. そのほかの効率化の工夫

データ転送を高速化するためのいろんな技術的な工夫があります。
ただし、複雑な大規模サイトには有効でも、小規模サイトではあまり効果がないこともあります。

ファイルを効率的な形式にする（WebP）
サーバキャッシュやブラウザキャッシュを利用する
よく使う要素をCDNから読み込む

この中では一番目に見えて効果があったのは、画像を WebP形式に変更したことです。

[Cocoon] LiteSpeed Cacheを改めて使ってみる

PageSpeed Insightsをみると、あとは「サーバーの応答時間」を改善するぐらいです。以前、サーバーキャッシュを設定したら、更新が反映されなかったり、ページ内のランダム要素が固定化したり、とかえって困ることがありました。改めて調べてみたら「LiteSpeed Cacheの不具合の少ない設定方法と使い方 | マニュオン」での解説がわかりやすかったので、LiteSpeed Cacheのプラグイン設定に再挑戦しました。ただ、結果としてはパフォーマンススコアが「85」→「...

WordPressの jQuery を jsDelivr に変えてみたけれど（CDNとパフォーマンス）

WordPressのjQueryの読込みを高速化するために、CDNの jsDeliver に変更してみました。しかし、結果としてはほとんど違いは出てきませんでした。WordPressデフォルトのGoogle Cloud CDN 自体がすでに高速なCDNだったようです。jQueryがメインスレッドをブロックしているChromeの開発モードでパフォーマンスを見ていたら、「第三者コードの影響を抑えてください」という診断が目につきました。jqueryライブラリの読み込みに時間がかか...

Cocoonの「事前読込みドメイン」を減らした（DNSプリフェッチ）

ついでに、「LiteSpeed Cacheのは、Cocoonの機能と重複する」ということで、Cocoonの事前読込み設定も確認してみました。DNSプリフェッチ事前読込みは、「DNSプリフェッチ」と「preconnect」に関係しています。ドメイン名からIPアドレスを求める処理（DNSの名前解決）にかかる時間は平均して 200ミリ秒と言われています。要は、アクセスしそうなドメインの IPアドレスを事前に調べておくことです。Webブラウザーやアプリケーションにおいて、リンクで指定...

目次に戻る

5. 内容をわかりやすくする

あとは「仕上げ」の部分。
PageSpeed Insightsの「ユーザー補助」や「SEO」も評価しています。

画面がズレないように動的な要素のコンテナの大きさを指定する
画像やリンクに注釈をつける
文字の色コントラストやサイズを調整する
画像の大きさを細かく指定する

画面がズレたり、ボタンが押しにくかったり、文字が見えにくかったり、
といった要素は人や検索エンジンに「優しく」ありません。
そこを細かく修正していきます。

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw）

PageSpeed Insightsで計測したときに、CLS（Cumulative Layout Shift）が「0.33（不良）」になるのが気になっていました。主な原因は、トップページで表示しているカルーセルです。CSSの calc() を使って、画面の幅からカルーセルの高さを計算することで、CLSを 0 に改善できました。カルーセルがCLSに悪影響しているCLS（画面ズレ）が起こるのは、トップページにある「カルーセル」が原因です。確かに、サイトの表示を見てみると、一度広...

[CSS] AdSense広告のCLSを改善した

AdSense広告の読込み途中で画面ズレが生じるので、あらかじめ高さを設定するようにしました。/** 広告のCLS 改善 * */.ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:280px;}@media screen and (max-width: 480px){ .ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:calc(83vw); }}このCSSコードでは、ウェブサイト上...

[Cocoon] サイトのキーカラーを変更した

濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。サイトの配色を試行錯誤元の配色です。臙脂色を基調した配色。焦げ茶色をメインにした配色。それをさらに濃くした配色です。「ユーザー補助」「ユーザー補助」の面で、十分なカラーコントラストになるように調整しました。パッと見でも、文字が読みやすくなったと思います。CSSでのカスタムカラー追加CSSの中でサイトのキーカラーは直接値を指定するより、var(--wp--preset--color--key-color...

[PSI] サイトロゴの画像サイズを最適化した「画像要素で width と height が明示的に指定されていない」（片方だけでは暗黙）

PageSpeed Insights（PSI）の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。これまでヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけを指定していました。高さだけでも表示サイズは計算できていましたが、PageSpeed Insightによると「ユーザー補助」の面で減点になるようです。ヘッダーロゴのサイズヘッダーロゴのサイズは、Cocoon設定の「ヘッダー」で修正しました。「...

目次に戻る

6. それぞれのやったことの記事（時系列）

試行錯誤を時系列順にならべるとこうなります。

内容	効果	対象
Plugin Load Filter	大	プラグイン・JavaScriptを減らす
wp_dequeue_style wp_dequeue_script	中	不要なCSS・JSの無効化
カスタム検索の遅延	小	script async, defer
シェアボタンの除外	小	pinit_main.js
画像の遅延読込み	中
カルーセルの無効化	中	slick.js
jetpackのスタイルの無効化	小	jetpack.css
jqueryの遅延読込み	小	レンダリングを妨げるリソース（jquery）
jquery-migrateの除外	？	レンダリングを妨げるリソース（jquery-migrate）
ヘッダーロゴの修正・サイズ指定	小	適切なサイズのロゴ
カルーセルの読込み前の高さを指定	中	CLS
AdSense広告の読込み前の高さを指定	中	CLS
iframeTracker	小	フォームの要素にラベルが関連付けられていない
サイトのキーカラーを変更	小	ユーザー補助
LiteSpeed Cache	中	サーバキャッシュとゲストモード
DNSプリフェッチを減らした	小	不要なCDNのDNSプリフェッチを削除
jQueryのCDNをjsDelivrに変更した	？
FontAwesome 5 → 4 に変更	中	Render Delayを減らす