あなたは知っていますか？ 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 サイトのパフォーマンスが向上します。
スクリプトが他のコンテンツのロードをブロックしないようにするために、
