WordPressサイトをAMP対応で3倍速にする方法【AMP for WP】

WordPress
1861 view

WordPressサイトをAMP対応で3倍速にする方法【AMP for WP】

最終更新日:2019/03/07

AMPforWp

AMP対応をWordpressサイト上（当サイト）で実装し、表示までの時間が1/3以下になったので、今回はAMP対応の方法、デザインの修正、Analyticsの設定、AMPにどのくらいの期間で変わるか、についてまとめてみました。

モバイル端末上で、当サイトの記事ページのurlに/ampを追加する事で最終的な結果を確認をすることができます。

AMPとは

AMPとは、Accelerated Mobile Pagesの略で、モバイル端末向けの高速表示可能なHTMLの事で、AMP対応をすると、高速表示によるユーザー体験の上昇が見込めます。

AMP対応しているサイトでは、以下のようにGoogleモバイル検索結果のカルーセル枠に優先的に表示され、稲妻マークが表示されます。
amp-rizing

AMP対応するとWebページの表示速度が上がる理由。

Google AMP Cacheにより、Google等にデータが保存（キャッシュ）され、他社ドメインから配信されるから。
データ量に制限が加わるから。
シンプルな、AMP規定のHTML/CSSを要求されるから。

AMP対応によるデメリット、懸念点

カルーセル表示よりも、従来のテキスト形式表示のがクリック率が高かったらしい
AMP対応した後はレイアウトが既存のものとは異なるものになる。
データ量に制限が加わるのであれば、テキスト形式メインのnewsサイト以外には向いていない？
WordPressでなかった場合は、実装コストが高い？

実は効果が低い！？カルーセル形式で結果表示されるAMPコンテンツが抱える課題とは？

ものは試し、WordpressサイトのAMP対応の方法を検討

日本語記事の中で、紹介の多かったAMP for WordPressと悩みましたが、2018年で、一番優れていると言われているプラグイン、AMP for WPを選択する事にしました。

12 Best AMP Plugins for WordPress [2018]

AMPforWPとは

AMP用のWordPressサイトを即座に最適化するオールインワンプラグイン。
幅広い拡張機能、サポートオプション、デザインカスタマイズツールを備えていて、ドラッグアンドドロップページビルダで簡単にレイアウトができる。
YouTube、Twitter、Instagram、Facebookの挿入などもサポートされている。
モバイルリダイレクションを実装している事により、SEOにも強いらしい。

AMP for WP – Accelerated Mobile

AMPforWPのインストールと設定

プラグインの新規追加から、AMP for WP – Accelerated Mobileをコピー&ペーストして、インストールした後に有効化をしてください。
プラグイン、インストール済みプラグイン、settingを押すとAMPforWPの設定画面に移動する事ができます。

amp-setting

まずは、表示を確認したいところですが、デザインのテーマ選択だけやってしまいましょう。
DESIGN　themesと移動するとampでのテーマを選択する事ができるので、自分の好みのテーマを選択してSaveChangesボタンを押して変更を反映させてください。
僕は、Wordpress感が薄いかなと思い、theme3を選択しました。

AMPページをWordPress内で確認。

ampページは、既存のurl/ampで確認をする事ができます。

例

//Toppage
ttps://windii.jp/amp/

//記事ページ
ttps://windii.jp/laravel/laravel-with-docker-compose/amp

Toppageと記事ページに分けて確認していきます。

無事、AMPページが表示されている事が確認できたところで、GoogleSearchConsoleのAMPテストに通してみましょう。

amp-test

きっちりと、AMPページが作成されている事がわかりました。

AMPvs現行スピード対決

速度比較の為、PageSpeed Insights
というgoogleのデベロッパーツールで速度スコアを比較してみます。

PageSpeed Insightsはページがパフォーマンスに関する一般的なおすすめの方法にどの程度準拠しているかを評価し、ページのパフォーマンス改善の余地を推定したスコアを 0～100 の値として算出します。

現行
wordpress-speed

amp
wordpress-amp-speed

コンテンツの初回ペイントが、なんと3.6秒から１秒になり、AMPのスピードを目の当たりする事ができました。

AMPページのレイアウトカスタマイズ

現在のAMPページ

作業の流れ

headerの設定
記事ページ内部の設定
socialiconの設定
独自cssによるカスタマイズ

