遅いサイトを繰り返し修正します

サイトのパフォーマンスは、潜在的に最も重要なメトリックです。パフォーマンスが向上すればするほど、ユーザーがページに留まり、コンテンツを読んだり、購入する必要があるか、必要なことは何でも良い可能性が高くなります。 Akamaiによる2017年の調査では、ページの負荷が100ms遅延しても7％減少し、サイトがロードするのにかかる100msごとに売り上げの1％を減らすことができるとわかったときに、研究の時点でサイトが1秒だけ減った場合に16億ドルに相当しました。 2018年のGoogleの業界のベンチマークは、ロードの各秒が直帰率にどのように影響するかについての印象的な内訳も提供します。

反対に、FirefoxはWebページを平均で2.2秒速く搭載し、年間6,000万回のFirefoxのダウンロードを促進しました。スピードは、GoogleがモバイルにWebサイトの配置をランキングするときに考慮したものでもあります。サイトが遅い場合は、他のメトリックに関係なく、検索結果の452ページに表示される場合があります。

これらすべてを念頭に置いて、私は自分のバージョンのスローサイトの速度を改善することは楽しいエクササイズだと思いました。サイトのコードは、参照のためにGitHubで入手できます。

これは、単純なHTML、CSS、およびJavaScriptで作られた非常に基本的なサイトです。私は意図的にこれを可能な限りシンプルにしようとしました。つまり、それが遅い理由は、サイト自体の複雑さとは何の関係もありません。最も複雑な部分は、人々がページを共有するためのいくつかのソーシャルメディアボタンです。

ここにあります：パフォーマンスは1回限りのタスク以上のものです。それは本質的に私たちが構築し開発したものすべてに結びついています。したがって、すべてを一気に解決するのは魅力的ですが、パフォーマンスを改善するための最良のアプローチは反復的なアプローチかもしれません。低ぶら下がった果物があるかどうかを判断し、より大きな努力または長期的な努力が何であるかを把握します。言い換えれば、増分の改善は、パフォーマンスの勝利を獲得するための素晴らしい方法です。繰り返しますが、すべてのミリ秒カウントがカウントされます。

その精神では、この記事で私たちが見ているのは、増分勝利にもっと焦点を当てており、パフォーマンス戦略の徹底的なリストまたはチェックリストの提供にはあまり焦点を当てていません。

灯台

私たちは灯台で働くつもりです。あなたの多くはすでにそれに精通しているかもしれません。ここでCSS-Tricksで束ねられています。これは、パフォーマンス、アクセシビリティ、SEO、ベストプラクティスを監査するGoogleサービスです。この記事で取り組む前後に、遅いサイトのパフォーマンスを監査します。灯台のレポートには、ChromeのDevtoolsで直接アクセスできます。

さあ、灯台がウェブサイトに間違っていると言っていることを簡単に見てください。飛び込む前に何を解決する必要があるかを知るのは良いことです。

これを完全に修正できるので、始めましょう！

改善＃1：リダイレクト

他に何かをする前に、最初にウェブサイトにヒットしたときに何が起こるか見てみましょう。リダイレクトされます。サイトは1つのURLにあり、今では別のURLに住んでいます。つまり、古いURLを参照するリンクは、新しいURLにリダイレクトされます。

リダイレクトは、多くの場合、ウェブサイトに追加するレイテンシの点でかなり軽いことがよくありますが、簡単にチェックするのが簡単なことであり、通常はほとんど努力せずに削除できます。

サイトの以前のURLを使用する場所で更新することでそれらを削除し、更新されたURLに指して、ユーザーがリダイレクトされる代わりに直接撮影されるようにすることができます。ネットワークリクエストインスペクターを使用して、DevToolsのネットワークパネルを介して削除できるものがあるかどうかを確認します。また、必要に応じて郵便配達員のようなツールを使用することもできますが、簡単にするためにできる限りDevtoolsに作業を制限します。

