HUGOのフルAMP化やめました

Share on:

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

目次

ブログ高速化を目指してHUGOフルAMPを構築してきました。

フルAMPとは、モバイルページのみならず、PCページもAMP化することで、ブログの表示を高速化しようという試みです。

一見いいとこだらけに見えますが、下記の理由でフルAMP化をやめ、通常のレスポンシブHUGOブログに戻しました。

なお、下記の理由は当方の環境によるもの出るかもしれませんし、計測値なども掲載していませんので不確実な部分もあります。

でも、WEBサイトを見るときに体感って大事ですよね。ということで体感での理由を記載しました。

amp-adによるアドセンス表示が遅い

AMPはいろいろな制約がある代わりに、表示の高速化が実装される仕組みです。

しかし昨今の変化に富んだWEBサイトを展開するには制約が厳しいため、AMPではAMPコンポーネントが用意されており、様々な機能を通常のWEBサイト並みに表現できるようになっています。

そのAMPコンポーネントの一つにamp-adという広告を表示できるようにするコンポーネントがあります。

このamp-adコンポーネントを利用するとアドセンス広告なども表示できますので、amp-adでアドセンスを扱っていたのですが、如何せん広告画像の表示が遅いのです。

ページをスクロールしている間にアドセンス広告画像が読み込みきれず、広告画像が表示される前にページ上部へと消えていってしまうのです。

※PC版AMPページに限ります。モバイル版AMPページの広告画像は割と速く表示されていました(体感値)

これでは広告効果はゼロです。

画像が表示されるまでアドセンス広告の位置をブラウザ上に留めておいてくれる優しいユーザーさんはいません。

ということで、フルAMP化を止めた最たる理由が広告表示の遅さということです。

通常ページのアドセンスに戻したところ、広告画像の読み込みがPC・モバイルともに早くなりました。

JavascriptやBootstrapが使いたい

やはりAMPの制約には限界があり、JavascripやBootstrapを使いたい場面が出てきました

※本当はBootstrapは脱却したい。。。フルスクラッチで開発できるようにしたい。。。

まず、フルAMP化完全撤退の前に試しにサイズのデカイjQueryBoottstrapなどを入れてPageSpeed Insightsでサイトの表示速を測ってみました。

結果、さほど影響はなく、これならふんだんにとまではいかなくともJavascritなどをガシガシ組み込んでも良さそうでした。

※ブログ自体シンプル構造ですのでそれが功を奏したのかもしれません。

jsやcssはインラインで書けばPageSpeed Insightsにも怒られませんし、そういうことならということでフルAMP化撤退の決意を固めることができました

AMPの将来性

今後AMPはどうなっていくのでしょうか?

回線速度も5Gとなり、モバイルでの閲覧スピードは俄然速くなります。

もちろんWEBサイトの作り方やWEBサーバーの性能次第ではありますが、それでも体感的に速くなることは間違いないでしょう。

そのような時代を迎えるにあたって、制約の多いAMPやデザインが貧弱なAMPの存在意義はどこにあるのでしょうか?

敢えてAMP化せずとも、キレイで動きのあるWEBサイトが高速に配信される時代になるのではないかと感じました。

そのような考察をされている記事もいくつか見ましたので、きっとそうなるだろうと安直に判断しました。

AMPページのインデックス

この項はまさに体感のお話になります。

なんとなくですが、フルAMPページにしたところ、検索エンジンにインデックスされるまでの時間が長くなったような気がしました。

これはAMPサイトとして正しく作られているかといった余計な処理(失礼)が入っているからでしょうか?

インデックスされる要因は様々ありますので一概に言えませんが、体感的にそう感じてしまいました。

まとめ

以上がフルAMP化をやめた理由です。

この程度のブログであればレスポンシブなHUGOブログで十分という結論に達しました。

フルAMP化から撤退するにあたって、記事内のHTMLタグを戻したり、テーマを修正しましたが、静的サイトジェネレーターのHUGOでしたのでさほど苦にならず作業を終えることができました。

記事をマークダウン記法で持っていられる喜びを感じました。