以前から書いている表示速度高速化シリーズ。最初はサーバーの変更によってPageSpeed Insightのスコアが50点から77点になりました。
さくらのレンタルサーバーからエックスサーバーに変更すると表示速度が爆速に
次いでキャッシュの設定やPHPのバージョンアップを実施し、77点から82点へ。
エックスサーバーの設定を調整するだけでPageSpeed Insightsが82点に
そして今回、WordPress側のチューニングを行った所、82点だったスコアが97点をマークしました。3回の平均を取っているため100点をマークしたときもありました。当初の50点に比べると大きな改善となりました。とにかく早いです。体感でもサクサクで、モバイルでも全くストレスなく画面遷移し、サーバー移転前に比べて神レベルで高速になりました。
そこで今回実施した内容とPageSpeed Insightの詳細結果を公開します。
- WordPressサイトにキャッシュプラグインや画像圧縮系プラグイン等を導入しているが、目に見えた効果がない
- どのキャッシュ系プラグインを導入するか悩んでいる
- 画像圧縮系プラグインはどれを採用すればいいかわからない
- プラグインを使って無駄なコードを除外したい
これらに当てはまる方向けの内容となります。
目次
プラグインだけで試みたパフォーマンス改善
今回は基本的にプラグイン利用によりPageSpeed Insightの最適化ができるかどうかを試しました。
「WordPressのパフォーマンス改善はテーマに手を入れて改善しなければ高得点は出ない」
そう思われている人は多いと思いますし、僕もそう考えていました。しかし、今回はパフォーマンス改善のプラグインを導入することでどこまで改善できるかを検証した結果、高得点を取ることができました。
プラグインだけといっても、設定が管理画面からできるという利点はあるものの、特定のページで不具合が起きた箇所のCSSやJSの除外方法や、個別の対応はする必要があるため、「有効化してあとはこの通りに設定すればOK」という簡単なものではありません。
またもちろんWordPressによって利用しているプラグインも異なればサイトの構成、テーマ、カスタマイズ具合も異なるため、一概に同じプラグインを導入したからといって、高スコアになるということでもありません。
前提条件
テーマ、プラグイン、測定条件等は以前の記事を参考にしてください。以下が今回導入したプラグインです。
- 高速化を目的として WP Rocket プラグインを導入
- 画像圧縮や最適化を目的として Smush Pro プラグインを導入（Smush Proを導入するため管理プラグインとして WPMU DEV も導入）
- ファイルの読み込みを最適化するため Asset CleanUp プラグインを導入
4つのプラグインを有効化し、合計で利用しているプラグインは15個でした。
サーバー側の変更は前回で既に完了しており、特に変更していません。テーマファイルもTwenty TwentyというWordPress公式のテーマを使っており、特にカスタマイズをしていませんし、今回においてもしませんでした。
PageSpeed Insightsで測定した結果比較
PageSpeed Insightsの対象とする指標はすべてモバイルを指標としました。太字が改善された項目です。
| 改善実施前 | 改善実施後 | 差 | 改善率 | |
|---|---|---|---|---|
| モバイルスコア | 82 | 97 | +15 | +17.3% |
| First Contentful Paint(秒) | 1.4 | 1.2 | -0.2 | -16.2% |
| Time to Interactive(秒) | 2.7 | 1.5 | -1.2 | -45.7% |
| Speed Index(秒) | 1.8 | 1.2 | -0.6 | -29.6% |
| Total Blocking Time（ミリ秒） | 16 | 160 | +144 | 860% |
| Largest Contentful Paint(秒) | 4.7 | 1.4 | -3.4 | -70.2% |
| Cumulative Layout Shift | 0 | 0.003 | -0.003 | – |
モバイルスコアは15点上昇！正直ここまで上がるとは思いませんでした。
First Contentful Paintはあまり変わらず。
Time to Interactiveは結構下がり、Speed Indexも若干下がっています。
Total Blocking Timeはなぜか大きくなり、Cumulative Layout Shiftも0だったのが若干数字が出てしまい、この2点は前回より悪くなった箇所です。
そして一番の要因ではないかと思われる、Largest Contentful Paintは大きく改善しました。前回でここだけ赤色だったんですよね。緑色になるの初めてみたかも。
PageSpeed Insightsの「改善できる項目」「診断」は以下の通りです。
行った各種設定項目
前述の通り今回はプラグインを導入した上で設定を行いました。今回の設定はこのサイトに当てはまるものであるため、全てのケースに当てはまるわけではありません。また、有料プラグインのものも含まれているため容易に検証ができないかもしれませんが、参考として残しておきます。
また、実施の際は自己責任とし、実施前にバックアップを作成することをおすすめします。
以下、各画面に設定した内容です。
WP Rocket: パフォーマンス最適化＆高速化
- Cache
- Mobile Cache の Enable caching for mobile devices を有効
- Cache Lifespan を 7 daysに設定
- File Optimization
- CSS Files
- Minify CSS files を有効
- Optimize CSS delivery を有効
- JavaScript Files
- Minify JavaScript files を有効
- Load JavaScript deferred を有効
- Delay JavaScript execution を有効
- CSS Files
- Preload
- Preload Cache
- Activate Preloading を有効
- Activate sitemap-based cache preloading を有効
- Sitemaps for preloading にサイトマップのURLを絶対パスで入力（例 https://example.com/sitemap.xml）
- Preload Links
- Enable link preloading を有効
- Preload Cache
- Database
- Comments Cleanup
- Spam Comments を有効
- Automatic cleanup
- Schedule Automatic Cleanup を有効にし、Monthlyに設定
- Comments Cleanup
Smush Pro: 画像最適化
- Bulk Smush → Settings
- Image Sizes を All に設定
- Automatic compression を有効
- Super-Smush を有効
- Metadata を有効
- Image Resizing を有効にし、 2048 x 2048 に設定
- Original Images
- Smush my original full size images を有効
- Store a copy of my small originals を有効
- Directory Smush
- 該当するディレクトリを指定し実施
- Lazy Load
- 有効に設定
- Include/Exclude
- Classes & IDs に .wpp-thumbnail を設定し除外する（WordPress Popular Posts箇所の画像が正しく表示されなかったため）
今回は WordPress Popular Posts で人気記事ランキングをサムネ画像有りで表示している箇所の画像がうまく表示されませんでした。よって、該当する箇所の画像のclassを確認し、そのclass名をLazy LoadのExcludeに設定することで、Lazy Loadの除外をすることとなり、正しく画像が表示されました。同様にLazy loadを有効にすることで不具合が起こる箇所があれば除外する設定を行いましょう。
全て設定後、Bulk Smush を実施します（画像数によって数分〜数時間かかる）。
Asset CleanUp: 読み込みファイル最適化
- Setting
- Stripping the “fat”
- 注意文に目を通し、下部にある「I understand ~」の文のチェックを有効（有効にすることで各種設定ができるようになる）
- Plugin Usage Preferences → General & Files Management
- Hide WordPress Core Files From The Assets List? を無効（WordPressコアに関するファイルをいじらなければ無効にする必要無し）
- Test Mode
- Enable Test Mode? を有効（設定後は無効に設定）
- Site-Wide Common Unloads
- Disable Emojis Site-Wide を有効
- Disable oEmbed (Embeds) Site-Wide を有効
- Disable Gutenberg CSS Block Library Site-Wide を有効（ブロックエディターを使っていない場合のみ）
- Disable jQuery Migrate Site-Wide を有効（jQuery Migrateを読み込んでいない場合のみ）
- Stripping the “fat”
- CSS & JS Manager
- Homepage
- Contact Form 7 のCSS, JSをサイト全体で読み込まないよう設定（後で特定ページだけ除外する）
- Simple Lightbox のCSSをこのページで読み込まないよう設定
- Twenty Twenty（テーマ）の印刷用CSSをサイト全体で読み込まないよう設定（利用されるのが少ないと判断）
- WordPress Core (.css & .js) の wp-block-library （ブロックエディタ用CSS）をサイト全体で読み込まないよう設定
- Pages
- Contact Form 7 のCSS, JSをフォームを利用しているページのみ読み込むよう設定
- Homepage
各要素を設定後、ページを確認し設定したファイルが読み込まれていないか、除外設定した部分のみ有効されているかなどをDeveloper Tools等で確認します。
問い合わせフォームのように、特定のページでしか利用していないCSSやJavaScriptがある場合、一旦サイト全体で読み込まないように設定しておき、その後に必要なページだけで読み込むという方法にすることで無駄なリソースをダウンロードしないようにできます。
Simple Lightboxも投稿ページでしか使っていないため、トップページは除外しました。カテゴリーページやタグページ等の他のページでも除外したかったのですが、無料版では設定できない項目でした。
全て設定でき問題なければ、Test Modeを無効にします。これによりログインしていないユーザーに対しても設定が適用されます。念の為シークレットモードで確認しておきましょう。
プラグインだけでも十分に対応できた
今回はプラグインだけでページ表示速度の最適化を行い、PageSpeed Insightsで高得点をマークすることができました。
既に構築済みのWordPressの場合、サイトの構成やデザインや、利用しているプラグインやテーマのカスタマイズ等により、プラグインだけではパフォーマンス最適化がそこまで効果がないケースもあります。
その場合は表示速度とその他の部分との折り合いをどこまでつけるか、というところになると思いますので、開発側やデザイン側、その他の部門と調整が必要になってくると思います。
それでも、今回のようにプラグインだけで対応できる領域は少なくないため、できるかぎり手間や今後の運用に影響がない範囲で対応できると敷居もそこまで高くないのではないかと思います。有料プラグインのものもありますが、ぜひ一度試して見ていただければと思います。もちろん、無料の別のプラグインでも似たような結果は得られる可能性もあります。
今回利用した WP Rocket は WP Rocketの設定方法と使い方 でプラグインの説明から導入方法、簡易的な設定までご紹介しています。また、Smush Pro についても、 Smush Proのインストールと設定方法 にて同様にプラグインの説明、インストール方法、初期設定等について説明しています。一部は新しいプラグインバージョンで追加された機能等に対応していませんが、今回の設定に加えて、プラグイン自体や全体の設定などの理解が深まると思うのでぜひ御覧ください。
Asset CleanUp についてはまだ紹介記事がありませんので、いずれ公開の予定です。今回は無料版でしたが、Asset CleanUpにも有料版がありますので、さらに細かいチューニングをすることが可能です。
【追記】
Asset CleanUpの設定方法を公開しました。プラグインの導入から初期設定、不要なファイルの読み込みを外す方法などご参考ください。
最後に、弊社が提供するWordPressのメンテナンスや保守を行う WordPress 保守管理サポート では、上記有料プラグインのWP RocketとSmush Proをサービスとして導入しているため、追加料金無しでプラグインを利用することができます。パフォーマンス改善も含めてWordPressの保守を必要とされる場合はぜひご検討ください。
コメントを残す