まず、HTTPまたはHTMLリダイレクトがあるかどうかを見てみましょう。私はフィドラーを使用するのが好きで、ネットワークのリクエストを検査すると、実際にいくつかの古いURLとリダイレクトが浮かんでいることがわかります。

私は最近、githubをAnonrobotからKealanparrに改名したので、ドメイン名を除いてすべてが同じです。

最初にヒットしたリクエストは、https://anonrobot.github.io/redirect-to-slow-site/であるように見えます。すべてのリダイレクトからスローからスローまでのURLを更新されたURLにリポートできます。 DevToolsでは、ネットワークインスペクターは、最初のWebページも何をしているかを確認するのに役立ちます。フィドラーでの私の見解から、それは次のようになります：

これは、サイトがHTMLリダイレクトを次のサイトに使用していることを示しています。参照されたURLを新しいサイトに更新して、最初のページの負荷にドラッグを追加するレイテンシを減らすのに役立ちます。

改善＃2：重要なレンダリングパス

次に、DevToolsのパフォーマンスパネルでSITをプロファイルします。私は、できるだけ速くコンテンツをレンダリングすることからサイトのブロックを解除することに最も興味があります。これは、HTML、CSS、およびJavaScriptを完全に肉体化したインタラクティブなWebサイトに変えるプロセスです。

サーバーからHTMLを取得し、これをドキュメントオブジェクトモデル（DOM）に変換することから始まります。 Inline JavaScriptを表示する任意のインラインJavaScriptを実行するか、HTMLをラインごとに解析するために外部資産の場合はダウンロードします。また、CSSをCSSオブジェクトモデル（CSSOM）に構築します。 CSSOMとDOMが結合してレンダリングツリーを作成します。そこから、最終的にペイントを実行する前に、すべてを正しい場所に画面に配置するレイアウトを実行します。

このプロセスは、リソースが実行される前にロードするのを待たなければならない場合、「ブロック」することができます。それが私たちが重要なレンダリングパスと呼ぶものであり、パスをブロックするものは重要なリソースです。

最も一般的な重要なリソースは次のとおりです。

• にある<script>タグは、非同期、延期、またはモジュール属性を含まない。</script>
• a これは、ブラウザにCSSをダウンロードしないように通知するための無効な属性を持たず、ユーザーのデバイスと一致するメディア属性を持っていないことを通知します。

フォントのような重要なレンダリングパスをブロックする可能性のあるリソースにはさらにいくつかの種類がありますが、上記の2つは最も一般的です。ブラウザはページが「未完成」であると考えており、必要なリソースや持っているリソースがわからないため、これらのリソースがレンダリングをブロックします。ブラウザが知っているすべてのことについて、サイトは、スタイリングや色の変更など、ブラウザがさらに多くの作業を行うことを期待するものをダウンロードできます。したがって、サイトはブラウザにとって不完全であるため、最悪の状態を想定し、レンダリングをブロックします。

レンダリングをブロックしないCSSファイルの例は次のとおりです。

 <link href="printing.css" rel="styleSheet" media="print">

「Media = "Print」属性は、ユーザーがWebページを印刷するときにのみStyleSheetをダウンロードします（おそらく、印刷物のスタイルを違ったスタイルにしたいため）。つまり、ファイル自体がそれ以前のレンダリングをブロックしていません。

クリスが言うのが好きなように、フロントエンド開発者は知っています。また、レンダリングの開始前にページをダウンロードする必要があることを認識することは、パフォーマンス監査のスコアを改善するために非常に重要です。

改善＃3：ブロック解析

レンダリングパスをブロックすることは、すぐにスピードアップできることの1つであり、JavaScriptに注意しない場合は、解析をブロックすることもできます。解析は、HTML要素をDOMの一部にするものであり、今すぐ実行する必要があるJavaScriptに遭遇するたびに、HTMLが発生することをブロックします。

