Webサイトを運営している方にとって、表示速度が遅いのは致命的です。GoogleのPage Speed InsightでWebサイトの表示速度を見てみると、パソコンは高速表示できていても、スマホの表示速度は遅いといったことが多いのではないでしょうか。

そこでモバイルの表示速度向上に効果的なのが、*AMP（Accelerated Mobile Pages）*対応のページ作成です。しかし、AMP対応は正しい方法で導入しなければ、効果が反映されない場合があります。

この記事では、AMPページが正しく導入されているかテストするツールを紹介します。これから紹介するツールを用いて、Webサイトのスマホ表示速度をAMPで改善しましょう。

AMP（アンプ）とは

AMP（アンプ）とは「Accelerated Mobile Pages」の略で、Googleの推奨するモバイルページの表示速度を高速化する手法のことです。

スマートフォンからGoogleでキーワードを検索したときに、右上に「カミナリマーク」が表示されるWebサイトがあります。これは、そのWebページがAMP対応している証拠。日本では2016年からAMP対応が始まり、今では多くのWebサイトがAMPを導入しています。

AMP（アンプ）とは？仕組みと対応方法を知って表示速度をアップ！

AMP（アンプ）とは？仕組みと対応方法を知って表示速度をアップ！

AMPはAccelerated Mobile Pagesの略でモバイルページの表示速度を高速化してユーザー満足度を高める手法のことです。この記事ではAMPの基礎知識や導入方法、便利やWordPressのプラグインやテストツールなどを紹介します。

WebページがAMP化できているかテストできるツール4選

AMPページが正しく導入されているかテストできるツールは、無料で利用できるものばかりです。

AMPテスト

amptest.png

画像引用：AMPテスト

「AMPテスト」は、Googleが提供しているAMP導入テストツールです。自身の運営するWebサイトのAMPページのURLを入力するだけで、数十秒で確認することができます。

正しく導入されている場合は、数秒後に「有効なAMPページです」という文言が表示されます。そのすぐ下にある「Googleに送信」をクリックすれば、インデックスを送信することが可能。その横にある「検索結果をプレビュー」をクリックすれば検索結果を確認できるようになっています。

AMPが正しく導入できていない場合は「AMPページではありません」と表示され、AMPのコードに誤りがある場合は、「有効なAMPページではありません」という文言とともに、修正箇所を表示されます。

間違っている場合は、すぐに修正箇所を確認し、再度AMPテストを行いましょう。

Google Search Console

searchconsole.png

画像引用：Google Search Console

Googleが提供しているWebサイトのアクセス管理ツール「Google Search Console」でもAMPページが正しく導入されているかテストすることができます。

まずはSearch Consoleにログインし、AMPページを導入したサイトを表示しましょう。そのあと、「検索の見え方」から「Accelerated Mobile Pages」をクリックします。

エラーページがある場合は「重大な問題のあるAMPページ」という箇所に、エラーのあるページ数が表示されるので、修正内容に従ってコードを書き換えましょう。

ただ、Search Consoleは仕様が変わったために、現在は「AMP ステータス レポート」という名前に変わっています。

AMP ステータス レポートはSearch Consoleに標準搭載されていないので、右上の「はてなマーク」のアイコンをクリックし、検索窓にAMP ステータス レポートと入力しましょう。

下にスクロールすると「AMPレポートを開く」という項目が表示されるのでクリックしてください。すると、AMPレポートが表示されますが、すぐ結果が反映されるのではありません。一日後にデータの取得を行います。

WebサイトすべてのURLからAMPの導入テストを一括で行ってくれるので、導入したページURLを入力する必要はありません。

デベロッパーツール

デベロッパーツールは、Chromeに搭載されている機能でAMP HTMLのページソースを確認できるツールです。

まずはAMPページURLに「#development＝1」をつけて「デベロッパーツール内」で対象となるページを表示します。

Chromeを利用している方は右上にある3本の線の入った設定画面を開き、「その他のツール」から、「デベロッパーツール」を起動しましょう。

それ以外のWebを使用している場合は「Ctrl+Shift+i（Windowsパソコン）」「Ctrl+Opt+i（MacBookパソコン）」のショートカットキーを入力すれば起動できます。

デベロッパーツールで対象のページを開き、画面上部にある「Console」を選択してください。

