WING(アフィンガー5)

WING(Affinger5)で記事のAMP化をしたら読み込み速度が2倍に!!

更新日:

amp

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

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

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

 

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

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

PageSpeed Insights

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

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を導入するメリット

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

  • Webページの表示が高速になる。
  • ユーザビリティの向上

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

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

 

WING(Affinger5)でサイトをAMP化

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

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

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

  1. サイト全体をAMP化させる
  2. 個別記事ごとにAMP化させる

 

サイト全体をAMP化させる

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

WordPress管理画面>AFFINGER5管理>投稿・固定記事

amp

amp

 

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

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

amp

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

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

 

AMP化させる前に行う設定

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

Google Analytics

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

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

トップページ>管理画面

amp

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

amp

  • ウェブサイトの名前・・・任意。なんでも構いません。AMP+サイト名などがわかりやすいと思います。
  • ウェブサイトのURL・・・対象とするサイトURL
  • 業種・・・任意。一覧から選択します。
  • レポートのタイムゾーン・・・「日本」を選択

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

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

amp

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

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

WordPress管理画面>AFFINGER5管理>Google連携/広告

amp

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

 

Google AdSense

  • 自動広告

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

Googleアドセンストップページ>自動広告

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

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

amp

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

WordPress管理画面>外観>テーマの編集

amp

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

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

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

amp

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

 

  • テキスト広告とディスプレイ広告

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

Googleアドセンストップページ>広告ユニット

amp

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

amp

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

amp

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

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

amp

step
5

WordPress管理画面>AFFINGER5管理>Google連携/広告

amp

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

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

 

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

 

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

 

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

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

【参考】

AMP化チェックサイト

amp

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

amp

 

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

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

amp

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

amp

 

まとめ

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

この違いは驚きです。

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

最後に、このサイトではWING(Affinger5)を使用しています。ご自身のホームページやブログを収益化しようと考えている方は、WING(Affinger5)なんてどうでしょうか?AMPにも対応している優れたテーマです。よろしければ以下のリンクからご検討いただけると嬉しいです。

affinger5

WING(AFFINGER5 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

このサイトはWING(アフィンガー5)を使用しています

それでは、ここまで読んでいただきありがとうございました。

※記事内に広告が出て読みにくくなっているかもしれませんがご容赦いただければ幸いです。また、良記事を皆さんに提供できるよう努力いたしますので、応援していただけると嬉しいです。

-WING(アフィンガー5)

Copyright© Sometime/Someplace , 2019 All Rights Reserved.