パフォーマンス

パフォーマンスの改善は、ユーザーがダウンロードするデータの最小化、または少なくとも最適化から始まるプロセスです。ブラウザがこれらのリソースをレンダリングする方法について理解しておくことが、コードの効率を高めるための前提条件です。また、改善後にテストする方法が必要になります。

コンテンツの効率の最適化

優れたパフォーマンスを実現するには、サイトのすべてのバイトの配信を最適化する必要があります。

スタートガイド

クリティカル レンダリング パス

HTML、CSS、JavaScript を受信して、レンダリングされたピクセルに変換されるまでの中間ステップで、なにが起こっているのでしょうか?

詳細を見る

レンダリング パフォーマンス

パフォーマンスの高いサイトとアプリを作成するには、HTML、JavaScript、および CSS がブラウザでどのように処理されるかを理解する必要があります。また、記述したコード(および他のサードパーティのコード)が、できる限り効率的に実行されるようにします。

詳細を見る

低帯域幅と高レイテンシの理解

接続状態が悪く不安定なときのアプリまたはサイトの操作性を把握して、それに応じてアプリやサイトを構築することが重要です。これに役立つさまざまなツールがあります。

詳細を見る

PRPL パターン

PRPL(レンダリング、事前キャッシュ、遅延読み込み)は、Progressive Web App(PWA)を構築および配信するためのパターンで、アプリの配信と起動時のパフォーマンスに重点を置いています。

詳細を見る

関連リソース

コードラボ

ウェブアプリのパフォーマンスの問題を特定して修正する
このコードラボでは、ウェブアプリのパフォーマンスのボトルネックを特定して解決する方法を学びます。

Chrome DevTools

Udacity コース

ブラウザのレンダリングの最適化
Google のパフォーマンスの専門家である Paul Lewis が、不自然な動作を削除し、1 秒 60 フレームのパフォーマンスを維持するウェブアプリの作成をサポートします。

クリティカル レンダリング パス
クリティカル レンダリング パス、つまり、ブラウザが HTML、CSS、JavaScript を生き生きとしたウェブサイトに変換するために必要なステップについて学びます。

HTTP/1 から HTTP/2
Surma は HTTP/1 の基本から HTTP/2 に至るまで、アセットを効率良く読み込む方法を説明し、これらのプロトコルのセキュリティについても説明します。