ウェブサイトファイル最適化の初心者向けガイド(70%高速な読み込み)

Webサイトを高速化して帯域幅を節約するために、圧縮はそれを達成するための最も効果的な(そして最も簡単な)方法の1つです.


…しかし、多くのウェブサイトの所有者は、2020年にはファイルの最適化を行っていません。理由は、その重要性を知らないか、方法を知らないためです。.

簡単に言えば、ページの読み込み速度を上げる最も重要な方法の1つは、JavaScript(JS)ファイルの読み込みを速くすることです。そして、GZIP圧縮を使用してJavaScriptを高速化できます。.

現在、これは最新のブラウザにのみ理想的ですが、インターネット上のほとんどの人は最近のデバイスとブラウザを使用しています。 YahooとGoogleの両方がGZIP圧縮を利用しています.

しかし、最初に、少しコンテキストを確立しましょう.

ステップ1:コンテンツエンコーディングとは?

ウェブサイトのファイルを効果的に最適化できるようにするには、次のような概念を理解することが重要です コンテンツのエンコード.

簡単に言えば、これを使用して、基になるメディアタイプのIDを失うリスクなしにドキュメントを圧縮できるようにします。ファイルをリクエストすると、ブラウザはWebサーバーと通信します.

HTTPリクエスト

基本的に、ブラウザはサーバーに必要なものを伝えます。サーバーはそれを探して見つけます。ブラウザはそれをロードします。ファイルが大きいほど、ブラウザがファイルをロードするのに時間がかかります.

では、ファイルが大きすぎる場合はどうしますか?

あなたはそれを圧縮します。ブラウザに圧縮されたファイルを送信すると、ダウンロード時間と帯域幅の両方を節約できます.

サーバーとブラウザに関連付けられた2つの要素があり、zipファイルを送信しても問題ありません。

  • ブラウザーは、ヘッダーを送信して圧縮されたコンテンツを送信しても問題ないことをサーバーに通知します
  • コンテンツが圧縮されている場合、サーバーは応答を送信します

ファイルが圧縮されていない場合、サーバーはcontent-encoding応答ヘッダーを介して送信しません。 accept-encodingヘッダーは要求ではなく、ブラウザからの要求のみです.

サーバーは圧縮されたコンテンツを送信しないので、ブラウザーは通常のヘビーバージョンを処理する必要があります。.

サーバーのセットアップ

ブラウザを制御できません。ヘッダーを送信するか、ヘッダーを送信しません。ただし、使用しているサーバーを構成して、ブラウザーが処理できる限り、zipのコンテンツが返されるようにすることができます。これにより、帯域幅が大幅に節約されます。.

圧縮後のWebパフォーマンス

これを行うには、単にIISの圧縮設定を有効にします。 Apacheを使用している場合、出力圧縮を有効にするのは比較的簡単です。 .htaccessファイルにアクセスして適切なコードを追加するだけです.

Apacheでは、2つの圧縮オプションから選択できます。

  • mod_deflateは標準で、設定が簡単です
  • mod_gzipを使用すると、コンテンツを事前に圧縮でき、より強力に見えます

簡単なapache deflate

どちらのオプションを選択しても、Apacheはブラウザがaccept-encodingのヘッダーを送信したかどうかを確認し、ファイルを通常のバージョンまたは圧縮バージョンで返します.

古いブラウザが問題を引き起こしている場合は、特定の特別なディレクティブを追加して修正することができます.

.htaccessファイルを変更できない場合は、圧縮されたコンテンツを返すためにPHPを使用できます。 PHPの場合:

<?php if(substr_count($ _ SERVER [‘HTTP_ACCEPT_ENCODING’]、 ‘gzip’))ob_start(“ ob_gzhandler”);それ以外の場合はob_start(); ?>

Accept-Encodingヘッダーを確認すると、ファイルのgzip圧縮されたバージョンが返されます。これは、自分でWebサーバーを構築するのに似ています。出力を圧縮するには, Apacheはそれを簡単にします.

重要な警告:ほとんどのWebサイト構築ソフトウェアは、コードレベルの編集を許可していません(一部の例外を除きます)。 Hosting Canadaでは、サイトをセルフホスティングすることを強く推奨していますが、すべての人に適しているわけではありません。 Squarespace、Wix、Weeblyなどのウェブサイトビルダーを使用している場合、この種のサーバーレベルの変更はおそらく手が届きません。.

圧縮を確認する

サーバーの構成が完了したら、圧縮されたコンテンツを確実に配信することが重要です。ページがオンラインで圧縮されているかどうかを判断するには、オンラインGZIPテストを使用できます.

お使いのブラウザーでは、開発ツールがこれを支援します。ネットワークタブに移動し、ページを更新してから、特定のページのネットワークラインをクリックします。.

コンテンツが圧縮されて送信された場合、「content-encoding:GZIP」ヘッダーが表示されます.

google chrome gzipヘッダー

詳細を確認するには、「大きな行を使用」のアイコンをクリックします。これは、実際のコンテンツサイズと圧縮転送サイズに関する情報も提供します.

考慮すべき警告

