このページは Cloud Translation API によって翻訳されました。

テキストベースのアセットのエンコードと転送サイズを最適化する

Ilya Grigorik

Jeremy Wagner

不要なリソースのダウンロードを排除する次の対策として、ページの読み込み速度を改善するには最適化によって全体的なダウンロードサイズを残りのリソースを圧縮します

データ圧縮入門

未使用のリソースをダウンロードしないようにウェブサイトを設定したら、ブラウザで使用可能な残りの対象リソースを圧縮しますダウンロードしてください。リソースの種類（テキスト、画像、フォントなど）に応じて、さまざまな手法があります。その中でも汎用のツールをウェブサーバーで有効にし、特定のコンテンツの前処理最適化を行う型、リソース固有の最適化などがあり、開発者です。

最高のパフォーマンスを実現するには、次のすべてを組み合わせる必要があります。手法：

圧縮とは、より少ないビットで情報をエンコードするプロセスです。
不要なデータを除外すると、常に最良の結果が得られます。
さまざまな圧縮手法とアルゴリズムがあります。
最適な圧縮を実現するには、さまざまな手法が必要になります。

データサイズを縮小するプロセスは、データ圧縮です。多くの人が貢献したアルゴリズム、技術、最適化によって圧縮を改善比率、圧縮速度、さまざまな圧縮に必要なメモリ学習します。

データ圧縮の詳細については、このガイドの範囲をはるかに超えています。ただし、圧縮の仕組みとページのさまざまなアセットのサイズを小さくするための手法必要があります。

これらの手法の基本原則を説明するために、この例のために作成したシンプルなテキストメッセージ形式を最適化しています。

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

メッセージには任意の注釈（ コメント - コメントは「#」で示されます。接頭辞を指定します。アノテーションはメッセージの意味や動作を分析できます。
メッセージには、ヘッダーを含めることができます。これは Key-Value ペアで、 ":" など）が含まれます。
メッセージはテキストペイロードを運びます。

以前のメッセージのサイズを小さくするには、どうすればよいですか？ 200 文字ですか。

興味深いコメントですが、メッセージの意味には影響しません。メッセージの送信時に排除します。
ヘッダーを効率的にエンコードするための優れた手法があります。対象すべてのメッセージの「format」が「date」以降は短い整数の ID に変換して送信しますただし、誤りですので、そのままにしておきます
ペイロードはテキストのみです。どういう内容なのかはわからないけど（おそらく "secret-cipher" を使用しています）は、テキストかなりの冗長性があることがわかります。たとえば画像アセットを繰り返し文字の個数をカウントし、エンコードします。たとえば、"AAA" は "3A" になり、は 3 つの A のシーケンスを表します。

これらの手法を組み合わせると、次のような結果が得られます。

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

新しいメッセージの長さは 56 文字です。つまり、 72% 減少しました大幅な削減です

これは、圧縮アルゴリズムがどのような効果を生むかを示す具体的な例です。テキストベースのリソースの転送サイズを小さくする。実際には、圧縮はアルゴリズムは前の例よりもはるかに洗練されており、ダウンロード数を大幅に減らすことができます。時間をかけずに済みますテキストベースのアセットに圧縮を適用することで、ウェブページがリソースの読み込みに要する時間が短縮され、リソースを圧縮しないよりも迅速に処理できます

軽量化: 前処理とコンテキスト固有の最適化

ここで取り上げる最初の手法は、圧縮です。圧縮は行いませんが厳密には圧縮アルゴリズムであり、不必要なデータを取り除く方法です。リソースを読みやすくするために、ソースコードで冗長な文字が使用されているできます。ただし、機能を維持するためにそのような可読性は必要ありません。ソースコードの読み込みが遅くなり、アプリケーションの確認することもできます。

