AMPに対応・実装しました&WordPressテーマをLuxeritasに変えました

常時SSL可も無事に済み、気分転換にWordpressのテーマをSimplicityからLuxeritasに変更しました。

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

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

 

手始めに、高速化のためプラグインを整理

 

削除

 

停止

 

【Luxeritas】HTMLの圧縮。CSS、Javascriptの最適化

 

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

 

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

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

 

 

プラグインWP-OptimizeでWordpressを最適化

 

 

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

 

 

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

 

 

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

 

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

 

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

 

LuxeritasでAMP設定

 

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

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

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

 

 

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

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

 

 

AMP用ロゴ画像の設定をします。

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

 

 

私はこんな風に。

毎度のしょぼさ。

 

 

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

 

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

 

 

AMP用のCSSをカスタマイズ

 

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

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

 

 

何も記載しないと、デフォルトのまま。

 

 

AMP用スタイルにCSSを追記するとこんな感じに。

 

 

Wordpressをカスタマイズ。CSSの記述場所・追加CSS・スタイルシート

 

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

 

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

 

AMPにした結果

 

表示速度は早くなったのでしょうか。

 

Mobile Website Speed Testing Tool

 

実装前。

 

実装後。

大して変わらん…

 

PageSpeed Insights

 

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

 

パソコンLow。スコア50。

 

GTmetrix

実装後。

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

 

遅いー

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

 

AmazonはEスコア57%

 

Yahoo!はDスコア62%

 

GoogleでAクラス。ここまでスッキリさせないとAにならないのか?

 

後書き

 

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

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

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