WING（Affinger5）で記事のAMP化をしたら読み込み速度が2倍に！！

Designed by upklyak / Freepik

ホームページやブログを運営している方は、AMPってどうしていますか？

AMPはAccelerated Mobile Pageの略で、AMPを導入するとモバイル用のページの読み込み速度が速くなるみたいですね。

そんなに気にしてなかったのですが、この前「PageSpeed Insights」というGoogleのツールでパソコンとモバイルのページ読み込み速度を測定したところ、気にするようになりました。。。

PageSpeed Insightsによるサイトのページ読み込み速度の結果

パソコンでのサイトの表示速度結果

モバイルでのサイトの表示速度結果

なんと、モバイルでのサイト表示速度はパソコンの約半分。スピードの分類では「遅い」に分類されました。

PageSpeed  Insightsのページには以下のように書かれています。

• Good：ページには、パフォーマンスに関するおすすめの方法が最大限適用されており、最適化の余地がほとんどありません。ページのスコアは80以上になります。
• Medium：ページには、パフォーマンスに関する一般的なおすすめの方法の一部が実装されておらず、ある程度最適化の余地があります。ページのスコアは60～79の範囲になります。
• Low：ページは最適化されておらず、最適化すべき点がかなり多くあります。ページのスコアは0～59の範囲になります。

PageSpeed Insightsについて

読み込み測定ページはこちら

これによるとページが最適化されていないということなので、まずはAMPを導入しようと思います。

AMPとは

AMP（Accelerated Mobile Pages）は「モバイルページを高速に表示させるための手法、フレームワーク」のことを指し、GoogleとTwitterが共同開発したシステムになります。

AMP開発の背景には「Webページの表示速度がユーザーのサイト直帰率に大きく影響を与える」ということがあります。要は、サイト表示速度が遅いとすぐに離脱するけれど、速いと離脱しにくくなるという考えです。

マイナビニュースは

Webページの読み込みにかかる時間が2秒までは直帰率が9%ほどだが、3秒を超えると一気に直帰率が増え、5秒になると38%まで増えることをグラフに基づき記事にしている。

マイナビニュース「Webページの読み込み時間、3秒が限界か　5秒になると直帰率激増」より引用

では、次にAMP導入のメリットについて見てみましょう。

AMPを導入するメリット

最大のメリットは以下の通りです。

「ユーザビリティの向上」とはユーザーのサイト直帰率の減少と満足度の向上を意味します。結果、Google評価が高まることが期待されます。つまり、サイトのAMP化はSEO対策になるということです。

では、早速ですがサイトのAMP化に進みたいと思います。私は、WordPressのテーマが「WING（Affinger5）」なので、これ以降は「WING（Affinger5）」の例として記述していきます。

WING（Affinger5）でサイトをAMP化

サイトをAMP化しようと思ったら、いくつかあるルールのもとAMP用のコードで加筆修正する必要があり、かなり面倒なようですね。

WING（Affinger5）は、このようなAMP化を「チェック」を入れるだけで自動で行ってくれるとのこと。

AMP化の方法は2つ用意してくれています。

サイト全体をAMP化させる

以下のように「投稿・固定記事」に進むと、「AMP対応」の項目があります。

個別記事ごとにAMP化させる

「投稿の編集」画面で、設定することが可能です。

これを見ると本当に「チェック」を入れるだけで、サイト全体や個別記事のAMP化ができそうですね。

※この画面でAMP化を行う前に、AMP化対応のための設定をいくつかやっておきましょう。

AMP化させる前に行う設定

それほど難しいことではないので、順番に沿ってやってみて下さい。

Google Analytics

以下の手順に沿ってAMP用のGoogleアナリティクスのトラッキングコードを取得します。

step
1プロパティを作成をクリックする

step
2プロパティの設定を行う

入力後に、「トラッキングIDを取得」をクリックする。

step
3トラッキングIDのUA-以下の数字をコピーする

WordPressに戻り、コピーしたトラッキングIDを貼り付けます。

step
4トラッキングIDの貼り付け

※AMP用の箇所に、UA-以下の数字を貼り付ける。

Google AdSense

step
1AMP自動広告を選択する

「テキスト広告とディスプレイ広告のフォーマットをオンにします」をタップする。

step
2スクリプトをコピーする

step
3「single-amp.php」のheadタグ内にスクリプトを貼り付ける

「single-amp.php」の47行目くらいに、「〈／head〉」がありますので、その直前にコピーしたスクリプトを貼り付けます。

step
4「single-amp.php」のbodyタグ内にスクリプトを貼り付ける

Step2にあります手順３でコピーしたスクリプトを以下の場所に貼り付けます。

「single-amp.php」の318行目くらいに、「〈／body〉」がありますので、その直前にコピーしたスクリプトを貼り付けます。

step
1新しい広告ユニットを作成する

step
2テキスト広告とディスプレイ広告を選択する

step
3広告サイズを決定する

広告名は任意で大丈夫です。広告サイズはレスポンシブを選択して下さい。終了すれば「保存してコードを取得」をタップします。

step
4黒塗りの箇所をコピーする

step
5

Step4の広告コードの「ca-pub-」以降の数字と、「data-ad-slot」以降の数字を所定の場所に貼り付ける。

最後に「保存」をタップして終了となります。

「AMP化を行う前の設定」を終わらせた後、ひとまず試しに１つの記事のみAMP化を行いました。

1つの記事をAMP化した結果

AMP化できているかチェック

Googleのツールでサイトや記事がちゃんとAMP化されているかどうかをチェックすることができます。

【参考】

AMP化チェックサイト

記事のAMP化が成功しているか確認すると、無事に成功していました！！

PageSpeed Insightsによる記事のページ読み込み速度は改善された？

パソコンでの記事の表示速度結果

モバイルでの記事の表示速度結果

まとめ

AMP化することでパソコンとモバイルの表示速度がともに上がりました。特にモバイルは2倍以上。

この違いは驚きです。

全部、AMP化を進めたいところですが、いろいろ不具合が生じるページもあるかもしれませんので、１つずつ対応させようと思います。