プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. WordPress

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秒から1秒になり、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://windii.jp/ampではなくhttps://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 P明朝", "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にすると大分早くなるのですが、どっちを取るかが悩みどころですね。

The following two tabs change content below.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP