LoadView

ウェブサイトの速度を上げるための15のヒント

| パフォーマンステスト, 技術のヒント

ウェブサイトのスピードの重要性

  • 訪問者の保持。 ページの読み込みに時間がかかるほど、ユーザーがバウンスする可能性が高くなります。
  • グーグル検索エンジンランキング。 Google は 、検索エンジンのランキングを決定するために使用される多くのランキング信号の 1 つとしてページの読み込み速度を考慮に入れています。
  • 競合他社を打ち負かす。 ウェブサイトが競争よりも一貫して速く読み込まれている場合、ユーザーは遅いサイトに手を差し伸べるよりもあなたに固執する可能性が高くなります。
  • ユーザー エクスペリエンスの向上。 遅いウェブサイトでユーザーの不満を避け、最適化されたユーザーエクスペリエンスを提供します。
    ウェブサイトのスピードアップ

    今日のインスタントオンの世界では、スピードがすべてです!

ウェブサイトのパフォーマンスを最適化する方法

ここでは、ウェブサイトの速度を最適化するためにできることのリストを示します。 これらのテクニックの多くは、以下に示す CSS スプライトの使用など、追加の知識が必要になる場合があります。 ここではホイールを再発明したくありませんが、少しGoogle-fu(あなたが慣れていないキーワードや実装する最善の方法を知りたいキーワードをGoogleで検索)でオンラインチュートリアルを見つけることができます。 始めましょう。

    1.  

     

      1. ホスティング速度は不可欠です。 地球上で最も最適化されたコードを持つことができますが、ラグタイムが大幅に増加し、最初のバイト(TTFB)までの時間が遅い2流のプロバイダをホストしている場合、最適化の取り組みはほとんど無駄になります。 メトリック・ベースのパフォーマンス・テストを実行して、最速の Web ホストを判別します。 パフォーマンス監視 は、ホスティング会社がスピードアップしていることを確認するために、後で設定することができます。

     

      1. ページに必要な要求の数を制限します。 ユーザーがブラウザからサーバーに要求を送信するたびに、貴重なミリ秒数が失われます。 多数の画像ファイルの代わりに 1 つの CSS スプライト ファイルなどの要素を単一のファイルに統合することで、ブラウザが行う要求の数を制限できます。

     

      1. CSS スプライト ファイルを生成します。 サイト上のページごとに数十の画像をダウンロードするのではなく、CSS スプライトファイルは 1 回のダウンロードしか必要としないでください。 これにより、メニュー、丸い枠線、背景画像など、より小さな画像を多く持つ必要がなくなります。 CSS スプライト ファイルの本質は、サイトのすべての画像を 1 つの PNG ファイルにスタックし、CSS 内の各イメージの場所への参照を作成することです。 ここで、画像を表示する必要がある場合は、div タグ内の CSS クラスを呼び出すだけです。

     

      1. 可能な限り CSS を使用してください。 インラインスタイル、画像、その他のコンテンツをウェブサイト上の複数のページで共有できます。

     

      1. CSS リクエストが 1 つだけになるようにスタイルシートを統合します。 スタイル シートをダウンロードすると、スタイル関連のアイテムに対する今後の要求がなくなります。
        1 サイトに 1 つのスタイル シートの規則に対して可能な例外の 1 つは、対話する時間を最適化する場合、または “折り目の上” コンテンツです。 ページの読み込みに時間がかかりすぎるとユーザーがバウンスする心配がある場合は、ページの上部に表示されるコンテンツに対して、サイトとの対話を開始できるコンテンツに優先順位を付ける必要があります。 この場合、1 つの CSS ファイルを読み込んで、折り曲げコンテンツの上に正しく表示し、2 番目の CSS ファイルを読み込んでページ上の他のすべてを最適化します。

     

      1. コンテンツ配信ネットワーク (CDN) を使用します。 CDN は、Web サイトのコンテンツ、特にサイズの大きい画像、ビデオ、メディア ファイルをエンド ユーザーにできるだけ近づけます。 Web サーバーから要素を呼び出すユーザーは、すべてではなく、地理的な場所に近いデータ センターで数ホップだけホストされている CDN サーバーからこれらの要素をダウンロードします。
        複数のドメインを使用しない限り、複数のドメイン (ベース ドメインや CDN など) 間で要素を分割すると、ブラウザでの同時並行ダウンロードが最大化されます。 その時点で、DNS ルックアップのコストがユーザーに対してカウントされ始めます。

     

      1. サイトで必要な DNS 参照の数を最小限に抑えます。 一意のドメインによってホストされるすべての要素は、ロード時間に秒を追加することができ、追加のルックアップが必要な場合があります。 関連ドメイン (www.example.com や css.example.com など) に対する要求でも、追加の検索が必要です。 CDN を使用することを推奨した後に直感的に聞こえる場合は、幸せなメディアが必要だからです。 参照される追加ドメインの数を制限するだけです。 極端なオプティマイザーは、各ドメインに呼び出すため、すべてのソーシャルメディアボタンを排除するところまで行きます。

     

      1. ファイルの保存期間、有効期限、および Etag に基づいて、サーバーでブラウザーのキャッシュが許可されていることを確認してください。 つまり、会社のロゴなど、ブラウザが最近サーバーからダウンロードしたコンテンツは、有効な限り再度ダウンロードされません。 また、ブラウザのキャッシュを利用するために、各要素に適切な TTL またはファイルの保存時間があることを確認します。

     

      1. ページの下部に JavaScript を移動します。 これにより、より大きな JavaScript ファイルの読み込みを待機する前に、コンテンツが読み込まれるようになります。

     

      1. オプションがある場合は、できるだけ多くの JavaScript プラグインを統合または削除します。 訪問者がウェブサイトをどのように利用しているかについてのデータを収集することは素晴らしいことですが、そのデータを収集するスクリプトがサイトの速度を低下させ、ユーザーエクスペリエンスに悪影響を及ぼすのは望ましくないでしょう。 Web サイトに新しいプラグインを追加する場合は、既存のプラグインの機能を複製していないことを確認し、既存のプラグインを削除します。

     

      1. サイトで圧縮を利用します。 gzip を使用すると、サーバーからブラウザに送信するファイルの合計サイズが大幅に減少します。 圧縮によって帯域幅の使用量が 70% 以上減少することがよくあります。

     

      1. ページに必要な最小の画像サイズのみを送信して、ファイルサイズを最適化します。 ページに必要なピクセル サイズにする画像を編集します。 画像のファイル形式を選択する場合は、TIF や BMP ではなく PNG または JPEG を使用します。 TinyPNGなどのイメージ圧縮ツールを使用します。 画像をサイトに配置する前に、画像のファイルサイズを縮小する優れたツールです。 また、画像上の空のソースタグを避けます。 空のタグを指定すると、ブラウザはサーバーに追加の要求を送信します。

     

      1. コードを小さくします。 ページが完成したら、ミニアーをコードで実行します。 Google のバージョン (https://developers.google.com/speed/docs/insights/MinifyResources) は、空きスペースや空行などの不要なコードをすべて削除し、ファイルサイズの KB を保存します。

     

      1. データベースを最適化します。 サイトで動的コンテンツをホストするためにデータベースを使用している場合は、データベースに適切なインデックスが作成されていることを確認します。 データベースにインデックスが作成されたら、データベースへの呼び出しの数を最小限に抑えます。 たとえば、サイトがデータベースから結果を取得して一覧製品を表示する場合、結果のサブセットにドリルインする際に追加のクエリを送信するのではなく、クエリの結果を再利用します。

     

      1. サイトの破損した要求を毎日監視します。 サーバー上またはサード パーティから、存在しなくなった要素を指すコードがサイトに含まれている場合は、404 エラーを送信して待機する時間を不必要に浪費しています。

     

      1. ボーナスヒント! 異 なるモバイルプラットフォームを含む異なるブラウザで、サイトの互換性を定期的にテストします。 モバイル訪問者は、ブラウザ市場を支配し始めています。 デスクトップの前にモバイルでサイトをテストすることに集中します。

    以下の手順に従うことで、Web ページの読み込み速度を最適化し、Web サイトの使いやすさを高めることができるはずです。 サイト訪問者の注意を引くためにコンテンツの品質を確保することはあなた次第です!

    ウェブサイトの速度テストを実行して、世界中からウェブサイトがどのように機能しているかを明確に把握できるだけでなく、Google ページの速度分析ツールは、Web ページを分析し、この記事に記載されている多くの最適化を実行する方法を提案するのに最適です。 Yslowプラグインは、ウェブページを最適化するための追加の方法を見つけるための素晴らしいツールでもあります。