【倍速】WordPressを高速化するための5つ方法を紹介します！

Anyushu on 2018. 02. 19

【倍速】WordPressを高速化するための5つ方法を紹介します！

みんさん、こんにちは！

今回は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サーバーの制御をするためのファイルですので、もし間違った記述をしてしまうとサイト自体が動かないことが起こります。ですので、必ずバックアップを取ってから編集するようにしましょう。