三度目の正直で実装!遅ればせながらAMPページ始めました

mockDrop_iPhone-6-at-the-beach-compressor

こんばんわ。masayan(@masan382)です。

あまりうちのブログではブログカスタマイズ的な話はしないで行こうかなと思っていたのですが前回の「遅ればせながら厳選ページ始めました」が思いのほか好評だったこともあり、AMP化に苦労したこともあり、個人的な備忘録もかねて記事として残しておこうかと思ったので書きます。

興味のある方のみ読み進めてくたさい。

AMPとは!?

Accelerated Mobile Pages は、読み込みを高速化しさらに快適なユーザー 体験を追求するため、さまざまな技術的手法を活用してコンテンツをほぼ瞬時に読み込めるようにした HTML ページです。

引用元: ウェブマスター向け公式ブログ

「Accelerated Mobile Pages」の頭文字をとってAMPですね。
要はスマホ等で閲覧する際に高速表示できる技術ということです。

うちのブログで言えば、【https://masayanei.com/〇×△/】という記事があれば【https://masayanei.com/〇×△/amp/】な感じです。なのでうちの記事URLに【amp/】を足してもらうと高速ページが表示されます。

例えばこの記事になると…。
LINK 通常ページ:https://masayanei.com/amp-page/
LINK AMPページ:https://masayanei.com/amp-page/amp/

です。見比べてみてください。

AMPページのメリット&デメリット

AMPページだったらなんでもいいかと言われるとそうでもないところが難しいです。

確かに高速表示は素晴らしいのですが、それは犠牲を伴います。それはブログ運営者ならよくわかると思いますが、サイドバーやフッターなどメイン文章以外にもあるコンテンツなんかが表示できなくなります。また、ウィジェットなんかも表示できません。AMPページでは使えないタグもあります。

細かいところはこちらをご参照ください。俺なんかよりとても丁寧にわかりやすく説明してくれています。

LINK ブログのAMP対策の為に最低押さえておきたい4つのポイント!アクセスアップチャンスを逃すなっ!

しかし、そんな犠牲を払っても高速表示したい人にはメリットがあります。

というのも、読み込みに 3 秒以上かかると 40% の人がサイトの閲覧を諦める、という調査結果もでているそうで高速表示をすることで記事やブログを見ていただける可能性が大いに広がるということです。

「M・E・I」がAMPを導入するに至った過程

pose_necchuu_computer_man2-compressor

うちのブログの最大ともいえるネックが表示スピードの遅さ。PCはまだしもモバイル表示は顕著に遅いです。

理由は明確で画像が多い。これにつきます。しかし、画像がウリなのも特徴なんです。

うちで行ってきた高速化対策がこちら

  1. 画像の縮小&圧縮
  2. いらない広告の削除
  3. Xサーバーへの移行
  4. ウィジェットの整理
  5. キャッシュプラグイン

もちろん他にもいろいろやっていたりもします。
…ですが、主なやつは上記かな。

画像の縮小&圧縮

まずは表示させる画像を小さくする。そして圧縮。
wordpressであればプラグインで「EWWW Image Optimizer」が有名ですね。なるべく画像は小さく圧縮。一眼レフで撮った画像そのままは使っていません。

いらない広告の削除

以前はブログの広告にnendやadstirなども使わせてもらってました。…が、やはり表示速度が遅くなったり、収益的に反映もほぼされてなかったんでね。「儲からなくて、重くなるくらいならもう外してしまえ」という結論に至りました。

Xサーバーへの移行

サーバースペックのことも考えてXサーバーへ移しました。あと、寝ログでのXサーバーの高機能なんかも紹介されていて、いいなぁと思ってしまったことも大きいです。

LINK WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)

LINK エックスサーバーにWordPressと相性がよさそうな高速化機能がついたので試してみた

高速化、無料でSSLは魅力的でした。

LINK コピペ一発でSimplicityを結構高速化する方法

もちろんこちらも参考させていただいてます。

ウィジェットの整理

PC表示でならすぐわかるのですが、右サイドバーやフッターにもいろいろ表示することができます。その中でも、もう余計なものは表示させず、必要最低限に絞りました。

キャッシュプラグイン

やはりここに行きつきます。[wordpress]、[高速化]で検索すると「キャッシュプラグイン」にたどり着くと思います。
当ブログでもいろいろ試してきた歴史があります。

wp Super Cache
→画面が真っ白になり気絶しそうになった。→削除。

w3 Total Cache
→速度を測定したがあまり変わらなかった。→削除。

DB Cache Reloaded Fix
→更新されていない。エラーが出るようになった。→削除。

WP Fastest Cache
→高速化できたけど、モバイルページでPC表示されたりとイマイチなところもあり削除。

こんな流れです。

現在高速化のために使用中のプラグイン

  • 001 Prime Strategy Translate Accelerator
  • Async JS and CSS
  • SNS Count Cache

そしておすすめなのが「Yasakani Cache

エラーもなく高速化できてます。キャッシュ系プラグインでえらい目にあって避けてきた人にはオススメします。
一度、バックアップを取ったうえで試してみてもいいかもしれません。もっと有名になってもいいのになというのが個人的感想です。

LINK WordPress Plugin : YASAKANI Cache

