WordPressで運営しているブログの表示速度を早くしたいけど、何から始めたら良いか分からない!

WordPressでブログを運営している人なら、1度くらいは意識したことがあるであろう「表示の高速化」。

でも、PageSpeed Insight や GTmetrix といったブログの表示速度の測定ツールで少しでも高得点を取ろうと、WordPressをいろいろカスタマイズするうちに、何がなんだか分からわからなくなって「もう嫌~」と諦めてしまう人って意外と多いのでは無いでしょうか?

そこで今回は、WordPressの仕組みと、PageSpeed Insightの「速度に関するルール」 を照らし合わせながら、本当に必要な高速化の方法は何か?ということを考えてみましょう。

 

WordPressは動的ページ

まず、WordPressを高速化するための重要なポイントが「WordPressはPHPで動的ページを生成するCMSである」ということ。まずは、静的ページと動的の仕組みについて確認しておきます。

※高速化の方法だけ知りたいんだ!という人はこのセクションは飛ばしてもらってOKです。

 

静的ページの読み込み(HTMLページ)

静的ページの仕組み

静的ページとは、サーバー上に「index.html」といったHTMLファイルがあらかじめ用意されている状態のWebページのことをいいます。

アクセスしてくれたユーザーの「ページのリクエスト」に対して、すぐにリクエストされたページをレスポンスするため、読み込みにかかる時間は非常に短くて済みます。

 

動的ページの読み込み(WordPressなど)

動的ページの仕組み

一方、動的ページとは、ユーザーから「このページが見たい」というリクエストが有って初めてプログラムが動き出し、必要なデータを揃えてから、「こんなページができました」と返答があるWebページです。

静的ページに比べて、かなり多くの手順を踏まなければならないため、表示速度はその分遅くなります。WordPressにおいて高速化が注目されるのは、この表示の遅さを解決したいという想いがあるからでしょうね。

 

スポンサーリンク

PageSpeed Insightの速度に関する10個のルール

次に、WordPressの仕組みと、Googleが提供しているWebページのパフォーマンス計測ツール PageSpeed Insight のルール を照らし合わせましょう。

 

1.リンク先ページでリダイレクトを使用しない

リダイレクトは HTTP リクエストとレスポンスの追加のサイクルを発生させ、往復による遅延がさらに増えるため、アプリケーションが行うリダイレクトの数は最小限に抑えることが重要です。HTTP リダイレクトを避けると、ユーザーがページの読み込みを待機する時間を減らすことができます。サイトの設計を慎重に検討して、サイトのパフォーマンスをどこで改善できるか確認するようおすすめします。

「パソコン用のサイト」と「モバイル用のサイト」を別々に作っている場合、JavaScriptなどを利用して、アクセスしてくれたユーザーの端末(PC/スマホ)に合わせて、適切なコンテンツへ誘導する「リダイレクト」という手法を利用することがあります。

このリダイレクト、1回まではOKですが、リンクで飛ばされた先のページでさらにリダイレクトしてしまうと、アラートが出現する、というわけです。

wordpress-speeding-up-03

こんなこと有りえるの?と思われるかもしれませんが、例えば、コンテンツを移転して別のブログを作った時、そのブログがパソコンとモバイルの振り分け設定をしていれば、「元のページ→新しいページ」で1回、「端末によるページ振り分け」で1回の計2回、リダイレクトがカウントされてしまいます。

 

2.圧縮を有効にする

多くのウェブ サーバーでは、サードパーティ モジュールを呼び出すか、組み込みのルーチンを使用するかして、ファイルをダウンロード用に送信する前にgzip 形式で圧縮できます。圧縮すると、ウェブサイトを表示するのに必要なリソースのダウンロードにかかる時間を削減できます。

もともと、Webサーバー(Apacheなど)にはコンテンツを圧縮してからクライアントへ送信する機能が備わっています。

このアラートは、その圧縮の設定がONになっているかどうか、を知らせてくれるものになります。

wordpress-speeding-up-04

