Web ページの速度を最適化する 7 つの方法_html/css_WEB-ITnose

週末の 2 日連続でオブジェクト指向プログラミングの主要な機能である「カプセル化」と「継承」についてお話しました。今日も引き続き機能「ポリモーフィズム」についてお話します。がっかりするかもしれませんが、「ポリモーフィズム」はありませんが、Web ページの読み込み速度を最適化する方法を教えるためには、ルールに従っていません (笑)。

週末に家にいて、たくさんの Web ページを閲覧しましたが、多くの Web サイトの読み込み速度が最適化されていないことがわかりました。 Web ページは非常に優れていますが、私の第一印象は、遅くて耐えられないというものでした。

実際には、シンプルで粗雑で非常に効果的な最適化方法がたくさんありますが、それをすべてのプロダクト マネージャーで共有して、Web ページの読み込みエクスペリエンスを最適化して改善するために開発者を監督できるようにする必要があると思います。

まず、Web ページの読み込みプロセスを見てみましょう。 Web ページを開くと、まず HTML ページを取得し、次にブラウザーが HTML ページを解析した後、ページのコンテンツに基づいて JavaScript、CSS、および画像ファイルを取得し、最後にこれらのファイルに基づいてページをレンダリングします。 。

Web ページの表示速度に影響を与える主な要因は、Web ページ自体ではなく、Web ページが依存する他のファイルであることがわかります。これらのリソースの読み込み速度が最適化されると、Web ページの表示速度も向上します。

簡単で大雑把な方法にはどのようなものがありますか?一つずつ列挙してみましょう:

1. 画像リソースの形式とサイズを最適化する

Web ページでは画像リソースが最も大きな割合を占め、1 つのファイルのサイズもかなり大きくなります。したがって、画質を維持しながら、できるだけ圧縮率の高い画像形式を選択できます (webp > png > bmp)。同時に、元の画像をそのままプルダウンして使用するのではなく、画像の表示サイズに応じてサイズに最適な画像リソースもプルダウンして使用する必要があります。以前にもこのような状況に遭遇したことがありますが、196*196 の領域に表示された画像のファイル サイズが実際には数メガバイトに達していました。そのとき初めて、元の画像を解像度 1960*1960 でプルダウンしたことに気づきました。

2. ネットワーク圧縮をオンにする

ほとんどのブラウザは、リクエストを行うときにこのタグ「Accept-Encoding: gzip, deflate」を持ちます。これは、Web ページが gzip 圧縮をサポートしている場合、このブラウザがデータ送信を受け入れることができることを示します。 gzip 圧縮データなので、gzip モードでデータを送信すると、トラフィックが 70 ～ 80% 削減されます。

3. ブラウザー キャッシュを使用する

同じサイト内の異なるページでは、一部のリソース ファイルがキャッシュ可能に設定されている場合、別のページを更新したりジャンプしたりするときに、関連するリソースを取得する必要がありません。これにより、Web ページの読み込み速度が大幅に向上します。

4. リダイレクトリクエストを減らす

一部の Web サイトでは、端末ごとに異なるページが作成されており、たとえば、携帯電話で Weibo にアクセスすると、weibo.com から weibo.cn にリダイレクトされます。リクエストによりロード時間が延長されます。この場合、すべての端末を 1 つの weibo.com サイトでカバーする、可能な限りレスポンシブ デザインを使用する必要があります。

5. CDN を使用して静的リソースを保存します

CDN は、各州、さらには各都市に独自のサーバーを配置して、ユーザーが特定の都市に静的コンテンツを配信します。リソースを取得する場合、まずローカル CDN サーバーからリソースを取得します。これにより、できるだけ早くリソースを取得できるようになります。 Bianjia の統計によると、ネットワーク リソースの 70% は静的リソースです。これは、コンテンツの 70% は生成後に変更されないことを意味するため、コンテンツをすべて CDN に置くと、これら 70% のリソースのダウンロード速度が向上します。

6. DNS クエリの数を減らす

多くの人は、異なるドメイン名で異なる画像を表示することを好みます。たとえば、画像 A は a.pm-Teacher.com に表示され、画像 B は b.pm- に表示されます。先生.com。 Web ページで画像 A と画像 B の両方が使用されている場合、ブラウザは 2 つのドメイン名を照会する必要があります。毎回ドメイン名を解決すると時間が無駄になるため、すべての画像を 1 つのドメイン名の下に配置するようにしてください。

7. CSS および JS コンテンツを圧縮する

ここで説明する圧縮は、ポイント 2 とは異なります。上記の圧縮は、ファイルの内容を変更しない圧縮です。 CSSやJSにはスペースや変数名が多く含まれています(hello="hello word";など)、これらのスペースを削除して変数名を単純な文字(a="hello word";など)に置き換えると、元の css および js ファイルのサイズも小さくなり、取得速度の高速化にも役立ちます。

上記の最適化計画の核心は、リクエスト数の削減、リソース サイズの削減、および最速のサーバーの検索の 3 つのポイントであることに気づいたかどうかはわかりません。あなたが Web サイトの製品マネージャーである場合は、開発者を探して、同様の最適化が行われているかどうかを確認してください。

#コラムニスト#

プロダクト マネージャー、WeChat パブリック アカウント (pm_Teacher) に技術スキルを教え、誰もがプロダクト マネージャーのコラムニストです。シニア プログラマーである彼は、数年間クライアント開発に注力しており、フロントエンドおよびバックエンド テクノロジーについてある程度の知識を持ち、新しい技術分野の探索に熱心です。

この記事はもともと「Everyone is a Product Manager」に公開されたものであり、許可なく複製することはできません。