どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ワードプレスブログの運営を続けている時に、ふと「ページの読み込みが遅いなぁ」と感じたことはありませんか？
それを気にせずそのまま放置してしまっていると、アクセスを逃してしまうことになる可能性が高いですよ！
ページの読み込みに必要な時間が３秒以上の場合、30～40％のユーザーがストレスを感じて、離脱してしまうと言われています。
また、WEBサイトの表示速度はSEOにも影響してくるので、遅いよりも早いに越したことはありません。
ワードプレスを始めたばかりの時は、コンテンツも少ないのでそれほど意識することでもありませんが、２ヶ月、３ヶ月が経過してくるとデータ量も多くなってくるので、いずれは対策が必要になります。
そこで高速化するための効果的な５つの設定についてまとめましたので、遅いと感じている方は取り入れてみて下さい。
ワードプレスの表示速度を確認してみる
まずは自分のブログがどのくらいの表示速度なのかを確認しておくことで、高速化の設定を行う前と後の変化や違いを知ることができます。
WEBサイトの速度を計測するためのツールは色々ありますが、私が使ってみてわかりやすかったのは以下の３つです。
モバイル・パソコン別の評価が点数でわかる：PageSpeed Insights
ランク別に「％」でスコア化される：GTmetrix
モバイルの速度の他に平均速度や推定離脱率がわかる：TestMySite
３つとも自分のブログURLを入力するだけで、あとは自動的に測定が開始されます。
それにしても私のブログは評価が良くありませんね。何とかせねば！
ブログを高速化させる為の５つの設定
今のブログの評価がわかったところで早速ですが高速化の設定を行って、ワードプレスを高速表示させていきましょう。
今回高速化するための設定は以下の５つです。
- 画像を圧縮して高速化
- CSS等のリソースを縮小して高速化
- 「.htaccess」にコード追加で高速化
- リビジョンを掃除して高速化
- Jetpackの「Photon」で高速化
①:画像を圧縮して高速化
アイキャッチ画像や記事内に複数の画像を使用している場合は、コンテンツが多くなるにつれてファイルデータの容量が増加していきます。
通常だと画像ファイルは、圧縮されることなくデータが保存されてしまいますが、これをワードプレスの「EWWW Image Optimizer」プラグインを使うことで、すべての画像を一括で最適なサイズに圧縮してくれます。
また、圧縮すると画像が劣化してしまうことがありますが、このプラグインなら画質を保ったまま転送サイズを削減することが可能です。
画像ファイルはすぐに多くなってくるので、「EWWW Image Optimizer」を導入して、表示速度の低下を防ぎましょう。
| 参考：画像圧縮で軽量化！EWWW Image Optimizerプラグインの設定と使い方 |
②:CSS等のリソースを縮小して高速化
「リソース」とは、動作を実行するために必要な処理を行うシステムのことで、主にワードプレスで使われているのは、「HTML・CSS・JavaScript」になります。
リソースのコード内には、不要な余白や改行によってファイルデータが大きくなっている為、これを「Autoptimize」プラグインでリソースを縮小し、ファイル内の無駄をなくすことで表示スピードを高められます。
また、縮小した複数のリソースを１つにまとめることもできるので、さらなる高速化に期待ができます。
プラグイン「Autoptimize」の使い方
ワードプレスの管理画面メニューから、「プラグイン」⇒「新規追加」に移動したら、「Autoptimize」を検索して「今すぐインストール」⇒「有効化」を行って下さい。
有効化できたらプラグインの一覧に移動するので、Autoptimizeの「設定」をクリックして「メイン」の項目内にある各リソースにチェックを入れます。
※JavaScriptは使用中のプラグインによっては相性が悪い場合があり、不都合が起きてしまう可能性があるので、ブログに問題が発生した時はチェックを外すようにして下さい。
デベロッパーツールでConsole内にエラーがないか確認して下さいね。
最後に『変更を保存してキャッシュを削除』をクリックすると、リソースの圧縮は完了になります。
③:「.htaccess」にコード追加で高速化
「.htaccess(ドットエイチティーアクセス)」とは、わかりやすく説明するとサーバー側の動作を制御するためのファイルになります。
このファイル内に「Gzip圧縮」の設定コードや、「ブラウザキャッシュ」の設定コードを追記することで、転送量を減らして高速化を図ることができます。
「.htaccess」ファイルを編集する際には、「FTPソフト」などのツールを使います。
FTPソフトはワードプレスのサーバー上にあるファイルを、自分のパソコンにダウンロードすることができ、いつでもファイル編集を行うことが可能です。
また、ワードプレスの編集中に不都合が起きてしまった場合にも、FTPソフトを使って編集前のデータをサーバーにアップロードすれば、簡単に復元させることができます。
FTPソフトを使って「.htaccess」を編集する
FTPソフトを使ったことがない方は、まずソフトをパソコンにインストールして、契約中のレンタルサーバーと接続する作業が必要になります。
私の場合は「FFFTP」というソフトでエックスサーバーと接続させていますが、作業自体は数分でできるので、「FTPソフトをインストールして追加する」方法を参考にされてみて下さい。
FTPソフトを開いたらサーバーと接続して、「自分のブログURL」⇒「public_html」に移動すると、「.htaccess」のファイルがあるのでこれをドラッグ&ドロップで、パソコン側にダウンロードします。
ファイルをテキストエディタで開いたら、以下のコードを一番下のところにコピー&ペーストで追加して、ファイルを上書き保存して下さい。
#フォントのcontent-typeの追加 AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/x-font-woff .woff AddType image/svg+xml .svg #ブラウザキャッシュの設定 ExpiresActive On ExpiresByType text/css "access plus 1 weeks" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" #フォント ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" #圧縮の設定 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript #フォント AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
このコードは寝ログさんの「ブログをダイエット！簡単15分でWordPressを高速化する為の5つの「減らす」設定」でご紹介されているものを、そのままお借りさせて頂きました。
あとは編集した「.htaccess」ファイルを、FTPソフトでサーバー側にドラッグ&ドロップで上書きすれば、高速化の作業は完了になります。
④:リビジョンを掃除して高速化
「リビジョン」とは記事の内容を編集した際に、自動でその時の内容を保存してくれる機能のことで、万が一記事が消えてしまっても復元できるありがたいものです。
ワードプレスではこれを常に自動で行ってくれるのですが、修正を行うたびに復元データが追加されてしまうので、気がついた時にはもの凄い数になっていることもあります。
リビジョンは投稿画面の右上にある「公開」から確認することができます。
この場合であればすでに復元データが「７つ」ある状態なので、同じような記事が10、100と積み重なれば、大量の不要なデータとなってサーバーにも負荷がかかってしまいます。
そこで「Better Delete Revision」プラグインを使うことで、不要なリビジョンを一括で削除することができます。
サーバーの負荷を少しでも軽減して、フットワークを軽くしてあげればブログの高速化にも繋がります。
プラグイン「Better Delete Revision」の使い方
ワードプレスの「プラグイン」⇒「新規追加」から、「Better Delete Revision」をインストール&有効化しましょう。
プラグインの「Settings」を選択して、『Check Revision Posts』をクリックします。
そうすると、今までのリビジョンの一覧がすべて表示されるので、最下部までスクロールしていき、『Yes , I would like to delete them!』をクリックします。
これで今までの膨大なリビジョンを、まとめて削除することができました。
それにしても合計で「942」もあったとは驚きですが、これからは定期的に削除していった方がよさそうですね。
⑤:Jetpackの「Photon」で高速化
「Jetpack」とは、ワードプレスが公式に提供しているプラグインで、様々な機能が集約されている便利屋さんのようなものです。
このプラグインの中に「Photon(現在はメディア)」という機能があり、これを使うと「CDN」によってサーバーの負担を分散し、表示速度を向上させることができます。
CDNとは「コンテンツ・デリバリ・ネットワーク」の略称で、WEB上のコンテンツを最適化されたネットワークで高速配信する仕組みのことです。
「Jetpack」プラグインを導入する方法
Jetpackを導入するためには、まず「WordPress.com」のアカウントを取得する必要があります。
ワードプレスの「プラグイン」⇒「新規追加」から、「Jetpack by WordPress.com」をインストール&有効化します。
JetPackの利用が初めての方は、以下のような画面が出てくるので『WordPress.comと連携』をクリックします。
そうすると、WordPress.comのアカウント作成画面が表示されるので、以下の項目を入力して『Sign Up and Connect Jetpack』をクリックします。
アカウントの承認画面になるので、『Approve』をクリックします。
WordPress.comと連携ができたら料金プランの設定に移動するので、ここは無料プランで十分なので、下部にある『Start with free』をクリックします。
これでJetpackが使えるようになりました。
「メディア」の設定方法
Jetpackプラグインの「設定」から「Writing」内の項目にある、「メディア」まで移動して「画像と写真をスピードアップ」を有効にすれば、CDNが反映されるようになります。
※画像が元の画質から劣化したり、アクセスが少ないうちは特に設定する必要はないようなので、ブログがある程度成長するまでは気にしなくていいかもしれません。
ただ、ワードプレスの高速化にはかなり有効な手段になるので、できるだけ早く表示したいという人や、特別画質を気にしないという人は活用していきましょう。
改善後の表示速度はどうなったのか
それでは実際にワードプレスブログの表示速度がどう変化したのかを、初めに計測した数値と見比べてみました。
まずはPageSpeed Insightsのデータになりますが、設定前はモバイルが「40」でパソコンが「64」の評価だったのが、このようになりました。
結果としてはモバイルが「26増加」、パソコンが「10増加」したので、高速化の効果は十分あったと言えるのではないでしょうか。
次にGTmetrixですが、こちらが設定前の結果です。
高速化の設定後がこちらです。
Yahoo!のパフォーマンスに関するYSlow Scoreと、ページの読み込みにかかる時間のFully Loaded Timeは、ほとんど変化はありませんでした。
ただ、ページスピードは「７％増」、全体のページサイズが「0.50MB減」、リクエスト数は「11減」と向上しています。
最後にTestMySiteになりますが、設定前の読み込み時間が「６秒」、訪問者の推定離脱率が「24％」だったのがこのようになりました。
設定後は読み込み時間が「１秒減」、訪問者の推定離脱率が「５％減」となったので、大きく変化した訳ではありませんが高速化には成功しました。
ここでの結果からして、確実に表示スピードがアップすることがわかりましたし、運営されているブログによっても伸び率が違ってくると思いますよ。
ワードプレスの高速表示まとめ
このブログでは、元々１つ目にご紹介した画像圧縮のプラグインを導入していた状態だったので、実質は他の４つを設定した結果となります。
今回の方法以外にも、キャッシュ系プラグインを導入するということもできますが、何かと不都合も多いので、初心者が下手に手を出すと逆に問題が発生してしまって、ブログの高速化どころではなくなってしまう場合もあります。
なので、ワードプレスを高速表示させるための設定としては、現状これがベストなのかもしれません。
５つの高速化設定は基本的に難しい設定でもないので、ブログの読み込み速度を手堅く速めたいという場合は、ここでの設定を一度試してみて下さい。
| 合わせて読んでほしい WEBサイトのページスピード選手権！表示速度が最も速いのはどこだ？ 人気ブロガーのページ速度を検証！好かれるブログに必要な速さとは ワードプレスを遅くするレンダリングブロックを改善して高速化しよう |