よくやる方法としては「.htaccess」へキャッシュを利用する旨を記載、とかでしょうね。

 

3.サーバーの応答時間を改善する

サーバーの応答時間は、ページのレンダリングを開始するのに必要な HTML をサーバーから読み込むのにかかる時間を測定したもので、Google とサーバー間のネットワーク遅延が差し引かれます。測定を実行するたびに差異がありますが、違いはそれほど大きくはなりません。サーバーの応答時間が大きく変動する場合は、根底にパフォーマンスの問題がある可能性があります。

実は一番対処が難しいアラートが、この「サーバーの応答時間を改善する」です。

基本的にサーバーのスペックによるところが非常に大きいので、このアラートが消えない場合は、サーバーを替えることすら検討する必要があるからです。

wordpress-speeding-up-05

めんどくさがり屋のあなたはエックスサーバーを選んでおけば安心

実は、ロリポップ!やさくらインターネットからエックスサーバーに移転する場合、バックアップ系のWordPressプラグインが上手く動かずに、ものすごくめんどくさい作業をしなければならない可能性があります(実体験)。

将来的な手間の多さを考えると、すこし月額料金は高くなりますが、最初からエックスサーバーを選んだ方が、ブログ運営そのものに集中することができるでしょう。

人気のレンタルサーバー4社を比較した結果と、僕が1年間複数のレンタルサーバーを利用してきて感じたことをまとめてみました。。

 

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

静的なリソースをブラウザでキャッシュすると、ユーザーがサイトに複数回アクセスした場合に時間を節約できます。キャッシュ ヘッダーは小さなサブセット(画像など)だけでなく、キャッシュできる静的なリソースにすべて適用されます。キャッシュできるリソースには、JS ファイル、CSS ファイル、画像ファイル、その他のバイナリ オブジェクト ファイル(メディア ファイル、PDF など)があります。

過去にアクセスしたページにもう一回アクセスしたい、と思った時に、また最初から同じ時間をかけてページを生成するのはユーザーにとって不便です。

なので、一定期間ブラウザに保存してもらうキャッシュデータを準備しておき、初回アクセス時に配布、2回目以降のアクセス時には、このキャッシュに変更があるかを確認してからページ生成するかどうか判断することで、サーバーの負担も減り、ユーザーも高速表示を手に入れることができます。

wordpress-speeding-up-06

このブラウザのキャッシュ機能が設定されていない場合に発生するアラートです。

 

5.リソースを圧縮する

リソースの圧縮(ミニファイ)とは、余分なスペース、改行、インデントなどの不要なバイトを取り除くことです。HTML、CSS、JavaScript を圧縮すると、ダウンロード、解析、実行時の速度を向上させることができます。また、CSS と JavaScript の場合、変数名を変更することでファイル サイズをさらに削減できます。

無くても動作に影響が無いものを徹底的に排除して、それぞれのリソースの容量を削減できるよ、という場合に発生するアラートです。

wordpress-speeding-up-07

特にWordPressにおいては、プラグインが独自のCSSやJavaScriptを出力することがあります。あまりにプラグインを入れ過ぎると、いざ圧縮した時に競合したり、うまく動かないことがあるので注意が必要です。

 

6.画像を最適化する

ユーザーがリソースの読み込みを待機する時間を削減するには、画像のサイズを最小限にします。画像のフォーマットや圧縮を適切に行うと、データのバイト数を大幅に節約できます。接続速度の遅いユーザーにとっては時間の節約になり、データ プランに制限のあるユーザーにとっては費用の節約になります。

Webページで公開している画像が見た目上、そこまで変化は無くてもサイズを小さくできる場合に発生するアラートです。

wordpress-speeding-up-08

デジカメで撮影した写真やインターネットからダウンロードできる素材集の画像を、そのままWordPressにアップロードしてしまうと、見かけ上は綺麗にコンテンツに収まっているように見えても、ページの読み込み時のファイルサイズは大きいままなので、かなりのデータ通信が必要になってしまうことも有ります。

 

