SANGOサイト向けの高速化・最適化案をまとめてみた

どうも、ねこれおんです。

今回は、WordPress＋SANGOで作ったサイトを高速化・最適化させる方法を紹介します。

このページでは、「PageSpeed Insights」と「GTmetrix」のスコアを上げることを目標としています。

高速化の際にはサイト環境に注意

人によってサイトの環境が違うため、同じ方法で高速化をしても、効果が全く違ったり、最悪の場合はエラーが出たりすることがあります‪。

なので、高速化の提案をする前に、環境のチェックとバックアップをすることをオススメします。

まずは、僕が高速化をした際の環境を書いておきますね。

カスタマイズ前にはバックアップをするべし

先ほど話したように、サイトのカスタマイズを失敗すると画面が真っ白になり、何もできなくなるなんてこともあります。

それはまずいので、必ずバックアップをしてからカスタマイズをするように心がけてください。

丹精込めて作ったせっかくのサイトが一瞬で壊れてしまうのは、あまりにも悲しすぎるので絶対です！

僕は「All-in-One WP Migration」というバックアッププラグインを使用しています。

他にも、「BackWPup」などのプラグインもあるので、自分のテーマとの相性がいいものを選びましょう。

参考サイトとして、SANGOでおなじみのサルワカさんの記事を紹介しますm(_ _”m)

高速化で使用したプラグイン

高速化で使用したプラグインについて、もう少し詳しく書くと次のとおり。

EWWW Image Optimizerで画像を軽量化する

ブログを長く運営していると、どうしても画像サイズがサイト速度のボトルネックになりますよね。

そんなときに、WordPress内の画像サイズを圧縮してくれる頼れるプラグインがこれ。重宝しています！

細かな詳細は…勝手に「参考サイト」さんに丸投げしますm(_ _”m)

Jetpack by WordPress.comで画像の配信と読込の最適化をする

便利な機能が盛りだくさんなWordPress公式のプラグイン。

記事下のコメント欄が個人的に好みで、どうしても外せないですよね…(・_・)

一見、高速化と無関係なプラグインですが、ちゃんと高速化の設定があります！

Jetpackの設定から上の画像の項目を有効にするだけで高速化できます。

すでに、画像をCDN（Contents Delivery Network）で配信していたり、Lazy Load系のプラグインで画像遅延読み込みを行っている場合には、機能がかぶってしまいます。

なので、Jetpackの他の機能が必要かどうかであったり、サーバーやサイトとの相性でどちらかに絞って使用しましょう。

WP Fastest Cacheでサイト速度を爆上げする

高速化を行う上で一番効果を発揮してくれたキャッシュ系プラグイン。

…実を言うと、最初は「WP Super Cache」という別のプラグインを使ってました。最近乗り換えた。

理由はつぎの２つ。

WP Fastest Cacheで実現できること

WP Fastest Cacheの高速化の設定は次のとおりです。

上の画像の項目を簡単にまとめると次のようになります。

基本的に上の画像のようにチェックを付ければ問題ないです。

ただし、同じ機能を持ったプラグインの使用やhtaccsessの編集をしている場合は、併用を避けるようにしてください。

各用語について少し補足説明をします。

ページキャッシュで表示短縮

WordPressはHTML・CSS・JavaScriptだけでなく、DB（データベース）やPHPなど、様々な技術を使ってサイトを構成しています。（ちょっと難しい話）

簡単に説明するとこんな感じです↓

ユーザーがあるサイトに訪れて「ページ見せて！」とリクエストします。

リクエストの度に、サーバーから必要なピースをかき集めて、１からパズルを組み立てます。

パズルが完成次第「はいどうぞ！」という感じで画面に表示しています。

それでは時間がかかってしまうので、ページキャッシュという技術を使って時間を短縮するわけです。

ページの完成形をあらかじめ保存しておいて、リクエストがあったら完成形をポンッと表示します。そりゃー速くなりますよね（笑）

HTML・CSS・JavaScriptの最適化

これらのコードには無駄なスペースや改行、コメント・コメントアウトが含まれている可能性があります。

無駄が多ければ多いほど、データ量も無駄に大きくなるので、省いて最適化してサイトを高速にします。

サーバーから送信するデータをGzip圧縮

データを素の状態でやり取りすると時間が余分にかかってしまいます。

なので、重たいデータはGzip圧縮という方法でやり取りします。

画像データや文字データなどを圧縮で一旦容量を小さくしてユーザの元へ運び、データが届いたら圧縮を展開（元に戻す）して、やり取りを効率よく行います。

ブラウザキャッシュで表示短縮

ページキャッシュとごちゃごちゃになりそうなのが、このブラウザキャッシュ。

ページキャッシュはサーバー→ユーザの関係。ブラウザキャッシュはブラウザ→ユーザの関係という感じで僕は覚えています。

一度サイトに訪れるとGoogle ChromeやEdge、Safariなどのブラウザにキャッシュが保存され、再度同じサイトに訪れたときに表示時間を短縮します。

ブラウザキャッシュは「どのくらいの時間キャッシュを保存しておくか」期間を決めることができます。

しかし、WP Fastest Cacheでは有効期限を柔軟に設定することはできないようなので、チェックを外して自分でhtaccsessを編集し設定するのもありだと思います。

不要になったプラグイン

WP Fastest Cacheは4つの高速化をまとめてやってくれるから、同じ機能をもつプラグインを削除することができました。

不要になったプラグインは次の2つ。

WP Super Cache

すでに紹介したとおり、WP Super CacheよりWP Fastest Cacheの方が機能が豊富でスコアも改善できたため、乗り換えることに…。

