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

シェアして頂けるとサイト更新の励みになります!

こんにちは!本格的な冷え込みとなり、インフルエンザやノロウィルスが猛威を振るっておりますが皆さまはご無事でしょうか?
我が家は子どもが軒並みインフルエンザA型にやられてしまい、先週末から看病している妻と自分もちょっと看病疲れが出てきたので、自身が感染しないように気を付けないといけないですね。

今日はリフォーム関連の話題ではなく、久しぶりに弊社Webサイトを構築しているレンタルサーバーやWordpressの話題を書きたいと思います。

弊社Webサイトはさくらのレンタルサーバ スタンダード環境でWordpressを運用しています

今ご覧頂いているこの弊社サイトはさくらインターネット(株)さんのレンタルサーバ スタンダードプランにWordpressをインストールして運用しています。

WordPress、EC-CUBE、concrete5等CMSが使えるスタンダードプラン - レンタルサーバーはさくらインターネット
人気No.1のレンタルサーバーといえば、さくらのレンタルサーバ スタンダードプラン。EC-CUBE、WordPress等CMSの簡単インストールが可能。Webフォントも30書体利用可能。独自SSLなど最適なセキュリティも充実しているので、個人用途から法人でのご利用・商用利用まで大活躍です。

さくらのレンタルサーバにはWordpressのクイックインストールという便利な機能があるのですが、インストールする場所の都合でクイックインストールを使わずに手動でセットアップしています。

もう少し金額を出せば他社サーバーで高性能なものもあるのですが、さくらインターネットさんとは長いお付き合いになっていますし、トラブルや不具合があった際にもしっかりと対応して頂けるので今のところ乗り換えるつもりはなく、現状のスタンダードプランで運用していくつもりです。

レンタルサーバの詳細

さくらのレンタルサーバ スタンダードのサーバ詳細です。

サーバスペック

2017年1月20日現在のサーバスペックです。

OSバージョンFreeBSD 9.1-RELEASE-p24 amd64
プランさくらのレンタルサーバ スタンダード
CPUIntel Xeon E312xx (Sandy Bridge)
メモリー容量18GB
ディスク容量100GB
ApacheバージョンApache/2.2.31
PHPバージョンPHP 7.1.0 (cgi-fcgi) (built: Dec 2 2016 12:38:00)
Copyright (c) 1997-2016 The PHP Group
Zend Engine v3.1.0-dev, Copyright (c) 1998-2016 Zend Technologies

さくらのレンタルサーバでPHP7.1が使えるようになりました!

2016年12月14日からPHP7.1を選択できるようになり、PHP5.6使用時にくらべて弊社サイトのWordpress環境でも若干のレスポンスUPしました。

さくらのレンタルサーバ PHP7.1 提供開始のお知らせ | さくらインターネット
さくらのレンタルサーバ PHP7.1 提供開始のお知らせ。

php.iniの記述

always_populate_raw_post_data=Off
date.timezone=Asia/Tokyo
default_charset="UTF-8"
display_errors=off
expose_php=off
magic_quotes_gpc=Off
magic_quotes_runtime=Off
magic_quotes_sybase=Off
post_max_size=64M
upload_max_filesize=64M
variables_order="GPCS"
zend_extension=/usr/local/php/7.1/lib/php/extensions/no-debug-non-zts-20160303/opcache.so
opcache.enable=1
opcache.memory_consumption=128
opcache.interned_strings_buffer=8
opcache.max_accelerated_files=4000
opcache.revalidate_freq=60
opcache.fast_shutdown=1
opcache.enable_cli=1

さくらのレンタルサーバのスタンダードはPHPがCGIモードで動作しているので「Zend Opcache」は使えないのですが、Opcacheを有効にしても今のところ特に不具合が無いので、そのまま様子を見ています。

「Zend Opcache」の設定はこちらのサイトを参考にさせて頂きました。

OPcache導入してみた!(速さ検証もあるよ!) - Qiita
#OPcacheとは OPcacheとは、コードをコンパイルして共有メモリへ保存しておく仕組みのことです。 リクエストごとにスクリプトを読んでからいちいち処理する手間が省けるのでパフォーマンスの向上が期待されます。#インストール ...

今後不具合が出るようでしたらZend Opcacheの設定は削除しようと思います。

2017/04/28追記
Opcacheを有効にしているとレスポンスが悪い感じがあったので、php.iniのOpcacheに関する記述を削除しました。
always_populate_raw_post_data=Off
date.timezone=Asia/Tokyo
default_charset="UTF-8"
display_errors=off
expose_php=off
magic_quotes_gpc=Off
magic_quotes_runtime=Off
magic_quotes_sybase=Off
post_max_size=64M
upload_max_filesize=64M
variables_order="GPCS"

使用しているWordpressテーマ

