ブログの名前をクオログ[QOLOG]からCLUe[クルー]に変更しました(2018/07/17)

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

SANGOの高速化・最適化

どうも、れおんです。

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

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

注意
内容が膨大になってしまいました。時間を置きながら自分のペースで読んでいただければと思います。

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

人によってサイトの環境が違うため、同じ方法で高速化をしても、効果が全く違ったり、最悪の場合はエラーが出たりすることも…((((;゚Д゚))))ガクブル

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

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

サイト環境
WordPress ver 4.9.6-ja
テーマ SANGO ver 1.4.1
レンタルサーバー さくらサーバー
スタンダードプラン
PHP ver 7.1
高速化プラグイン 3つ(後述)

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

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

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


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

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

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

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

参考 WordPressでバックアップを取る4つの方法(初心者向け)サルワカ | サルでも分かる図解説明マガジン

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

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

  • EWWW Image Optimizer(画像軽量化)
  • Jetpack by WordPress.com(CDN+画像遅延読み込み)
  • WP Fastest Cache(キャッシュ)

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

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

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

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

参考 EWWW Image Optimizerの設定と使い方!自動画像圧縮プラグイン!時給人.COM

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

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

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

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

Jetpackのサイトスピードアップ設定

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

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

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

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

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

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

理由はつぎの2つ。

  1. プラグインの数を減らすことができたから
  2. 乗り換えでスコアが改善したから

WP Fastest Cacheで実現できること

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

WP Fastest Cacheの設定項目

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

  • ページキャッシュ
  • HTML・CSS・JavaScriptの最適化
  • サーバーから送信されるファイルのGzip圧縮
  • ブラウザキャッシュ

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

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

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

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

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

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


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

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

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


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

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

HTML・CSS・JavaScriptの最適化

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

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

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

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

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

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

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

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

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

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


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

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

不要になったプラグイン

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

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

  1. WP Super Cache
  2. Autoptimize

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ファイルがあります。

ルートディレクトリ
一番最上層のディレクトリ(簡単に言うとフォルダ)のこと。さくらサーバーのルートディレクトリの中にはwp-admin,wp-content,wp-includesというフォルダとhtaccess等のファイルが入っています。

htaccessのGzipの設定

クリックで開きます。

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のブラウザキャッシュ設定

クリックで開きます。

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をインストールすると、管理画面の上方に新しくボタンが追加されていると思います。

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

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のスコアから。

PageSpeed Insightsのモバイルでのスコア

PageSpeed Insightsのパソコンでのスコア

次に、GTmetrixのスコア。

GTmetrixのスコア

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

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

まとめ

  • カスタマイズ前には環境チェックとバックアップ
  • EWWW Image Optimizerはとてもいいぞ。
  • Jetpack by WordPress.comもとてもいいぞ。
  • WP Fastest Cacheはすごすぎるぞ。
  • プラグインは代替プラグインを使ってもいいけど、機能がかぶるときは気を付けてね!
  • ページキャッシュを特に心がけて!

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

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

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

SNSでもコメントできるよ('ω')