WordPressサイトである当ブログの読み込み速度改善に着手したのはちょうどひと月前。随分と速くなりました。それまで何もケアしていなかったのでちゃんとやれば普通レベルにはなるという証ですね。
着手した際の記事⇒Googleが検索順位判断基準とするサイト読み込み速度の改善対策
PageSpeed Insightsスコア大幅改善
現在のPageSpeed Insightsのスコア(3月1日時点)。施策前1月26日のスコアはスマホが12点、PCが48点だったので大幅に改善です。
PCの95点は自分でも驚き。あとはスマホをもうちょい上げたいところ。
WPサイトの読み込み速度改善具体策と効果
具体的にやったことは以下の5つ。
- レンタルサーバー環境改善 xServerのXアクセラレータ Ver.2を適用
- WPテーマ変更 AFFINGER4PROからAFFINGER5に変更
- スマホからの流入、閲覧を意識した投稿記事にAMPページを作成
- プラグイン見直し Autoptimize適用 CSSにキャッシュ設定、IMGの遅延読み込み設定
- WEBフォントの設定を解除
効果を実感したのがWEBフォント、プラグイン(Autoptimaize)とテーマ変更(AFFINGER5)です。まずはそれら以外の考察を。
サーバー側のアクセラレータ設定変更
レンタルサーバーの設定変更による効果は正直いうと未知数です。というのも同じxServerで運用している別サイト(WPサイト、HTMLサイト両方あり)ではサーバー側のアクセラレータを利用しなくてもそこそこ読み込み速度は速いから。
またレンタルサーバーの仕様上、他ユーザーも多数いる環境で速度については一概に設定だけではどうにもならないように思える。
AMP生成中にレイアウト無効アラート発生
AMPは3記事だけ生成チャンレンジしたところ見た目がどうも気に入らず止めました。
途中サーチコンソールからAMP HTMLのレイアウトが無効とのアラートもあり修正が面倒になったことも要因のひとつ(笑)。ただAMPが高速なのは明白なのでどう対応させるか今後の課題。
この後が実際に効果があった項目で誰にでも出来ることなので是非ご参考に。
お洒落なWEBフォントはやはり重かった
WEBフォントのオフは確実に効果あり。ただしお洒落なWebフォントが使えないのは見た目重視な人にとっては速度とのトレードオフですね(このらいぷろ見聞録は内容重視?なので特に問題にはなりません)。
WEBォントの速度対策としてCSSのプロパティ「font-display」があります。これはWEBフォントを読み終える前にローカルフォントを代用して表示を優先するものですがスマホで見てると明らかに挙動が不自然なので悩みどころ。AFFINGER5にも「font-display:swap」機能がありますがデフォルトではオフです。
WPは新しいテーマを使うべし
テーマをAFFINGER5に更新しました。これまでAFFINGER4PROだったので約4年ぶり?かな。
ここでお伝えしたいのはGoogleと同様にWordPress自体どんどんバージョンアップするのにテーマが古いままだとどうしても不整合が発生するし本来のWPのポテンシャルを発揮できない、最適化できませんよね、ということ。
さらに同じテーマのAFFINGERでもバージョンによって構造は異なります。CSSの記述は違うし余計なプラグインを使わなくてもよくなっている。AFFINGERに限らずテーマはなるべく新しいものを利用すべきです。
AFFINGER5はお勧めできるテーマである
実は私2013年からSTINGERユーザーです。AFFINGER5(WING)はSEO的にも機能的にも申し分ありませんのでどのテーマがいいか検討中なら選択肢のひとつにおすすめします。
⇒WordPressテーマ 「WING(AFFINGER5)」
優秀すぎるプラグイン「Autoptimize」
WordPressプラグイン「Autoptimize」の効果が凄い。このプラグインはJavaScript、CSS、HTMLを圧縮、最適化しユーザーに対して高速読み取りを支援します。
これまでキャッシュ系プラグインは使っておらず、強いていえば画像用にEWWW Image Optimizer(=画像圧縮プラグイン、WebP生成に利用)を使っていましたがAutoptimize導入でPageSpeed Insightsの「レンダリングを妨げるリソースの除外」の項目は殆ど消えました。
Autoptimizeのステータス見るたびにキャッシュが増えているのでまだこれからもその機能発揮に期待しています。
WPサイト読み込み速度改善具体策まとめ
スマホの読み込み速度は継続して対応しますが上記の具体策で随分改善したことは事実なので是非参考にして下さい。いずれ正式にGoogle評価項目となるんだから早めに対策方法をマスターしておきましょう。