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

• LCP（Largest Contentful Paint）の数値を改善できないか、「Render Delay」に注目してみました。
• 使っていないアイコンフォントを軽量化したら、少し改善しました。

1. Largest Contentful Paint の Render Delay が大きい気がする

「Largest Contentful Paint」に 2.9秒かかっています。

「最大コンテンツの描画」要素から内訳を見てみると、「Render Delay」が 2,250 ms ということで大半を占めています。

2. 少し改善できた

「jQueryのCDNの変更」と「FontAwesomeの軽量化」をしてみました。

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

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

chiilabo.com

サイト高速化のため 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...

chiilabo.com

とくに、「FontAwesomeの軽量化」は効果があって、少し改善されました。

「Render Delay」が 1,020 ms になり、「Largest Contentful Paint」も 1.8秒に改善しました。

今後は、CSSが肥大化しているので、トップページの表示に関係ないスタイルを遅延読込みしたいと思います。

こちらもどうぞ。

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

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

chiilabo.com

[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 ...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。