圧縮はコンテンツ固有の最適化の一種であり、提供されるリソースのサイズを縮小し、最適化が最適に一環として呼び込むことができます。たとえば、バンドラは単一のリソースを自動的に圧縮できる一般的なソフトウェアです。新しい本番環境コードをウェブサイトにデプロイする前に、

冗長なデータや不要なデータを圧縮する最善の方法は、それを取り除くことです。ただし、任意のデータを削除することはできません。しかし、状況によっては、データ形式とそのプロパティに関するコンテンツ固有の知識を持っている場合は、ペイロードのサイズを大幅に縮小できます。実際の意味や機能によって異なります。

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

前の HTML スニペットと、それによって使用される 3 つの異なるコンテンツタイプを考えてみましょう。次を含む:

HTML マークアップ。
CSS を使ってページの表示をカスタマイズすることができます。
操作などの高度なページ機能を強化するための JavaScript。

これらのコンテンツタイプごとに、何が有効であるかについて異なるルールがあります。コメントを指定するさまざまなルールなどがあります。疑問「このページのサイズを小さくするにはどうすればよいか」という疑問が残り、

コードコメントはデベロッパーにとっては便利ですが、ブラウザにとってできます。CSS（/* ... */）、HTML（）、JavaScript を削除する（// ...）コメントを使用すると、ページとそのページの転送サイズの合計が減少します。サブリソースです。
「スマート」CSS 圧縮ツールでは、非効率的な方法が使用されていることに .awesome-container のルールを定義して、2 つの宣言を折りたたみます。他のスタイルに影響を与えずに 1 つに統合し、より多くのバイト数を節約できます。大きいこのような冗長性を排除すると、さらなる拡張が実現しますが、積極的に適用できるものでなければなりません。セレクタは多くの場合、異なるコンテキスト（メディアクエリ内など）では必然的に重複してしまうことがあります。
スペースとタブは、HTML、CSS、JavaScript の開発者にとって便利です。コンプレッサーを追加すると、すべてのタブとスペースが削除されます。他社のレビューと最適化を公平に適用できます。積極的に宣伝してください。ただし、そうしたスペースやタブがページのたとえば、スペースをグループ内に保持したい場合は、記述しておかなければならないため、ユーザーが入力したコンテンツの表示されます。

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

上記の手順を適用すると、ページの文字数は 516 から 204 になり、これは約 60%のコスト削減となります確かにあまり読みやすくはありませんが、必ずしも使用する必要はありません。最新の開発手法もまたソースコードを正しい形式で読みやすいバージョンに保つことができる最適化したコードとは分離する必要があります組み合わせソースマップ - 変換後のデータを読み取りやすい表現で本番環境のバグをより簡単にトラブルシューティングできます。優れたデベロッパーエクスペリエンスと、パフォーマンスの最適化の両方を実現できる大部分を占めています。

上の例は、重要なポイントである、汎用的なたとえば、任意のテキストを圧縮するように設計されたコンプレッサーを使用すると、ジョブはページを圧縮するジョブですが、コメントの削除、CSS ルールの折りたたみなど、コンテンツ固有の役立ちますそのため、前処理、圧縮、その他のコンテキストアウェア最適化が重要です。

同様に、上述の手法はテキストベースだけでなく、できます。画像、動画、その他のコンテンツタイプのすべてに、独自の形式のメタデータとさまざまなペイロードです。たとえば、そのファイルには通常、カメラの設定、位置情報などがありますアプリケーションによっては、このデータが重要な場合があるまったく役に立たないアプリです。マイページ削除する価値があるかどうかを検討します実際には、このメタデータにより最大数十キロバイトに上ります

要するに、アセットの効率性を最適化するための最初のステップとして、さまざまなコンテンツタイプのインベントリを作成して、コンテンツ固有の最適化を適用することでサイズを縮小できます。その後最適化を自動化するには最適化が確実に適用されるように、ビルドとリリースのステップを新しいリリースのたびに一貫性を保ちます

圧縮アルゴリズムによるテキスト圧縮

