みんさん、こんにちは！
今回はWordPressで作成されたサイトを高速化するための方法を紹介致します。
なぜ高速化する必要があるのか
まず何故WordPressの高速化対応する必要があるのかですが、大きく分けて2つ理由があります。
1つ目はSEOに影響するためです。Googleはサイトの表示スピードを検索ランキングアルゴリズムに組み込んでいると公表しています。2010年から検索ランキングアルゴリズムに導入されていますが、現在はスマホサイトもPCサイトと同じ基準で判断されているそうです。
そして今年2018年7月にスマホ向けサイトの表示スピードを検索ランキングアルゴリズムに組み込むと発表しています。今から表示スピードを向上させる必要がありそうですね。
2つ目はユーザービリティの観点からです。表示速度が5秒以上かかってしまうと直帰率が倍になってしまうというデータがあります。サイトをユーザーに心地よく見てもらうためには高速化が必須ということです。
WordPressの高速化において考えるべきポイント
WordPressはページを動的に生成します。つまりユーザーがサイトにアクセスしたタイミングでページが生成されます。なのでどうしても静的ページより、表示スピードがかかってしまいます。
WordPressを高速化するためには、その動的な部分を改善するべきです。具体的には2箇所改善すべき場所があります。
1箇所目はサーバーです。ユーザーのアクセスがあったタイミングで、サーバー内でどのようなページを表示させるかの処理が始まります。
2箇所目は表示させるページです。表示させるページに容量の大きいコンテンツが含まれていると、やはり表示スピードが遅くなってしまいます。
高速化の方法その1：サーバーを見直す
そもそもサーバーのスペックが悪いとページの表示までに時間がかかってしまいます。
当サイト”映画・WEB中心の生活の人が書くブログ「Anyushu」”では、「さくらVPS」を使っていて更にOSに「KUSANAGI」というWordPressを高速化させる仮想マシンをインストールしています。
高速化の方法その2：PHPのバージョンを見直す
WordPressはPHPというプログラミング言語で作成されています。そのPHPのバージョンの違いで大きく処理のスピードが変わってきます。
PHP5とPHP7では約2倍PHP7のほうが処理スピードが速いです。
高速化の方法その3：ブラウザキャッシュを活用する
ブラウザキャッシュとは簡単に説明すると、画像やCSSなどのファイルの再読込をスキップしてくれるものです。
同じページにもう一度訪れてくれたユーザーに向けて、同じ画像や同じファイルをもう一度読み込ませないようにユーザーのブラウザに保存してくれます。
ブラウザキャッシュの設定方法
ブラウザキャッシュを設定するには「.htaccess」というファイルを編集する必要があります。
FTPソフトなどでサーバーにアクセスしWordPressをインストールしたディレクトリの直下に「.htaccess」はあります。
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
<IfModule mime_module>
AddType text/cache-manifest .appcache
AddType image/x-icon .ico
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType application/x-font-opentype .otf
AddType application/vnd.ms-fontobject .eot
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "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 image/svg+xml "access plus 1 year"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
<IfModule mod_deflate.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|eot|woff|woff2)$ 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 image/svg+xml
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-opentype
</IfModule>これであらゆるファイルのブラウザキャッシュ設定が出来ます。ご自由にお使いください。
この「.htaccess」というファイルはWebサーバーの制御をするためのファイルですので、もし間違った記述をしてしまうとサイト自体が動かないことが起こります。ですので、必ずバックアップを取ってから編集するようにしましょう。
高速化の方法その4：WordPressのプラグインを見直す
WordPressの使用を減らすことで表示スピードが向上する場合があります。
特に見た目を装飾する系のプラグインやサイト全体の機能に影響するプラグインがある場合は要注意です。
某有名SEOプラグインや某Jetなんちゃらなどです。笑
出来るだけプラグインを入れないでいいWordPressテーマをインストールすることが鍵です。テーマにSEOの設定や見た目の設定があるもの選ぶと無駄なプラグインをインストールすることを避けることが出来ます。
高速化の方法その5：画像などのコンテンツの最適化
サイトの表示スピードが遅い理由が大概画像です。
記事内にとんでもないくらい大きい写真などを載せてはいませんか？
スマホの横幅は大きくて400px弱です。この横幅に対してカメラで撮った写真をそのままぶち込んでいませんか？
時々5000pxを超える画像などを載せている人がいますが全く持って無駄です。勿論画像は綺麗なほうがいいですが、大きく過ぎると逆にユーザーに表示スピードで不快感を与えてしまうので、デバイスサイズにあった画像の大きさに縮小して使用しましょう。
また、画像は画質をあまり落とさず容量を圧縮することも出来ます。WordPressではプラグインで画像圧縮が出来ます。それが「EWWW Image Optimizer」です。
画像アップロード時に自動で圧縮を行ってくれます。また、既にある画像に対しても圧縮が出来ますので是非活用して下さい。
更に画像の読み込みスピードを改善する方法があります。それは「読み込み遅延」です。画像をユーザー可視領域に入ったタイミングで読み込むというものです。
WordPressプラグイン「Layz Load」で簡単に設定出来るので是非お試し下さい。またWordPressテーマに組み込まれているものもあるので、そういったテーマを選ぶのも1つの手ですね。
最後に表示スピードを確認する
最初にSEOに影響すると書いたように、実際Googleがどういった表示スピードの評価をしてくれるのか確認しましょう。確認方法は「PageSpeed Insights」というGoogleが提供する表示スピード評価ツールを活用し計測します。
モバイルとパソコンの2つの評価を表示してくれます。
サイトによってメインターゲットとしているデバイスが変わると思いますので、モバイル・パソコンどちらかでは最低80以上の評価を目指しましょう。
WordPress高速化の方法まとめ
以上のことを改善することで劇的に表示スピードを向上することが出来ます。
最後におさらいしておきます。
- サーバーを見直す
- PHPのバージョンを見直す
- ブラウザキャッシュを活用する
- WordPressのプラグインを見直す
- 画像などのコンテンツを最適化する
また新しい情報が入り次第追記します。
では、また会う日まで！
