• 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で99点!WordPressサイトの表示速度とパフォーマンスをプラグインで改善

PageSpeed Insightsで99点!WordPressサイトの表示速度とパフォーマンスをプラグインで改善

池田祐太郎 | 2019年11月4日 更新 | 2019年10月31日 公開

WordPressサイトの高速化や表示速度、パフォーマンス改善はPageSpeed InsightsやGTMetrix等のツールを使ってスコアが低い箇所を改善するという地道で専門的な領域となる作業です。

今回は有料プラグインではありますが、テーマ内のテンプレートファイルの調整や.htaccessの設定変更等は行うことなく、プラグインの設定のみで表示速度とパフォーマンスを大きく改善できた事例をご紹介します。

この分野は一時的に対応できたとしても、スコアルールの変更や追加により、継続的に対応する必要があります。紹介する有料プラグインでは、プラグインが適宜更新されており、新たなキャッシュ対策やパフォーマンス改善をプラグイン側で最適化可能です。

サーバー環境や利用テーマ、プラグイン等様々な要因に左右されるためすべてが同じような結果にはなりませんが、あくまで一例としてご参考ください。

目次

  • 1 結論
  • 2 前提条件
  • 3 キャッシュ対策プラグイン
  • 4 画像最適化プラグイン
  • 5 実施前と実施後の比較
    • 5.1 トップページ
    • 5.2 詳細ページ
  • 6 プロに依頼するのも一つの方法

結論

最初に結論をお話します。

  • キャッシュ対策のためWP Rocketプラグインを導入
  • 画像最適化や圧縮のためSmush Proプラグインを導入
  • 結果、
    • PageSpeed Insightsはトップページ57→99、詳細ページ70→98に上昇
    • GTMetrixのパフォーマンススコア(PageSpeed Score / Yslow Score)はトップページD(67%), D(62%)→A(95%), B(85%)、詳細ページC(70%), D(63%)→A(94%), B(87%)に上昇

それでは、詳しく見ていきましょう。

前提条件

今回対象となるサイトは以下の条件です。

  • さくらのレンタルサーバー スタンダード
  • PHP 7.3
  • SSL 未設定(httpサイト)
  • WordPress 5.2.4
  • オリジナルテーマ
  • 有効プラグイン
    • Advanced Custom Fields
    • All In One SEO Pack
    • BackWPup
    • Classic Editor
    • Contact Form 7
    • Google XML Sitemaps
    • ManageWP – Worker
    • WP Multibyte Patch
    • WP No Category Base
    • WP-PageNavi

オリジナルテーマにて作成されており、レスポンシブデザインによるスマホ対応。ニュースや問い合わせ等を含む一般的なコーポレートサイトです。サーバーもさくらのレンタルサーバーで月500円で安価なサーバーです。SSL対応していないためHTTP/2に対応していません。(本当はSSL対応しないといけないんですが…)

小規模の企業や店舗等のコーポレートサイトとしてよくある規模のサイトです。

キャッシュ対策プラグイン

キャッシュプラグインはW3 Total CacheやWP Super Cache等がありますが、データベース最適化や画像遅延読込等もあり海外のキャッシュプラグイン比較記事でも1位に選ばれているWP Rocketプラグインを導入・設定します。

1サイトであれば5,000〜6,000円程度で導入できます。1年間のアップデートが有効となり、2年後以降も利用する場合は再度購入が必要です。

1サイトの場合$49

WP Rocketのインストール方法や設定方法は以下を参考にしてください。

WP Rocketの設定方法と使い方

画像最適化プラグイン

画像圧縮や最適化用のプラグインとしてWPMU DEVが提供しているSmush proプラグインを導入します。無料版もありますが、機能が制限されます。以下は有料版の機能一例です。

  • 非可逆圧縮
  • CDN画像配信
  • WebP変換
  • 自動サイズ変更
  • 最大32 MBの画像を最適化
  • ワンクリックですべての画像の一括最適化
  • PNGを圧縮したJPEGへ自動変換
  • フルサイズ画像を圧縮(コピーのため任意の時点で復元可能)

