今月半ば頃より Google AdSense から以下のような招待が届くようになりました。
たぶん一部の人にだけ招待されているのだと思います。
というのも、Youtubeで限定公開されている動画を見れるリンクが送られてくるのです。
普通にTwitterにあがっちゃってるんですけどね。
これってお得意様になったのかな？などと勝手に舞い上がる私。
しかし内容を拝見させていただき、直観的に思ったこと。
ああ。うちのサイト重いのか。
それな
と、察しました。
普段ブログ早く書いて早く公開したい一心で、無圧縮で画像あげちゃったりしてますからね。
GoogleさんがAMP化を推進していることは存じ上げてました。
この度見せていただいた動画から、AMPについて学びなおし、AMP化することのメリットやAMP化してみて起きた問題などをまとめました。
この記事は、以下のような方に向けて書いています。
- AMPってなに？
- AMP化した方がいいの？
- サイトの表示スピードってどこで確認できるの？
- AMP化するには具体的に何をすればいいの？
AMP（Accelerated Mobile Pages）とは
Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。
引用元：ウィキペディア
AMPを使うことで、ページを1秒以下で表示することができます。
このサイトを立ち上げる際に、AMPを導入した方がいいのかもちろん調べてました。
不具合が出るとか、「AMPやめました」な記事を書いている人が目立っていて、あんまりいいイメージがなかったです。
その頃はAMP化してなくてもSEOには関係ないといった話もあったので、後からやりたくなったらやればいいよねぐらいの気持ちで考えてました。
AMP自体が導入されてから随分経ちますし、そろそろ不具合なんかも落ち着いてくる頃なんじゃないかと思い、まだ記事数が少ない今のうちに対応を本気で考えてみました。
AMPは「アンプ」と読みます。
普通に「エーエムピー」って読んでた。
AMP化した方がいいの？
Googleさんの動画では、AMP化することにより以下のようなメリットがあると述べられていました。
- 非AMP化サイトに比べユーザーの滞在時間が2倍になる
- 一度に訪れるサイトのページ数が60％増加する
- AMPページへの流入数が毎年10％増加する
これほど具体的な数字でメリットがあることを知り目から鱗でした。
他にもたくさんのメリットを述べられていましたが、私はコードを書けない人間なので、ちょっと難しかったです。
サイトの表示スピードを測定をするには
Google PageSpeed Insightsにて、自サイトの表示スピードを確認することができます。
早速自サイトを測定してみたところ、やっぱり遅いと判定されました。
どこが遅いのか詳細までしっかり教えてくれるので、すごい便利です！
試験運用中ですがGoogleサーチコンソールでも、簡易的に速度を確認することができるようになりました。そしてこっちでも低速って言われてる…。
AMP化するには具体的に何をすれば良いのか
AMP化していない通常のページと、AMP化したページを２つ用意し、相互にリンクを貼ります。
それにより、モバイルから来たユーザーはAMP化したページへ、デスクトップPCから来たユーザはAMP化していない通常のページへとGoogleさんが自動的に振り分けてくれます。
WordPressでは、AMPに対応したWordpressのテーマを選ぶことにより簡単にAMP化できます。
早速AMP化してみた
当サイトはWordpressのテーマにCocoonを利用しており、「AMP化する」のチェックを入れることで簡単に変更できました。
[Cocoon設定]→[AMP]より設定できます。
AMP化後に見つかった問題
AMP化したことにより、いくつかの問題が出ました。
表が崩れた
早速やってみたところ、表が崩れまくりました。
当サイトの一番の稼ぎどころであるこの記事は、表がふんだんに使われています。
SEOで一位の記事なので、その表こそが分かりやすいのだと自負しており、これを崩すわけにはいかずでした。
それ以外にもいくつか問題は出ました。
画像サイズが変わった
アイキャッチ画像など、画像サイズの幅が圧縮され左寄りに表示されました。
ギュッとされた感じ。
自分で後から加工したサイズの大きい.jpeg画像については、こんな悲劇に見舞われていました。
サイトロゴすらも画像の容量がとんでもなく大きくてこんな状態でしたので、早速小さくしてみていってます。
Speed Insightsの計測結果確認したところ、.pngのような画像については、次世代フォーマットである JPEG 2000、JPEG XR、WebP などにしたほうが圧縮率が高く、ダウンロード時間やデータ使用量を抑えることができると対応方法が書かれていました。
ところが、
次世代フォーマットに、主要ブラウザが未対応
ブラウザ側が、次世代フォーマットにほとんど未対応である分かりました。
ちょっと意外な結果でした。
こんな状況でAMP化すると逆に離脱率が上がってしまいそうです。
出来るかぎり画像サイズを小さくするのを念頭に置いて作業するくらいしか、今すぐには動けなさそうです。
はたして期待される効果は
しばらくは主要ブラウザが次世代フォーマットへ対応するのを待つのみでしょう。
AMP化がSEOには今のところ関係しないと言われてますが、AMP化することによりユーザの滞在時間やPV数が増えることによりSEOのアルゴリズムに反映はされるでしょうから、SEO対策の一環になると思います。
今はとくにレイアウトが崩れるなどダメージの大きいページのあるカテゴリは、AMPを除外して運用してみています。
それだけでもはたして効果があるのか、ぜひ検証してみたいと思っています。