こうして紆余曲折を経てきました。

PageSpeed Insightsで測定

スピードテストSP

↑こんな感じ。【TOPページ】だけで言えば、努力が実って合格点です。

では、うちで一番人気の「橿原神宮の記事」を開いてみます。
スピードテスト橿原神宮
↑実際記事を見てみたらこんなもんです。しょうがない。やまほど画像貼ってるし。
改めて、スマホで表示させてみても遅い。けどしょうがないか。

現在が歴代の最高速度で表示しているので、できる高速化もここまでかと諦めていたところに登場したのが冒頭でもふれた「AMP」というものでした。

AMPをテスト

computer_kurayami2-compressor

現在はwordpressのテーマ自体にAMP化してくれる機能つきのものもあるそうですが、現在うちで使っているハミングバードにはその機能はついていません。プラグインでAMP化してみました。

案の定のエラーの表示。AMPではエラー表示に該当したのがアドセンスによるものでした。

うちはH2タグの前に自動挿入していたのですがAMPページではそれが致命的となってしまいました。
がんばって条件分岐なんかも記載してみたのですがうまいこといかず。

一度と言わず、二度トライしてだめだったので諦めました。

しかし、諦めてみたものの、やっぱり諦めきれず、改善策をググっているとよさそうな記事を発見。

LINK 本文記事1、2、3番目のH2見出し手前にアドセンスを挿入するWordPressカスタマイズ方法

LINK AMP化した記事内にAdSenseを自動的に挟み込むSimplicityカスタマイズ

表示方法から抜根的に変更。参考にさせていただき無事に表示することができるようになりました。

AMP表示でエラーなしへ。しかし、シンプルすぎるAMPページには満足できずいくつか記事を参考にしてカスタマイズしました。

参考WordPressのAMPページでTable of Contents Plusをキレイに表示する方法

参考AMPプラグインで記事下にSNSボタンを追加する方法

参考導入から半年、AMPページの見た目をようやく改善!【プラグイン「AMP」カスタマイズ】

参考WordPressのAMPページにSNSボタンを設置する方法と好きなボタンの増やし方

AMPで再測定

AMP
↑ぐふぅ。たいしてスピードアップしてねぇ。
モバイルページは61点→68点でした。

まぁ、それでも体感速度は速いんですけどね。きっと調子に乗ってしたカスタマイズが重くさせてるんでしょうし、心当たりもあります。

念のためpingdomでも評価。

pingdom1-compressor
↑ノーマル表示。
B判定。84点です。読み込み時間4.75秒。

pingdom2-compressor
↑AMP表示です。
B判定。87点。読み込み時間は2.66秒まで改善されています。

高速表示という部分に関しては成功しましたが、それには犠牲を伴っています。

AMP表示を始めてみたら…

eieiou_man2-compressor

やはり高速表示というのは素晴らしいです。それはウチのブログが特に表示速度が遅いから。
ただ、それでもあれこれ詰め込み過ぎたせいかAMPでも遅い(*´Д`)

いやいや、俺のやりたいことを高速化してくれているだけありがたいってもんです。

そして、AMPでのアクセス数も日増しに増えております。需要もあるんかな。
中にはね、AMPやってみたけど意味がなくて止めたって人もいれば、AMPなんかやらないって人もおられると思います。

それでも俺はやって良かったかなって思ってます。ただ、モバイルページ用にがんばって作ったフッター固定メニューが表示されないのは非常に残念ですけど。

AMPページは離脱率が高いとは聞いていましたが確かに高い…。けど、これちゃんと測定できていなさそう。もうちょいアナリティクスの調整が必要そうです。これは俺の課題。

もう少しデータが溜まってから評価します。

お知らせ

こんなものを用意してみました。
InkedAMP_LI-compressor

こんな感じでタイトルのところに【AMP】リンクを用意してみました。
今後うちのブログを表示する際に高速表示したいかたはこちらからAMPページを表示させてみてください。

そして、AMPページから通常版モバイルページに戻りたい場合はこちらから。

InkedAMP2_LI-compressor

記事TOPの方に通常版モバイルページへ飛ぶボタンを用意しております。入用であれば是非こちらからお戻りください。

おわりに

先日、お世話になっているXサーバーさんがさらなる高速化をしてくれると案内がきました。何もしなくても高速化してくれるんならAMPもいらないんじゃね?とも思い始めてしまいました。
タイミングが悪かったなぁ〜(*´ω`)

何かを犠牲にしてまでも高速化を図りたい人はAMP化を検討してみてはいかがでしょうか。
十分に表示速度が保てているブログさんには現時点では不要なんでしょうねきっと。

とりあえず、このブログはAMP導入のまま続けてみます。評価はまた時間を置いてからかな。

あとね、やっぱりサーバーは「Xサーバー」さんですよ。SSL化されたWebサイトであれば、かってに高速表示してくれるとか…ほんとXサーバーさん最高です。高速化の件ほんとよろしくお願いします。

 

合わせてチェック!
 
 
 
 by 

AUTHORこのブログをかいてる人

普段は看護師をしております。好きなものは日本史。特に古代史・平安・戦国・幕末が大好物です。都市伝説・フリーメイソンの話も大好きです。
休日は寺社、城、史跡巡りを主にしております。