正常にAMPページが導入されていれば、「Console」の一行目に「Powered by AMP」が表示されます。しかし、AMPページの導入に何らかのエラーがあった場合には、1行目に注意を促すアイコンが表示され、エラー部分が表示されるので修正を行いましょう。

AMP Validator

ampvalidator.png

画像引用：AMP Validator

AMP Validatorとは、AMPプロジェクトが提供しているツールです。上記のAMPテストのようにGoogleが提供しているわけではありませんが、Chromeでも利用できます。

ただ、Web版もあるので、普段お使いのブラウザに合わせたツールを選びましょう。

Chrome版はインストールが必要です。インストールが完了したらAMP Validatorにアクセスし、AMPページを確認したいURLからアクセスします。

すると、

  • 灰色/AMP未対応
  • 青色/AMP対応
  • 緑/AMP HTMLが有効
  • 赤/エラーのあるページ

赤色のアイコンをクリックすると、それに応じた情報が表示されるので修正すべき箇所がすぐに見つかります。

Web版はインストールの必要はありません。まずはAMP Validatorの公式サイトへアクセスし、確認したいURLページを検索窓に入力しましょう。入力し終えたら、VALIDATEをクリックしてください。

するとページソースが表示され、エラー箇所があればソースコードの行に赤色のアイコンが表示されます。それを元にAMPページの修正を行いましょう。

AMP（アンプ）ページにこだわる必要はあるのか

AMP対応ページを導入する必要はあるのか、というと「対応したほうがいい」という見解です。Webサイトの表示速度について以下のように記されています。

「サイトの速度」カテゴリのレポートには、コンテンツの読み込み速度や応答速度が表示されます。
「サイトの速度」カテゴリのレポートでは、以下の 3 種類の反応時間を測定します。
・サイト上でサンプルに設定したページビューの表示時間。
・トラッキングの対象にしている個々のクリック、イベント、ユーザー操作の実行速度または読み込み時間（画像の表示時間やボタンのクリックの反応時間など）。
・ブラウザがドキュメントを解析し、ユーザーの操作が可能になるまでの時間。


引用：サイトの速度について|アナリティクス ヘルプ

表示速度に関する評価は上記の通りです。Googleではモバイルサイトの読み込みに30秒以上かかる場合は、訪問ユーザーの53%が離脱するという結果が出ています。

SEO評価にも関わるWebサイトの表示速度をあげることはサイトの離脱率を下げ、コンバージョン率のアップにつながるのです。

また、スマートフォンの表示速度はパソコンよりも遅くなってしまいがちなので、対策が必要になります。その対策となるのが、WebサイトのAMPページ導入です。

初心者の方がAMPページを導入してもうまく反映されないことが多く、正しく表示されているかを確認する必要があります。

そのためには上記で紹介したサービスを活用してください。ツールを活用すれば、エラー箇所を指定してくれるので、修正作業が簡単です。

AMP（アンプ）を導入してサイト改善に努めよう

この記事では、AMPページが正しく導入できているかテストできるツールを紹介しました。

AMPページを作成したにもかかわらず、何らかのエラーで表示されない場合はかえってSEOの評価が悪くなる可能性があります。

AMPページを導入する場合は、表示されていることを確認した上でWebサイトに表示しましょう。

Webサイトを高速化する

モバイルページにとってたった1つの重要なこと、それは「スピード」

モバイルページにとってたった1つの重要なこと、それは「スピード」

多くのWebデザイナーやWebディレクターは、オンボーディングやページ遷移などのユーザー体験(UX)デザインに気をかけますが、昨今では、それ以上に重要だとされている要素があります。それは「スピード」です。今回は、UXにおけるページの表示速度について、Googleが新たに発表した検索結果に関する重要な「予告」も踏まえながら、ポイントをまとめていきます。
もうユーザーを待たせない！AWSで既存のホームページを一気に高速化させる方法

もうユーザーを待たせない！AWSで既存のホームページを一気に高速化させる方法

サーバーを引っ越しすることなく、AWS(Amazon Web Service)で設定を行うだけで既存のホームページを一気に高速化させる方法をご紹介します。 突発的に大量のアクセスが発生したり、長時間の動画ファイルを読み込んだりする場合にも、圧倒的なシェアを誇るAWSを使うので、レスポンス速度が低くなることは少なくなります。 設定も非常に簡単で、安価で始めることができるので、その手順を確認していきましょう。