7.CSS の配信を最適化する

ブラウザでは外部CSSファイルのダウンロードと処理が完了するまでコンテンツを画面に描画するのをブロックします。これによって、外部CSSファイルが多いと、コンテンツを画面に表示するのにかかる時間が増えます。

Webページは記載されている上から順番に読み込まれます。この際、外部CSSがページの上の方にあると、一旦CSSをすべて読み込んでから、次の記載内容を読み込もうとします。

特にheader部分にたくさんの外部CSSが存在すると、なかなかページの読み込みが始まらないため、このアラートが発生します。

wordpress-speeding-up-09

ちょっとしたCSSくらいなら、HTML内に記載するのも有りですが、WordPressでブログを運営するような場合、かなりのデータ量になってしまう可能性が高いので、フッターなどに移動してしまうのが一般的な対処法です。

 

8.見える範囲のコンテンツを優先する

リクエストされたデータの量が初期の輻輳ウィンドウを超える場合、サーバーとユーザーのブラウザ間で追加の往復が必要になります。モバイル ネットワークのような遅延の多いネットワークの場合、これによってページの読み込みが大幅に遅れる可能性があります。

ファストビューの画面で表示されるコンテンツについて、メニューバーなどの読み込みが多い場合に発生するアラートです。基本的には、モバイルの評価で注意されることが多いです。

wordpress-speeding-up-10

 

9.レンダリングを妨げる JavaScript を削除する

ブラウザではページをユーザーに表示する前に解析する必要があります。解析中に外部スクリプトがある場合は、解析を停止して、その JavaScript をダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。

これはCSSと同じですね。

wordpress-speeding-up-11

ファストビューに必要なJavaScriptはインライン化(HTMLに直接記載)、それ以外についてはフッターに配置するのが良さそうです。

 

10.非同期スクリプトを使用する

非同期スクリプトを使用すると、ページのレンダリングがより速くなります。ページのレンダリングの前にスクリプトのダウンロードが終了するまでユーザーを待たせる代わりに、スクリプトをバックグラウンドでダウンロードできます。

ページの内容を生成する際、常にどこか別のサーバーと通信しながらでないと出力できないコンテンツがあると発生するアラートです。ただ、現在のWebサービスにおいて、同期系のタグを入れなければならないサービスをなかなか見なくなったので、ほとんど気にする必要はなさそうです。

 

スポンサーリンク

WordPress高速化の14の方法

さて、お待たせしました。いよいよWordPressの高速化について、具体的な方法をご紹介します。

基本的な方針としては、「読み込むデータはできるだけ小さく」「キャッシュを利用」「効率的なシステム稼働」といったところ。

 

1.画像の最適化

[難易度:低]

まずは特別な制作知識(HTML/CSSやプログラミング)が無くても、手間さえかければ実現ができる方法が、 画像の最適化(圧縮) です。『ブログアップ前の画像圧縮って必要?』という記事でも書きましたが、Webサービスやプラグインを利用することで簡単に実現することができます。

 

2.テーマに沿った画像の選択をする

[難易度:中]

ブログのトップページやアーカイブページで、記事のアイキャッチ画像をサムネイルとして利用していることがあるかと思います。

各テーマによって、設定は様々では有りますが、「フルサイズのアイキャッチ画像を利用してCSSで大きさを調整する」のではなくWordPressにメディアアップロードで最適な画像を作成して利用するという方法を利用することで、さらにWebページの容量を縮小することができます。ただし、WordPressテーマのテンプレートを修正する必要があるので、若干、難易度は上がります。

 

3.画像の遅延読み込みの導入

[難易度:低]

PageSpeed Insight のルールにおいて「見える範囲のコンテンツを優先する」というアラートに対応するための方法になります。

「Laizy Load(遅延読み込み)」を実現するためのJavaScriptを組み込むことで、Webページにアクセスした際、一気にすべての画像を読み込むのではなく、スクロールに合わせて徐々に画像を読み込むようになります。

