CSS-TricksのWebPageTestセッションから学習

先日、WebPagetestでTim Kadlecと一緒に協力して、CSS-Tricksで少しパフォーマンステストを行いました。基本的にツールを使用し、周りを突き破り、作業するパフォーマンスの問題点を特定します。このようなパフォーマンス調査のために購読する価値のある、サイトで、またはTwitchチャンネルでビデオを見ることができます。

Webパフォーマンス作業は2つあります：

ステップ1）物事を測定し、問題を調査します
ステップ2）修正します

ティムと私は、WebPageTestの素晴らしいツールを通して、多くのステップ1を行いました。私たちは多くの問題領域を見つけました、いくつかはかなり大きいです！もちろん、結局のところ、私はそれらを頭から出すことができなかったので、私はできるだけ早く行動を起こしてステップ2のことをする必要がありました。掘り下げましょう！

特定された問題＃1）LCPが悪い

最大のコンテンツペイント（LCP）は、コアWeb Vitals（CWV）の1つであり、GoogleがSEOファクターであると言って、誰もが慎重に見ています。私のLCPは3.993Sでクロックしていましたが、これはあまり良くありません。

ティムから、最初のコンテンツフルペイント（FCP）にLCPが含まれている場合が理想的であることがわかりました。 WebPagetestを通じて起こっていないことがわかりました。

修正するもの：

• 最終的に大きな画像であるLCP領域が適切に最適化され、応答性の高いSRCSETがあり、CDNホストであることを確認してください。それらはすべて、他の場所で働いている特定のイメージの絶望で失敗していました。
• LCP画像にはロード= "lazy"がありました。

テクニックと学習の修正：

• すべての適切な画像処理のものは整っていましたが、何らかの理由で、それは.gifファイルでは機能しません。これはその画像がテストの日でした。とにかく、おそらくその領域に.gifファイルを使用しないでください。
• LCP画像の怠zyなロードをオフにします。これはWordPressが特徴の画像であるため、基本的に 'eager'））; ？>。インライン画像の場合、は、WordPressに何を知る必要があるかを伝えます。

識別された問題＃2）レンダリングギャップを開始するための最初のバイト

ティムはこれをすぐにかなり明白な問題と見なしました。

上の滝（Matt Hobbsからの滝の読み取りに関する非常に詳細な記事があります）では、HTMLが約0.5秒で到着することがわかりますが、レンダリングの開始（人々が見るもの、ビッググリーンライン）は約2.9秒まで開始されません。それは長すぎる。

チャートはまた、黄色の線の問題を識別します。私はサードパーティのCSSファイルにリンクしていましたが、それはカスタムフォントを含む自分のCSSファイルにリダイレクトしました。リダイレクト時間は時間がかかり、掘り下げたときに、1ページのロード時間だけでなく、すべてのページのロード、キャッシュされたページのロードもあります。

修正するもの：

• CSSファイルリダイレクトを排除します。
• セルフホストフォント。

テクニックと学習の修正：

• とにかく私はいくつかの新しいフォントをいくつか取り上げてきました。少し前に、Mass-Driverのライセンスイノベーション（従業員の価格）が大好きであることに気付きましたが、MD Primerが大好きなので、それを買いました。^ボディタイプのために、私はBlancoと快適なセリフにこだわっています。次回誓うとき、私は可変フォントを見つけるつもりですが、ちょっと、あなたは時々あなたの心に従わなければなりません。私はこれらを購入しましたが、現在はフォントファイルを自己ホストしています。
• リダイレクトなしで、自分のCSSで @font-faceを使用してください。また、font-display：swap;、しかし、その読み込み手法でもう少し作業する必要があります。サイズ調整を待つことができません。

配置された変更を再テストした後、大きな記事ページでは、4G接続で開始レンダリングが2秒高速になることがわかります。

識別された問題＃3）グリッドガイドのCLSは悪い

ティムは、ページ上の累積レイアウトシフト（CLS）を測定するために、袖にきちんとしたトリックを持っていました。 WebPageTestにページを下にスクロールするように指示できます。これは、スクロールのためにレイアウトのシフトが発生する可能性があるため、CLSのようなものにとって重要です。

CLSとWebPageTestに関するこの記事を参照してください。

トリックは、高度な設定を使用して、テスト中にカスタムJavaScriptをページに注入することです。

この時点で、私たちはホームページではなく、意図的に非常に重要なページであるグリッドの完全なガイドをテストしていました。これを整えると、CWVがはるかに悪い形になっていることがわかります。

LCPについて正確に何を考えるべきかわかりません。それは、ページのかなり下の最大の画像であることによってトリガーされています。

シフトレイアウトは常にユーザーにとって不快なものであるため、CLSは私にとってより懸念されます。これらすべての点線のオレンジ色のラインを見ますか？それが起こっているCLSです：

修正するもの：

• 怠zyなロードされた画像が入ってレイアウトをシフトするため、CLSは悪いです。

テクニックと学習の修正：

• わからない！これらの画像はすべてinline 要素です。怠zyなロードがCLSを引き起こす可能性があると思いますが、これらの画像には適切な幅と高さの属性があります。これは、ロードする前であっても（アスペクト比のおかげで流動的な場合でも）、画像に必要な正確なスペースを予約することになっています。だから…何が与えるの？彼らはSVGだからですか？

誰かが知っている場合は、気軽に私を襲ってください。これがパフォーマンス作業の性質です。愚かな間違いからの簡単な勝利、あなたが戦ったり勝つことができる小さな戦い、勝つのが難しい外部の影響を含む大きな戦い、そして癒すのに時間がかかる神秘的な未知のものが混ざっています。幸いなことに、Webpagetestのようなツールがあり、私たちのサイトで起こっている本当の物語を教えてくれ、これらのパフォーマンスバトルと戦うために必要な洞察を与えてくれます。

1. Ribbiは、私が学んだばかりで、レギュラー、イタリック、大胆、大胆な斜体を意味します。 Web上のほとんどのボディコピーが必要とする古典的なコンボ。 ⮑

以上がCSS-TricksのWebPageTestセッションから学習の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。