スポンサードリンク


静的WEBページを高速化するグーグルの秘密道具!AMP導入でスマホのブラウジングが超快適に?

    大きく注目を集めているGoogleから提供された「AMPプロジェクト」。

    AMP スマホ高速化

    今年2月より正式に運用が開始されました。

    ウェブサイト開発業界では今後主流になるかもしれないプロジェクトとして大きく取り上げられています。

    実際に自身のウェブサイトに導入した方もいれば、
    まだ導入されていない方もおられると思いますが、このAMPについてどのようなものか調べてみることにしました。

     

    AMPプロジェクトとは

    AMP (Accelerated Mobile Pages)はモバイルでのいわばスマホでのWebページの表示を高速化することを目的に開発されたGoogleのプロジェクトです。

    AMP導入のメリット

    簡単に言ってしまえば、AMPを導入したウェブサイトで
    スマホで開いたときの表示が高速化され、閲覧者に快適なブラウジングができるように提供されたものです。

    高速化」というところがポイントで、どうしてもスマホでウェブサイトを閲覧する時、表示が遅くなってしまうという問題が解決できるようになります。

    AMPの主な目的は以下の通りです。

    • ニュース記事等のウェブページの表示高速化
    • モバイル(スマホ)の読み込み時間の短縮
    • インターネットでの遅延時間を低減しストレスレスにする
    • アプリ市場から再度検索市場へのユーザを誘因

     

    近年、スマホの画面サイズに合わせてウェブページを表示させる「レスポンシブ化」に最適化されたウェブサイトが主流になっていますよね。

    ところが、どうしてもパソコンよりも性能の劣るスマホでのページ表示速度を改善させるにはかなり困難を極めるものでした。

    リリースされたAMPを導入すれば簡単に高速化できるというわけです。

    ちなみにGoogleやTwitter、WordPress.comなどのIT系企業や、
    ニュースメディアなどが参加しています。

    特にニュースコンテンツなどの静的ページを高速化することに重点を置いているようです。

     

    AMP HTMLフレームワークの仕組みが高速化の鍵

    AMPでは「AMP HTML」というフレームワークというものがあります。

    AMP HTMLフレームワークとは

    AMP HTMLはウェブページ内に追記されているHTML、CSS、JavaScriptなどのサーバリソースに制限を加えたもので、導入にあたりサーバ側に特別な設定を必要としません。

    つまりページ表示速度を遅延させる処理やデータ、画像などを大きく制限する仕組みとなっています。

    この仕様に沿ってページを構築すれば高速なページを作成することが可能になります。

    AMPではAMP HTMLというフレームワークを定めています。

    さらに、AMPで作られたページはGoogleやTwitterのサーバにキャッシュされます。

    要するにGoogle散策結果やTwitterから
    AMP HTMLで構築されたページにアクセスする場合はページを読み込むのではなくサーバキャッシュを利用するようです。

    スマホのネイティブアプリのような高速表示が実現できるようになるというわけですね。

     

    スポンサードリンク

     

    AMP導入によって検索エンジンの表示順位に影響はある?

    AMP SEO効果

    SEOを意識する人にとっては、
    ある意味一番気になるだろうことが「AMP導入によって検索順位に影響が出るか」だと思います。

    この疑問に対してAMP開発者の間では「影響は出る」という見解のようです。

    ページの表示速度が高速化されるとうわけなので、
    ユーザビリティーが向上し、結果SEO効果を高めることにつながるためです。

    素直にGoogleの恩恵を受けられる可能性が高くなるわけですね。

    自身のウェブサイトにAMPを導入するかしないか検討した方がよさそうです。

     

    AMPを導入するには?

    GitHubにてAMPの仕様が公開されております。

    AMPではHTMLのheadタグ内に「AMP JS Library」を読み込みます。
    これによって外部リソースの読み込みが制限されるので、AMP独自の機能が利用できるようになります。

    あとはHTML/CSS/JavaScriptのルールによりマークアップされます。

    AMPを導入時に気を付けなくてはいけない点は、
    これらのリソースの使用制限がかかるところです。

     主に制限される機能

    • 使用できるhtml要素(タグ)に制限がある
    • JavaScriptがほぼ動作しない
    • CSSはすべてインライン方式で記述、セレクタも一部制限
    • head内の記述やdoctype宣言にも指定あり

    HTML5から実装されたタグ、CSSだと特殊セレクタが使用できない感じですね。

    JavaScriptに関しては言うまでもなく、
    表示速度を遅くする要因の大きな問題の一つなのでほぼ無効化といった具合でしょうか?

    まあ確かにこれだけリソースを制限してしまえば、
    根こそぎ高速化できるのも納得ができます。

    ただAMPの仕様を熟知しておかないと思わぬ罠にハマる可能性もありそうですね。

     

     AMP HTMLで使用可能な要素や必要なマークアップ

    amp-html-format.md · GitHub

    詳しいことは上記のリンク先のページでご確認下さい。

    ちなみにJavaScriptに関してですが、
    利用できない代わりにAMP独自の要素”amp-img“、”amp-youtube“、”amp-image-lightbox“が用意されているらしく、SNSやYouTubeなどの埋め込みに対応、さらにカルーセルやライトボックスなどある程度の動きのあるページコンテンツを作ることは可能のようです。

      The following two tabs change content below.
      よっき
      パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

      スポンサードリンク


      コメントを残す




      *

      このページの先頭へ