PageSpeed Insights

Pingdomのサイト速度テストと今後の課題 とりあえずのメモ

Pingdomのサイト速度テストと今後の課題

PageSpeed Insightsの改善点がなくなりました。さらに Pingdomでテストすると、gzip圧縮とキャッシュ有効期限の設定の改善提案がありました。TTFB（Time to First Byte）PageSpeed Insightsのパフォーマンスが 98 になりました。主な改善点もなくなりました。PageSpeed Insights（chiilabo.com 2023/07/22）7月上旬に実施したサイト微調整の結果が出ています。レポートを見ていると、「TTF...
2023.07.22 2023.07.23
とりあえずのメモホームページ運用
PageSpeed Insightsのスコアを上げるためにしたこと（2023年7月） とりあえずのメモ

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

トップページの PageSpeed Insightsのスコアを上げるために、いろいろ試みました。結果、モバイルでも ほぼ100点のスコアにすることができました。PageSpeed Insightsの項目を見て、手当り次第 対処法を探していきましたが、振り返ってみると優先順位があることに気づきます。WordPressサイトの高速化では「幹」から「枝葉」の順番に検討していくとよいとわかりました。WordPressサイト高速化の大きな考え方そのページに必要ない要素をなくす見えない要...
2023.07.17 2023.07.19
とりあえずのメモホームページ運用
サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon] とりあえずのメモ

サイト高速化のため 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...
2023.07.15 2023.07.16
とりあえずのメモホームページ運用
とりあえずのメモ

「最大コンテンツの描画」の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...
2023.07.15 2023.08.22
とりあえずのメモホームページ運用追記予定の話
とりあえずのメモ

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

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

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

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

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

PageSpeed Insightsで「フォームの要素にラベルが関連付けられていません」として、「input#focus_retriever」が問題になっていました。js-iframe-trackerを無効したら解決しました。iframeTrackerは、リンククリックを計測するためのjQueryプラグインです。フォームの要素にラベルが関連付けられていませんPSIで「input#focus_retriever」にラベルがない、と表示される。フォームの要素にラベルが関連付けられ...
2023.07.09 2023.07.10
とりあえずのメモホームページ運用追記予定の話
[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw） とりあえずのメモ

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

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

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

PageSpeed Insights（PSI）の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけを指定していました。高さだけでも表示サイズは計算できていましたが、PageSpeed Insightによると「ユーザー補助」の面で減点になるようです。ヘッダーロゴのサイズヘッダーロゴのサイズは、Cocoon設定の「ヘッダー」で修正しました。「...
2023.07.02 2023.07.09
とりあえずのメモホームページ運用追記予定の話
【検討中】 jquery-migrateを減らしてみたけど、戻した [WordPress] とりあえずのメモ

【検討中】 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...
2023.07.02 2023.07.31
とりあえずのメモプログラミングホームページ運用追記予定の話
[PHP] 不要なCSS/JavaScriptを無効化する（wp_dequeue_style, wp_dequeue_script） とりあえずのメモ

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

トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45sスクリプトサイズ0.77MB0.69MB不要なスタイル・スクリプトを見つける前回は、不要なプラグインを無効化しました。今回は不要なスタイル・スクリプトを削除していきます。前回はこちら。スタイル・スクリプトを一覧するショートコードは、過去に作っ...
2023.07.02 2023.07.31
とりあえずのメモホームページ運用追記予定の話
[WordPress] サイト高速化のために不要なプラグイン処理を減らした（Plugin Load Filter, Site Kit by Google） とりあえずのメモ

[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 ...
2023.07.02 2023.07.17
とりあえずのメモホームページ運用
使用していないスクリプト・スタイルを減らしたい [PageSpeed Insights] インターネット小話

使用していないスクリプト・スタイルを減らしたい [PageSpeed Insights]

ブログのページを高速化したいけど、どこを削ったらよいかわからない💦とりあえず、「使用していないJavaScriptの削減」について、よくわからなかったことを、よくわからなかったなりにメモしておきます。PageSpeed Insightsの使用していないJavaScriptの削減PageSpeed Insightsをみると、「改善できる項目」に「使用していないJavaScriptの削減」があります。PageSpeed Insights項目の詳細をみると、Google Adsen...
2021.10.23 2023.07.17
インターネット小話ニッチな話題ホームページ運用
LiteSpeed Cacheプラグインをオン・オフで比較してみた ニッチな話題

LiteSpeed Cacheプラグインをオン・オフで比較してみた

LiteSpeed Cache（v3.6.4）プラグインの「キャッシュ機能」のオン・オフでどれぐらい違うのか、比較してみました（2021年3月23日現在）。もしかして、誤差の範囲……？もう少し詳しく比較してみましょう。比較無効のときプラグインが無効のときも比べてみます。オフのときオンにした直後オンにして再分析比較結果 モバイルのラボデータ無効オフオン（直後）オン（2回目）First Contentful Paint（秒）2.32.12.12.1Speed Index（秒）5....
2021.03.23 2023.07.16
ニッチな話題ホームページ運用