併用すればもっと改善できるのでは？と思われる方もいるかもしれませんがそんなことはありません。

むしろ、機能がかぶっているが故に、不具合が起きる可能性さえもあります。なので、お役御免！お世話になりました_(._.)_

Autoptimize

HTML・CSS・JavaScriptのコードの余分な部分を省いて軽量化し高速化を図るプラグインです。

とても人気なプラグインだし、実力もあるので「何が問題なの？」という感じです。

WP Super Cacheと同様、コードの最適化という点でこちらも機能がかぶってしまいます。

でも、併用してみたところエラーは起きません…が、併用する意味がないし、見た目ではわからないエラーに気づいてないだけの可能性もあるので停止しました。

SANGOユーザはAutoptimizeの利用に注意

実は、SANGOとAutoptimizeとの相性を見たときに問題が発生します。

どうやら両者は少し相性が悪いみたいで、サイトのスタイルがズレたり、ハンバーガーメニューなどの挙動がおかしくなる場合があるようです。

おそらく、必要なスペースなども省略してしまうため、スタイルが崩れるのではないかと考えています。

問題を引き起こしているCSSやJavaScriptのコードファイルを最適化の項目から除外することでバグの解決はできます。

しかし、本来の目的である高速化のことを考えると、最適化の除外は逆の行為なので本末転倒です。Autoptimizeの存在意義がわかんなくなっちゃう。

なので、とくにこだわりがなければWP Fastest Cacheによるコード最適化だけにするのがいいと思います。

Autoptimizeをどうしても使いたいなら、WP Fastest Cacheのコード最適化のチェックを外して、Autoptimizeの最適化をすること！

Gzip圧縮とブラウザキャッシュの設定をプラグインを使わずにする方法

Gzip圧縮とブラウザキャッシュはプラグインを使わずともサーバ上にある「htaccess」ファイルを編集することで設定できます。

Gzip圧縮やブラウザキャッシュの設定ができるプラグイン（WP Fastest Cacheなど）の機能を無効にし、下記のコードをhtaccessの末尾にコピペすることで設定ができます。

さくらサーバーであれば、サーバーコントロールパネル–>ファイルマネージャー–>ルートディレクトリの中にhtaccessファイルがあります。

htaccessのGzipの設定

クリックで開きます。

# 圧縮前の設定
SetOutputFilter DEFLATE

# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html

# 圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _.utxt$ no-gzip

# Gzip圧縮
AddType x-font/woff .woff
AddType x-font/ttf .ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
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
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf

htaccessのブラウザキャッシュ設定

クリックで開きます。

#ブラウザキャッシュ
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 14 days"
ExpiresByType image/jpg "access plus 14 days"
ExpiresByType image/png "access plus 14 days"
ExpiresByType image/gif "access plus 14 days"
ExpiresByType image/svg+xml "access plus 14 days"
ExpiresByType image/webp "accsess plus 14 days"
ExpiresByType image/ico "access plus 14 days"
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"

#フォント
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 application/font-woff2 "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 year"
</ifModule>

キャッシュの削除方法

キャッシュは便利な反面、陥りやすい罠があります。

HTMLやCSSなどを編集してサイトの外観のカスタマイズを行っても、キャッシュが残っていると変更が反映されない場合があります。

ということは、キャッシュを削除すると変更が反映されることですね。

そこで、キャッシュの削除の方法を紹介します。

WP Fastest Cacheでのページキャッシュ削除方法（簡易版と詳細版）

WP Fastest Cacheをインストールすると、管理画面の上方に新しくボタンが追加されていると思います。

そこにカーソルを合わせると、下の画像（簡易版）のようになります。

Delete Cacheはキャッシュフォルダ内のすべてのキャッシュを削除します。

Delete Cache and Minified CSS/JSはキャッシュフォルダ内のすべてのキャッシュを削除し、圧縮されていたCSS/JSファイルを削除します。

CSSやJSの変更を行った後に行えば、無事に変更が反映されます。

下の画像は詳細版で、していることは簡易版と変わりません。

厄介なブラウザキャッシュの削除方法

次にブラウザキャッシュの削除方法なんですが、こいつがとても厄介なんですよね。

ブラウザの設定のどこかにキャッシュを削除する項目があるのですが、ブラウザの種類の数だけ方法があるので、今回はGoogle Chromeのブラウザキャッシュを削除する方法だけ説明します。

ブラウザのURL入力欄（検索窓）に「chrome://settings/clearBrowserData」と入力して、「キャッシュされた画像とファイル」にのみチェックを入れて「データの消去のボタン」を押すだけ。

これで、ブラウザキャッシュの削除が完了します。

個人的な考えなんですが、ブラウザキャッシュを削除してもあまり意味がないように感じます。

キャッシュがブラウザごとに保存されるということは、僕やあなたがブラウザキャッシュを削除したところで、他のユーザーが削除していなければ意味がないからです。

気にかけてほしいのは、ページキャッシュです。こいつさえしっかり管理しておけば大丈夫なはず。

…何かあったら、コメントしていただければ可能な限り答えますm(_ _”m)

最適化後に計測したスコアがいい感じ！

スコアの計測は「PageSpeed Insights」と「GTmetrix」で行いました。

まずは、PageSpeed Insightsのスコアから。

次に、GTmetrixのスコア。

まだまだ改善の余地がありますが、なかなかのスコアじゃないでしょうか？

サイト速度におけるユーザ体験的には問題ないスコアだと思います。

まとめ

とても長くなってしまいましたが、お役に立てたら幸いです。

質問などがあれば、記事下にコメント欄があるので、そちらから気軽にどうぞ！

WordPress、Google+、Twitter、Facebookのアカウントでコメントできますm(_ _”m)