あなたは知っていますか？ Webサイトの負担を軽減する10の対策_html/css_WEB-ITnose

ウェブサイトの高速読み込みは、優れたユーザー エクスペリエンスを提供するための前提条件です。しかし、Web サイトの機能の増加とプログラム パッケージの肥大化により、Web サイトにアクセスする際のダウンロード量が増大し、最終的には応答速度に影響を及ぼしています。コードの量を減らし、Web サイトの過度の負担を軽減するにはどうすればよいでしょうか? Craig Buckler は、サイトポイントの Web サイトに記事「ページの重量を減らすための 10 の簡単な修正」を公開し、負荷を軽減するための 10 の提案を共有しました。ウェブサイト。以下は記事の内容をまとめたものです。

ウェブサイトのページの重量は 32% 増加し、96 の独立した HTTP リクエストを含む 1.7MB に達しました。これはあくまで平均値であり、半数近くのサイトがこの値を上回っています。 Web サイトの肥大化は蔓延しており、その責任の多くは Web 開発者にあります。

Web サイトが大きすぎると、主に次の 4 つの側面で Web サイトの最終的なエクスペリエンスに深刻な影響を及ぼします:

ダウンロード量が多くなり、ユーザー エクスペリエンスの低下につながります。特に発展途上地域では、誰もが 20M ネットワーク接続を持っているわけではありません。ウェブサイトがどれほど優れていても、ユーザーは待ち望んでいません。
モバイル ウェブ アクセスは急速に発展しており、モバイル インターネット ユーザーはインターネット ユーザー全体のほぼ 1/4 を占めています。一般的な 3G 接続では、1.7Mb の Web サイトの読み込みに 1 分近くかかります。 Web サイトがこれらのモバイル デバイス上で効率的に動作しない場合、レスポンシブ Web デザイン手法を採用する意味は何でしょうか?
ウェブサイトの読み込み速度が Google のランキング アルゴリズムに追加されました。読み込みが遅いと、Web サイトのランキングが低下し、検索エンジンの最適化にも影響を与える可能性があります。
Web サイトに含まれるコードが増えるほど、更新と保守に時間がかかります。
Craig Bucklerは、Webページの重みが減少すると予測しました。では、コードを合理化し、Web サイトの負担を軽減するにはどうすればよいでしょうか? Craig Buckler が 10 のヒントを提供します。これらの推奨事項に含まれる手法はすべてよく知られています。

1. GZIP 圧縮を有効にする

W3Techs.com のデータによると、Web サイトのほぼ半数は圧縮されていません。 Web ホストでは、簡単なサーバー設定を通じて GZIP 圧縮を有効にすることができます。

2. ブラウザのキャッシュをサポートします

ブラウザがファイルを簡単にキャッシュできる場合、ファイルを繰り返しダウンロードする必要はありません。この機能を実現する 1 つの解決策は、HTTP ヘッダーに適切な Expires ヘッダー、最終変更時刻、または採用された ETag を設定することです。

サーバーを設定することで上記の作業を自動的に完了することができます。以下は Apache の .htaccess ファイルで、その中のコードは「すべての画像を 1 か月間キャッシュする」機能を実装しています。

<IfModule mod_expires.c>ExpiresActive On<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">ExpiresDefault "access plus 1 month"</FilesMatch></IfModule>

3. CDN を使用する

ブラウザは、ドメインごとに同時に処理できる同時 HTTP リクエストの数を 4 ～ 8 に制限します。 Web ページがドメインから 96 個のリソースを読み込む必要がある場合、ブラウザは最大 12 セットの同時リクエストを設定できます。 (ファイル サイズが異なるため、これは実際には起こりませんが、制限は依然として適用されます。) 別のドメインから静的ファイルをリクエストすると、ブラウザーが処理する HTTP リクエストの数が 2 倍になります。さらに、ファイルが呼び出された後、そのファイルを呼び出す次の Web サイト用にキャッシュ ファイルが生成されます。 JavaScript ライブラリ (jQuery など) とフォント ライブラリを使用できます。また、専用の画像ホスティングを検討することもできます。

上記の 3 つの提案により、Web サイトの読み込み速度が向上し、Web サイトのコードをチェックして Web サイトの重量を効果的に軽減できます。

4. 無駄なリソースを削除する

Web サイトは常に変化しています。コンポーネントを使用しなくなった場合は、それに関連付けられている CSS と JavaScript を削除します。別ファイルにしておくと処理が簡単になります。それ以外の場合は、Chrome の Audit 開発ツール、JSLint、Dust-Me Selectors、CSS の使用法、unused-css.com などのツールを使用する必要があります。また、grunt-uncss などのツールを構築することもできます。

5. CSS をマージして圧縮する

理想的には、CSS ファイルは 1 つだけです (古いバージョンの IE をサポートするために RWD を使用する場合は、CSS ファイルが 2 つ必要になります。) いくつかの個別の CSS ファイルも構築して維持する それは合理的ですが、運用サーバーに展開する前に、それらをグループ化して不要な空白を削除する必要があります。