2011年にWordpressでの運用に切り替えてからしばらくは標準テーマの「Twenty Twelve」をカスタマイズしてしばらくの間、使用させて頂きました。その後、色々と悩みながら標準テーマ「Twenty Fifteen」を2016年5月まで使っていましたが、SNSボタンのカスタマイズが面倒でSNSボタンがカスタマイズ済みのテーマを探していたら、現在使用させて頂いている「Simplicity」テーマにたどり着きました。

WordpressのテーマをSimplicity2に変更しました
弊社サイトのWordpressテーマをTwenty FifteenからSimplicity2に変更致しました。モバイル端末からの閲覧数が増加しているので、よりモバイル端末での閲覧性を向上させる為にSimplicity2を導入してみました。

WordPressをレスポンスよく動作させるにはテーマもすごく大事で、しっかりとカスタマイズされたテーマに変更するだけでかなりの高速化が期待できます。

「Simplicity」はカスタマイズしやすいよくできたテーマです

「Simplicity」はシンプルでカスタマイズしやすく、作者のわいひら氏が常時新機能やバグの修正などをして、次々に新しいバージョンをリリースされております。また、機能追加の要望や不具合報告のフォーラムがしっかりと確立されていて、作者のわいひら氏もご多忙にもかかわらず投稿に目を通して回答されているのに好感が持てました。

WordPress公式には登録されておりませんが、Wordpressテーマの範疇を超えてしまっているので登録できないのだと思っておりますが、殆どカスタマイズすること無くそのままテーマを適用してすぐに使い始めることができる位、シンプルですがよくできたテーマだと思います。ご興味のある方はこちらからご覧ください。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

今までプラグインで追加していた機能がSimplicityには適用されているので、インストールして使用していたプラグインの数が数個少なくなりました。プラグインの数が多いとWordpressの動作ももっさりしてきてしまうのでWordpressの高速化に繋がりますね。

Simplicityの設定(抜粋)

Simplicityの特徴の一つ、テーマのカスタマイザーで色々な機能が実装できます。弊社Webサイトが設定しているWordpressの高速化に関係しそうな設定項目を抜粋しました。

色はカスタマイザーを使用せずにCSSに直接記述して設定しています。
ヘッダー
タイトルテキストをロゴ画像に変更しています。
画像
Lazy Loadを有効にして、エフェクトは無効のままにしています。
【Lazy Loadで読み込むタイミング】
200px手前に設定しています。
【画像リンク拡大効果のタイプ】
拡大効果なしで、モバイルでも拡大効果を使いたかったのでプラグイン「Responsive Lightbox」で拡大効果を実装しています。
Responsive Lightbox by dFactory
Responsive Lightbox allows users to view larger versions of images and galleries in a lightbox (overlay) effect optimized for mobile devices.
ブログカード(内部リンク)(外部リンク)
内部リンクと外部リンクの両方とも有効化しています。
AMP(β機能)
AMP(Accelerated Mobile Pages)も有効化するとプラグイン無しでとそのままAMP対応となるので設定しています。
2017/01/24追記
Simplicity2.4.6では既に修正されておりますので下記カスタマイズは不要です。

有効にしただけでは通常ページからAMPページへ link rel=”amphtml” が設定されないので、Simplicity子テーマ内の「header-insert.php」に

<?php if(is_amp_enable() && is_single()): ?>
<link rel="amphtml" href="<?php echo get_permalink(); ?>?amp=1"/>
<?php endif; ?>

を記述して、GooglebotにAMPページをクロールしてもらうようにしました。

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

AMP対応したページだけをGoogleに公開しても問題なし、別URL構成のモバイルサイトではPC向けページにrel=amphtmlを設置 | 海外SEO情報ブログ
AMPページを単独で公開することが可能。一般的には、通常のウェブページがありそれに対応するAMPページを作るが、このペアは必須ではない。また、別URL構成でモバイル対応している場合は、PC向けページに rel=amphtml を設置する。

.htaccessの記述

ブラウザキャッシュの設定やリソースの圧縮をプラグインを使わずに.htaccessに記述して設定します。ブラウザキャッシュとリソースの圧縮を設定することでかなりの高速化ができます。

Simplicityの作者わいひら氏の記事を参考にさせて頂きました。

コピペ一発でSimplicityを結構高速化する方法
Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。 高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。 たったこれだけのことですが、かなりの高速化が図れます。 例、Simplicit
# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
    Header unset ETag
</ifModule>
FileETag None

# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

# MIME Type 追加
<IfModule mime_module>
    AddType text/cache-manifest .appcache
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>

# プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
    <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
        Header set Cache-Control "max-age=604800, public"
    </FilesMatch>
    # プロキシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
    ExpiresActive On

    # キャッシュ初期化(1秒に設定)
    ExpiresDefault "access plus 1 seconds"

    # MIME Type ごとの設定
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 1 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-woff2 "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>