テキストベースのアセットのサイズを縮小する次のステップは、適用します。これは、Google Cloud のテキストベースのペイロードをペイロードに送信する前に、ユーザーがブラウザに到達したら、ファイルを解凍します。「その結果、これらのリソースがさらに大幅に削減され、ダウンロード時間を短縮できます

gzip と Brotli は一般的に使用されている圧縮アルゴリズムであり、テキストベースのアセット: CSS、JavaScript、HTML
最新のブラウザはすべて gzip 圧縮と Brotli 圧縮をサポートしており、 Accept-Encoding HTTP リクエストヘッダーで両方がサポートされるようになりました。
圧縮を有効にするには、サーバーを設定する必要があります。ウェブサーバーソフトウェア多くのモジュールがデフォルトでテキストベースのリソースを圧縮します。
gzip と Brotli はどちらも、次のように微調整して圧縮率を改善できます。調整します。gzip の場合、圧縮の設定範囲は 1 ～ 9 で評価し、9 が最高です。Brotli の場合、この範囲は 0 から 11 で、11 一番だ。ただし、圧縮の設定を高くすると、さらに時間がかかります。対象動的に圧縮されるリソース（データの転送時に範囲の中央に設定すると、トレードオフが最大になる傾向があります。大きく関係していますただし、静的圧縮は事前にレスポンスを圧縮する場合です。そのため、各モジュールで使用可能な最も積極的な圧縮設定を構成されます。
コンテンツ配信ネットワーク（CDN）では通常、コンテンツ配信ネットワーク（CDN）で提供しますCDN では、静的コンテンツ、動的圧縮も管理でき、圧縮の心配が 1 つ減ります

gzip と Brotli は一般的な圧縮ツールで、あります。内部では、以前に調べた次に、ファイル内で重複するデータフラグメントを検索して置換を試みます。構築できます。

実際には、gzip と Brotli はどちらもテキストベースのコンテンツで最高のパフォーマンスを発揮し、多くの場合、圧縮率も最大 70 ～ 90% に達します。ただし、アルゴリズムアセット（代替アルゴリズムなど）で圧縮されている非可逆圧縮や非可逆圧縮の手法を使用するほとんどの画像形式は、ほとんど改善されません

最新のブラウザはすべて、 Accept-Encoding HTTP リクエストヘッダー。ただし、ホスティングプロバイダのウェブサーバーを適切に構成して、ウェブサーバーが構成する必要があります。

ファイル	アルゴリズム	非圧縮サイズ	圧縮後のサイズ	圧縮比
angular-1.8.3.js	Brotli	1,346 KiB	256 KiB	81%
angular-1.8.3.js	gzip	1,346 KiB	329 KiB	76%
angular-1.8.3.min.js	Brotli	173 KiB	53 KiB	69%
angular-1.8.3.min.js	gzip	173 KiB	60 KiB	65%
jquery-3.7.1.js	Brotli	302 KiB	69 KiB	77%
jquery-3.7.1.js	gzip	302 KiB	83 KiB	73%
jquery-3.7.1.min.js	Brotli	85 KiB	27 KiB	68%
jquery-3.7.1.min.js	gzip	85 KiB	30 KiB	65%
lodash-4.17.21.js	Brotli	531 KiB	73 KiB	86%
lodash-4.17.21.js	gzip	531 KiB	94 KiB	82%
lodash-4.17.21.min.js	Brotli	71 KiB	23 KiB	68%
lodash-4.17.21.min.js	gzip	71 KiB	25 KiB	65%

上の表は、Brotli 圧縮と gzip 圧縮の両方で削減できる削減額を示しています。よく知られている JavaScript ライブラリがいくつか用意されています。費用削減はファイルとアルゴリズムによって異なりますが、86% です。参考として、 Brotli と gzip の両方のファイルに圧縮レベルを適用しました。どこで gzip よりも Brotli を優先してください。

