WordPress(KUSANAGI)のページスピードアップのために試行錯誤したよ

2016-11-20Web開発/デザインWordPress, SEO

どうも、今回はこのサイトのチューニングのお話です。この記事を読んでいるということは、おそらくWebサイトを運営している、あるいはしようとしている人だと思います。せっかくサイトを作るなら、できるだけたくさん見てほしいもので、そうなるとSEO対策なんかが重要になってきます。SEO対策には色々な考慮項目がありますが、その中の一つにページの表示スピードがあります。

今回は、Webサイト特にWordpressで運用しているWebサイト向けに、自分が行ったスピードアップへの試行錯誤を簡単にまとめていきます。この記事では、Googleから提供されている「PageSpeed Insights」というツールにおいて緑スコア(80点以上)を叩き出すということを目標にやっていきます。

OS : CentOS 7.2.1511
VPS : ConoHa 512MBプラン + KUSANAGI
KUSANAGI : nginx

Contents

1. 現状チェックと作業後のスコア

高速化の前に作業前のスコアを確認しておきましょう。確認するには「PageSpeed Insights」にアクセスして、ご自身のWebサイトのURLを入力して分析ボタンを押してください。数秒後結果が出てきます。作業前の画像は撮りそこねてしまいましたが、スマホ表示でもPC表示でも赤スコアで55点程度でした。一応何回か試行すると時々黄スコアが出ることもありますが、それでは意味は無いので常に緑になるようにがんばりましょう。

で、実際に作業した後のスコアが以下のとおりです。

ご覧の通り緑スコアです。…「え？100点じゃないの？」と思われた方もいると思いますが、正直なはなしAdsenseとAnalyticsを導入している時点で100点は獲得することは実質不可能です。というのは言い訳ですが、実際にこれ以上のスコアアップを狙って作業するならより良い記事を書く方に力を入れたほうがいいと思います。……これはちゃんとした知見に基づいた発言ではないのでオフレコでおねがいします。

2. 試行錯誤

では現状もわかったことですし、実際に手を動かしてみましょう。此処から先は、分析結果で表示された文章を元に自身に該当するものを実行すればいいと思います。また、WordPressでは使用しているテーマやプラグインなどにより、改善点が異なると思います。そのため全ての改善点を網羅することができませんがご了承ください。

・ブラウザのキャッシュを活用する

まずは、クライアントさん側のブラウザでキャッシュを利用してもらうことで通信を削減します。設定方法は運用しているWebサーバによって異なりますが、今回の環境はnginxなので読み込んでいる設定ファイルに書き込むことでキャッシュしてくれるようになります。ちなみに今回作業した、KUSANAGI環境はkusanagi_html_ssl.confというファイルを読み込んでいたのでこれを編集していきます。編集する際はちゃんとバックアップをとり、何かがあった時に戻せるようにしておくのがいいと思います。手な感じで編集するファイルが見つかったら以下の記述をserver{}のカッコ内のどこかに書き込んでください。

location ~* \.(jpg|jpeg|gif|png|css|js|swf|ico|pdf|svg|eot|ttf|woff)$ {
    expires 30d;
}

location ~* \.(jpg|jpeg|gif|png|css|js|swf|ico|pdf|svg|eot|ttf|woff)$ {

expires 30d;

}

kusanagi環境では59行目あたりに「access_log off」という設定が書かれているのでそのカッコ内に「expires 30d」を追記すれば大丈夫です。ちなみに30dでキャッシュを保存しておく期間を決めることができますが、Google先生曰く7日以上にするのをおすすめしています。

設定ファイルに追記が終わったら以下のコマンドで再起動します。ちなみにKUSANAGI環境でない方は、ご自身の環境に合わせた再起動コマンドを実行してください。

$ kusanagi restart  #KUSANAGI
$ # nginx -s reload #Nginx + wordpress
$ # systemctl start httpd.service #apache + wordpress

$ kusanagi restart #KUSANAGI

$ # nginx -s reload #Nginx + wordpress

$ # systemctl start httpd.service #apache + wordpress

余談ですが、KUSANAGI環境でnginxだけの再起動を行うと、サーバは稼働していても、KUSANAGIコマンドでステータス確認をすると「Active: failed (Result: exit-code)」となってしまいます。一応このままでも動作はしますが、気持ち悪いです。ちゃんとした解決方法はわかりませんが、サーバをリブートしたら治りました。その際、KUSANAGIが自動起動になっていなかったので、Webページが見れなくなりかなり焦りました。普通に「kusanagi」コマンドで起動できました。

・CSSを縮小する

次に、CSSの縮小です。本サイトでは、「Head Cleaner」というプラグインを使ってCSSとJSのファイルを結合させるようなことをしています。が、これでは縮小できないやつがいたようです。今回はstyle.cssがそうでした。というわけで、今回はstyle.cssの圧縮をやっていきます。CSSの圧縮とはつまり改行やらスペースをすべて取っ払ってしまうということなので自力で簡単にできますが、コピペだけでやってくれるサービスがあるので今回はそれを使いました。そのサービスは「Refresh-SF」というものです。ここで説明するまでもなくシンプルなサイトです。Inputというテキストボックスに圧縮したいコード、今回はstyle.cssのコードをコピペして、右上にあるCSSボタンを押すだけでコード全体を圧縮してくれます。あとはこのコードを元のstyle.cssにコピペするだけでCSSの圧縮が実現できます。