数値上の改善、というよりは、ユーザーの体感としての変化につながります。WordPressではプラグインで簡単に導入できますが、似たようなプラグインが複数ある分、「Celtispack」のような複数のプラグインが集まった統合プラグインでは思わぬトラブルに巻き込まれることもあるので注意しましょう。

 

4.必要ないプラグインがないか確認

[難易度:低]

ブログを始めるために選んだオススメWordPressプラグイン15選」のように、こんなプラグインを利用すると便利だよ!という記事はたくさんあります。

しかし、便利だからといってあれこれ導入すると、ブログの表示が遅くなってしまいます。特にリソースの圧縮をしようとして、思わぬ変数の競合などでWordPressの表示が崩れる、なんてことも有りえますので、定期的にこのプラグインは本当に使っているか?他の手段に変えることはできないか?ということを考えるようにしましょう。

 

5.必要の無いタグが出力されていないか確認

[難易度:中/バックアップ必須]

WordPressは、初期設定のままだと、自動的に多くのタグやJavaScriptを読み込むようになっています。それぞれについてちゃんと確認して、必要ないタグについては出力するのを止める、という方法になります。

そこまで劇的な速度の変化が起きる方法ではありませんが、同じようなJavaScriptを二重に読み込んでしまうなどのを避ける等、無駄を省くことで、プラグイン同士の競合も起きにくくなります。設定にはfunction.phpを利用するので、絶対にバックアップをとってから作業するようにしましょう。

 

6.CSS/JavaScriptのフッターへの移動

[難易度:中]

PageSpeed Insight でとても良く見るアラートが「クロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」です。本来は、ファーストビューのコンテンツ(アクセス時に表示される一番上のコンテンツ)で利用しているJavaScriptやCSSはインライン化(HTMLに直接記載)したほうが良いのですが、動きのあるコンテンツをアピールしたい場合を除いて、あとからの読み込みでまったく問題は無いでしょう。

ただし、これもWordPressテーマのテンプレートファイルを直接編集する必要があるので、必ずバックアップをとっておきましょう。子テーマを導入するのも有効ですよ。

 

7.ブラウザのキャッシュ設定

[難易度:低]

PageSpeed Insight のブラウザのキャッシュを活用する対処する方法です。「.htaccess」を編集することで簡単に導入が可能です。

ただし、FTPって何?という初心者の方にはちょっと難易度が高いかもしれません。上記の動的ページの読み込みにおける①必要なページのリクエストを高速化することができます。

 

8.生成されたページ(HTML)のキャッシュ設定

[難易度:低]

PageSpeed Insight の「圧縮を有効にする」というアラートに対処する方法です。WordPressが生成したHTMLWordPressページを圧縮するために、サーバー(Apacheなど)のキャッシュ機能を有効化します。

言葉で書くと難しく感じますが、これも「.htaccess」を編集することで簡単に導入が可能です。動的ページの読み込みにおける⑥必要なページをレスポンスを高速化する方法、とも言うことができます。

 

9.CSS/JavaScriptの圧縮(Minify)

[難易度:中/バックアップ必須]

PageSpeed Insight の「リソースを圧縮する」に対処する方法です。

普通、CSSのやJavaScriptは記載内容がわかりやすいように改行やTABでインデント(階段状に表示)することが多いですが、この「人間が見やすいように調整している改行やTABを削除することでファイルサイズの縮小を目指します。

CSS Minifier などといったWebサービスを利用するか、プラグインを導入することで実現できます。ただし、導入しているプラグインによっては、CSSのclass名が競合するなどしてうまく圧縮できない、なんてことも起こる可能性がありますので、CSSなんて分からないよ?という方は、いったん導入は見送りましょう。

動的ページの読み込みにおける④データを読み込みを高速化する方法でもあります。

 

10.データベースの最適化&キャッシュ設定

[難易度:高/バックアップ必須]

