KOBITブログ

導入する企業が増加中!AMPが速い3つの理由。

この記事は約 6分 で読めます。

Be the first

AMPについては、KOBITブログ内で何度か取り上げました。

Google AMPに新たな動き!? 普通のWebページにも適応される!?

モバイルにおけるページの表示速度が圧倒的に速くなり、モバイルユーザー体験の向上に役立つAMP。Googleにおいては、これまでトップニュースのみに適応されてきたものが、今後は様々なメディアコンテンツにも広がっていくというお話でした。

今回は、「AMPがなぜ速いのか?」について、AMPのプロジェクトを進めている Malte Ubl 氏のコラムを元に、技術的な要素を交えながらお話します。

キャッシュ・事前読み込み・処理の軽さがポイント

AMPを導入しているページの表示速度が速い理由として3つのポイントがあります。
1つ1つ説明していきます。

Google AMPにキャッシュされているから速い

大きな理由の1つにキャッシュがあります。キャッシュとは簡単に言うと、過去に読み込んだデータなどを保存しておくことで、次回利用する際に素早く取り出せる仕組みのことです。

身近な例だと、通常Webサイトを訪れると、その情報はキャッシュされブラウザが保存してくれます。それによって次回そのサイトを訪れるときは、前回よりも速くページが表示されたりします。

AMPを導入するページは、Googleの検索エンジンがインデックスした時点でGoogleのAMPキャッシュというところに保存してくれます。それにより、ユーザーがAMPを導入しているページを読み込む際は、保存されているページが表示されるだけなので、通常のような読み込みの時間はかかりません。

PreconnectとPrerenderingがあるから速い

AMPを導入しているページでは、Preconnect(プリコネクト)とPrerendering(プリレンダリング)が行われます。

通常ユーザーがWebサイトを訪れるときには、

    • 訪問したドメインからIPアドレスに変換(DNS Look Up)
    • サーバーに接続し、必要なファイルを要求(HTTPリクエスト)
    • ファイルをダウンロード
    • ダウンロードしたHTMLとCSSからレンダリング
    • ブラウザ上に表示

とかなり簡単に書きましたが、このようなプロセスが実行されています。

最後の「ブラウザ上に表示」が行われる前に、複雑な処理をしているのが分かるかと思います。そしてこれは時間のかかる処理です。
この複雑で時間のかかる処理を「ユーザーがクリックする前にやっときましょう!」というのが、PreconnectとPrerendering です。

これにより、クリックした瞬間には表示という信じられないスピードが実現できるのです。

しかし、ユーザーがクリックできるすべてのページを事前に読み込んでいては、逆に重たくなってしまいそうですよね? AMPでは現在見えているページのPreconnect / Prerendering
をやってくれますが、まだ見えていない(スクロールしていない)リンク先についてはそれを行いません。なのでそのような心配はなく、ただただ速いというわけです。

処理がとても軽いから速い

AMPが導入されているページでは、CSSは外部のファイルから呼ぶことをせず、直接HTML上に書かれたインラインのCSSを読み込みます。

通常はstyle.cssなどのCSSを記述したファイルを作り、HTMLファイル側で id や class を与えることでそこにスタイルを適用するということをすると思いますが、それではそのstyle.cssファイルの読み込みに時間がかかってしまいます。

そのため、AMPでは外部ファイルを制限することで軽い処理を実現しています。

またAMP導入ページでは、まだユーザーがスクロールしていない部分の画像の読み込みを遅らせるというLazy Load(レイジーロード)をしてくれます。これがないと、ブラウザはクリックされた時点で全ての画像の読み込みを開始するのですが、画像が多いサイトだととても重くなってしまいます。

しかし、Lazy Loadがあると、ユーザーにとって必要最低限な範囲で読み込みを終了しページを表示してくれるので、とても軽くまた速いです。

導入はいいことづくし?

AMPを単純に導入すればページが速くなることは確かですが、注意点も当然あります。例えば前述したインラインでのCSSですが、これに嫌悪感を示す方は結構多いのではないでしょうか?

直接HTMLファイルにスタイルを書いていくことは、見づらくなりますし、管理も大変ですもんね。これに関しては時代錯誤だ、という声もあります。他にもAMPを導入するためにはいくつか制限があります。

よく使うタグの、img タグやiframeタグはAMPでは使えません。代わりにamp-img、amp-iframeタグを使わなければいけません。中には代わりのタグがないものもあります。またJavascript もAMP JSという非同期の処理が可能なJavascript以外の使用は禁止です。これが使用されると、レンダリングに時間がかかってしまうからです。

これらを1つ1つ乗り越えて初めて、夢のような表示速度を実現できるのです。

全てに対応は難しいと思いますが、WordPressであれば専用のプラグインがあり、有効化すれば勝手にAMP対応のページを作ってくれます。ただし、上記のような制限により、Webページのレイアウトが変わってしまうということもあるので、プラグインインストールの際はよく注意しましょう。

まとめ

今回AMPが速い理由を紹介しましたが、インラインCSSやLazy Loadなどは、普通のウェブページを早く表示させるためにも使う事ができます。今後、通常ページにまでAMPが導入されていくという話もあるくらいなので、今から少しづつでも対応していきたいところですね。


CATEGORY:

さあ、KOBITをスタートしよう。