Saas、LESS、Stylus などのプリプロセッサは、これらの面倒なタスクを完了するのに役立ちます。 Grunt.js や Gulp などのツールを使用すると、ワークフローを自動化できます。 GUI を使用したい場合は、Koala が提供する無料のクロスプラットフォーム アプリケーションを使用できます。

これらが面倒な場合は、コマンドラインツールを使用して手動で CSS ファイルをまとめる方法もあります。たとえば、Windows では次のコードを使用できます。

copy file1.css+file2.css file.css

Mac/Linux の場合次のコードを使用できます:

cat file1.css file2.css > file.css

最終ファイルは、オンライン CSS 圧縮ツール (cssminifier.com、CSS Compressor & Minifieror など) で圧縮した後に実行できます。

最後に、ブラウザが次の HTML 要素を表示できるように、また次回ブラウザがページ要素を再描画しないようにするために、すべての CSS を Head にロードすることを忘れないでください。

6. JavaScript の圧縮とマージ

平均して、各ページには 18 個の JavaScript ファイルを読み込む必要があるため、作成した JavaScript コードをマージして圧縮する必要があります。圧縮ツールを自分で構築することも、YUI Compressor、Closure Compiler、CompressorRater などのオンライン ツールを使用することもできます。

圧縮に JavaScript 圧縮ツールを使用する場合は、十分に注意する必要があります。コードに若干の問題があり、セミコロンが欠けている場合でも、圧縮プロセスが失敗する可能性があります。いずれにしても、JavaScript ファイルを圧縮すると HTTP リクエストの数が減り、Web サイトのパフォーマンスが向上します。

スクリプトが他のコンテンツのロードをブロックしないようにするために、36cc49f0c466276486e50c850b7e4956 の前に JavaScript をロードするのが最善です。同時に、スクリプトがダウンロードされて実行される前に、ページのコンテンツがロードされます。読むことができます。

7. 正しい画像形式を使用する

画像形式を誤って使用すると、Web ページの負荷が増加します。画像形式には通常、次の使用原則があります:

写真は JPG 形式を使用します。
その他は PNG 形式を使用します。
限られた色のセットのみを含む小さな画像がある場合、GIF 形式の方が圧縮効果が優れている可能性があります。この記事では、今のところベクター グラフィックスについては説明しません。

現在、画像形式の変換に使用できる無料のグラフィック ソフトウェア パッケージが多数あります。 XnView などを使用すると、これらのファイルをバッチ処理できます。次の 2 つの原則を覚えておいてください:

JPG は非可逆圧縮形式であり、その品質の範囲は 0 (非常に低品質、小さいファイル) から 100 (最高の品質、大きいファイル) です。 30 ～ 70 のほとんどの画像はより良く表示されます。

PNG は 256 のカラーテーブルと 24 ビットの True Color をサポートしています。透明度が必要なく、カラー パレットを制御できる場合は、256 PNG 画像カラー モードの方が圧縮率が高い可能性があります。

8. 大きな写真のサイズを変更する

スマートフォンの最も入門レベルの写真カメラ (3 メガピクセル) でさえ、Web サイトに表示するには大きすぎる写真を撮影することがよくあります。しかし、ほとんどのコンテンツ編集者は、カメラから Web サイトに画像を直接アップロードする傾向があります。したがって、画像のサイズを自動的に変更できるシステムが必要です。

画像のサイズは、それが入っているコンテナの最大サイズを超えることはできません。 Web サイト テンプレートの最大幅が 800 ピクセルの場合、画像の幅はこの値を超えることはできません。一部の高解像度 Retina ディスプレイでは、1600 ピクセルもの幅の画像を表示できますが、それでもカメラから直接出力される画像よりも小さいです。

画像サイズの調整は、Webページの軽量化に重要な役割を果たします。画像サイズを 50% 削減すると、合計スペースの 75% を節約できます。これは、ファイル サイズを削減するのと同じです。

9. 画像をさらに圧縮します

画像が正しい形式とサイズに調整された後でも、画像を分析して最適化するいくつかのツールを使用して画像をさらに圧縮することができます。これらのツールには、OptiPNG、PNGOUT、jpegtran、jpegoptim などがあります。ほとんどのツールは個別にインストールすることも、ビルド プロセスに統合することもできます。さらに、Smush など、クラウド上で動作するオンライン ツールもいくつかあります。

10. 不要なフォントを削除する

Web フォントはデザインを大幅に見直し、画像ベースのフォントの使用を減らしました。ただし、従来のフォントを使用すると、Web ページのコード サイズが数百 KB 増加することがよくあります。したがって、Web サイトでのフォントの使用は 2 種類または 3 種類に限定する必要があります。

上記の方法を使用すると、ほとんどの Web サイトの重量を 30 ～ 50% 減らすことができます。通常のWebサイトであれば800KBのコードを削減でき、アクセス速度が大幅に向上します。 (構成: 陳秋歌)