【倍速】WordPressの表示速度を高速化するための5つ方法

2018.02.19 2019.12.19

WordPress

#解説 #高速化 #表示速度

みんさん、こんにちは！

今回はWordPressで作成されたサイトの表示を速くするための方法を紹介致します。

YouTubeの埋め込み速度を改善する方法も紹介していますので合わせて対策してください！

【WordPress】YouTube埋め込みのスピードを改善する方法

なぜ高速化する必要があるのか

まず何故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のほうが処理スピードが速いです。

データの構造など色々な箇所で改善されています。まだお使いのサーバーがPHP5の場合は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サーバーの制御をするためのファイルですので、もし間違った記述をしてしまうとサイト自体が動かないことが起こります。ですので、必ずバックアップを取ってから編集するようにしましょう。