コアウェブの重要なルールを使用してWebサイトを最適化

あなたのウェブサイトがよく最適化されていて、あなたのユーザーのために公開する準備ができているならば、チェックする方法?
あなたがあなたのユーザーといくつかの大きな到達のためのいくつかの素晴らしいユーザーエクスペリエンスをしたい場合はルールと最適化の多くが必要です!
コアのWeb vitalsは、Googleによるイニシアチブは、ウェブ上の偉大なユーザーエクスペリエンスを提供するために不可欠な世界中の開発者のための協同ガイダンスを提供することです.

コアWeb vitalsはWeb vitalsの一部ですが、しかし、3つのコアメトリックは、どのように高速なあなたのウェブサイトは、エンドユーザーとどのくらいの速さであなたのインデックスに提供されているの技術性を定義しています.HTMLはバンドル内のすべてのJavaScriptコードで提供されます.

LCP(最大のcontentfulなペンキ)

これは、ユーザーのためにあなたのウェブサイト荷の最大の構成要素がどれくらい速く決定するか.ビューポートで見える最大の画像またはテキストブロックの描画時間を報告します.
それは主に

<img> <image> <video>

タグ要素.

ここでは、ビデオは最大のコンポーネントですので、このコンポーネントが2.5 s未満のクライアント(ユーザ)に提供されているなら、それは良いLCPスコアと考えられます.

FID(最初の入力遅れ)

このメトリックは、ユーザーがボタンをタップしたり、リンクをクリックしたり、ブラウザで実行するJavaScriptコードが必要なものを行うような初めてのあなたのウェブサイトと対話している時間を測定します.
この経験が良いか、マークにアップしていない場合は、それは彼が初めてあなたのウェブページを訪問するときにユーザーが望んでいるものではないので、あなたはすでにあなたのユーザーを失っている.
この理由で、世界中の開発者は、ブラウザがJSを走らせるのを待つ必要がある長い実行中のブロッキングコードを書かない.
例といくつかの図でこれを説明しましょう.

上のダイアグラムでは、バックエンドに作られたいくつかのネットワーク要求(CSS、JSファイル、および資産)があり、メインスレッドも読み込まれます.

さて、上記の図では、FCPとTTIの間に多くの時間があることに気づいたかもしれません、彼らは3つの長いタックです!
ユーザーがこれらの3つの間隔の間でウェブページと対話しようとすると仮定して、ユーザーはちょうど彼らの側から入力を適用し続けるでしょう、しかし、主な糸がまだレンダリングしていて、ロードするので、彼は残念ながらどんな出力も受けません.
*ユーザが入力を与え、メインスレッドが応答できるときの遅延です.

CLS (累積レイアウトシフト)

あなたはどんな記事を読んでいるか、ウェブページのビデオを見て、突然、テキストシフトとビデオ変化を見て、それが突然の方法でシフトされるとき、あなたはこれに気がつきました.(Ex : Google広告であふれているどんなウェブページでも).
これは、資産や任意のダイナミックな資産やリンクのようなリソースが非同期にロードされたり、反応したりするためです.DOM要素は、動的にコンテンツのトップにロードされます.
それはあなたのウェブ体験やレイアウトを台無しにするだけでなく、ユーザーエクスペリエンスも台無しになるからです.
累積レイアウトシフト(CLS)メトリックは、それが実際のユーザーのために発生している頻度を測定することによって、この問題に対処するのに役立ちます.
日本語版
また、これらのスコアや、このリンクPagespeed Insightsを使用して、独自のウェブサイトの他のメトリックをチェックすることができます
私は最近私自身のポートフォリオウェブサイトJyotindra KTをチェックしました、そして、ここに結果があります!

私は結果にかなり驚いていましたが、私は完全に最適化されていませんでした.また、私の資産をより効率的にロードしたいならば、私が働く必要がある若干の地域を私に与えたので.

それで、それは私の友人のこのポストのためです.
あなたがそれをここに作るならば、ここで私について来て、私について、私について来てください.
ありがとう!
ジョンティンド・タヴァノジについて❤️