私の遅いWebページのJavaScriptの一部は、解析をブロックする必要はありません。つまり、スクリプトを非同期にダウンロードし、遅滞なくHTMLをDOMに解析することができます。

タグは、ブラウザがJavaScriptアセットを非同期にダウンロードできるようにするものです。 タグは、ページの構築が完了したらJavaScriptを実行します。

ここでは、JavaScriptをインランスする（ネットワークリクエストは必要ありません）との間にトレードオフがあります。最良のルートはユースケースに依存するので、ここであなた自身の判断に電話してください。 CSSとJavaScriptをWebページに適用することの実際のパフォーマンスは、到着したら、外部資産であろうとインラインドであろうと同じになります。インラインで削除しているのは、外部資産を取得するためのネットワーク要求時間です（これは大きな違いをもたらすこともあります）。

私たちが目指している主なことは、できる限りやることです。私たちは、ロード資産を延期し、それらの資産を同時に可能な限り小さくしたいと考えています。これらはすべて、より良いパフォーマンスの結果につながります。

私の遅いサイトは複数の重要なリクエストをチェックしています。ブラウザがHTMLの次の行を読み取り、待ってから次の順位を読んで別の資産をチェックしてから待ちます。資産のサイズ、ダウンロードされたとき、およびそれらがブロックするかどうかはすべて、私たちのウェブページがどれだけ速く読み込まれるかについて大いに再生します。

DevTools Performanceパネルのサイトをプロファイリングすることでこれにアプローチしました。これは、サイトが時間の経過とともにロードされる方法を記録するだけです。私は自分のHTMLとそれがダウンロードしているものを簡単にスキャンし、その後、物事をブロックしている外部JavaScriptスクリプトにを追加しました（ソーシャルメディアのように、レンダリング前にロードする必要はありません）。

Chromeには、ドメイン名ごとに6つの機内HTTP接続のみを扱うことができるブラウザの制限があり、6つが飛行中に別のリクエストを要求する前に資産が返されるのを待ちます。これにより、HTMLの解析に複数の重要な資産をさらに悪化させることができます。ブラウザが解析を続けることを許可すると、ユーザーに何かを表示するのにかかる時間が高速化され、パフォーマンス監査が改善されます。

改善＃4：ペイロードサイズを削減します

サイトの合計サイズは、ロードの速度に関する大きな決定要因です。 Web.devによると、サイトは10秒未満で1,600 kb未満のインタラクティブを目指すべきです。大きなペイロードは、ロードするのに長い時間と強く相関しています。大規模なダウンロードには、より多くのお金がかかる大規模なデータプランが必要になる場合があるため、大きなペイロードをエンドユーザーへの費用と見なすこともできます。

この正確な時点で、私の遅いサイトはなんと9,701 kbであり、理想的なサイズの6倍以上です。それをトリミングしましょう。

未使用の依存関係の識別

開発の開始時に、特定の資産やフレームワークが必要になるかもしれないと思いました。私はそれらを自分のページにダウンロードしましたが、実際に使用されているものを覚えていません。私は間違いなく、時間と空間を無駄にする以外に何もしていない資産をいくつか持っています。

DevToolsのネットワークインスペクター（またはあなたが快適に感じるツール）を使用して、根本的な動作を変更せずにサイトから間違いなく削除できるものを見ることができます。 DevToolsのカバレッジパネルには、すべてがダウンロードされた後に使用されているコードの量が表示されるため、多くの価値がありました。

すでに説明したように、CSSとJavaScriptと外部資産を使用することに関しては、常にバランスが取れています。しかし、この瞬間、サイトは実際に必要なものよりもあまりにも多くダウンロードされているように見えます。

物事をトリミングするもう1つの簡単な方法は、サイトが404をロードしようとしている資産のいずれかを見つけることです。これらのリクエストは、とにかくロードしていないため、サイトにマイナスの影響を与えることなく間違いなく削除できます。これがフィドラーが私に示したものです：

