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

9404 ワード

テキストリンク

追加を続行...

Webパフォーマンスの客観的な測定

性能を改善するためには、性能を客観的に測定しなければならない.
通常、グーグル製のLighthouse2PageSpeed Insightsがあります.また、Webhint、Waterfallerなどのサイトでも同様の機能が提供されています.

Webパフォーマンス指標の改善

LCP (Largest Contentful Paint)

ビューポートに最大コンテンツ領域が表示されたときに測定します.ページ上で最も容量の大きいコンテンツの時点が表示されます.レンダリング容量が最大のコンテンツの場合のLCPを、プライマリコンテンツのロード時のLCPと判断することをお勧めします.
LCPの低下の一般的な原因は以下の通りである.

遅いサーバ応答時間

JavaScriptとCSSのレンダリングブロック

遅いリソースロード時間

クライアントレンダリング

ビューポート
簡単に言えば、ビューポートはWebページがブラウザ画面に実際に表示される領域です.

1.未使用のCSSを削除する

cssはレンダリングをブロックするリソースで、使用しないcssは削除したほうがいいです.
レンダーアセットをブロック(Block Render Asset)
HTMLをパケット化する場合、CSSまたはJSに遭遇した場合は、HTMLのパケット化を停止し、ファイルのパケット化またはダウンロード後に実行します.この要素をレンダーマスクアセットと呼びます.

2.簡潔なスタイルの作成

cssが複雑で膨大な場合、レイアウトを描くには多くの時間がかかります.複雑であればあるほどメンテナンスが難しくなるので、できるだけ特異性を下げたほうがいいです.

3.css/jsファイルの最小化

cssファイルとjsファイル(Webパッケージ、モジュールバンドルなど)をバインド(パッケージ化)することで、リソースリクエストを削減できます.

4.ライブラリへの依存を減らす

簡単なタスクはスクリプトで作成したほうがいいです.

5.三次成形

外部モジュールに必要な機能のみをインポートします.lodashを一度にインポートするよりも、lodashのみをインポートする特定の機能により、ファイル容量が小さくなります.

6. Preload

特定のリソースをすばやくロードするための優先順位を設定する方法は、事前ロードを指定することです.
preloadはWebブラウザからプリロードを開始します.
IEはサポートされておらず、必要なフォントなどのファイルを事前にロードするだけで速度が向上します.

<head>
  <link rel="preload" as="script" href="super-important.js">
  <link rel="preload" as="style" href="critical.css">
</head>

// 태그 규칙
rel="preload" // 고정
href="" // 로딩하려는 url
as="" // 파일 형식, 파일형식은 아래와 같다.
(audio / document / embed / fetch / font / image / object / script / style / track / worker / video)
crossorigin="crossorigin" // 외부에서 로딩시 필수로 넣어야 된다.

7.プリコネクション、Preconnect

rel="preconnect"は、現在のページに外部ドメインリソースの参照を提供することによって、ブラウザに理解させ、DNS、TCP、TLSを往復するのに要する時間を短縮する.サードパーティのリソースを接続するときに使用したほうがいいです.

<link rel="preconnect" href="https://example.com">

8.プリフェッチ

将来使用する予定のリソースを事前に取得します.ブラウザはrel=プリフェッチを使用したリソースをキャッシュにインポートして保存します.

<link rel="prefetch" href="page-2.html">

9.アイドルピストルを使う

画像ラベルのtypeプロパティを使用すると、環境に適したタイプの画像を提供できます.次にmediaプロパティを使用して、ブラウザサイズに適した画像を提供できます.
画像ラベル
HTML 5に追加されたタグは、反作用設計でよく使われます
ピクチャラベルのサブアイテムとして、ソースラベルとimgラベルを0以上追加します.(理由:画像ラベルの互換性がサポートされていない)

<picture>
     <source srcset="images/small_image.jpg" media="all and (min-width: 586px)">
     <source srcset="images/wide_image.jpg" media="all and (min-width: 768px)">
     <img src="images/default_image.jpg" alt="" />
</picture>

10.イメージの遅延ロード

loadプロパティを使用して、ブラウザ画面に画像を遅延/並列にロードできます.

11.デバイス図の使用

アイコンなどの画像を1つの画像に整理して処理することで、画像ファイルの数を減らし、リソース要求の数を減らすことができます.

12.WebPの使用

WebPは2010年にグーグルが開発した画像フォーマットで、損失圧縮と非損失圧縮をサポートする特徴がある.また、GIF、PNG、JPEGなどの一般的な画像フォーマットに代わる透明、アニメーション機能もサポートされています.

13.画像CDNの使用

画像の変換、最適化、転送を担当するサーバとして、画像CDNを使用すると、画像のダウンロード速度を40%から80%に低減できます.

14.フォントの読み込み時に@importを使用しない

@importフォントのロード中にブラウザのロードを一時停止します.フォントをロードしてから、次のcssをロードすることができます.
したがって、linkまたは@font-faceを使用してWebフォントのロードを行います.
リンクラベルのhrefリンクから@font-faceとエンコードされたページが表示されます.

CLS (Cumulative Layout Shift)

測定ページのロード開始とライフサイクルステータスが、非表示の間に発生したすべての予期せぬレイアウト移動の累積ポイント数に変更されました.通常、既存のコンテンツのページにリソース非同期ロードまたはDOM要素が動的に追加されると発生します.
ユーザーの経験を測定する代表的な指標です.数字が高ければ高いほどCLSが悪くなり、CLS点数が0.1以内に減ることを目指します.
CLSの低下の原因は通常以下の通りである.

サイズが不確定な画像、ビデオ、広告、iframeなどの要素

動的にコンテンツを追加(既存のコンテンツを削除)

FOIT/OUTを開始するウェブフォント

FOUT-Webページのフォントをロードする前にシステムのデフォルトのフォントを表示し、ロード後に置換します.
FOIT-Webページを読み込む前にテキストレンダリングを行わず、その後のレンダリングを行う

1.widthおよびheight値を画像およびビデオ要素に書き込む

CLS値を改善するためには、widthとheightの値を指定し、Web上で画像の割合を通知することが望ましい.widthとheight値は、比率を教えるためにそのまま使用する必要はありません.

2.動的に追加されたコンテンツ

2-1. 斑点UIの提供

画面をロードし、実際のデータをロードする前に画面のアウトラインをプレビューします.
このUIを使用すると、データのロード時にスムーズな画面切り替えが可能になり、コンテンツが順番に表示されることを防止し、データのロードを防止することができます.

2-2. 既存のコンテンツの上部に追加しないでください。

ユーザーと対話するだけでなく、既存のコンテンツの上部に追加して、レイアウトの変更を回避することもできます.

3.アニメーションの変換

Reference

この問題について(Webパフォーマンスの最適化方法), 我々は、より多くの情報をここで見つけました https://velog.io/@devmag/웹-성능-최적화-방법

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Testing Flutter apps翻訳-クリック、ドラッグ、入力テキスト

いくつかの分類モデルトレーニングirisデータセット