AMP対応とレンダリングのブロック解消でサイトの表示を高速化
5月にWordpressのテーマをLuxeritasに変えました。AMP対応でとても速くていいですね。
でも今まで使っていたプラグインをそのままにしておくとLuxeritasのメリットを生かしきれないので、ここ3カ月ほどプラグインの変更など色々やってきました。
やっとほぼ納得できるレベルになったので、備忘録として紹介します。
レンダリングのブロックを解消する
Webページのパフォーマンスと改善方法を確認できる ”PageSpeed Insights”で初めて自分のページを確認したときは、モバイル・パソコン共にひどい状態でした。特にモバイルは30ポイント以下のページも。
テーマをLuxeritasに変更した後、作者（るなさん）のサイトを参考に改善したのですが、最後までレンダリングをブロックしていたのが、
- wordpress popular post
- fontawesome
- jetpack
の3つで、これの解消に取り組みます。
人気の記事を “Simple GA ranking" に変更
人気の記事を紹介する定番のプラグイン ”Wordpress Popular Post”。これがレンダリングをブロックしていると言われるので、 ”Simple GA ranking” に変更します。導入がちょっとややこしいですが、解説しているサイトが沢山あるのでそれを参考にして何とかなりました。
このプラグインはデフォルトで文字しか表示できませんが、現在はサムネイルを追加して使っています。
参考：Simple GA Rankingでサムネイルを簡単に表示する方法。
最初AMPページに表示されず悩みましたが、Luxeritasの”AMP で有効化するプラグイン”のチェックが外れていました（デフォルトがこうなっているみたい）。チェックを入れたら問題なくAMPページでも表示されます。
Jetpackを停止
WordPressを始めて真っ先にいれたプラグイン ”Jetpack”。
サイトのアクセス数を見たりするのに使っていましたが、AMPページが集計されないので最近は使っていません。
どうするか悩みましたが、停止することにします。
fontawesome5をcssに使わない
Luxeritasは、fontawesome4 と 5 をサポートしています。
私は今までfontawesomeを使ったことがなく興味があったので、新しいほうが良いだろうと、fontawesome5を使い始めたのですが、これがかなり悪影響を与えていました。
るなさんがブログで遅いと言っていたので、試しにLuxeritasのCSS設定で ”fontawesome4” 、 ”Luxeritasで必要最小限の CSS のみ” にしたらかなり速度が改善されます。
見出しのcssで使うのをやめて、レンダリングのブロックが解消されました。
商品紹介のAMP対応
このブログではnasneを紹介しているページが多いですが、以前はAmazonの商品を紹介するのに ”AmazonJS” というプラグインを使っていました。
とても良いプラグインなのですが、AMPに対応していません。
AMP化のために代わりになるものを探していたのですが見つからず、最初は下の amazon の普通のリンクを使っていました。
でも最近、Wordpressテーマ ”Simplicity” を開発した わいひら氏 が公開してくれた商品リンクを表示する方法がとても良くて、これに移行中です。
参考：コピペで実装！WordPressでAmazon PA-APIを利用して商品リンクを表示するカスタマイズ方法
Amazonだけでなく、楽天やYahooを使っている方にも紹介しやすくなっていて、とても良いです。
ここで紹介されている style.css の内容を、そのまま Luxeritas の AMP用css に書くとAMPのエラーが出るので、自己責任で ” !important ” を削除しています。
まとめ
Luxeritasを使い始めて約3か月、ようやく設定が固まってきた感じです。
”PageSpeed Insights” では、ちょっとサイズが大きい写真を載せている記事は点数が下がりますが、概ねモバイル・パソコン共に90ポイント以上になってきたので、しばらくはこの状態で記事を書いていこうと思います。