Webパフォーマンスの最適化

Visual appeal can be assessed within 50 ms, suggesting that web designers have about 50 ms to make a good first impression.
つまり,ユーザがサイトの第一印象を決定するのに0.005秒しかかからない.
2011年3月4日に出版されたBehavior&Information Technologyの『Attention Web Design:You have 50ミリ秒to make a good firstイメージ』という結論に.
Webサイトのコンテンツがどんなに良くても、パフォーマンスが悪くてもユーザーが離れるのを止めることはできません.そのため、多くのWebサイトでは、ロード時間を短縮するためにパフォーマンスの最適化が求められています.

1.Web性能影響要因

ユーザー体験:

、居住区、ネットワーク機器、ブラウザを含む

ベンダー環境:

DNSサーバ応答速度、Webサーバ応答速度、バックエンド処理速度、フロントエンドを最適化するかどうか

転送環境:専用線、有線網、移動など

2.Web性能測定

Croop開発者ツール

Webpage Test( https://www.webpagetest.org/ )

NAVERテスト結果

PageSpeed Insights( https://pagespeed.web.dev )

NAVERテスト結果

3.フロントエンド性能改善方案

1）圧縮ファイル

ほとんどのサイトは大容量HTML/CSS/JSバンドルパッケージで構成されており、ページが複雑であればあるほどロード時間が長くなります.

Gzip:すべてのブラウザで圧縮と解凍アルゴリズムがサポートされています.クライアントが要求をサーバ(要求ヘッダの1つ)に送信する場合、サーバがこの要求をサポートしている場合は、対応するアルゴリズムを使用してデータを圧縮し、クライアントにデータを送信します.クライアントは、gzipを介して送信されたデータをどのように圧縮し、このようにデータを解凍するかを応答ヘッダの1つとしてコンテンツ符号化することができる.

Brotli:汎用圧縮アルゴリズムで圧縮率が最も高い.CertSimpleによると、Brotliを使用する場合、JavaScriptファイルの圧縮はGzipより14%低く、HTMLとCSSの圧縮はGzipより21%と17%低い.ただし、IEがサポートされていないため、IE環境も考慮すれば、Gzip方式でコンテンツを提供する必要があります.

2）CDNの使用

CDN:Content Delivery Networkは、複数の地理的に分散されたサーバです.ユーザの近くでWebコンテンツを転送することで、転送速度を速める.グローバル・データ・センターは、一時的なストレージ・ファイルのコピーとしてキャッシュを使用するプロセスです.したがって、ユーザは、近いサーバを介してWebアクティブ化デバイスまたはブラウザからインターネットコンテンツに迅速に接続することができる.
画像ファイルを最適化する必要がある場合、画像CDNを使用すると、40〜80%の画像容量を節約することができる.(Google I/O '19)

3）ブラウザイメージの最適化

ページの大部分の容量は、HTML/CSS/JSなどのコードデータではなく、画像ファイルなどのメディアファイルによって占められます.(51%)イメージの容量を減らしたり、リクエスト数を減らしたりすることで、ユーザーエクスペリエンスを迅速に向上させることができます.

イメージライト
クライアント上のサーバリクエストが多ければ多いほど、ロード時間が長くなります.画像splightは、要求を簡略化し、CSSプロパティによって画像の特定の部分を表示することを改善した.
NaverおよびNextで、ページ内の画像ダウンロードをクリックすると、次のようにPNGファイルが表示されます.書き込みするプライマリイメージの場所を指定し、サーバリクエストが一度しか発生しないことを確認することで、ロード速度を向上させることができます.

WebPまたはAVIF画像フォーマットの使用
新たに登場する画像フォーマットWebPまたはAVIF(JPEGまたはPNG形式ではない)を使用することで、容量をさらに減らすことができます.WebPはPNGに比べ26%減少し,JPEGに比べ25−35%減少した.AVIFはJPEGに比べて50%減少し,WebPに比べて20%減少した.しかし、これは最近登場した画像フォーマットで、すべてのブラウザで互換性がありません.
HTMLタグを使用すると、各ブラウザの互換性を満たすためにブランチを置き換えることができます.

<picture>
  <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)">
  <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

ブラウザは、ピクチャタグの各ソース要素に基づいて最適なものを選択します.適切でない場合は、imgタグsrcのURLを選択します.選択した画像はimg要素に割り当てられ、表示されます.ソースタグのsrc set、media、typeプロパティは、現在の表示デバイスのパフォーマンスと現在のレイアウトを評価し、ロードするURLを選択します.
サポートされている画像フォーマットのリストは、以下で参照できます.
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

注意:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
https://www.tandfonline.com/doi/abs/10.1080/01449290500330448
https://www.youtube.com/watch?t=1010&v=YJGCZCaIZkQ&feature=youtu.be
https://expeditedsecurity.com/blog/nginx-brotli/
https://sw-ryu.tistory.com/78