「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
あなたは日頃から、モバイルサイトの読み込み速度とパフォーマンスのテストを行っていますか?
読み込みの遅いWebサイトをユーザーは好みません。Wifi環境でデスクトップを使用するのと同じ感覚で、スマートフォンの3G環境でも素早く読み込めるようにするのが理想です。
この記事では、モバイルサイトの読み込み速度を早めるためにすぐに実践できる10のヒントをご紹介します。
目次
Webサイトの読み込み速度を遅くする大きな要因のひとつに、画像サイズがあります。ページ毎のダウンロードデータのほとんどを占めるのは、画像です。画像のフォーマットを整え軽量化することで、必要なバイト量をぐっと削減できます。
画像は、アップロードする前に必ず圧縮をしましょう。必要なサイズに合わせて画像をクロップし、Web用のフォーマットで保存をしてからCMS(ブログ)にアップロードするのがおすすめです。
ファイルサイズを出来るだけ削減するために、こちらの記事にまとまっている画像圧縮ツールを使い、画像サイズを最適化してみてください。
速度の遅いホスティングは見落としやすい問題です。安価なホストはいくらでも存在しますが、どのWebサイトにも適している訳ではありません。Webサイトの成長に合わせて、ホスティングプランを変更する必要があります。
読み込みが速いホスティングプランにするために、専用のサーバーオプションを検討しましょう。より安価にすませたい場合は、専用のサーバーリソースを介したVPSホスティングもおすすめです。
ビデオなど、読み込みを遅くするコンテンツにも注意しましょう。動画ファイルは、YouTubeなど外部ツールを使用したホスティングがおすすめです。あなたのサイトに直接ファイルを挿入することなく、動画コンテンツを貼り付けられます。
Webサイト上で頻繁に使用されるJavaScriptですが、取り入れる際はモバイルユーザーに気を配る必要があります。以下のポイントに気をつけましょう。
ページの読み込みは、コードの頭からお尻の順に行われるのが通常です。対して遅延読み込みは、スクリーンにまずコンテンツを読み込み、その後に他の要素を読み込む、という手法をとっています。
遅延読み込みを簡単に実装できるWordPressのプラグインは数多く存在します。Lazy LoadやWP Rocketを試してみると良いでしょう。
キャッシングを使用することで、頻繁にリクエストされるファイルを一定期間デバイスのブラウザに保存できます。
キャッシングをオンにして、より効率的なページの読み込みを提供しましょう。
あなたのWebサイトに、どれほどのリダイレクトがあるかご存知ですか?リダイレクトは非常に便利ですが、読み込み速度を遅くする要因にもなります。リダイレクトは必要最小限にとどめましょう。
特に、古いページから新しいヴァージョンに飛ぶ301リダイレクトは、Webサイトを非常に重くします。コンテンツの優先度を考え、リダイレクトを整理しましょう。Varvy’s Redirect Mapperの使用が便利です。
AMPはGoogleが推奨するオープンソースのイミテーションで、モバイルデバイス上で素早いページの読み込みを可能にする規格です。
AMPバージョンのランディングページを作成し、この新しいテクノロジーを試してみてください。これらのページはAMP HTMLフォーマットとAMP JavaScriptを使用しているため、オンライン広告やユーザーに特定のロケーションを送るタイプのWebサイトに適しています。
バックエンド側で多少工夫する必要がありますが、AMPのページはモバイルページの読み込み速度に大きな恩恵をもたらすでしょう。
AMPとは?モバイルページのパフォーマンスを上げる秘密とその歴史
Workship MAGAZINE
モバイルデバイス上でスクリーンをタップしてからアクションが起こるまで、多少のタイムラグがあることに気づいていますか?
これは、ダブルタップを認識するためにデフォルトで備わっている機能ですが、設定を変更することも可能です。ページのヘッダーに、以下のコードを追加しましょう。
<meta name="viewport" content="width=device-width">
このコードを導入することでユーザーがスクリーンをタップすると即座に反応するようになり、パフォーマンスが大幅に向上します。
あなたのWebサイトが多くのインタラクティブでダイナミックなコンテンツを多く含む場合は、PWA(プログレッシブ ウェブアプリ)を試すと良いでしょう。PWAは、ネイティブアプリのように機能するWebサイトのことを指します。
PWAが優秀なのは、通常のWebサイトのように検索が可能で、かつインストールやアップデートが必要のない点です。キャッシングを使用するため読み込みが非常に早いのも強みです。
PWAはディベロッパー専用のオプションであり、Webサイトビルダーには難しいかもしれませんが、一度は挑戦してみることをおすすめします。
PWAとは?Webサイトをアプリ化して高エンゲージメントを得るためのUX設計
Workship MAGAZINE
WordPressをPWA対応させるのにハマったこと
Workship MAGAZINE
機能的なWebサイトを作成するのに、プラグインは非常に便利なツールです。一方で、必要のないプラグインがバックグラウンドで作動していると、Webサイトが重くなってしまうのも事実です。本当に必要なプラグインのみ使用し、それ以外はオフにするか、削除してしまいましょう。使用しているプラグインの定期的なアップデートも重要です。
また、フォントのインスタレーションやヘッダータグの挿入、サイトの分析機能など、コードで解決できるプラグインは削除すべきでしょう
いかがでしたか?
この記事で紹介した10のポイントに注意して、あなたのモバイルサイトの読み込み速度を向上させましょう。
(原文:ARRIE COUSINS 翻訳:Mariko Sugita)
あわせて読みたい!▼
サイトスピードを上げる4つの方法&スピード測定ツール10選まとめ
Workship MAGAZINE