カバレッジレポートをもう一度見ると、ダウンロードされたものがありますが、かなりの量の未使用のコードがまだページに進出していることがわかります。言い換えれば、これらの資産は何かをしていますが、私たちには必要ないことをする準備ができています。これには、React、JQuery、Vueが含まれるため、実際の影響なしで、それらを遅いサイトから削除できます。

なぜそんなに多くのJavaScriptライブラリ？まあ、私たちはそれが私たちの要件を満たしているので、私たちが何かに手を伸ばす実際のシナリオがあることを知っています。しかし、それらの要件は変更され、他の何かに手を伸ばす必要があります。繰り返しますが、私たちはフロントエンドの開発者として認識しなければなりません。また、サイトに関連するリソースに留意し続けることは、その全体的な認識の一部です。

圧縮、模倣、キャッシュ資産

資産を提供する必要があるからといって、それをフルサイズとして提供する必要があるわけではありません。また、ユーザーがサイトにアクセスしたときにその資産を再保存することもあります。資産を圧縮し、スタイルとスクリプトを縮小し、責任を持って物事をキャッシュすることができます。

• 圧縮とは、視覚品質に影響を与えることなく、画像などのファイルを最小のサイズに最適化することを意味します。たとえば、GZIPは、資産を小さくする一般的な圧縮アルゴリズムです。
• 削除は、外部​​スクリプトファイルなどのテキストベースの資産のサイズを改善し、コメントや白文学などのコードからCruftを削除して、ワイヤー上に少ないバイトを送信するために改善します。
• キャッシュを使用すると、ブラウザのメモリに資産を長時間保存できるようにするため、後続のページロードでユーザーがすぐに利用できるようになります。だから、一度ロードして、何度も楽しんでください。

3つの異なる種類の資産と、これらの戦術でそれらをクランチする方法を見てみましょう。

テキストベースの資産

これらには、HTML、CSS、JavaScriptなどのテキストファイルが含まれます。これらを可能な限り軽量にするために、私たちの力ですべてをしたいので、可能な限り圧縮、削除、キャッシュします。

非常に高いレベルで、GZIPはコンテンツ内の一般的な繰り返し部分を見つけることで機能し、これらのシーケンスを一度保存​​し、ソーステキストからそれらを削除します。辞書のようなルックアップを保持しているため、保存されたピースをすばやく参照して、Gunzippingとして知られるプロセスでそれらを所定の場所に戻すことができます。詩を含むファイルをこのGzippedの例をご覧ください。

これを行って、テキストベースのダウンロードをできる限り小さくしています。すでにGZIPを利用しています。 gidnetworkでこのツールを使用して確認しました。遅いサイトのコンテンツが59.9％圧縮されていることを示しています。それはおそらく、物事をさらに小さくする機会がもっとあることを意味します。

複数のCSSファイルをstyles.cssという1つのファイルに統合することにしました。これにより、必要なネットワークリクエストの数を制限しています。その上、3つのファイルをクラックすると、それぞれが3つのネットワークリクエストが単に不当なものになるような少量のCSSが含まれています。

そして、これを行う間、それは私に、どこにもDOMに適用されていない不必要なCSSセレクターを削除する機会を与えてくれました。

Ilya Grigorikは、テキストベースの資産を圧縮するための戦略を備えた優れた記事を書きました。

画像

また、遅いサイトの画像を最適化することもできます。レポートが一貫して示すように、画像は最も一般的な資産要求です。実際、画像のデータ転送の中央値は、デスクトップで948.1 kb、2016年から2021年までのモバイルデバイスでは902 kbです。ページ全体で理想的な1,600kbサイズの半分以上です。

