パフォーマンスの最適化

フロントエンド開発者は、短時間でユーザーが必要とするアプリケーションを提供し、インタラクション中にスムーズな体験を確保することを目的として、アプリケーションを実装する必要があります.
たとえばPinterestは,ロード時間が長すぎるためユーザがページから飛び出す割合が高いが,最適化により飛び出す率が減少し,売上高を40%に増加させる.
フロントエンドのパフォーマンスとWebサイトの速度を大幅に向上させるにはどうすればいいですか?いくつかのパフォーマンス最適化方法について説明します.

1.圧縮ファイル：データロード時間短縮

データをすばやくロードするには、大容量のコードファイルを圧縮する必要があります.圧縮と解凍は、既存の方法でより多くのステップを追加しますが、ネットワークリクエストよりも高速で、フロントエンドのデータロード時間に大きく影響します.

Gzip

すべてのブラウザで最も有名なデータ圧縮と解凍アルゴリズムがサポートされています.
あっしゅくモード
1.クライアントは、クライアント要求ヘッダにおいてAccept-Encoding: gzipでサーバに要求を送信する
2.サーバがサポートしている場合は、対応するアルゴリズムを使用してデータを圧縮し、クライアントに送信します.
3.クライアントは、応答ヘッダの1つであるContent-Encoding: gzipによって、データがどのように圧縮され、対応する方法でデータが解凍されるかを検証する.

Brotli

Googleが2015年に紹介した圧縮アルゴリズム.汎用圧縮アルゴリズムでは最も高い圧縮率を有する.
CertSimpleによると、Brotliを使用する場合、JavaScriptファイルの圧縮はGzipより14%低く、HTMLとCSSの圧縮はGzipよりそれぞれ21%と17%低い.
圧縮要求:Accept-Encoding: br

2.CDNの使用

コンテンツ配信ネットワークは、より迅速かつ効率的にコンテンツを提供することを目的としています.CDNは,世界中に分散した分散サーバにコンテンツを格納し,ユーザに近いデータサーバからデータを取得する.これにより、データを転送するサーバの数が減少し、ロード速度が向上します.
画像ファイルを最適化する必要がある場合にも使用できます.

3.ブラウザ画像の最適化

ページの大部分の容量はメディアファイルです.(総容量の約51%を占める.)このため、イメージ容量の削減やリクエスト数の削減を優先すると、ユーザ体験を迅速に改善できます.

イメージライト

CSSのbackground-position属性を使用して、画像の一部をクラスに分け、例えば、複数の画像を1つの電子ビーム画像にマージする.

備考画像:Naver Image Splight
CSSのbackground-position属性を使用して、画像の一部をクラスに分け、例えば、複数の画像を1つの電子ビーム画像にマージする.

1回のイメージリクエストで1つのイメージを使用できるため、ネットワークのロード時間を短縮し、管理を容易にできます.

WebPまたはAVIF画像フォーマットの使用

従来のJPEGやPNGではなく、WebPやAVIFとして新たに登場した画像フォーマットを使うことで、容量をさらに減らすことができます.
WebP
容量は

PNGより26%減少した.

JPEGより25-35%減少した.
AVIF

JPEGより50%減少した.

WebPより20%減少した.

しかし、これは最近登場した画像フォーマットで、すべてのブラウザには適用されません.注:Can I use WebP?、Can I use AVIF?
この問題を解決するためには、各ブラウザの画像互換性を理解して画像ファイルを分割する必要があり、これはHTMLのpictureタグによって実現することができる.
例

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

接続されたブラウザがWebP形式をサポートしている場合は、対応する画像が表示されます.そうしないと、その画像は無視されます.
参考資料

コードstaitzurクラス学習資料