モバイルサイトの読み込み速度を早める10のヒント

あなたは日頃から、モバイルサイトの読み込み速度とパフォーマンスのテストを行っていますか？

読み込みの遅いWebサイトをユーザーは好みません。Wifi環境でデスクトップを使用するのと同じ感覚で、スマートフォンの3G環境でも素早く読み込めるようにするのが理想です。

この記事では、モバイルサイトの読み込み速度を早めるためにすぐに実践できる10のヒントをご紹介します。

1. 画像を最適化する

Webサイトの読み込み速度を遅くする大きな要因のひとつに、画像サイズがあります。ページ毎のダウンロードデータのほとんどを占めるのは、画像です。画像のフォーマットを整え軽量化することで、必要なバイト量をぐっと削減できます。

画像は、アップロードする前に必ず圧縮をしましょう。必要なサイズに合わせて画像をクロップし、Web用のフォーマットで保存をしてからCMS（ブログ）にアップロードするのがおすすめです。

ファイルサイズを出来るだけ削減するために、こちらの記事にまとまっている画像圧縮ツールを使い、画像サイズを最適化してみてください。

2. ホスティング先を検討する

速度の遅いホスティングは見落としやすい問題です。安価なホストはいくらでも存在しますが、どのWebサイトにも適している訳ではありません。Webサイトの成長に合わせて、ホスティングプランを変更する必要があります。

読み込みが速いホスティングプランにするために、専用のサーバーオプションを検討しましょう。より安価にすませたい場合は、専用のサーバーリソースを介したVPSホスティングもおすすめです。

ビデオなど、読み込みを遅くするコンテンツにも注意しましょう。動画ファイルは、YouTubeなど外部ツールを使用したホスティングがおすすめです。あなたのサイトに直接ファイルを挿入することなく、動画コンテンツを貼り付けられます。

3. JavaScriptの使い方には気をつける

Webサイト上で頻繁に使用されるJavaScriptですが、取り入れる際はモバイルユーザーに気を配る必要があります。以下のポイントに気をつけましょう。

• JavaScriptはファイルの最後に置く
  JavaScriptを読み込む間は、ブラウザーは他の要素を読み込めません。JavaScriptのコードは、出来るだけページの最後に配置するようにしましょう。こうすることで、HTMLコンテンツが先にレンダリングされます。
• 最適化、軽量化する
  ファイルが小さいほど素早い読み込みが可能です。JavaScriptのコードはできるだけシンプルにするよう心がけましょう。
• 非同期のJavaScriptを使用する
  重要度の低い要素の最初のレンダリングが終わるまで、非同期のJavaScriptを使用しましょう。こうすることで、一気にスクリプトの読み込みができるようになります。

4. 遅延読み込みを使用する

ページの読み込みは、コードの頭からお尻の順に行われるのが通常です。対して遅延読み込みは、スクリーンにまずコンテンツを読み込み、その後に他の要素を読み込む、という手法をとっています。

遅延読み込みを簡単に実装できるWordPressのプラグインは数多く存在します。Lazy LoadやWP Rocketを試してみると良いでしょう。

5. キャッシングを利用する

キャッシングを使用することで、頻繁にリクエストされるファイルを一定期間デバイスのブラウザに保存できます。

キャッシングをオンにして、より効率的なページの読み込みを提供しましょう。

6. リダイレクトを削減する

あなたのWebサイトに、どれほどのリダイレクトがあるかご存知ですか？リダイレクトは非常に便利ですが、読み込み速度を遅くする要因にもなります。リダイレクトは必要最小限にとどめましょう。

特に、古いページから新しいヴァージョンに飛ぶ301リダイレクトは、Webサイトを非常に重くします。コンテンツの優先度を考え、リダイレクトを整理しましょう。Varvy’s Redirect Mapperの使用が便利です。

7. AMP（Accelerated Mobile Pages）を使用する

AMPはGoogleが推奨するオープンソースのイミテーションで、モバイルデバイス上で素早いページの読み込みを可能にする規格です。

AMPバージョンのランディングページを作成し、この新しいテクノロジーを試してみてください。これらのページはAMP HTMLフォーマットとAMP JavaScriptを使用しているため、オンライン広告やユーザーに特定のロケーションを送るタイプのWebサイトに適しています。

バックエンド側で多少工夫する必要がありますが、AMPのページはモバイルページの読み込み速度に大きな恩恵をもたらすでしょう。

8. タップディレイ（Tap Delay）を削除する

モバイルデバイス上でスクリーンをタップしてからアクションが起こるまで、多少のタイムラグがあることに気づいていますか？

これは、ダブルタップを認識するためにデフォルトで備わっている機能ですが、設定を変更することも可能です。ページのヘッダーに、以下のコードを追加しましょう。

<meta name="viewport" content="width=device-width">

このコードを導入することでユーザーがスクリーンをタップすると即座に反応するようになり、パフォーマンスが大幅に向上します。

9. PWA（プログレッシブ ウェブアプリ）を試す

あなたのWebサイトが多くのインタラクティブでダイナミックなコンテンツを多く含む場合は、PWA（プログレッシブ ウェブアプリ）を試すと良いでしょう。PWAは、ネイティブアプリのように機能するWebサイトのことを指します。

PWAが優秀なのは、通常のWebサイトのように検索が可能で、かつインストールやアップデートが必要のない点です。キャッシングを使用するため読み込みが非常に早いのも強みです。

PWAはディベロッパー専用のオプションであり、Webサイトビルダーには難しいかもしれませんが、一度は挑戦してみることをおすすめします。

10. 不要なプラグインを削除する

機能的なWebサイトを作成するのに、プラグインは非常に便利なツールです。一方で、必要のないプラグインがバックグラウンドで作動していると、Webサイトが重くなってしまうのも事実です。本当に必要なプラグインのみ使用し、それ以外はオフにするか、削除してしまいましょう。使用しているプラグインの定期的なアップデートも重要です。

また、フォントのインスタレーションやヘッダータグの挿入、サイトの分析機能など、コードで解決できるプラグインは削除すべきでしょう

まとめ

いかがでしたか？

この記事で紹介した10のポイントに注意して、あなたのモバイルサイトの読み込み速度を向上させましょう。

（原文：ARRIE COUSINS 　翻訳：Mariko Sugita）

あわせて読みたい！▼