私の遅いサイトはそれほど多くの画像を提供していませんが、それが提供する画像は小さくなる可能性があります。 Squooshというオンラインツールを使用して画像を実行し、40％の節約（18.6 kbから11.2 kb）を達成しました。それは勝利です！もちろん、これは、ImageOpTimなどのデスクトップアプリケーションを使用してアップロードする前に、またはビルドプロセスの一部としてできることです。

元の画像と最適化されたバージョン（これは素晴らしいことです！）の視覚的な違いはわかりませんでした。実際のファイルを変更し、画像の品質を低下させ、カラーパレットを変更することで、サイズをさらに削減することさえできました。しかし、これらは私が画像編集ソフトウェアで行ったことです。理想的には、それはあなたやデザイナーが最初に資産を作るときにすることです。

キャッシング

私たちは、これらを有利に使用しようとするために、縮小と圧縮、そして私たちができることに触れました。最後に確認できるのはキャッシュです。

私はゆっくりとしたサイトを何度もリクエストしてきましたが、これまでのところ、キャッシングなしで毎回新鮮にリクエストされているように見えることがわかります。私はHTMLを見て、キャッシュがここで無効になっているのを見ました。

 <meta http-equiv="cache-control" content="no-cache、no-store、nucs-revalidate">

そのラインを削除したので、ブラウザのキャッシングが行われるようになり、コンテンツをさらに速く提供するのに役立つはずです。

改善＃5：CDNを使用します

あらゆるウェブサイトで行うことができるもう1つの大きな改善は、コンテンツ配信ネットワーク（CDN）からできる限り提供することです。 David Attardには、CDNの追加とレバレッジの方法に関する非常に徹底的な作品があります。コンテンツを配信する従来のパスは、サーバーにヒットし、データを要求し、返すのを待つことです。しかし、ユーザーがデータが提供される世界の反対側の方法からデータを要求している場合、それが時間を増やします。サーバーからの応答でバイトをさらに移動させることは、他のすべてが迅速に稲妻であっても、速度の大きな損失につながる可能性があります。

CDNは、世界中の分散サーバーのセットであり、それを提供するために選択した複数の場所があるため、ユーザーの近くでコンテンツをインテリジェントに配信できるセットです。

実際にダウンロードされたコードを使用していない場合、ユーザーのダウンロードJQueryをどのようにしているかについて以前に説明しました。削除しました。ここで簡単な修正の1つは、実際にjQueryが必要だった場合、CDNから資産を要求することです。なぜ？

• ユーザーはすでに別のサイトにアクセスして資産をダウンロードしている可能性があるため、CDNのキャッシュされた応答を提供できます。結局のところ、上位100万のサイトの75.49％がJQueryを使用しています。 2020年、ブラウザ（Safari、Chrome）は「キャッシュパーティション」の実行を開始しました。つまり、資産は異なるサイト間でキャッシュされていないため、この潜在的な利点は削除されます。ファイルは引き続きウェブサイトごとにキャッシュされます。
• ユーザーがデータをリクエストすることから遠く離れて旅行する必要はありません。

GoogleのCDNからJQueryをつかむのと同じくらい簡単なことができます。

これは、私のサーバーからの標準リクエストよりも大幅に高速にjQueryを提供します。それは確かです。

物事は良いですか？

あなたがこれまで私と一緒に実装しているか、読んだだけなら、私たちがこれまでに行ったことについて改善が行われているかどうかを再作成して確認する時が来ました。

私たちが始めた場所を思い出してください：

変更後：

これが役立つことを願っており、あなた自身のサイトでのインクリメンタルなパフォーマンスの勝利を検索することを奨励することを願っています。資産を最適にリクエストすることにより、一部の資産を読み込みから延期し、サイトサイズの全体的なサイズを縮小することで、ユーザーの前に機能的で完全にインタラクティブなサイトができるだけ早く取得されます。

会話を続けたいですか？あなたがもっと見たい、または接続したいなら、私はTwitterで私の文章を共有します。

以上が遅いサイトを繰り返し修正しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。