【WordPress高速化】プラグイン導入とテーマ改善で爆速化した方法

 2015/03/20

爆速
少し前に似たようなエントリーを書きましたが、ファイル圧縮系のプラグインとテーマを改善した改良版です。
前回からさらにPageSpeed Insightsでスマホが20ポイントアップ、PCも8ポイントほど改善しましたので改めて記事にしてみます。

スポンサーリンク

今回ご紹介するのはわたしの自作のテーマ、サーバーはエックスサーバーの環境下での速度アップになった設定のご紹介です。必ずしも同じような結果になるとは限りませんのでご注意ください。紹介するプラグインにはキャッシュ系のプラグインものもありますので必ずローカル環境などでテスト後、バックアップを行ってから試してくださいね!

それではまずテーマの改善方法からです。

CSS、JSファイルをフッターに移動する

ヘッダーに置いていた以下のファイルをフッターの</body>の直前に移動しました。

        
  • font awesomeのCDNコード
  • google webフォントのCDNコード
  • SNSのJSコード

SNSのJSコードはツイッターとFBです。タイムラインを表示させているのとLikeBoxを表示させているのですが、これをスマホで表示させないことにしました。SNSのコードはis_mobileの分岐でスマホでは読み込ませていません。

基本的にCSSファイル、JSファイルはなるべくまとめています。style.cssはヘッダーで、JSファイルは上と同じようにフッターで読み込ませています。ホントはstyle.cssもフッターに置いて、ファーストビューだけインラインでヘッダーに置けばいいと思うんですけど、めんどくさいからやらない_(┐「ε:)_

Autoptimizeプラグインの導入

AutoptimizeはHTML、CSS、JavaScriptを縮小してくれるプラグインです。わたしは頻繁にカスタマイズするのでminify(圧縮)もプラグインを利用すると面倒がなくていいです。少し前まではHead Cleanerで縮小していましたがコメント欄に不具合がでたり、JavaScriptが動かなくなったりしたのでやめました。

Autoptimizeは細かな設定ができるのですが、表示がおかしくなったりしたので最低限の圧縮のみを行っています。以下CSSとJavaScriptの圧縮のみを行っているわたしの設定
Autoptimizeの設定

HTMLの圧縮はプラグインWP-HTML-Compressionを利用

AutoptimizeはHTMLの圧縮もできるのですが、AutoptimizeではPageSpeed Insightsの【HTML を縮小する】の項目が消えないんですよ。わたしのだけ?

なので、HTMLの縮小にはプラグインWP-HTML-Compressionを使っているのです。でもこのプラグインちょっと2年ぐらい更新がないのであやしい…。Autoptimizeの圧縮に戻すかもしれません。

2015.4.22追記 AutoptimizeのアップデートによりPageSpeed Insightsの【HTML を縮小する】が表示されなくなったのでWP-HTML-Compressionの使用をやめ、HTMLの縮小にもAutoptimizeを使用するようにしました。

わたしが高速化に使っているプラグイン一覧

Autoptimize以外は大きく変えていません。個々の設定方法などは前回のエントリーに書いています。

前回の記事のうち外したプラグインはHead CleanerUnveil Lazy Loadです。Unveil Lazy Loadは今回の設定と相性が悪いらしく逆に遅くなったので外しました。また、エックスサーバーのmod_pagespeedも遅くなったのでOFFにしています。

高速化対策の結果

PageSpeed Insights
PageSpeed Insights

GTmetrix
GTmetrix
WEB担さんのブックマークレット
WEB担

どうです?すっごくはやくなったでしょ?

高速化系プラグインを入れるのが恐い方は

font awesomeとgoogle webフォントのコードをフッターに持っていくだけでスマホでの表示が10ポイント上がりました。設置の場所さえ間違えなければ簡単に高速化に繋がるのでおすすめです。

まとめ

WordPressの高速化については数多の記事が存在しますが、自分の環境に合わせてテストをするというのが大事だという事に気が付きました(今頃w)。表示が崩れたり、エラーを吐き出したりする時もあるのでバックアップは必ずとってから試してくださいね。

それではちゅんこ@shufulifeがお送りしましたー

WordPress

Please comment!

  

2件のコメント

  • fullnow 2015年11月7日 11:18

    こちらのサクライフトップページってCSS組んでないんでしょうか?
    Chrome・Safariの両ブラウザで見てもCSSを読み込んでないようですので、気になってコメント入れました。
    私の方が原因であればすいません。

    • ちゅんこ 2015年11月7日 12:04

      fullnow様

      教えていただいてありがとうございます。
      キャッシュがおかしくなっていたのを放置していました(^_^;)

      そのうち反映するかと思います。お見苦しくて申し訳ありません・・・

Leave a Reply




2件のトラックバック