• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / パフォーマンス改善の結果PageSpeed Insightsで97点をマーク

パフォーマンス改善の結果PageSpeed Insightsで97点をマーク

池田祐太郎 | 2021年10月14日 更新 | 2021年8月27日 公開 コメントを書く

以前から書いている表示速度高速化シリーズ。最初はサーバーの変更によってPageSpeed Insightのスコアが50点から77点になりました。

さくらのレンタルサーバーからエックスサーバーに変更すると表示速度が爆速に

次いでキャッシュの設定やPHPのバージョンアップを実施し、77点から82点へ。

エックスサーバーの設定を調整するだけでPageSpeed Insightsが82点に

そして今回、WordPress側のチューニングを行った所、82点だったスコアが97点をマークしました。3回の平均を取っているため100点をマークしたときもありました。当初の50点に比べると大きな改善となりました。とにかく早いです。体感でもサクサクで、モバイルでも全くストレスなく画面遷移し、サーバー移転前に比べて神レベルで高速になりました。

そこで今回実施した内容とPageSpeed Insightの詳細結果を公開します。

  • WordPressサイトにキャッシュプラグインや画像圧縮系プラグイン等を導入しているが、目に見えた効果がない
  • どのキャッシュ系プラグインを導入するか悩んでいる
  • 画像圧縮系プラグインはどれを採用すればいいかわからない
  • プラグインを使って無駄なコードを除外したい

これらに当てはまる方向けの内容となります。

目次

  • 1 プラグインだけで試みたパフォーマンス改善
  • 2 前提条件
  • 3 PageSpeed Insightsで測定した結果比較
  • 4 行った各種設定項目
    • 4.1 WP Rocket: パフォーマンス最適化&高速化
    • 4.2 Smush Pro: 画像最適化
    • 4.3 Asset CleanUp: 読み込みファイル最適化
  • 5 プラグインだけでも十分に対応できた

プラグインだけで試みたパフォーマンス改善

今回は基本的にプラグイン利用により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の対象とする指標はすべてモバイルを指標としました。太字が改善された項目です。

改善実施前改善実施後差改善率
モバイルスコア8297+15+17.3%
First Contentful Paint(秒)1.41.2-0.2-16.2%
Time to Interactive(秒)2.71.5-1.2-45.7%
Speed Index(秒)1.81.2-0.6-29.6%
Total Blocking Time(ミリ秒)16160+144860%
Largest Contentful Paint(秒)4.71.4-3.4-70.2%
Cumulative Layout Shift00.003-0.003–
各指標により異なるが平均値のため小数点以下等の数字を調整

モバイルスコアは15点上昇!正直ここまで上がるとは思いませんでした。

First Contentful Paintはあまり変わらず。

Time to Interactiveは結構下がり、Speed Indexも若干下がっています。

Total Blocking Timeはなぜか大きくなり、Cumulative Layout Shiftも0だったのが若干数字が出てしまい、この2点は前回より悪くなった箇所です。

そして一番の要因ではないかと思われる、Largest Contentful Paintは大きく改善しました。前回でここだけ赤色だったんですよね。緑色になるの初めてみたかも。

100点をマークした時

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 を有効
  • Preload
    • Preload Cache
      • Activate Preloading を有効
      • Activate sitemap-based cache preloading を有効
      • Sitemaps for preloading にサイトマップのURLを絶対パスで入力(例 https://example.com/sitemap.xml)
    • Preload Links
      • Enable link preloading を有効
  • Database
    • Comments Cleanup
      • Spam Comments を有効
    • Automatic cleanup
      • Schedule Automatic Cleanup を有効にし、Monthlyに設定

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を読み込んでいない場合のみ)
  • 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をフォームを利用しているページのみ読み込むよう設定

各要素を設定後、ページを確認し設定したファイルが読み込まれていないか、除外設定した部分のみ有効されているかなどを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の保守を必要とされる場合はぜひご検討ください。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WordPress 関連タグ:Webサイト高速化

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

WordPressのパフォーマンスチームがパフォーマンス改善プラグインをリリース
2022年3月9日
タグ: Webサイト高速化, プラグイン
カテゴリー: WordPress
KUSANAGIの技術を取り入れた最新Xserverに移行後のパフォーマンス比較結果
2022年2月25日
タグ: Webサイト高速化, サーバー
カテゴリー: WordPress
Xserver 新サーバー移行時は注意。発生したエラーと対応方法
2022年2月17日
タグ: Webサイト高速化, サーバー
カテゴリー: WordPress

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. WordPressのパフォーマンスチームがパフォーマンス改善プラグインをリリース

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressプラグインのAI Engineを使ってコンテンツを自動生成してみる
  • ChatGPT の Webpilot プラグインを使って YouTube動画の内容を瞬時に把握
  • Photoshop の書き出し機能を活用したウェブ用画像の最適化とサイズ調整
  • 一つのバナーサイズで複数デバイスをカバーし、サイト運営を効率化させる
  • 注意。wp-config.php ファイルのバックアップはサーバーに置いてはいけない

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

ai Android CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール デザイン ブログ プラグイン マーケティング リニューアル レスポンシブWebデザイン 保守管理 効率化 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.