AMPデザインカスタマイズに使うDESIGNの機能紹介

表示速度が1/3になるのであれば、躊躇してられないのがデザインです。

前回記事で紹介したAMPforWPのデザインの場所に移動してください
プラグイン→インストール済みプラグイン→settings→DESIGN

amp-setting

AMP for WPでは、DESIGNというオプション機能で、AMPページのレイアウトをカスタマイズする事ができます。
まずはじめに、DESIGNの機能をざっくりと紹介します。

themes テーマの選択(有料版あり）
global プライマリーカラーの選択　追加CSSを記入する場所
header ヘッダー設定
homepage トップページの設定
single 記事ページの設定
- footer フッターの設定
page 固定ページの設定
social SNSリンクの設定
Date 何日前等の表記の設定
misc その他

今回はトップページを利用しないため、header→single→footer→social→globalと移動していきます。

ヘッダーの設定

DESIGNからHeaderに移動してください。
amp-header-setting
上から順に解説すると、
– Navigation Menu　メニューバーの表示非表示、
– Call Now Button telリンクの表示非表示
– Non-AMP link in Header headerのリンク

Non-AMP link in Header を適用すると、ヘッダーをクリックした際、https://tech.windii.jp/ampではなくhttps://tech.windii.jpに飛ばす事ができる。

Make Header UnSticky ヘッダーがスクロールしても、ついてくるようにするかどうか
Header Background ヘッダーの背景色
Header Elements ヘッダーの中にある要素の色選択

上記画像の通りにセッティングして、大分印象が変わって来ました。
amp-wordpress-head-sample

記事ページ内部のカスタマイズ

次はsingleに移動してください。
Related Post Settingsのimagesをオフにしました。

これは、関連記事のリンクにサムネイルをつけるかどうかの設定です。

SNS連携の設定

AMP for WPでは、数多くのsnsとの連携がサポートされています。
初期設定だと、日本であまり流行っていないSNSが多くなるため、日本仕様にしたのがこちらです。

amp-sns-list2

画像だとわかりにくいかもしれないんですが、facebook,twitter,line,hatenabookmark,pocketをスクロールされてもついてくるSNSシェアエリアに表示しています。

footerの設定。

amp-footer

クレジットの表記とかの設定ですが、不必要だったので、全部無効にしています。

CSSでカスタマイズ

globalに移動するとCSSを書ける、カスタムCSSというエリアがあるので、そこで、CSSを書いていきましょう。
windiiの場合は、以下のようにfont-familyの統一をメインに行いました。

.amp-logo{
    font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    letter-spacing: 1.2px;
    font-weight: bold;
}
.amp-wp-article{
        font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
h1.amp-wp-title{
        font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
h2>span{
        font-family: Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
amp-social-share{
    border-radius:3px;
}
pre{
    background:#000;
    color:#fcfcfc;
    padding:8px 16px;
    border-radius:3px;
}

最終的なAMPページ
last-amp

モバイル端末上で、当サイトのurlの末尾に/ampをつけることでも確認する事ができます。

GoogleAnalyticsでのアクセス解析に対応。

トラッキングIDの確認。

AMPページでのAnalyticsもアクセス解析できるようにします。
Googleアナリティクスに移動してトラッキングIDを確認してください。

トラッキングIDの確認は
analyticsのダッシュボード　>　管理　> トラッキング情報　> トラッキング管理で行う事が出来ます。

AMPforWPでアナリティクスに対応。

ダッシュボード > AMP >Settings > アナリティクスに移動して、トラッキングIDを貼り付け、SaveChangesより、設定を保存してください。

##　AMP対応してから一週間〜2週間でのアナリティクス。
AMPじゃないページへのモバイルでのアクセスが半減。

AMPページへのアクセス。9割以上がスマートフォンからのアクセス。
analytics

スマホページでのトータルのアクセス数推移は、増加。ただし、AMPにしたからかは不明。

まとめ

WordPressでAMP対応するならAMPforWPがおすすめです。
デザインの修正が大変なので、レイアウトに拘るならAMPにしないもしくはデザインを頑張る必要があり結局WINDIIでは廃止されました。

AMPにすると大分早くなるのですが、どっちを取るかが悩みどころですね。

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！