圧縮には多くの利点がありますが、すべてにマイナス面があります。次の点に注意してください。

  • 圧縮率グラフ既に圧縮されているコンテンツ: ほとんどの音楽、ビデオ、画像はすでに圧縮されています。もう一度圧縮しようとすると, これは主に時間の無駄です. ほとんどの場合、CSS、HTML、JavaScriptの圧縮についてのみ心配する必要があります。.
  • 古いブラウザ: 圧縮されたコンテンツは、すべてのブラウザーと互換性があるわけではありません。これは特に古いブラウザに当てはまります。たとえば、Windows 95またはNetscape 1.0で作業する必要がある場合は、HTTP圧縮を避けたい場合があります。 Apache mod-deflateを使用する古いブラウザーの圧縮を回避するためのいくつかのルールとガイドラインがあります.
  • CPU負荷: コンテンツをオンザフライで圧縮するときに帯域幅を節約し、CPU時間を使用します。圧縮の速度を考慮すると、トレードオフは通常公平であると見なされます。圧縮バージョンで送信する方法と静的コンテンツを事前圧縮する方法の両方があります。これには通常、より多くの構成が必要です。インターネット上の人々は注意力が短いため、CPUサイクルを使用して速度を向上させてユーザーエクスペリエンスを向上させることは、常に良い考えです。.

GZIP圧縮を使用する理由

http圧縮コンソールGZIP圧縮には、多くの利点があります。これらが何であるかを理解して、なぜそれを使い始める必要があるのか​​を十分に理解することが重要です.

平均して, GZIPを使用してCSSおよびHTMLファイルを圧縮すると、合計ファイルサイズの50〜70%を節約できます。. この大幅なファイルサイズの節約により、Webサイトのユーザーエクスペリエンスが大幅に向上し、効率が向上します。.

この手法は、Webサイトの全体的なSEOにおいても重要な役割を果たします。検索エンジンは、複雑なアルゴリズムを使用して、サイトとWebページが検索結果に含まれる場所を決定します.

アルゴリズムの更新ごとに重要になる要素の1つは、Webページの読み込み時間です。検索エンジンはこの情報を使用して、Webサイトの全体的な最適化を判断します.

gzip圧縮速度テストWebページがすばやく読み込まれると、サイトにアクセスするユーザーは、探しているコンテンツへのアクセスを待つ必要がなくなります。インターネットユーザーは注目の幅が短いことに注意してください.

Webページの読み込みに時間がかかりすぎる場合、ユーザーは離れた場所をクリックして、同様の情報を持つより高速なサイトを見つける可能性があります。. 検索エンジンは、より高速に読み込まれるウェブサイトに報酬を与えたいと考えています, 彼らは彼らにより高い検索結果の配置を与える.

ウェブサイトが高速になるほど、コンバージョンも増加します。これは、eコマースのウェブサイトを持っている場合、読み込みが速いほど売り上げが増えることを意味します。実際、アメリカ人の約51%が購入を断念する最大の理由は、遅いウェブサイトだと答えています。.

ケーススタディによると、ウェブサイトの読み込み時間をわずか2.2秒短縮することで、コンバージョン率を15%以上向上させることができます.

GZIP圧縮に関する問題のトラブルシューティング

すべてのテクノロジー要素と同様に、GZIP圧縮は、最小の理由で失敗する可能性があります。良いニュースは、失敗の理由のほとんどが修正可能であることです.

最初に確認する要素は、GZIP圧縮がWebホストでサポートされているかどうかです。ページ読み込みの重要性のため、ほとんどがサポートしていますが、互換性を確保するために気にしていない一部の人がいます。 Webホストに連絡して、GZIPの互換性が問題かどうかを判断できます.

探求する次の要素はあなたのコードです. 1つの間違った文字でも問題が発生する可能性があります. 欠落した文字、構文エラー、または不正なコードを探します。圧縮を成功させるには、すべてのコーディングがアーキテクチャと連携する必要があります.

PHPまたは.htaccessで入力したコードを確認できます(これについては上記で説明しました)。問題を見つけることができなくても、コードに問題があると思われる場合は、動作する可能性が高い別のコードと完全に交換することを検討してください。.

場合によっては、WebホストがGZIP圧縮を可能にする適切なファイルにアクセスできますが、そうではありません。この場合、ホストを呼び出して、これらを有効にするように依頼します.

この記事の前半で、GZIP圧縮のチェックについて学習しました。これは、トラブルシューティングのための迅速で簡単なオプションです。通常、これを最初に行うことをお勧めします。それでも何か問題がある場合は、Webホストに確認して、使用したコードを評価してください.

ブラウザが古くなっている場合, これもGZIP圧縮で問題を引き起こす可能性があります. これは、古いInternet Explorerバージョンで特に一般的です。あなたのサイトにアクセスする多くの人々が古いブラウザを使用している場合、これはあなたが取り組む必要があるかもしれない問題です.

サイト上のファイルが非常に大きい場合、これもGZIP圧縮に関する問題を引き起こす可能性があります。古いGZIPバージョンを使用している場合、ファイルサイズの制限は2ギガバイト以下など、比較的小さい可能性があります。このため、GZIPバージョンの制限を確認する必要があります。.

最善の方法の1つ 圧縮を有効にすることで、ウェブサイトのパフォーマンスと速度を向上させます. 方法がわかったので、メリットを最大限に活用できます.

注意事項に注意し、作業する際には注意してください。次のステップは、訪問者がメリットを享受できるようにセットアップすることです.

見落とされがちなWebサイトの速度係数は、Webホスティング会社の選択に関係しています。はい、それはあなたが選択する違いを生みます、なぜならあなたが時間をかけてデータをクランチするときにいくつかは単により良いパフォーマンスをするからです.

詳細については、私のガイドでウェブサイトの速度を向上させる方法をご覧ください.

参照と画像クレジット:

  • BetterExplained.com
  • OpenSourceVarsity.com
  • Geekeasier.com
  • WebPerformance.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map