知らないと損！WordPressが重い時に、簡単に直せる方法を解説！

WordPressの遅い原因をGoogle製lighthouseを使って調べます。大抵、遅い原因は画像です。たまにフォントファイルがボトルネックになっていることがあります。

WordPressの重い原因の対応方法について解説していきます。

WordPress遅い原因を調べる方法

まず、信頼性の高い評価ツールを使ってWordPressが遅い原因を調べます。

Google開発したWebサイトの品質を測定するためのオープンソースの自動化ツール「lighthouse」を使います。

シークレットウィンドウにGoogle Chromeの拡張機能に追加して、測定したいページを開いてlighthouseのアイコンを押して、「General report」を押すだけで計測ができます。

ちなみにここのサイトのトップページの評価です。Peformanceが悪すぎですね。重いはずです。SEOはなんと！100！ (笑)

注意点は、このツールの計測範囲は、開いたページだけなので、ページごとに計測していく必要があります。

このツールのいいところは、評価するだけではなく改善方法を出してくれるところです。提示された方法で、できる範囲で改善していきます。

画像を対応する

WordPressサイトが遅い原因のほとんどは、Javascript、css、画像です。

Javascript、cssは、変更が容易にできるケースは少ないので、画像を対処して速度を上げる方法を解説します。

画像圧縮

画像サイズが大きいままアップロードして投稿している。

WordPressを運用する際、画像の幅と高さの最大を決めておいて、画像をアップロードする場合は、画像編集ソフトでそのサイズ以下にしてアップロードする。

既にアップロード済みの画像は、いちいちダウンロードしてサイズ編集してまたアップロードは大変なので、次のプラグインで、圧縮をかけます。どちらでもかまいません。

違いは、EWWW Image Optimizerの自分のサーバー内で圧縮処理をしますが、Compress JPEG & PNG imagesは画像データをサービスサーバーに送って、そこで圧縮します。

EWWW Image Optimizerは設定をすれば、圧縮率がCompress JPEG & PNG images高いです。

Compress JPEG & PNG imagesを利用するには、簡単なアカウント登録が必要で、月に圧縮できる枚数が500枚ぐらいです。

画像が大量にない方は、Compress JPEG & PNG images。登録手続きがめんどうだという方は、EWWW Image Optimizerをプラグイン検索をしてみてください。

画像読み込みを遅延させる

画像が表示領域に入ろうとしている時、入った時にだけ読み込まれるので、読み込み速度が上がります。体感的に早い感じに変わります。

JetPackやEWWW Image Optimizerのオプションの機能をオンにするか、BJ Lazy Loadを入れて設定します。

画像の高速化対応をすれば、ほぼ高確率でWordPressサイト全体の表示スピードが改善、重い原因が解決します。

フォントデータを対応する

意外と多いのが.otfや.ttfなどのフォントデータです。フォントデータは、容量がかなりあるので、異常に遅い原因になっていることがしばしばあります。

圧縮させて転送する

Webサーバーでファイルを圧縮して転送する設定を.htaccessにします。フォントファイルだけではなく、ついでにhtmlやcssなど他ファイルも圧縮させておきましょう。

<ifModule mod_deflate.c>
<IfModule mod_filter.c>

#圧縮
SetOutputFilter DEFLATE

#圧縮に問題を抱えているブラウザ用
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

#画像は圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
 
#テキストなどは圧縮する
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/font-woff2
AddOutputFilterByType DEFLATE font/woff 
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/eot
AddOutputFilterByType DEFLATE font/opentype

</IfModule>
</ifModule>

ブラウザにキャッシュさせる

ブラウザにフォントファイルを持っててもらう設定です。2回目以降アクセスがあった場合、フォントファイルはローカルブラウザにあるので、転送する時間が省けて高速化します。

.htaacessにキャッシュ設定します。フォントファイルは一度決まったら、ほとんど変更することがないと思いますので、キャッシュ有効期限を3ヶ月にしておきます。

<IfModule mod_expires.c>
    ExpiresActive On
    <FilesMatch "\.(otf|eot|woff|woff2|ttf)">
        ExpiresDefault "access plus 3 months"
    </FilesMatch>
</IfModule>

自前でどうにかするというのがきつい

自分で対応ができない場合は、クラウドソーシングで、専門家に代行してもらう手があります。安価でピンポイントな対応が可能です。

最後に

画像、たまにフォントファイルが遅い原因になっていることを解説しました。

CDNを利用するとかキャッシュのプラグインを入れるとかいろいろ他に方法があるのですが、今回の対応を実施して見るとは即効性があり体感的にも変化がわかると思います。

ページ重いのは、SEO的にもよくないですし、なにより読者にとって害でしかないので、改善したほうがいいですね。

最後までお読みいただきありがとうございました！

Photo by Computer vector created by upklyak – www.freepik.com