# Gzip圧縮の設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # 古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

    # 画像など圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary

    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

プラグインで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 and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.
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
ロスレス / ロッシー方式と画像フォーマット変換を使用して、NextGEN、GRAND Flagallery、FooGallery などを含む WordPress の画像サイズを圧縮します。

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

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側の仕様変更によりシェア数が上手く取得できないことが度々ありました。このブロ

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

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

W3 Total Cache

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

W3 Total Cache
W3 Total Cache improves the SEO and user experience of your site by increasing website performance, reducing download times via features like content …

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

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

PCとスマホを分けて綺麗に高速表示してくれるWPキャッシュプラグイン「W3 Total Cache」の簡単設定方法
パソコンとモバイルお分けてキャッシュを作成してくれるW3 Total Cacheプラグインの設定方法です。Wordpress環境でサーバーの応答時間がかなり早くなるのでページ表示が高速化が図れます。

WP Hyper Response

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

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

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

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

高速化設定の効果は・・・

ここまで長々と弊社Webサイトで設定している内容を書いてきて既に文字数が10,000字に迫ろうとしております(^^;

で、結局あまり高性能とは言えないさくらのレンタルサーバ スタンダードプランでWordpressの高速化は出来たの?と思われている方も多いと思いますので「GTmetrix」と「PageSpeed Insights」「モバイルフレンドリーテスト」を使ってPC用表示とモバイル用表示の計測をしてみようと思います。

GTmetrixはAA評価&ページ表示1.8秒!

GTmetrixではYSlow scoreはギリギリでしたが何とかAA評価を頂けました(^^)

AutoptimizeでCSSとJSの連結&圧縮をしているのでリクエスト数が少なくなっているのが分かりますね。画像の圧縮とLazy Loadの設定でファーストビューのデータ量が抑えられているのも高速化に繋がっています。

PageSpeedの結果 A 100%

PageSpeed score

「Google Analyticsのブラウザキャッシュの時間が短いよ」
「画像がもう少し圧縮できますよ」
「HTML/CSS/JSファイルがもう少し圧縮できますよ」

と注意されていますが、そこまで大きな問題では無いようです。

YSlowの結果 A 90%

YSlow score

「画像とCSS/JSの配信にCDNを使いましょう」
「Google Analyticsのキャッシュの有効期限を長めに設定しましょう」

と注意されています。

CDN(Contents Delivery Network)はサイト表示の高速化に繋がりますが、色々と設定も面倒なので現在はCDNを使わずに直接配信しています。

PageSpeed Insightsはモバイル91点 パソコン99点

PageSpeed Insightsでもギリギリでしたが合格点を頂けました。
モバイル表示・パソコン表示共にクリティカルパスCSSを設定して本体CSSを遅延読み込みしているので、ヘッダー部で読み込んでいたAutoptimizeで連結した本体CSSのブロッキングリソースの注意が解消されました。

モバイル表示の結果 91/100

モバイル表示の結果

表示可能コンテンツの優先順位を決定する
スクロールせずに見えるコンテンツをレンダリングするには、追加でネットワークのラウンド トリップが必要です。最適なパフォーマンスを得るには、スクロールせずに見えるコンテンツをレンダリングするのに必要な HTML の量を減らしてください。

この指摘をなかなか解消することができませんが、何とか91/100点を頂けたのでよしとします。

パソコン表示の結果 99/100

パソコン表示の結果

Google Analyticsのブラウザキャッシュの設定で注意されているだけで、あとは大丈夫みたいですね♪

モバイルフレンドリーテスト

モバイルフレンドリーテストでも「このページはモバイルフレンドリーです」とお墨付きを頂けました♪

モバイルフレンドリーテストの結果

【結論】さくらのレンタルサーバ スタンダードプランでもWordpressの高速化は可能でした

弊社Webサイトの表示を速くしたいと色々と試行錯誤してきましたが、さくらのレンタルサーバ スタンダードプランでのWordpress高速化という目標は達成できたのではないでしょうか。

サイトの構成やボリューム、使用するテーマやプラグイン、PV数などによって条件も様々ですし、サイト表示が速いだけで内容が薄いサイトでは意味が無いと思っております。が、閲覧する側とするとページ表示にあまり時間が掛かり過ぎると記事を読む気にならないのも事実です。

閲覧される方がページ表示の遅さに不快にならないように、今後もページ表示速度には気を付けていきたいと思います。

住まいを直すのが本業で、こちらは全くの素人ですので的外れなところもあるかと思いますが、Wordpressの高速化でお悩みになっている方に、少しでも参考になればと思い書いてみました。

貴重な時間を割き、最後までお読み下さいましてありがとうございました。

フォローして頂けると凄く嬉しいです♪