ウェブサイトの速度とユーザーエクスペリエンスを最適化するにはどうすればよいでしょうか?

ウェブサイト運営者の最も重要な仕事の 1 つは、ウェブサイト訪問者の体験が可能な限りスムーズになるようにすることです。 特にモバイル デバイスからのトラフィックが増加し続けているため、ホームページの読み込みにかかる時間などの要素は重要な考慮事項となります。 読み込みに時間がかかりすぎると、Web サイトはすぐに多くの訪問者を失うことになります。 速度を最適化するには、Web サイトのパフォーマンスを念頭に置く必要があります。定期的にパフォーマンスの改善に取り組むと、訪問者がサイトに長く滞在し、より多くのページを閲覧していることにすぐに気付くでしょう。 ウェブサイトのパフォーマンスを向上させると、検索エンジンにとってより魅力的になるという追加のメリットもあり、最終的にはランキングの向上というメリットが得られます。

ウェブサイトの読み込み時間に影響を与える要素が何なのか知りたい場合は、ここが最適な場所です。 この記事では、ウェブサイトの速度を低下させる一般的な要因について説明します。サイトの速度が実際に影響を受けている場合は、改善できる解決策について説明します。

サーバーホスティング

まず、自分自身に問いかけてください。現在のホスティング プラットフォームは、Web プロジェクトの要件を満たしていますか? ほとんどの Web サイト運営者は、ホストを選択する際にコストを節約したいと考えており、最も安価なオプションを選択する傾向があります。 しかし、これはサーバーのパフォーマンスと容量を犠牲にすることになります。 倹約することには欠点もあります。たとえば、プラットフォームにはすべてのユーザー リクエストを処理するために必要な帯域幅が不足している可能性があります。 安価なホスティング ソリューションでは、複数の当事者が 1 つのサーバーを共有するため、特定の Web サイトの成長や訪問者数の増加に対応できません。 もう一つのよくある間違いは、ウェブサイトを海外にあるサーバーでホストすることです。これにより、ウェブサイトの読み込み時間が長くなる可能性があります。

何をするか：

無制限のウェブスペースと帯域幅を備えた柔軟なホスティングソリューションを使用する

ユーザーの大半と同じ国にあるサーバーのみをレンタルする

海外の視聴者にリーチする予定の場合は、CDNコンテンツ配信ネットワークを使用してください。

独自のホスティングを管理して、プロジェクトのニーズに合わせて拡張できます

HTML、CSS、JavaScript

訪問者が Web サイトにアクセスすると、ブラウザはサーバーから HTML ファイルを要求し、含まれている CSS フォーマットに従って表示します。 バナーやニュースなどの統合された JavaScript 要素にも同じことが当てはまります。 ファイルのサイズと、読み取りおよび変換が必要なコードの量によっては、読み込みプロセスに長い時間がかかる場合があります。 動的な Web サイトにはデザインシートとスクリプトを含めることが不可欠です。Web サイトの速度を上げるために CSS と JavaScript を放棄することは選択肢になりません。 したがって、主にウェブサイトのコードの最適化に重点を置く必要があります。

何をするか：

CSSでは実現できないタスクにはHTMLのみを使用する

CSS と JavaScript には別々のファイルを使用し、特別な場合にのみ HTML ページに CSS と JavaScript コードを含めます (JavaScript は常にドキュメントの最後、body 要素の終了前に配置する必要があります)。

コード ファイルを結合して縮小する (CSS の縮小についての詳細)

WebAssemblyなどの最新のプログラミング技術を使用する

画像と外部コンテンツ

マルチメディア コンテンツは、優れた Web サイトの重要な部分です。 デザインやレイアウトと同様に、タグは Web サイトの外観と雰囲気を決定づけ、本文の構造化と文脈化に役立ちます。 特に電子商取引では、高品質の画像を使用して商品を宣伝することが重要です。 画像や写真を追加するたびに、読み込み時間が長くなります。特に、自分のサーバーではなくリモート サーバーに保存されている場合は、読み込み時間が長くなります。 音楽、ビデオ、PDF などの他のメディア ファイルにも同じことが当てはまります。

何をするか：

外部サイトから読み込む要素をできるだけ少なくする

不要な画像や動画などは避けてください。

ツールを使用して画像を圧縮する

外部サーバーへの画像のアウトソーシング

画像の幅と高さを指定します（指定しない場合はブラウザが寸法を計算します）

SVGアイコン（スケーラブルベクターグラフィックス）を使用する

jQuery プラグイン Lazy Load を使用します。これは、画像が表示範囲を超えた場合に画像の読み込みを停止します (訪問者が画像までスクロールしたときにのみ読み込みが開始されます)。

より効率的な画像フォーマットWebPを使用する

キャッシュ

多くのウェブサイトはキャッシュを放棄しているために遅くなります。 しかし、一部のウェブサイト所有者が気づいていないのは、適切に構成されたキャッシュが、ほとんど労力をかけずにサイトを最適化できるということです。 これは、キャッシュされたコンテンツはクリックごとに Web サーバーによって呼び出される必要がないため、ページの読み込みが大幅に高速化されるためです。 また、処理するリクエストが少なくなるため、Web サーバーの負担も軽減されます。 JavaScript や CSS ファイル、画像、ドキュメントなどのすべての静的要素をキャッシュできます。 ここでは、キャッシュを保持する期間も定義できます。

何をするか：

訪問者のブラウザをキャッシュとして使用します。Apache Web サーバーで「mod_expires」モジュールを有効にし、対応するファイル タイプがキャッシュに保持される期間を定義します。残りはそれぞれのユーザーのブラウザによって実行されます。

リバース プロキシ サーバーを設定し、キャッシュとして使用します。 あるいは、グローバルに分散されたリバースプロキシサーバーのネットワーク全体にアクセスできるコンテンツ配信ネットワークを使用することもできます。

Memcachedなどのキャッシュソフトウェアを使用して動的コンテンツを一時的にメモリに保存すると、データベースへのアクセスを最小限に抑えることができます。

ウェブサイト最適化のヒントとコツ

ウェブサイトのパフォーマンスを最適化する上記の方法に加えて、読み込み時間を最小限に抑えるために実行できる小さな手順が多数あります。 これらには以下が含まれます:

リダイレクトを最小限に抑える

HTML文書での文字エンコーディングの指定

誤ったコンテンツを削除する

CMSでプラグインを使いすぎないようにする

クッキーで収集される情報の制限

ウェブサイトのアイコンを使用する（ブラウザは常にウェブサーバー上の favicon.ico ファイルを検索するため）

HTTP/2を有効にする

ウェブサイトの高速化にこれらのツールのいずれかをまだ使用していない場合は、競争に遅れを取らないために今すぐ使い始める必要があります。 2017 年の Google の調査によると、読み込みに 10 秒以上かかると、ユーザーがモバイル サイトを放棄する可能性が 123% 高くなります。 ページの読み込みに 5 秒以上かかると、ページが放棄される可能性が 90% 増加します。 したがって、ウェブサイトの速度は最優先事項である必要があります。

読み込み時間が遅いために潜在的な顧客を失いたくない場合は、モバイル時代の成功に向けて Web サイトを最適化する必要があります。