AMPに対応・実装しました

常時SSL可も無事に済み、気分転換にWordpressのテーマをSimplicityからLuxeritasに変更しました(2019年8月現在はCocoonを使っています)

そして、ついにAMPの導入。AMP(Accelerated Mobile Pages:アクセラレイテッド・モバイル・ページ)とは、モバイルページの表示速度を高速化することです。

導入に際し、プラグインなどで圧縮、最適化しました。

プラグインを整理

削除

停止

 

HTMLの圧縮

 

(Luxeritasの場合)

HTMLの圧縮を行いました。

  1. Luxeritas
  2. 圧縮・最適化
  3. HTMLの圧縮率を選択

 

下の方にある「CSSの最適化」「JavaScriptの最適化」も行いました。

気持ち軽くなったような…

 

WordPressを最適化

 

プラグインWP-Optimizeを使いました。

 

データベーステーブルやリビジョン、コメントの最適化ができます。

 

「期限切れのtransisetオプションを削除」も最適化しました。

 

画像を最適化

 

プラグインEWWW Image Optimizerを使いました。

「どうせやるなら徹底的に」ということで画像も最適化しました。

プラグインEWWW Image Optimizerで画像を最適化

 

テーマのAMP設定

Luxeritasでは簡単にAMPに実装することができる

プラグインは使いません。

  1. Luxeritas
  2. AMP
  3. 「AMP (Accelerated Mobile Pages) 有効化」にチェック

「AMPで有効化するプラグイン」を選択します。

使いたいプラグインを全てチェックで良いと思います。

LuxeritasのAMP設定方法

 

AMP用ロゴ画像の設定

幅600px以内、高さ60px以内の画像を用意します。

私は毎度のしょぼさ。

 

AMPを表示させたくないページ

投稿ページの右下の「AMP無効化」にチェックを入れると、AMP無効となります。

 

AMP用のCSSをカスタマイズ

何も記載しないとデフォルトのままになってしまいます。

「スタイルシート : style.css」に記載したcssをコピーして、AMP用スタイルに貼りつけます。

  1. Luxeritas
  2. 子テーマの編集
  3. AMP用スタイル : style-amp.css

 

AMPが有効になっているか確認

 

AMPが有効になっているか確認・修正する3つの方法

 

サイトは高速化されたのか?

Mobile Website Speed Testing Tool

モバイルサイトの速度を比較しましょう
他のトップブランドとご自身のモバイルサイトの速度を比較して、より速く快適なモバイルサイトを構築しましょう

実装前。

実装後。

大して変わらん…

PageSpeed Insights

モバイルはGOOD。スコア86。

パソコンLow。スコア50。

 

GTmetrix

実装後。

スピードスコア「D」ランク。61%

遅いー

画像もプラグインで圧縮したのに、と疑いの目で大手のサイトも測定してみました。

AmazonはEスコア57%

GoogleでAクラス。

ここまでスッキリさせないとAにならないようです。

 

後書き

速度はそう気にしなくても良い気がしてきました。

取りあえず、まだAMPエラーページがあるので、せっせと修正していきます。

常時SSL化に引き続き、AMPでも苦戦しそうです。

AMPの記事一覧

タイトルとURLをコピーしました