WordPressサイトの表示速度を劇的に改善する重要な最適化テクニック

サイトのセキュリティと同じくらい、表示速度はオンラインビジネスの成功を左右する重要な要素です。ページの読み込み時間はユーザー体験の中核を担うだけでなく、SEOをはじめとする検索エンジンの評価にも大きな影響を与えます。読み込みが1秒遅れるだけでコンバージョン率は約7%低下すると言われており、7秒の遅延となればコンバージョンは半減してしまう可能性もあります。

PageSpeed Insightsでサイト速度を計測しよう

サイトの読み込み時間にはさまざまな要因が関わります。勘に頼って対策するよりも、Googleが提供する「PageSpeed Insights」を活用して、自サイトに必要な改善点を正確に把握するのがおすすめです。

1. PageSpeed Insightsの公式サイトにアクセスします。

2. 「ウェブページのURLを入力してください」という入力欄に、測定したいサイトのURLを入力します(例：MakeTechEasier.com)。

3. 「分析」ボタンをクリックし、解析が完了するまで待ちます。

4. 解析が完了すると、サイトのパフォーマンスに関するレポートが表示されます。このレポートでは、すでに適切に対応できている点と、改善が必要な点がひと目でわかります。レポートの内容をもとに、推奨される修正を実装していきましょう。

レポートはモバイルとデスクトップそれぞれの画面向けに用意されており、各レポートは「改善できる項目(可能な最適化)」と「確認された改善点(発見された最適化)」の2つに分かれています。

Make Tech Easier(MTE)の場合、「改善できる項目」には以下が挙げられました。

• ファーストビューのコンテンツでレンダリングをブロックしているJavaScriptとCSSの削除
• ブラウザキャッシュの活用
• 画像の最適化

これはあくまでMTEのケースであり、下の画像のとおり、Googleの基準でもMTEは十分な速さを保っています。速度面での最適化が進んでいないサイトであれば、より多くの改善提案が表示されるはずです。

なお、PageSpeed Insightsの解析結果は個別のページごとに出力されます。サイト全体を一括りにするのではなく、各ページがどれだけ速く読み込まれているかを細かく把握できるのが、このツールの便利なところです。

MTEで「確認された改善点」として表示された内容は以下のとおりです。

WordPressサイトの表示速度を最適化する方法

PageSpeed Insightsによる改善提案をもとに、WordPressサイトの速度を高める具体的な方法を見ていきましょう。

1. ファーストビューでレンダリングをブロックするJavaScript・CSSを削除する

要するにPageSpeedは、特定のCSSがサイト上で描画される速度を改善することを推奨しています。ただし、提案内容の実装手順はやや技術的で、開発者でない方にはハードルが高いかもしれません。コードに手を加えずにWordPressサイトの速度を改善したい場合は、「Autoptimize」プラグインの利用がおすすめです。

Autoptimizeはスクリプトやスタイルシートを集約・圧縮(minify)・キャッシュし、デフォルトでCSSをページのhead内にインライン化するとともに、スクリプトをフッターへ移動・遅延読み込みさせます。さらにHTMLコード自体も圧縮するため、ページを大幅に軽量化できます。

2. ブラウザキャッシュを活用する

WordPressのキャッシュプラグインを使って、サイトのコンテンツをキャッシュしましょう。キャッシュを利用すると、Webコンテンツが静的なHTMLファイルとして配信されるようになります。定番のキャッシュプラグインとしては、WP Super Cache、W3 Total Cache、WP Rocket、WP Fastest Cacheなどが挙げられます。

3. 画像を最適化する

画像の最適化には複数のアプローチがあります。アップロード前に画像を最適化しておくことに加え、プラグインを使ってさらなる圧縮を行うことも可能です。

FireworksやPhotoshopで画像を作成している場合は、「Web用に保存」機能を使ってファイルサイズを削減しましょう。画像編集ソフトをお持ちでない場合は、ImageOptim(Mac専用)、Compressor.io(Webサービス)、TinyPNG(同Webサービス)などの最適化ツールを利用できます。

また、WP SmushやShortPixelなどの画像最適化プラグインを使えば、最適化プロセスを自動化することもできます。

さらにLazyLoad系プラグインも有効です。ユーザーがページをスクロールしたタイミングで必要な画像だけを読み込む仕組みのため、転送帯域を節約できます。

その他のサイト速度最適化策

お気づきの方もいるかもしれませんが、ほとんどの最適化はプラグインで実現でき、コードに手を加える必要はありません。しかし、WordPressサイトの速度最適化にはプラグイン以外の要素もあります。ここでは、適切なホスト・ホスティングプランの選択と、CDN(コンテンツデリバリーネットワーク)の活用という2つの観点を紹介します。

ホストとホスティングプランの見直し

「無制限のページビュー」を謳う共用サーバーは一見お得に思えますが、見えないコストが潜んでいます。サイト速度が低下し(SEO評価・ユーザー体験・サイトの信頼性を損ないます)、ダウンタイムも頻発しがちです。

では、ホスティングはサイト速度にどれほど影響するのでしょうか。Colocation Americaによると、VPSホスティングへの移行でサイト速度が62%向上したというデータがあります。またSEJの調査では、共用サーバー上のページの読み込みに約8秒かかったのに対し、VPSホスティングでは2秒強で読み込めたとのことです。

可能であれば、共用ホスティングではなくVPSやその他の専用ホスティングへ移行しましょう。安価なホスティングは一見コストを抑えられるように見えて、実際にはビジネスの足を引っ張ることになりかねません。

また、GZIP圧縮に対応したホストを選ぶことも重要です。GZIP圧縮を利用すれば、動画・音声・画像ファイルを含むファイルサイズを最大70%削減でき、品質を落とすことなくサイトを高速化できます。GZIP圧縮の適用状況は、GD Networkのツールなどで確認できます。

CDNで負荷を分散させる

サイトへのトラフィックが増加傾向にあるなら、Amazon CloudFrontなどのCDN(コンテンツデリバリーネットワーク)の利用を検討しましょう。CDNは画像、CSS、JavaScriptといった静的ファイルを世界各地のサーバーに分散配置します。訪問者は地理的に最も近いCDNサーバーからコンテンツを受け取れるため、表示速度の大幅な改善が期待できます。

「CDN Enabler」プラグインを使えば、お好みのCDNサービスをWordPressサイトに簡単に統合できます。

まとめ

サイトのセキュリティに妥協しないのと同じように、WordPressサイトの表示速度も妥協してはいけません。Google自身が、サイト速度を重視した設計のウェブサイトを優先的に評価すると公言しています。検索エンジンだけでなく、ユーザーも表示の遅いサイトよりも快適に閲覧できるサイトを選ぶものです。ぜひ本記事のTipsを今日から実践してみてください。