さくらのレンタルサーバ スタンダードプランでの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

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

001 Prime Strategy Translate Accelerator
This plugin makes the cache files of the WordPress translation, and shortens the execution time to display of your WordPress site.

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

Autoptimize

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

Autoptimize
Autoptimize speeds up your website by optimizing JS, CSS, images (incl. lazy-load), HTML and Google Fonts, asyncing JS, removing emoji cruft and more.
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の作成はオンラインで使えるこちらのツールを使用させて頂きました。

Critical Path CSS Generator - by Jonas Ohlsson
Production ready Critical Path CSS Generator. Specify web page and CSS and let this tool generate your Critical Path CSS for you, in seconds.

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

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

EWWW Image Optimizer

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

EWWW Image Optimizer
Speed up your website and improve your visitors' experience by automatically compressing and resizing images and PDFs.

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

SNS Count Cache

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

SNS Count Cache
This plugin gets and caches SNS counts in the background, and help you to shorten page loading time through the use of cache mechanism.

プラグインの更新が途絶えており、インストールしただけではFacebook・Pocketのシェア数を取得することができません。

こちらを参考にしてプラグインファイルを修正してカウントできるようになりましたが、修正は自己責任でお願い致します。

【2016年11月版】SNS Count Cache で Twitter、Facebook、Pocket のシェア数を復活させる方法まとめ
SNSのシェア数を取得できて、サイトの高速化もできる便利なプラグイン「SNS Count Cache」ですが、SNS側の仕様変更によりシェア数が上手く取得できないことが度々ありました。 このブログでもTwitter、Facebookのシェア数を復活させる方法を紹介してきましたが、Facebookのシェア数取得は不...

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

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

W3 Total Cache

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

W3 Total Cache
検索エンジン最適化 (SEO) & キャッシュによるパフォーマンスの最適化 (WPO)。統合キャッシュ: CDN、圧縮、ページ、オブジェクト、フラグメント、データベースのサポート。

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

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

WP Hyper Response

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

WP Hyper Response
This plugin improves the response of WordPress. WordPressサイト及び管理画面のレスポンスを向上させるプラグインです。

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

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

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