あなたのウェブサイトの読み込みをスピードアップする6つの方法

公開: 2021-08-19

あなたのウェブサイトは世界で最も美しいサイトかもしれませんが、それがロードするのに永遠にかかるならそれはあなたに良くありません。 それに直面しよう。 人々はせっかちであり、遅いウェブサイトは潜在的な顧客が彼らの購入を完了するのを妨げます。

私がオンラインショッピングに行くとき、私はページが最悪の場合5-10秒以内にロードされることを期待しています。 それより長くなると、私は腹を立てるか、店を完全に去ります。

確かに、私よりも辛抱強い人もいるかもしれませんが、なぜチャンスをつかむのですか？ それを安全にプレイし、あなたのビジネスのウェブサイトをできるだけ速くしてください。

slow

Meddygarnetによる写真

ただし、始める前に、最初に決定する必要があるのは、どれだけ速いかということです。 Webサイトの最適化のこの範囲は、Web訪問者の分析と人口統計に大きく依存します。

たとえば、妻と私が最初にオンラインストアを立ち上げた3年前、顧客の35％以上がダイヤルアップを使用していました。 その結果、ダウンロード率が56Kであると仮定して、活発なショッピング体験を提供するために、Webサイトのデザインを大幅に削減する必要がありました。

現在、ダイヤルアップを使用しているのはお客様の2％のみであるため（よろしくお願いします）、ユーザーエクスペリエンスに影響を与えることなくマルチメディアコンテンツを安全に追加できます。

特定のページの最大サイズを決定するために、私は通常5秒にWeb訪問者の加重平均帯域幅を掛けます。 たとえば、ほとんどの訪問者がDSLを使用している場合、1Mビットのダウンロード速度を想定し、5Mビットが特定のWebページの最大サイズであると判断する場合があります。

これは正確な科学ではありません。 最終的に、あなたはあなた自身のためにあなたのウェブサイトがどれくらい速くなければならないかを決める必要があります。

ただし、すべての場合において、常に速い方が良いです。 前回の投稿で触れたように、ウェブサイトの速度は必ずしもウェブホストの機能ではありません。 実際、ほとんどの場合、ウェブマスターは遅いサーバーではなく、遅いウェブサイトのせいになっています。 この記事では、物事をスピードアップする方法に関するいくつかのヒントについて説明します。

最も重要なものを決定し、読み込みを並べ替えます

あなたのウェブサイトをより速くすることは必ずしも画像とコンテンツを切り取ることについてではありません。 時々、あなたはあなたのサイトがそのままで好きで、何も変えたくないと思うかもしれません。

これが事実であり、あなたのウェブサイトが遅い場合、あなたはしばしばあなたのページがロードされる方法を単に優先することで逃げることができます。

ユーザーに最初に何を見せたいですか？ ほとんどの場合、重要なものが最初に読み込まれ、綿毛が後で終了する限り、訪問者は遅いサイトを気にしません。

たとえば、MyWifeQuitHerJob.comでは、広告が表示される前に、ジューシーなコンテンツがすべて最初に表示されることを常に確認しています。 そうすれば、広告の読み込みが少し遅い場合でも、ブログ全体が下にドラッグされることはありません。

Webページは常に順番に読み込まれるため、読み込みたいものを最初にページの上部に配置し、重要度の低いものをhtmlドキュメントの最後に配置する必要があります。

ページの特定の位置に表示する必要がある要素の場合は、javascriptまたはcssを使用してロード順序を制御できます。

たとえば、私の728×90のリーダーボード広告がMyWifeQuitHerJob.comの最上部に表示されていても、次の手順を実行して、最後に読み込まれるようにします。

  • 広告があるべき場所に空の<divid =” banner728″>を作成し、そのIDを「banner728」に設定します。 これにより、空白のプレースホルダーが効果的に作成され、後でjavascriptを使用して読み込むことができます。
  • ページの最後に、次のjavascriptスニペットを含めます
    <script type =” text / javascript”>
    document.getElementById（ "banner728"）。innerHTML = "目的の広告バナーコード";
    </ script>
    このコードは、上記で設定したプレースホルダー「banner728」を見つけて、広告バナーを<div>に挿入します。 このスクリプトはファイルの最後にあるため、他のすべての後に最後にロードされます。

