モバイルパフォーマンス | サイトをモバイルフレンドリーにする方法

モバイルパフォーマンスが重要な理由とは？

webはモバイル化されています。Statistaによると、世界的なWebページビューの51％はモバイルデバイス上にあります。アジアやアフリカなどの一部の地域では、この割合ははるかに高いものです。いずれの場合も、この割合は年々着実に増加しています。

主要な検索エンジンはこの傾向を認識しているため、モバイルの読み込み時間が速いサイトを優先しています。モバイルユーザーは帯域幅が限られているとしても、それでも情報をすばやく見つけたいと考えています。これらのユーザーは我慢強さに欠けている傾向があり、読み込みが遅いサイトでは直帰率が高くなります。 （「直帰率」は、1ページだけを閲覧した後にサイトを離れるWebサイト訪問者の割合です）。

Googleおよび他のサイトの速度の権威は、モバイルサイトの最大読み込み時間は約3秒であるべきだと判断しました。 3秒後にユーザーの保持力は劇的に低下します。検索エンジンは、特にモバイルユーザー用の場合は、読み込みが遅いサイトを検索結果の下の方に表示することで、「処罰」を与えます。

モバイル接続を通した3秒の読み込み時間制限はあまり寛容ではありませんが、モバイル読み込み時間を抑えるための実証済みの戦略があります。

モバイルパフォーマンスの改善

モバイルパフォーマンスに影響する要因は多数あるため、数々の戦略とベストプラクティスによって読み込み時間を改善できます。

ファイルサイズとファイル数を最小限に抑える

読み込み時間を速くするには、すべてのWebサイトファイルをできるだけ小さくする必要があります。多くの場合、要求される最大のファイルは画像であり、画像オプティマイザーを使用するか、SVGなどの軽量の画像形式に変換することにより、それらを小さくすることができます。

自動縮小を通して HTML、JavaScript、およびCSSファイルもより小さくすることができます。コード縮小とは、コードからすべての空白とコメントを取り除き、可能な限りコンパクトな方法で再構築することです。これにより、ファイルサイズが最小限に抑えられます。これは、コードを実際的に人間には読み取れないようにしますが、Webブラウザはコードを正常に実行できます。

より小さいファイルサイズを作成することに加えて、全体のファイル数を最小限に抑える必要があります。 Webサイトの読み込みに必要な全ての追加ファイルは、追加の要求と応答を意味し、これらの往復は読み込み時間の増大の原因となります。複数のJavaScriptファイルとCSSファイルがあるサイトでは、すべてのJavaScriptコードを1つのファイルに統合し、CSSでも同じようにする必要があります。 JavaScriptやCSSをほとんど必要としないページの場合は、インラインスタイル*を使用すると、読み込み時間が大幅に改善されます。

*通常、Web開発者は異なるファイルにHTML、JavaScript、およびCSSコードを記述します。開発者は、「インラインスタイル」と呼ばれる手法を使用して、JavaScriptやCSSコードをHTMLと同じファイルに記述できます。

エッジのキャッシュリソース

通常、ユーザーがWebサイトを訪問すると、ユーザーのデバイスはWebサーバーと通信してWebサイトファイルを取得する必要があります。もしもWebサーバーがサンフランシスコにあり、ユーザーがバークレー（10マイル離れた場所）にいる場合、これは非常に高速であるべきです。しかし、ユーザーが東京（5,000マイル離れた場所）にいる場合はどうでしょうか？つまり、それぞれの要求と応答は何千マイルも移動する必要があり、Webサイトの読み込みに大幅な遅延が追加されます。

この問題を軽減する一般的な方法は、コンテンツ配信ネットワーク（CDN）を利用することです。グローバルCDNは、ネットワークエッジにコンテンツをキャッシュします。つまり、CDNには世界中のデータセンターに存在するキャッシュサーバーがあります。インターネットにアクセスできる人なら誰でも、データセンターからそこまで離れていることはありません。これらのデータセンターのサーバーは、元のWebサーバーと通信してWebサイトデータをキャッシュできるため、CDNを利用するWebサイトにアクセスするユーザーは、地元のデータセンターからWebサイトファイルを取得できます。これにより、場所に関係なく、ユーザーの迅速な要求と応答時間が保証されます。

キャッシュAPIコール

APIコールは、外部リソースからデータを取得するHTTPリクエストです。たとえば、Rotten Tomatoesなどの映画レビューサイトは、FandangoなどのチケットサービスへのAPIコールを行って、Rotten Tomatoesを閲覧しているユーザーが地元の映画の上映時間を見れるようにします。APIコールは、堅牢な体験の作成と冗長な作業の削減に役立ちますが、新しいHTTPリクエストも作成するため、読み込み時間が遅くなります。

これらの追加のHTTPリクエストを最小限に抑えるために、APIコールをキャッシュできます。上記の映画の上映時間の例では、Rotten Tomatoesはロサンゼルスの映画の上映時間を1日に1回取得するだけで済みます。このAPIコールを1日に1回キャッシュするようにサイトを構成できます。このようにして、毎日10,000人のロサンゼルスのユーザーがRotten Tomatoesにアクセスした場合、それらのユーザーの最初の1人のみがFandangoへのAPIコールを待つ必要があります。

可視コンテンツの優先

Webページを読み込むときにユーザーが最初に見るものは、氷山の一角に過ぎません。残りのページを表示するには、下にスクロールする必要があります。スクロールする前にユーザーの画面に表示されるコンテンツは、「アバブ・ザ・フォールド（スクロールしないで見ることができる画面領域）」コンテンツと呼ばれます。Web開発者は、アバブ・ザ・フォールドコンテンツが常に最初に読み込まれるようにコードを記述する必要があります。これを実現する1つの手法は遅延読み込みと呼ばれ、ユーザーがページを下にスクロールするときにビロウ・ザ・フォールド（スクロールしなければ見られない画面領域）コンテンツを動的に読み込むことで機能します。

リダイレクトの回避

さまざまな理由で、いくつかのWebサイトはページの読み込み時にリダイレクトを作成します。たとえば、301リダイレクトは、名前変更またはブランド変更されたWebサイトで一般的に使用されます。リダイレクトは貴重な読み込み時間を消費するため、この方法は可能な限り避けるべきです。

まとめ

モバイルブラウジングがWebを支配するにつれて、高性能なモバイルサイトを持つことがますます重要になります。迅速なモバイルサイトは、エンゲージメントの向上とコンバージョン率の向上に加えて、SEOの向上という見返りを得ます。Webサイトの所有者は、上記の戦略の一部またはすべてを実装して、これらの利点を享受する必要があります。