1. ホーム
  2. wordpress・サイト関連
  3. さくらのレンタルサーバ スタンダードプランでのWordPress高速化

プラグインでWordpressの高速化

弊社Webサイトは2003年に開設して、色々と運用方法を変えながら2011年にWordpressでの運用に切り替えました。その都度不要な投稿等を整理してきましたが、現在でも500以上の投稿、30の固定ページ、約3,000のメディアファイルを抱える、そこそこの大所帯になってきました。

さくらのレンタルサーバ スタンダードプランはお世辞にも高性能とは言えないので、Wordpress側でしっかりと高速化設定をしていく必要があります。

現在使用しているプラグイン19個

2017年1月20日現在の使用しているプラグインです。

001 Prime Strategy Translate Accelerator
AddQuicktag
Advanced noCaptcha reCaptcha
Akismet
AmazonJS
Autoptimize
Blog2Social:Social Media Share & Auto-Posting
Contact Form 7
EWWW Image Optimizer
Google XML Sitemaps
Push7
Responsive Lightbox
Simple GA Ranking
Simple Tags
SNS Count Cache
UpdraftPlus – Backup/Restore
W3 Total Cache
WP Hyper Response
WP Multibyte Patch

黄色マーカーのプラグインは高速化に貢献しているプラグインです。

001 Prime Strategy Translate Accelerator

翻訳ファイルの読み込みをキャッシュ化し、表示までにかかる実行時間を短縮してくれます。

プラグインを有効にして、サイトと管理画面のみキャッシュするように設定しています。

Autoptimize

HTML・CSS・JSファイルを連結&圧縮してくれるプラグイン。弊社Webサイトの高速化の要となっています。

HTML オプション
【HTML コードを最適化】
をチェック
JavaScript オプション
【JavaScript コードの最適化】
【インラインの JS を連結】
をチェック
CSS オプション
【CSS コードを最適化】
【データを生成 : 画像を URI 化】
【Google フォントの削除】
【インラインの CSS を連結】
【CSS のインライン化と遅延】
をチェック

【CSS のインライン化と遅延】下のテキストボックスには未記入です。
このテキストボックスにクリティカルパスCSS(ファーストビュー時に必要なCSS)を記入して本体の連結&圧縮したCSSを遅延読み込みするのですが、Simlicityの設定をPC用とモバイル用の表示をさせるようにしているのでPC表示時はPC用のクリティカルパスCSSを、モバイル表示時にはモバイル用のクリティカルパスCSSを表示させたいので、Simplicity子テーマ内の「header-insert.php」に

<?php if ( is_mobile()): ?>
<style id='firstview-inline-css' type='text/css'>モバイル表示用クリティカルパスCSSを記入</style>
<?php else: ?>
<style id='firstview-inline-css' type='text/css'>PC表示用クリティカルパスCSSを記入</style>
<?php endif ?>

を記述して、【Autoptimize から CSS を除外】欄に「firstview-inline-css」を追加することで、記述したインラインCSSが連結されずにヘッダー部にそのまま表示されます。

クリティカルパスCSS作成&圧縮ツール

クリティカルパスCSSの作成はオンラインで使えるこちらのツールを使用させて頂きました。

出来上がったクリティカルパスCSSはこちらのツールで圧縮しました。

JSファイルを連結して遅延読み込みするとプラグインやJavaScriptが正常に動作しなくなる場合があります。お使いの環境で正常に動作しない場合はご使用をお控え下さい。

EWWW Image Optimizer

画像ファイルを圧縮してデータ量を減らすことでWebサイトの表示を高速化することができます。

標準設定で使用しており、高度な設定の【メディア画像をリサイズ】で画像をアップロード時に自動でリサイズさせています。

SNS Count Cache

SNSのシェア数やフォロワー数をキャッシュしてカウント数の表示を高速化できるプラグインです。Twitter、Facebook、Google+、Pocket、Pinterest、Push7 などのシェア数やフォロワー数をキャッシュできます。

プラグインの更新が途絶えており、インストールしただけではFacebook・Pocketのシェア数を取得することができません。こちらを参考にしてプラグインファイルを修正してカウントできるようになりましたが、修正は自己責任でお願い致します。

SNSのシェア数をキャッシュで表示できるのでサイト表示の高速化につながります。

2017/04/28追記
現在はプラグインもアップデートされて上記カスタマイズをしなくても正常に動作するように修正されております。

W3 Total Cache

WordPressのキャッシュプラグインで一番有名?な高機能キャッシュプラグインです。高機能ですが使い方を間違えるとサイト表示不能等の可能性もあるようです(^^;

ページキャッシュとデータベースキャッシュのみ設定しており、【User Agent Group】で「high」と「low」にチェックを入れています。これによってUser Agent Groupごとに別々にキャッシュが作成されるようになります。

設定はこちらの記事を参考にさせて頂きました。

WP Hyper Response

WordPressのレスポンスを向上させるプラグイン。インストールして有効化するだけで使えるようになります。

インストールして有効化すると若干レスポンスがよくなる感じがしました。管理画面でもレスポンスの良さを感じることができたので使っております。

2017/1/28追記
プラグインのコードが短いので子テーマのfunctions.phpに直接記述したので、現在 WP Hyper Response は使っておりません。

ここまでカスタマイズしてきてWordpress高速化の成果は出たのか!?次のページでご紹介致します。