AMPに対応・実装しました

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

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

プラグインを整理

削除

停止

 

HTMLの圧縮

(Luxeritasの場合)HTMLの圧縮を行いました。

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

下の方にある「CSSの最適化」「JavaScriptの最適化」も行いました。気持ち軽くなったような。

WordPressを最適化

プラグインWP-Optimizeを使いました。データベーステーブルやリビジョン、コメントの最適化ができます。「期限切れのtransisetオプションを削除」なども最適化しました。

WP-Optimize – Clean, Compress, Cache.
Boost your site's speed and performance through caching. Clean the database, compress images and cache your site for higher speed & SEO.

 

画像を最適化

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

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

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

 

テーマのAMP設定

Luxeritasで簡単にAMPに実装

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

Luxeritas→AMP→「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つの方法

 

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

➡モバイルサイトの速度を比較しましょう

実装前。

実装後。

大して変わらん…

速度は画像の大きさ、広告によっても遅くなります。Googleくらいまでスッキリさせないと最速にはならないようですので、それほど気にしなくても大丈夫だと思います。

他、PageSpeed InsightsGTmetrixなどで計測することができます。

 

後書き

まだAMPエラーページがあるので、せっせと修正していきます。常時SSL化に引き続き、AMPでも苦戦しそうです。

◇AMPの記事一覧







AMP サイト運営
わたしらしく