圧縮を有効にすることは、組織にとって最も簡単で効果的な最適化の 1 つです。説明します。ウェブサイトで活用していないと、ユーザーのパフォーマンスを高める大きなチャンスになります幸いなことに、多くのウェブサーバーでは、この重要な最適化を可能にするデフォルトの構成が提供されています。とりわけ CDN は顧客のニーズに合わせた方法で圧縮速度と比率のバランスを取ります

圧縮の動作を簡単に確認するには、Chrome DevTools を開いて [Network] パネルで任意のページを読み込んで、最下部を確認します。クリックします。

DevTools での実際のサイズと転送サイズの読み取り。 — </ph> 次の転送サイズ（つまり圧縮）の表現ネットワークで可視化されたすべてのページリソースと実際のサイズパネルを開きます。

上の画像のように、以下の項目の内訳が表示されます。

リクエストの数。対象に読み込まれたリソースの数です。できます。
すべてのリクエストの転送サイズ。これは、インフラストラクチャのページのリソースに適用される圧縮ファイルです。
すべてのリクエストのリソースサイズ。これは、VM にアタッチされているページは解凍後です。

で確認できます。 <ph type="x-smartling-placeholder">

Core Web Vitals への影響

パフォーマンスの向上は、それを反映する指標がない限り測定できないその改善です。Core Web Vitals イニシアチブは、実際のユーザーエクスペリエンスを反映した指標を作成し、その認知度を高めます。シンプルなページ読み込み時間などの指標とは対照的に、ユーザーエクスペリエンスの品質に直結しないコンテンツです

このガイドで概説している最適化を Core Web Vitals への影響は、使用するリソース、関連する指標が表示されます。一部のケースについてはこうした最適化を適用すると、ウェブサイトの Core Web Vitals を改善できます。

HTML リソースを圧縮および圧縮すると、ファイルの読み込みがサブリソースの検出可能性が向上します。したがって、読み込みます。これは、ページの Largest Contentful Paint （LCP）。rel="preload" などのリソースヒントを使用すると、過剰な数を使用すると、リソースの検出可能性が防ぐことができます。ナビゲーションリクエストに対する HTML レスポンスを確実にするその中のリソースをできるだけ早く検出できるプリロードスキャナによって読み取られます。
一部の LCP 候補は、圧縮を使用して迅速に読み込むこともできます。対象たとえば、LCP の候補である SVG 画像は、テキストベースの圧縮によって短縮されます。これは、他のイメージタイプに対して行うような最適化が JPEG の圧縮方式など、他の圧縮方式で本質的に圧縮される非可逆圧縮を使用します。
また、テキストノードを LCP の候補にすることもできます。手法がどのようにこのガイドの説明は、Google Chat でテキストにウェブフォントを最適化しますウェブフォントを使用している場合は、ウェブフォントの最適化が最適です。プラクティスが適用されます。ただし、ウェブフォントを使用せずにシステムフォントを使用する場合は、リソースの読み込み時間を発生させることなく表示できる CSS を圧縮するとこの所要時間が短縮されます。つまり、 LCP テキストノードがそれより早く発生する可能性があります。

まとめ

テキストベースのアセットのエンコードと転送をどのように最適化するかがベースライン大きな影響を及ぼしますCloud Shell でリソースの軽量化や縮小の対象となるように最適化によるメリットを得られます

さらに重要なのは、これらのプロセスが自動化されていることを確認することです。対象圧縮するには、バンドラを使用して対象のリソースに圧縮を適用します。必ずウェブサーバーの設定で圧縮がサポートされていますが、それ以上に、最も効果的に圧縮できるからですこれをできるだけ簡単にするために、 CDN を使用して圧縮を自動化します。CDN は、非常に迅速に実行できます

パフォーマンスの基本概念をウェブサイトのパフォーマンスの最適化の取り組みがその後の最適化は強固な基盤の上に成り立ちますベストプラクティスを確認します