WordPressは常にデータベースからデータを取得することでページを生成しています。そこでデータベース自体の構造の最適化、およびキャッシュ設定をすることで、データベースからデータを効率的に取得してページの表示速度UPを目指す方法です。

動的ページの読み込みにおける③データベースへ問い合わせ(PHP)を高速化することができます。WordPressにおいてはプラグインの導入で簡単に設定できる(できてしまう)のですが、もしトラブルが発生した場合に復旧する自信が無ければ手を出さないようにしましょう。

最低でも、「Duplicator」などのバックアップ系プラグインでWordPress全体をバックアップしたうえで、ローカル環境やサブドメインで事前にテストしてから、作業するようにしましょう。

 

11.WordPressの最適化(オブジェクトキャッシュ)

[難易度:高/バックアップ必須]

オブジェクトキャッシュという言葉を聞いたことが有りますか?WordPressはWP_Object_Cache という関数を使うことで、自身の動作(PHPの動作)をキャッシュすることができます。

こちらも、もし失敗するとWordPress自体が動かなくなる可能性がありますので、バックアップをとった上でローカル環境などでテストし、最新の注意を払って作業しましょう。

動的ページの読み込みにおける②WordPressがリクエストを変換(コンパイル)を高速化することができます。

 

12.PHPのバージョン変更やキャッシュ設定の導入

[難易度:中/サーバー環境に依存]

これまで見てきたのがWordPressのカスタマイズで表示速度の高速化を目指す方法であるのに対し、ここからは完全にサーバー環境に関するお話です。

WordPressはPHPで動くCMS(Content Management System)なので、このPHPのバージョンを変更したり、「FastCGI」や「APC(Alternative PHP Cache)」といったキャッシュ設定により、PHPの動作そのものを高速化する、という方法があります。

動的ページの読み込みにおける③データベースへ問い合わせ⑤HTMLを生成の高速化、とも言い表すことが可能ですね。

 

13.サーバー独自の高速化について確認する

[難易度:中/サーバー環境に依存]

Webサーバーの中には、独自の高速化設定が可能なものも有ります。

たとえば エックスサーバーではmod_pagespeedというGoogleが開発・提供しているApacheモジュールを利用することができます。このmod_pagespeedを有効にすると、リソース(HTML/ CSSやJavaScript)の縮小して転送量を削減、同種のファイルをひとまとめにして無駄な通信を削減、などの最適処理をしてくれます。

 

14.サーバー移転を検討する

[難易度:低/コストがかかる]

ものすごく極論ですが、これまで見てきた方法をどれだけ頑張ったとしても、最終的にものを言うのはサーバーのスペックです。

ある程度ブログにアクセスが集まるようになると、どうしてもネットワーク負荷にサーバーが耐え切れなくなります。

であるならば、どこかのタイミングで、ご自身のサーバーを一新する、という選択肢も候補の1つとして考えるべきでは無いでしょうか?詳しいレンタルサーバーの比較は下記の記事をご確認ください。

 

WordPress高速化の10のルールと14の方法まとめ

今回の記事は、僕自身が本腰を入れてWordPressブログの高速化に取り組もう!と決意したため、まずは基本を抑えたいと調べた内容をまとめたものになります。

残念ながらWordPressの高速化については、「Webサーバー」「WordPressテーマ」「導入中のプラグイン」など、様々な要素が影響するため、すべての人にとって正解の方法はなかなか有りません。

それでも、今回の記事で書かれている内容を理解しておくことによって、今、対策しているのはWordPressでページを生成する流れのうちどこの部分なのか、自分のブログに足りないのはどこか?など、全体像を把握することができるようになるでしょう。

ちなみに、いろいろ考えるのはめんどくさい!という方は、「エックスサーバー」を選んでください。「FastCGI」や「APC(Alternative PHP Cache)」など、高速化についての設定が付いているので、初心者でも簡単に表示の高速化に取り組むことができるからです。

詳しい機能や1年間利用してきてわかったメリットについては、以下の記事をご確認ください。

以上、TSUNJI(@tsunji1983)でした!