Webの状態

インパクトのあるパフォーマンス改善のガイド

インターネットは指数関数的に成長しており、私たちが作成するWebプラットフォームも同様に成長しています。多くの場合、私たちの作品の視聴者が自分自身を見つける可能性のある接続性とコンテキストの全体像を反映することはできません。WorldWide Webの状態を一目見ただけでも、私たちは共感、状況変動性の認識で構築していないことがわかります、パフォーマンスは言うまでもありません。

それでは、今日のWebの状態はどうでしょうか?

この地球上の74億人のうち、46%だけがインターネットにアクセスしています。印象的な7Mb / sでの平均ネットワーク速度の上限。さらに重要なことは、インターネットユーザーの93%がモバイルデバイスを介してオンラインにアクセスしていることです。ハンドヘルドに対応しないことは許されません。多くの場合、データは予想よりも高価です。500MBのパケットを購入するのに1時間から13時間かかります(ドイツ対ブラジル。BenSchwarzのBeyond the Bubble:The Real World Performance)。

私たちのウェブサイトも完璧な形ではありません。平均的なサイトは、オリジナルのDoomゲームのサイズ(約3MB)です(統計の正確さのために、中央値を使用する必要があることに注意してください、イリヤ・グリゴリックの優れた「平均ページ」は神話:サイトサイズの中央値は現在1.4MBです。画像は1.7 MBの帯域幅とJavaScriptの平均400 KBを簡単に占めることができます。これは、Webプラットフォームのみに固有の問題ではありません。ネイティブアプリケーションは優れていません。不特定のバグ修正を得るために200 MBをダウンロードしなければならなかったことを覚えていますか?

技術者として、私たちはしばしば特権の立場にいます。最新のハイエンドラップトップ、電話、高速ケーブルインターネット接続により、これは誰にとってもそうではないことを忘れがちになります(実際、ごく一部の人に当てはまります)。

特権と共感の欠如の観点からWebプラットフォームを構築している場合、排他的で劣等な経験になります。

パフォーマンスを考慮して設計および開発することで、どのように改善できますか?

すべての資産の最適化

パフォーマンスを大幅に改善するための、最も強力ではあるが十分に活用されていない方法の1つは、ブラウザーがどのようにアセットを分析および提供するかを理解することから始まります。ブラウザーは、その場で解析して優先順位を決定しながら、リソースを発見するのに非常に優れていることがわかります。重要なリクエストの出番です。

ユーザーのビューポート内でコンテンツをレンダリングするために必要なアセットが含まれている場合、リクエストは重要です。

ほとんどのサイトでは、HTML、必要なCSS、ロゴ、Webフォント、そしておそらく画像になります。多くの場合、アセット(JavaScript、トラッキングコード、広告など)がリクエストされた時点では関係のない他の多くのケースが判明しています。幸いなことに、重要なリソースを慎重に選択し、それらの優先順位を調整することにより、この動作を制御できます。

を使用すると、アセットの優先度を手動で[高]に強制し、目的のコンテンツが時間通りにレンダリングされるようにすることができます。この手法により、Time to Interactiveメトリックが大幅に向上し、最適なユーザーエクスペリエンスが可能になります。

重要なリクエストは依然として多くの人にとってブラックボックスのように思われ、共有可能な資料がないことはそれを変える助けにはなりません。幸いなことに、Ben Schwarzは、このテーマに関する非常に包括的で親しみやすい記事、The Critical Requestを公開しました。さらに、ChromeでAddyのプリロード、プリフェッチ、優先度を確認します。

Chrome開発者ツールで優先度を有効にする

requestsリクエストの優先順位付けの進捗状況を追跡するには、Lighthouseパフォーマンスツールとクリティカルリクエストチェーン監査を使用するか、Chromeデベロッパーツールの[ネットワーク]タブでリクエストの優先度を確認します。

一般的なパフォーマンスチェックリスト

  1. 積極的にキャッシュする
  2. 圧縮を有効にする
  3. 重要な資産の優先順位付け
  4. コンテンツ配信ネットワークを使用する

画像の最適化

多くの場合、画像はウェブページの転送されたペイロードの大部分を占めます。そのため、画像の最適化によりパフォーマンスが最大に向上します。余分なバイトを削除するのに役立つ既存の戦略とツールは数多くありますが、最初に尋ねる質問は、「この画像は自分が求めているメッセージと効果を伝えるのに不可欠ですか?」です。削除できる場合は、帯域幅だけでなくリクエストも節約しています。

場合によっては、異なるテクノロジーを使用しても同様の結果を得ることができます。 CSSには、シャドウ、グラデーション、アニメーション、シェイプなど、アートの方向に関するさまざまなプロパティがあり、適切にスタイル設定されたDOM要素のアセットを交換できます。

適切な形式の選択

アセットを削除できない場合は、適切な形式を決定することが重要です。最初の選択は、ベクターグラフィックスとラスターグラフィックスの間にあります。

  • ベクトル:解像度に依存せず、通常はサイズが大幅に小さくなります。ロゴ、図像、および基本的な形状(線、多角形、円、点)で構成される単純な資産に最適です。
  • ラスター:より詳細な結果を提供します。写真に最適です。

この決定を行った後、JPEG、GIF、PNG-8、PNG-24、またはWEBPやJPEG-XRなどの最新の形式から選択できるかなりの形式があります。このように豊富なオプションがあるので、適切なものを選択するにはどうすればよいでしょうか?最適な形式を見つけるための基本的な方法は次のとおりです。

  • JPEG:多くの色の画像(写真など)
  • PNG-8:いくつかの色の画像
  • PNG–24:部分的に透明な画像
  • GIF:アニメーション画像

Photoshopは、品質の低下、ノイズの低減、色数などのさまざまな設定を通じて、エクスポート時にこれらのそれぞれを最適化できます。設計者がパフォーマンスプラクティスを認識し、適切な最適化プリセットを使用して適切なタイプのアセットを準備できるようにします。画像の開発方法について詳しく知りたい場合は、ララホーガンのかけがえのないパフォーマンスデザインをご覧ください。

新しいフォーマットの実験

画像形式のスペクトルには、WebP、JPEG 2000、JPEG-XRなどの新しいプレーヤーがいくつかあります。それらはすべてブラウザベンダーによって開発されています。GoogleのWebP、AppleのJPEG 2000、MicrosoftのJPEG-XRです。

WebPは簡単に最も人気のある候補であり、可逆圧縮と非可逆圧縮の両方をサポートしているため、非常に用途が広くなっています。ロスレスWebPは、PNGよりも26%小さく、JPGよりも25〜34%小さいです。 74%のブラウザーサポートにより、フォールバックで安全に使用でき、転送バイト数が最大1/3削減されます。 JPGおよびPNGは、Photoshopや他の画像処理アプリでWebPに変換できるだけでなく、コマンドラインインターフェイス(brew install webp)でも変換できます。

これらの形式の視覚的な違いを(わずかな)調べたい場合は、Githubでこの気の利いたデモをお勧めします。

ツールとアルゴリズムによる最適化

信じられないほど効率的な画像形式を使用しても、後処理の最適化をスキップすることは保証されません。このステップは重要です。

通常サイズが比較的小さいSVGを選択した場合は、SVGも圧縮する必要があります。 SVGOは、不要なメタデータを取り除くことでSVGを迅速に最適化できるコマンドラインツールです。あるいは、Webインターフェースを好むか、オペレーティングシステムによって制限されている場合は、Jake ArchibaldのSVGOMGを使用します。 SVGはXMLベースの形式であるため、サーバー側でGZIP圧縮の対象になることもあります。

ImageOptimは、他のほとんどの画像タイプに最適です。 pngcrush、pngquant、MozJPEG、Google Zopfliなどで構成され、包括的なオープンソースパッケージに多数の優れたツールがバンドルされています。 Mac OSアプリ、コマンドラインインターフェイス、Sketchプラグインとして利用可能なImageOptimは、既存のワークフローに簡単に実装できます。 LinuxまたはWindowsの場合、ImageOptimが依存するほとんどのCLIをプラットフォームで使用できます。

新しいエンコーダーを試してみたい場合、今年初めに、GoogleはGuetzliをリリースしました。これは、WebPとZopfliでの学習から生まれたオープンソースアルゴリズムです。 Guetzliは、他の利用可能な圧縮方法よりも最大35%小さいJPEGを生成することになっています。唯一の欠点は、処理時間が遅いことです(メガピクセルあたり1分間のCPU)。

ツールを選択するときは、それらが望ましい結果を生み出し、チームのワークフローに適合することを確認してください。理想的には、最適化のプロセスを自動化して、最適化されていない隙間を画像がすり抜けないようにします。

責任あるレスポンシブな画像

10年前は、すべてに対応するために1つの解決策を取り除いたかもしれませんが、今日では、絶えず変化するレスポンシブWebの状況は大きく異なります。そのため、慎重に最適化されたビジュアルリソースの実装には細心の注意を払う必要があり、さまざまなビューポートやデバイスに対応できるようにしています。幸いなことに、Responsive Images Community Groupのおかげで、picture要素とsrcset属性を使用することができます(両方とも85%以上のサポートがあります)。

srcset属性

Srcsetは、ユーザーの画面密度とサイズに基づいて画像を表示する場合の解像度切り替えシナリオで最適に機能します。 srcsetおよびsizes属性の一連の定義済みルールに基づいて、ブラウザはビューポートに応じて提供するのに最適な画像を選択します。この手法は、特にモバイルの視聴者にとって、帯域幅と要求の大幅な節約をもたらします。

srcsetの使用例

絵の要素

picture要素とmedia属性は、アートの方向性を簡単にするように設計されています。さまざまな条件にさまざまなソースを提供することで(メディアクエリでテスト)、解像度に関係なく、常に画像の最も重要な要素をスポットライトに当てることができます。

ピクチャエレメントの使用例

both両方のアプローチの詳細な説明については、Jason GrigsbyのResponsive Images 101ガイドを必ずお読みください。

イメージCDNを使用した配信

パフォーマンスビジュアルへの旅の最後のステップは配信です。すべてのアセットはコンテンツ配信ネットワークを使用することでメリットを得ることができますが、Cloudinaryやimgxなど、画像を対象とする特定のツールがあります。これらのサービスを使用する利点は、サーバー上のトラフィックを削減し、応答遅延を大幅に削減することよりもはるかに大きいです。

CDNは、イメージが多いサイトでレスポンシブで最適化されたアセットを提供することから、多くの複雑さを排除できます。オファリングは異なります(価格も異なります)が、ほとんどがデバイスとブラウザーに基づいて顧客に提供するのに最適なサイズ変更、トリミング、および決定を処理します。さらに、圧縮、ピクセル密度の検出、透かし、顔の認識、および後処理が可能です。これらの強力な機能と、ユーザー中心の画像を提供するURLにパラメーターを追加する機能が簡単になります。

画像性能チェックリスト

  1. 適切な形式を選択してください
  2. 可能な限りベクトルを使用する
  3. 変更が目立たない場合は品質を低下させる
  4. 新しいフォーマットを試す
  5. ツールとアルゴリズムで最適化する
  6. srcsetと画像について学ぶ
  7. イメージCDNを使用する

Webフォントの最適化

カスタムフォントを使用する機能は、非常に強力な設計ツールです。しかし、力には多くの責任が伴います。 Webフォントを活用しているWebサイトの68%は、この種の資産が最大のパフォーマンス違反者の1つです(バリアントと書体の数にもよりますが、簡単に平均100KB)。

重量が最も大きな問題ではない場合でも、Flash of Invisible Text(FOIT)は重要です。 FOITは、Webフォントがまだロードされているか、取得に失敗した場合に発生し、その結果、ページが空になり、コンテンツにアクセスできなくなります。そもそもWebフォントが必要かどうかを注意深く調べることは価値があるかもしれません。その場合、パフォーマンスへの悪影響を緩和するのに役立ついくつかの戦略があります。

適切な形式の選択

EOT、TTF、WOFF、および最新のWOFF2の4つのWebフォント形式があります。 TTFとWOFFが最も広く採用されており、90%以上のブラウザーサポートを誇っています。ターゲットとするサポートに応じて、WOFF2を提供し、古いブラウザーではWOFFにフォールバックするのが最も安全である可能性が高いです。 WOFF2を使用する利点は、一連のカスタム前処理および圧縮アルゴリズム(Brotliなど)であり、約ファイルサイズが30%削減され、解析機能が改善されました。

@ font-faceでWebフォントのソースを定義するときは、format()ヒントを使用して、使用する形式を指定します。

Google FontsまたはTypekitを使用してフォントを提供している場合、これらのツールは両方ともパフォーマンスフットプリントを緩和するためのいくつかの戦略を実装しています。 Typekitはすべてのキットを非同期で提供するようになり、FOITを防止するとともに、JavaScriptキットコードのキャッシュ期間を10日間(デフォルトの10分ではなく)延長できるようになりました。 Google Fontsは、ユーザーのデバイスの機能に基づいて、最小のファイルを自動的に提供します。

フォント選択の監査

セルフホスティングであるかどうかに関係なく、書体の数、フォントの太さ、スタイルがパフォーマンス予算に大きく影響します。

理想的には、通常の大胆な文体のバリエーションを備えた1つの書体で済ませることができます。フォント選択の選択方法がわからない場合は、Lara Hoganの計量美学とパフォーマンスを参照してください。

Unicode範囲のサブセットを使用する

Unicode範囲のサブセット化により、大きなフォントを小さなセットに分割できます。これは比較的高度な戦略ですが、特にアジア言語を対象とする場合は大幅な節約になる可能性があります(中国語フォントの平均グリフは20,000グリフですか?)。最初のステップは、ラテン語、ギリシャ語、キリル文字などの必要な言語セットにフォントを制限することです。ロゴの使用にのみWebフォントが必要な場合は、Unicode範囲の記述子を使用して特定の文字を選択する価値があります。

Filament Groupは、ファイルまたはURLに基​​づいて必要なグリフのリストを生成できるグリフハンガーであるオープンソースコマンドラインユーティリティをリリースしました。または、WebベースのFont Squirrel Web Font Generatorは、高度なサブセット化および最適化オプションを提供します。 Google FontsまたはTypekitを使用している場合、言語サブセットの選択が書体ピッカーインターフェイスに組み込まれているため、基本的なサブセットが簡単になります。

フォントのロード戦略を確立する

フォントはレンダリングをブロックします—ブラウザーは最初にDOMとCSSOMの両方を構築する必要があるためです。 Webフォントは、既存のノードに一致するCSSセレクターで使用される前にダウンロードされません。この動作により、テキストのレンダリングが大幅に遅延し、前述の不可視テキストのフラッシュ(FOIT)が発生することがよくあります。 FOITは、低速のネットワークやモバイルデバイスでさらに顕著です。

フォントのロード戦略を実装すると、ユーザーがコンテンツにアクセスできなくなります。多くの場合、スタイルなしテキストのフラッシュ(FOUT)を選択するのが最も簡単で効果的なソリューションです。

font-displayは、JavaScriptに依存しないソリューションを提供する新しいCSSプロパティです。残念ながら、部分的なサポートがあり(ChromeとOperaのみ)、現在FirefoxとWebKitで開発中です。それでも、他のフォント読み込みメカニズムと組み合わせて使用​​できます。

動作中のフォント表示プロパティ

幸いなことに、TypekitのWeb Font LoaderとBram SteinのFont Face Observerは、フォントの読み込み動作を管理するのに役立ちます。さらに、Webフォントパフォーマンスの専門家であるZach Leathermanが、プロジェクトに適したアプローチを選択するのに役立つフォントロード戦略の包括的なガイドを公開しました。

Webフォントパフォーマンスチェックリスト

  1. 適切な形式を選択
  2. フォント選択を監査する
  3. Unicode範囲のサブセットを使用する
  4. フォントのロード戦略を確立する

JavaScriptの最適化

現時点では、JavaScriptバンドルの平均サイズは446 KBであり、既に2番目に大きいサイズのアセット(画像を参照)となっています。

気付いていないかもしれないのは、私たちの愛するJavaScriptの背後に隠れたパフォーマンスのボトルネックがはるかに多いということです。

配信されるJavaScriptの量を監視する

配信の最適化は、Webページの肥大化に対処するための1つのステップにすぎません。 JavaScriptをダウンロードした後、ブラウザで解析、コンパイル、実行する必要があります。いくつかの人気サイトをざっと見てみると、gzip圧縮されたJSが解凍後に少なくとも3倍大きくなっていることが明らかになります。事実上、コードの巨大な塊を送信しています。

さまざまなデバイスでの1MBのJavaScriptの解析時間。 Addy Osmaniと彼のJavaScript Start-up Performance記事の画像提供。

解析時間とコンパイル時間の分析は、アプリを操作する準備ができたときを理解するために重要になります。これらのタイミングは、ユーザーのデバイスのハードウェア機能によって大きく異なります。解析とコンパイルは、ローエンドのモバイルでは2〜5倍に簡単になります。 Addyの調査によると、デスクトップでは8秒であるのに対し、平均的な電話ではアプリがインタラクティブ状態に達するまでに16秒かかることが確認されています。これらの指標を分析することは非常に重要です。幸いなことに、Chrome DevToolsを使用して分析できます。

Chrome Dev Toolsでの解析とコンパイルの調査

Add JavaScriptスタートアップパフォーマンスに関するAddy Osmaniの詳細な記事を必ずお読みください。

不要な依存関係を取り除く

最新のパッケージマネージャーの動作方法では、依存関係の数とサイズが簡単にわかりにくくなる可能性があります。 webpack-bundle-analyzerとBundle Buddyは、コードの重複、最大のパフォーマンス違反者、古くて不要な依存関係の特定を支援する優れた視覚ツールです。

動作中のWebpackバンドルアナライザー。

VS CodeおよびAtomのImport Cost拡張機能を使用すると、インポートされたパッケージコストをさらに表示できます。

インポートコードVSコード拡張。

コード分​​割を実装する

可能な限り、必要なアセットのみを提供して、目的のユーザーエクスペリエンスを作成する必要があります。完全なbundle.jsファイルをユーザーに送信します。これには、見たことがないコード処理インタラクションが含まれますが、最適ではありません(ランディングページにアクセスするときにアプリ全体を処理するJavaScriptをダウンロードすることを想像してください)。同様に、特定のブラウザやユーザーエージェントを対象としたコードを普遍的に提供するべきではありません。

最も人気のあるモジュールバンドルの1つであるWebpackには、コード分割サポートが付属しています。ほとんどの単純なコード分割はページごとに実装できます(ランディングページの場合はhome.js、連絡先ページの場合はcontact.jsなど)が、Webpackには動的インポートや遅延読み込みなどの高度な戦略もいくつかあります。 。

フレームワークの代替案を検討する

JavaScriptフロントエンドフレームワークは常に増加しています。 JavaScript 2016の調査によると、Reactは最も一般的なオプションです。ただし、アーキテクチャの選択を慎重に監査すると、Preactなどのはるかに軽量な代替手段を使用したほうがよいことを示す場合があります(Preactは完全なReactの再実装ではなく、高性能で機能の少ない仮想DOMライブラリであることに注意してください)。同様に、date-fnsのmoment.js(または、moment.jsの場合は未使用のロケールを削除する)のように、大きなライブラリを小さな代替に交換できます。

新しいプロジェクトを開始する前に、必要な機能の種類を判断し、ニーズと目標に最も適したフレームワークを選択することをお勧めします。それは、代わりにもっとバニラのJavaScriptを書くことを選ぶことを意味するかもしれません。

JavaScriptパフォーマンスチェックリスト

  1. 配信されるJavaScriptの量を監視する
  2. 不要な依存関係を取り除く
  3. コード分​​割を実装する
  4. フレームワークの代替案を検討する

パフォーマンスと今後の道の追跡

ほとんどの場合、構築中の製品のユーザーエクスペリエンスにプラスの変化をもたらすいくつかの戦略について説明しました。ただし、パフォーマンスは難しい場合があり、微調整の長期的な結果を追跡する必要があります。

ユーザー中心のパフォーマンスメトリック

優れたパフォーマンスメトリックは、可能な限りユーザーエクスペリエンスを表現することを目指しています。長い間確立されていたonLoad、onContentLoaded、またはSpeedIndexは、サイトがどれだけ早く対話できるかについてほとんど語りません。アセットの配信のみに焦点を当てる場合、知覚されるパフォーマンスを定量化することは容易ではありません。幸いなことに、コンテンツが表示され、インタラクティブになるまでの時間をかなり包括的に描くタイミングがいくつかあります。

これらのメトリックは、最初のペイント、最初の意味のあるペイント、視覚的に完全、および対話時間です。

  • 最初のペイント:ブラウザが白い画面から最初の視覚的な変更に変わりました。
  • 最初の意味のあるペイント:テキスト、画像、主要なアイテムを表示できます。
  • 視覚的に完全:ビューポート内のすべてのコンテンツが表示されます。
  • インタラクティブな時間:ビューポート内のすべてのコンテンツが表示され、対話する準備ができています(主要なメインスレッドJavaScriptアクティビティはありません)。

これらのタイミングは、ユーザーが見るものに直接対応するため、追跡の優れた候補になります。可能であれば、すべてを記録し、それ以外の場合は1つまたは2つを選んで、知覚されるパフォーマンスをよりよく理解してください。他の指標、特に送信するバイト数(最適化およびアンパック)にも注目する価値があります。

パフォーマンス予算の設定

これらの数字はすべて、すぐにわかりにくくなり、理解するのが面倒になります。実用的な目標とターゲットがなければ、私たちが達成しようとしていることを簡単に見失う可能性があります。数年前、Tim Kadlecはパフォーマンス予算の概念について書きました。

残念ながら、それらを設定するための魔法の公式はありません。多くの場合、パフォーマンス予算は、競合分析と製品目標に要約されますが、これらは各ビジネスに固有のものです。

予算を設定する際には、顕著な差を狙うことが重要です。これは通常、少なくとも20%の改善に相当します。パフォーマンス予算を参考にして、ララホーガンのアプローチの新しいデザインを活用して、予算を試し、繰り返します。

Performance Performance Budget CalculatorまたはBrowser Calories Chrome拡張機能を試して、予算の作成を支援します。

継続的な監視

パフォーマンスの監視は手動ではいけません。包括的なレポートを提供する強力なツールがかなりあります。

Google Lighthouseは、パフォーマンス、アクセシビリティ、プログレッシブWebアプリなどを監査するオープンソースプロジェクトです。 Lighthouseをコマンドラインで使用することも、ごく最近のようにChrome開発ツールで直接使用することもできます。

パフォーマンス監査を実行している灯台。

パフォーマンス予算、デバイスエミュレーション、分散監視、および独自のパフォーマンススイートを慎重に構築しないと実現できないその他の多くの機能を提供する、Calibreの継続的な追跡オプトイン。

Calibreの包括的なパフォーマンストラッキング。

追跡する場所はどこでも、チーム全体、または小規模な組織ではビジネス全体がデータを透過的にアクセスできるようにしてください。

パフォーマンスは、開発者チームよりも広範囲にわたる共有の責任です。役割や役職に関係なく、私たちは作成するユーザーエクスペリエンスに対してすべての責任を負います。

製品の決定や設計段階で、ボトルネックの可能性を早期に発見し、コラボレーションプロセスを確立することが非常に重要です。

パフォーマンスの認識と共感の構築

パフォーマンスを重視することは、ビジネス上の目標だけではありません(ただし、販売統計で販売する必要がある場合は、PWA Statsを使用してください)。それは基本的な共感と、ユーザーの最大の関心を第一にすることです。

技術者として、注意を奪わないことと、人々が他の場所で楽しく過ごすことができる時間を確保することは私たちの責任です。私たちの目的は、時間と人間の焦点を意識したツールを構築することです。

パフォーマンスの認識を提唱することは、全員の目標であるべきです。パフォーマンスと共感を念頭に置いて、私たち全員にとってより良い、よりマインドフルな未来を築きましょう。