WordPress サイトの高速化

パフォーマンス

測定方法

PageSpeed Insights

Google のモバイル／デスクトップのパフォーマンス測定および問題点と改善点の指摘サイト。

この数値でウェブページのレスポンスを語られることが多いが、実感と合わないこともよくある。

現在は、バージョン 6 であり、5 のころとは、評価基準も変更されている。

GTMetrix

サイトのパフォーマンス測定および問題点と改善点の指摘サイト。

PageSpeed Insights より分かりやすい。

Test My Site

Google のモバイル専用のレスポンス時間測定サイト

Chrome Developers Tool

上記より、詳しく調べられる。Lighthouse は、PageSpeed Insights の評価エンジンと同じものかつ、ローカルで測定。測定結果の詳細も、performance タブで調べられる。

Coverage では、読み込み時に実行された処理とされなかった処理が、明確に調査可能。

基本的に、このツールで詳細を押さえつつ、上記サイトで状況確認の繰り返し。

対策

画像の最適化

定番中の定番。WordPress で投稿に画像を組み込み時は、srcset で適切なサイズの画像が選択される仕組みとなっているが、自身で画像リンクした場合は、個別に最適化が必要

Google AdSense

レスポンス悪化でよく出てくる。自動表示をやめ、数は少なめに。

Cocoon のアクセス集計

非同期処理であるため、ユーザ体験を大きく損ねることはないが、処理には時間が掛かっているようであり、パフォーマンス結果の点数には、それなりに悪影響を与えている。

プラグイン

Smush　画像の遅延読み込み、画像の最適化と圧縮

EWWW Image Optimizer より人気がある模様。無料でも、ほぼ問題なく使えて、ボタン一つで圧縮してくれるようで、使いやすそうではあった。使ってはいませんが。

WP Super Cache

サイトキャッシュの有名なプラグイン。効果はそれなりにある。Luxeritas など、テーマそのものに同様な機能がある場合は、使用に注意が必要。ページ毎にキャッシュをクリアできるのは、デバッグで便利。

Autoptimize

JavaScript, CSS 圧縮で有名なプラグイン。Luxeritas との併用は、非推奨とのこと。

その他

JetPack の CSS を無効化

  • 全く使われていない JavaScript や CSS は、できるだけ整理する。
add_filter('jetpack_implode_frontend_css', '__return_false');
  • Cocoon のバックアップによる復元では、サイドバーの設定が行われない模様。Cocoon から、他のテーマを変えて復元しても、戻らなかった。
  • Shortcodes Ultimate クラッシクエディタ用の入力コンポーネント群。有名で、評価も高い模様。使ってはいません。

参考

WordPress

Posted by iwadjp