HTML画像のサイズ変更を使用しないでください

多くの初心者が犯すよくある間違いは、画像の縮小とサイズ変更をhtmlに依存することです。 この手法は機能し、無害に見えますが、Webサイトのパフォーマンスを完全に低下させます。

その理由は、はるかに小さい画像しか表示していない場合でも、表示する前に元の画像全体をロードする必要があるためです。

この罠に陥らないように、サイトに表示する前に、時間をかけて画像を目的のサイズに縮小してください。 デジタルカメラから直接画像を引き出すだけではいけません。

画像を最適化する

コンピューターのモニターでスタンドアロンの画像を見ると、人間の目ははるかに画質に寛容です。 したがって、あなたはあなたのウェブサイトのためにはるかに低品質の画像で逃げることができます。

ページに表示する前に、画像をできるだけ最適化および縮小してください。 私は自分のサイトの画像でPhotoshopを使用して50％以下のJPEG品質を選択することがよくあります。

GIFを使用している場合は、実際に必要なサイズよりも大きなカラーパレットを使用していないことを確認してください。 16色しか使用できない場合は、16色パレットのみを使用してGIFを選択してください。

すべてのGIFを分析して、重複によって無駄になっているカラースロットがないことを確認します。

サードパーティでビデオと大きな画像をホストする

あなたが強力なサーバーのセットであなたのウェブサイトをホストしていない限り、リッチマルチメディアコンテンツはあなたのサイトを這うように遅くします。 一般に、ストリーミングをより適切にサポートするより堅牢なインフラストラクチャを備えたサードパーティのサービスでビデオや大きなファイルをホストする方がはるかに経済的です。

たとえば、自分のサーバーでビデオをホストする代わりに、YouTubeやVimeoを使用してみませんか？ 作成したコンテンツを所有したい場合は、AmazonのS3などのサービスを有料で使用することもできます。 大きな男の子のために高帯域幅のコンテンツを残します。

サードパーティのコードやホットリンクされた画像の使用は避けてください

画像をホットリンクしたり、別のサーバーでホストされているコードを活用したりすると、Webサイトの速度が危険にさらされます。 サードパーティのサーバーが遅いかダウンしている場合は、自分のWebサイトもダウンする可能性があるため、サードパーティのコードの使用を最小限に抑えることが重要です。

さらに、サイトがサードパーティのサーバーにアクセスするたびに、DNSルックアップを行う必要があります。これは、ネットワークの輻輳によってはかなりの時間がかかる場合があります。

数百ミリ秒の遅延はそれほど多くないように思われるかもしれませんが、10の異なるサーバーからコードをプルしている場合、これらのルックアップは最大数秒の遅延を追加する可能性があります。

キャッシングと圧縮を活用する

ほとんどのウェブサイトの大部分はテキストであり、テキストは非常によく圧縮されています。 そのため、サーバーで圧縮を有効にすると、ダウンロード時間を最大75％短縮できます。

残念ながら、すべての共有Webホストでサーバーの圧縮が有効になっているわけではありません。 ウェブサイトが共有ウェブホスト上にある場合は、サーバーがmod_deflateまたはmod_gzipをサポートしているかどうかを必ず確認してください。

サーバーで圧縮がサポートされている場合は、この記事で概説されている手順に従って、Webサイトで圧縮が有効になっていることを確認してください。 WordPressを使用している場合、WP-SuperCacheプラグインはすでに圧縮を処理しています。

圧縮に加えて、Webサイトで一般的にアクセスされるページをキャッシュすることにより、サイトを高速化できます。 私たちのオンラインストアでは、実際にこれをさらに一歩進めて、頻繁に変更されないトラフィックの多いWebページ用の静的ページを作成します。

スピードの問題

おそらく、誰かがあなたのWebサイトを自分のWebサイトよりもはるかに遅い接続で表示している可能性があります。 そして、あなたは常にあなたのオンラインビジネスの潜在的な利益を最大化するために最小公分母を説明する必要があります。

私たちのオンラインストアにまだダイヤルアップの顧客がいるのを見て、私はかなりショックを受けました！ 私がまだそれらを持っているなら、あなたもそうかもしれません。