……実はこの方法、実は少しまずいことをしています。実害は出ていないので問題ないといえばそのとおりなのですが、一応説明しておきます。WordPressにおけるstyle.cssは単純なスタイルシートの役割の他にテーマ情報を記述するものでもあります。今回紹介した方法ですと、圧縮時にテーマ情報の部分(おそらくファイル上部にあるコメント部分)が削除されてしまいます。上記でも述べたとおり問題は内容ですが、心配な方は圧縮したあとコメント部分を戻すのがいいと思います。こんな時のためにもちゃんとバックアップはしておきましょうね。

・画像を最適化する

次に、画像を最適化していきます。最適化が指すところはいろいろな解釈があると思いますが、とりあえず「無駄をなくせ」ということだと思います。つまりは、画像自体を圧縮することや、無駄に大きなファイルを使わないようにする、というのが対策になります。

画像を圧縮するには、TinyPNGやCompressor.ioなどWeb上でいろいろなサービスが提供されているのでこれらを使用するのが普通だと思います。しかし、今回はせっかくWordPressで運用していますし、画像をアップロードする前にわざわざこれらのサービスを通すのがめんどくさいので有志さんのプラグインを使っていきましょう。

というわけで、今回使用したのが「EWWW Image Optimizer」というプラグインです。このプラグインはこの手の話題が出た時は必ず挙がると言っても過言ではないものです。実際に使い勝手がよく、アップロードした画像に対して自動的に最適化を行ってくれます。また、メニューから選択するだけで、すでにアップロードしている画像に対しても最適化をしてくれるいいやつです。詳しい説明は長くなってしまうので省かせていただきますが、今回はこれを導入&実行することで多少スコアが上がりました。

画像の最適化の方法としてもうひとつ大事なのは、無駄に大きなファイルを使用しないことだと思います。作品としての画像をアップロードする場合ならしょうがないですが、このサイトのように、別に大きい必要がないものでしたら、ある程度小さい画像を用いるのがいいと思います。というわけで、小さめの画像を使っていきたいのですが、手動で画像を小さくするのはめんどくさいです。というわけでまたまた有志さんが登場します。今回使ったのは「Imsanity」というプラグインです。こちらも説明は省きますが、アップロードする画像、アップロードした画像に対してリサイズをしてくれるいいやつです。本サイトではリサイズの目安を512*512と設定してリサイズしてもらいました。

・スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する

さて次はこれです。つまりはheadに記述されているcssやjsを読み込んでいる間はページを表示できないのでどうにかしろということなのです。しかし、WordPressで運用している現状、さまざまなプラグインを入れていて正直cssやjsなんて把握しきれません。調べてみるといろいろ対策はあるようですが、今回はすべて投げ出してプラグインにすべてを委ねます。というわけで今回まるなげしたプラグインは「Async JS and CSS」です。その名の通り非同期でjsとcssを読み込んでくれるプラグインです。本サイトでは、このプラグインを導入することで解決しましたが、使用しているテーマやプラグインによって設定を変更しないとサイト内の表示やデザインが狂う場合があるようです。その時はこのプラグインの設定で対象とするファイルを選択するか、別の方法を頑張って探してください。……丸投げで申し訳ないです。

丸投げだけするのはなんだか申し訳ないので、JSを非同期で読むこむための方法をひとつだけ紹介しておきます。HTMLからJSを読み込むにはおなじみscriptタグを記述しますが、このタグにasync属性を付与することで非同期での読み込みにすることができます。そこでこの属性を自動的に付与するようにしてみます。以下のコードをfunctions.phpに書き込んでみてください。

/**** js読み込みにasyncを付与 ****/
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.min.js' ) ) return $url;
    return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}

/**** js読み込みにasyncを付与 ****/

if (!(is_admin() )) {

function add_async_to_enqueue_script( $url ) {

if ( FALSE === strpos( $url, '.js' ) ) return $url;

if ( strpos( $url, 'jquery.min.js' ) ) return $url;

return "$url' async charset='UTF-8";

}

add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );

}

一応これだけで、JSは非同期で読み込むことができます。しかしこれはCSSでは使えません。……自分の力ではここれが限界でした。

3. 速さがたりない!!

さて、ここまでやってもダメな方は以下の項目も挑戦してみるといいかもしれません。

・KUSANAGIを使ってみる

今回の記事ではKUSANAGIを使っているのが前提だったので記事とは矛盾してしまいますが、まだ使ったことがないという方には、オススメです。KUSANAGIとはものすごく端的に言いますと「めっちゃ早いWordPressを実現できる環境」です。なんだか小難しそうですが、いろいろなサーバレンタルサービスでテンプレートが提供されているので割と簡単に導入できます。導入できれば早くなるのはほぼ間違いないので挑戦してみる価値はありです。