あるファンが彼のウェブサイトを送ってきて、なぜ私たちのウェブサイトのモバイル版の見栄えが悪いのかと尋ねました。

私が本当に言いたいのは、モバイル版の出来が悪いのはあなたの会社のウェブサイトだけではないということです。モバイルでのパフォーマンスが著しく低いウェブサイトは、実に数多く存在します。だからこそ、モバイルページのデザインに関する専用の記事を書きました。

01 モバイルページの重要性

モバイルファーストインデックスは SEO に有益です。

Google はモバイル インデックスを優先する発表を複数回行っています。

2015 年、Google のアルゴリズムによりモバイル検索結果の表示方法が変更され、モバイル デバイス向けに最適化された Web サイトは、そうでない Web サイトよりも上位に表示されるようになりました。

2021年3月より、PC専用ウェブページのコンテンツはインデックスに登録されなくなります。モバイルファースト インデックスとは、Googleのウェブクローラーがウェブサイトのモバイルコンテンツのみをインデックスすることを意味します。

モバイルデータ使用量は通常、PC データ使用量よりも高くなります。

しばらくeコマースに携わり、データドリブンな方であれば、新時代においてモバイルトラフィックがPCトラフィックをはるかに上回っていることにお気づきでしょう。これはGoogleにも当てはまり、特にeコマースウェブサイトにおいては顕著です。そのため、モバイルパフォーマンスには細心の注意を払う必要があります。

ウェブサイトの速度に影響を与える要因

コード、画像の読み込み、ビデオの読み込み、サーバー構成、リージョン設定など。

ウェブサイトの速度とモバイルパフォーマンスをテストするためのツール

ウェブサイトのページ速度評価をテストする: https://developers.google.com/speed/pagespeed/insights/

ウェブサイトの読み込み速度をテストする: https://gtmetrix.com/

上記の2つのツールについては、以前の記事で何度も紹介しているので、ここではスクリーンショットは掲載しません。ここでは、モバイルデバイス用の以下の2つのツールについてお話します。

https://search.google.com/test/モバイルフレンドリー

検索ボックスにドメイン名を入力するだけで、結果がテストされ、問題がある場合は具体的な理由が表示されます。その後、これらの要因を一つずつ確認していくことができます。

https://search.google.com/test/amp?utm_source=gws&utm_medium=onebox&utm_campaign=suit&tab=mobile

これは、Web サイトがページの処理に AMP テクノロジーを使用しているかどうかをテストするツールであり、具体的な理由も示します。

02 AMPとは何ですか?

AMP は、AMP HTML の合理化されたコードを使用してコンテンツ配信を高速化するために設計された、Google が支援するプロジェクトです。AMP は、静的コンテンツ（ユーザーの行動に応じて変化しないページ）用のウェブページを構築する手法であり、ウェブサイト用の通常の HTML よりもはるかに高速にページの読み込みと Google 検索での事前レンダリングを実現します。

AMPのコンポーネント

次のセクションはコード要素がいくつか含まれているため、少し眠くなるかもしれません。退屈だと感じる場合は、飛ばして次の段落に進んでください。

AMP HTML

AMP HTMLは基本的にHTMLと同じですが、いくつかの制限があります。以下はAMP HTMLの簡単な例です。

AMP HTMLのタグのほとんどは通常のHTMLタグですが、一部のHTMLタグはAMP固有のタグに置き換えられています。これらのカスタムタグはAMP HTMLコンポーネントと呼ばれ、一般的なマークアップパターンを効率的に実装するのに役立ちます。AMPページは、検索エンジンやその他のプラットフォームによってHTMLタグを介して検出されます。

ページタグについてさらに詳しく知りたい方は、前回の記事「オンサイト最適化パート1：ウェブサイトSEOにおけるページタグの重要性」をご覧ください。

ページの非 AMP バージョンと AMP バージョン、または AMP バージョンのみを選択できます。

AMP JavaScript（略してJS）

AMP JS ライブラリは、AMP HTML ページの高速レンダリングを保証します。この JS ライブラリは、インライン CSS やフォントのトリガーなど、AMP のパフォーマンスに関するベストプラクティスをすべて実装し、リソースの読み込みを管理し、カスタム HTML タグを提供することで、高速なページレンダリングを実現します。

AMP JS は外部リソースからのすべてのコンテンツを非同期にするため、ページ上の要素がレンダリングを妨げることはありません。また、リソースを読み込む前に各ページ要素のレイアウトを事前コンパイルしたり、処理速度の遅い CSS セレクターを無効化したりするなど、他のパフォーマンス向上技術も採用しています。

キャッシュ

Google AMP キャッシュは、キャッシュされた AMP HTML ページを提供するために使用されます。AMP キャッシュは、すべての有効な AMP ドキュメントを配信するために使用されるプロキシベースのコンテンツ配信ネットワークです。このキャッシュは AMP HTML ページを取得してキャッシュし、ページのパフォーマンスを自動的に向上させます。

03 AMPの利点

モバイルデバイスでのウェブサイトの読み込み時間を短縮

それだけです？

はい、それだけですが、これで十分です。

Google SEO

AMPテクノロジーは直接的にランキングを向上させるわけではありませんが、ウェブサイトの速度を向上させることができます。ウェブサイトの速度はGoogleのランキングに影響を与える重要な要素です。そのため、AMPテクノロジーはSEOパフォーマンスを大幅に向上させる可能性があります。

ユーザー向け

ウェブサイトの読み込みに5秒以上かかると、訪問者の37%が離脱するというデータを見たことがあります。モバイルデバイスでは、ユーザーがサイトに留まる可能性はさらに低くなります。モバイルデバイスでは、ページの読み込みに3秒以上かかると、訪問者の半数以上が離脱してしまいます。

ユーザーのコンバージョン率を向上させる

これは自明のことなので、あまり説明する必要はないと思います。ウェブサイトの読み込み速度が速ければ直帰率が下がり、結果としてコンバージョン率が向上します。

04 実際の AMP にはコーディングの知識が必要ですか?

AMP のメリットをご理解いただいた上で、多くの方が「AMP を実装するにはコーディングスキルが必要でしょうか？」と疑問に思われるかもしれません。もしあなたが全くの初心者であれば、残念ながら、コードの理解は必須です。

AMPプロジェクトにはHTMLコードとプログラミングが含まれるため、IT部門の協力が不可欠です。あるいは、外部のサービス会社に依頼して、この問題を解決してもらうことも可能です。

-終わり-