一部のWordPressサイト管理者は、PageSpeed InsightsやGTmetrixに夢中になっている。私のアドバイス、そしてもっと詳しい他の多くの人たちのアドバイスは、それらのメトリクスを必要以上に重要視すべきではないということだ。
知覚的な読み込み速度が良好であれば、すべてを「緑色」にする必要はない。多くの場合、それは逆効果でさえある。なぜなら、過剰最適化に陥る可能性があり、さらに悪いことに、1つのことを修正しようとして、さまざまなことを台無しにしてしまう可能性があるからだ。
それでも、あなたがWPOの愛好家であれ、最適化の愛好家であれ、あるいは単にサイトの応答性を向上させたいだけであれ、これらのツールはほとんど不可欠である。問題は、外部サーバーから取得した「静止画」を提供していることだ。しかし、管理者であるあなたがサイトを閲覧するとき、読み込みが遅い広告や、クリックしようとした瞬間にジャンプしてしまうメニューはどうなるでしょうか？
起源
Speed Auditorは、シンプルで強力なローカル診断ツールをいくつか持ちたいという個人的なニーズに応えるために生まれました。このプラグインは最適化プラグインではなく（コードに何も変更を加えません）、リアルタイム監査プラグインです。
WPO用の有料プラグインで、変更や微調整ができるものをお探しなら、Perfmattersをご覧ください。一方、設定や調整に頭を悩ませることなく、多くの可能性を秘めた無料でシンプルなものをお探しなら、WordPressリポジトリで入手可能なFernando Telladoによる WPO Rocket Tweaksをお試しください。
DOMノードや待ち時間の測定基準が分からなくても心配はいりません。Speed Auditorは、ウェブサイトを一目で理解できるように設計されています：
- スマートインジケーター：色が変わるアイコンが管理バーに表示されます。緑色であれば、LCP（最も重要なものを見るのにかかる時間）は最適です。オレンジや 赤に変わったら、何か注意が必要です。
- ブラウズしながら監査：複雑な設定をする必要はありません。プラグインを有効化すると、投稿をチェックしている間、画像が重すぎたり、サーバーの応答が遅かったりすると、バックグラウンドで分析してくれます。
- より人間的なレポート：ワンクリックで.txtファイルをダウンロードし、開発者に送信したり、変更を適用した後の結果を比較するために保存することができます。
ボンネットの下
バージョン1.1.8では、ブラウザのコンソールをいじる時間を節約するために、ある程度深い診断を提供しようとしている。
- 正確なLCP識別：このプラグインは、どの要素（画像またはテキストブロック）がLargest Contentful Paintのトリガーとなったかを正確に検出します。
- DOMの深さ分析：DOMサイズの過大」を避けるために不可欠。Speed Auditorは、ゾーン（ヘッダー、コンテンツ、フッター）ごとにノード数を分解し、ネストが15～20レベルを超えると警告を表示します。
- メディア遅延モニター：画像の実際の転送時間（Resource Timing API）を測定します。画像のダウンロードに500ミリ秒かかる場合、プラグインはその画像をクリティカルとしてマークします。
- サーバーへの影響はゼロ：すべての処理はクライアント（ブラウザ）側で行われます。サイトを遅くするような重いデータベースクエリーやPHPプロセスはありません。
大きな飛躍近日公開Speed Auditor 1.1.9 (「Radar CLS」搭載)
これまで、累積レイアウトシフト（CLS）はレポートの中の抽象的な数字だった。何かが動いていることはわかるが、何が動いているのかはわからないことが多かった。バージョン1.1.9では、これがまもなく変わります。
レーダーまたはビジュアルCLSの「ハイライト」ボタンを導入すること。
スクロール中に動く要素の上に赤いボックスを描く「レーダー」モードを有効にすることを想像してみてほしい。これはすでにいくつかのエクステンションが行っており、多かれ少なかれ成功しているのだが、時々目を逃がしてしまう「はみ出し」を捕らえようとするとき、常に非常に便利な視覚的補助となる。
- あなたのコンテンツを押しているのはAdSenseのバナーですか？赤枠で表示されます。この問題については、こちらで詳しく説明しています。
- 寸法が決まっていない画像ですか？レーダーはそれをキャッチします。
- 完全な持続性：プラグインは、あなたが隅々まで視覚的に監査し続けたいことを記憶します。
今回のアップデートでは、短い技術用語集も追加され、Tipsやチュートリアルを含むように拡張される予定です。
さまざまなシナリオでテストし、改善の提案やエラーの警告を受けたら、分析のレスポンスと生成されるレポートの両方を改善することだ。
バージョン1.1.8がリリースされ、メトリクスの整理ができるようになりました。また、まもなく1.1.9がリリースされ、WordPressの視覚的な安定性をさらに簡単に修正できるようになります。今すぐインストールすれば、まもなくアップデートが届きます。
どのように機能するのか？
コードは以下の3つのステップを踏む：
1.パフォーマンス・オブザーバー
ブラウザ（Chrome、Edge、Opera）にはPerformance APIというネイティブAPIがある。プラグインは、レイアウトシフト入力タイプ用に特別に設定されたPerformanceObserverと呼ばれる「ウォッチャー」を登録します。
最初に描かれた後、画面上で何かが動くたびに、ブラウザはイベントを生成します。プラグインはそのイベントをトラップし、2つの重要なデータを抽出する：
- オフセットの値：（0.0145とする）。
- 原因要素：ブラウザはプラグインに、どのHTMLノードが移動されたかを正確に伝えます。
2.最近の交流」フィルター
ここでプラグインは賢くなろうとする。すべての動きが「悪い」わけではない。ドロップダウンメニューをクリックして、コンテンツが下にスクロールした場合、それはユーザーによって予想された動きです。
プラグインはhadRecentInputというプロパティをチェックする。過去500msの間にキーに触れたりクリックしたりした場合、ブラウザはその動きを「予期されたもの」としてマークし、プラグインは誤検知を避けるためにそれを無視します。このプラグインは、予期せぬ動き（突然現れた広告など）のみを検出します。
3.ビジュアルレンダリング（赤いボックス）
プラグインが移動されたエレメントを取得したら、ビジュアルパートの出番だ：
- 座標計算：getBoundingClientRect()と呼ばれる関数を使用して、その要素がその正確な瞬間に画面上のどこにあるか（ピクセル上、ピクセル左）を調べます。
- フレーム注入：絶対位置、2pxの赤いボーダー、非常に高い
z-indexを持つdivを作成し、すべての上に描画します。 - ラベル赤枠の左上に、ラベルの名前（ins、img、div）と累積CLSの値を書いた小さなボックスを追加する。
なぜ外部報告書よりも良いのか？
PageSpeedなどのツールは、下までスクロールしなかったり、特定の広告の読み込みを待たなかったりするため、CLSを検出できないことがある。
このプラグインは、パーシステンスを使用することで、実際のユーザーのブラウジングセッションを通じて蓄積された CLS を測定します。あるエレメントが最初に少し動いたり、スクロール中に少し動いたりした場合、プラグインはそれを加算してハイライトし、グーグルが「クローム・ユーザー・エクスペリエンス」（CrUX）レポートで最終的に見ることになる、最も近似した実際の数値を提供します。
