さくらのレンタルサーバ スタンダードプランでのWordPress高速化

プラグインで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 – WordPress plugin | WordPress.orgThis plugin makes the cache files of the WordPress translation, and shortens the execution time to display of your WordPress site.wordpress.org

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

Autoptimize

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

Autoptimize – WordPress plugin | WordPress.orgAutoptimize speeds up your website by optimizing JS, CSS, images (incl. lazy-load), HTML and Google Fonts, asyncing JS, removing emoji cruft and more.wordpress.org

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'>モバイル表示用クリティカルパスＣＳＳを記入</style>
<?php else: ?>
<style id='firstview-inline-css' type='text/css'>ＰＣ表示用クリティカルパスＣＳＳを記入</style>
<?php endif ?>

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