一度設定してしまえば、今後追加する画像にもすべて追加されます。設定方法はいずれ記事を書こうと思います。書きました。設定方法は以下をご参考ください:Smush Proのインストールと設定方法

今回は有効にしませんでしたが、個人的にはCDN画像配信が嬉しい機能です。一応ベータ版らしいんですけどね。

費用ですが、WP Rocketに比べてこちらは1サイトの場合月2,000円程度かかります。画像圧縮だけでこの値段は決して安くはないですよね…
有料版には魅力的な機能がそろってはいますが、結構躊躇する値段設定だと思います。

1サイトの場合毎月$19

実施前と実施後の比較

プラグイン導入のビフォーと、WP RocketとSmush Proを導入したアフターの比較です。

トップページ

PageSpeed Insightsにおいてトップページの実施前と実施後の比較
GTMetrixにおいてトップページの実施前と実施後の比較

トップページは画像スライダー、グローバルメニュー、概要の説明、新着記事等を表示しています。

PageSpeed Insightsではコンテンツの初回ペイント、速度インデックス、インタラクティブになるまでの時間などそれぞれ大きく改善し、結果99点を取得しました!

GTMetrixでは読込時間は0.4秒程度、トータルページサイズも0.5MB程度の削減と大きな改善にはなっていませんが、リクエスト数は20弱程度減らすことができ、パフォーマンススコアは20〜30%程度上昇と大きな改善が見られました。

詳細ページ

PageSpeed Insightsにおいて下層詳細ページの実施前と実施後の比較
GTMetrixにおいて下層詳細ページの実施前と実施後の比較

下層の詳細ページは記事詳細ページとなり、ヘッダー、コンテンツ、サイドバー、フッターで構成され3スクロール程度のあまり長くないコンテンツ。PageSpeed InsightsとGTMetrixどちらもトップページと同様の箇所が大きく改善されています。さらに、GTMetrixのトータルページサイズが約半分程度まで圧縮でき278KBという結果でした。

どちらも読み込み時間は3秒以上かかってはいますが、月500円のサーバーでWordPressを動かしているということを考えればそれなりにいいパフォーマンスがでているのではないでしょうか。

ちなみに、Smush proは導入せずにWP Rocketだけ有効にした場合も検証してみました。PageSpeed Insightsで80点台、GTMetrixはパフォーマンスBレベルが出ていましたので、とりあえず導入してみようという場合や画像圧縮はすでに導入しているよという場合ははまずはWP Rocketを先に導入してみるのをおすすめします。

プロに依頼するのも一つの方法

詳細な設定内容は省略していますが、インストール後にサイトに合った設定でチューニングしています。WP Rocketの設定方法ページにも記載した通り、設定によっては不具合や崩れが起こる可能性があります。バックアップをとった上で十分に注意して設定するようにしましょう。また、プラグインは翻訳されていないためすべて英語です。不慣れな場合は躊躇してしまいますが、落ち着いて見ればわかると思います。

WordPress保守管理サービスではパフォーマンス向上に上記プラグインを採用しており、対象となるサイトへインストール、設定まで行っています。セキュリティ対策を行いつつ、表示速度やパフォーマンス改善も行える便利なサービスです。社内で対応が難しい、制作業者が対応できないといったケースであれば是非お問い合わせください。

WordPress保守管理サービス

Filed Under: WordPress 関連タグ:Webサイト高速化, 保守管理

池田祐太郎

WordPressをはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

WordPressの保守が必要な理由とチェックするべき9点
2021年1月29日
タグ: 保守管理
カテゴリー: WordPress
Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
2020年12月28日
タグ: 保守管理, 脆弱性
カテゴリー: WordPress
[WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
2020年10月10日
タグ: 保守管理
カテゴリー: お知らせ

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressの保守が必要な理由とチェックするべき9点
  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法

カテゴリー

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

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.