WordPress4.4.2＋ロリポップでPageSpeedInsights徹底チェック

ロリポップ！スタンダードプランで簡単インストールでワードプレスを設置してみました。
簡単インストールは約9秒で終わりました。（新規にデータベースを作成するパターンです）

インストールされたWordPressのバージョンは、4.4.2です。

PHPは5.6（モジュール版）です。

デフォルトでインストールされているワードプレスのプラグインは、

Akismet
Hello Dolly
Ptengine – Real time web analytics and Heatmap
SiteGuard WP Plugin
WP Multibyte Patch

でした。全て非アクティブ状態で、手動で有効化する必要があります。

デフォルトで有効なテーマは、Twenty Sixteen、Version: 1.1です。

デフォルトで登録されている記事は、Hello world!、サンプルページの２つだけです。

Google PageSpeedInsightsの評価を確認しながら、改善していきます。
＝＞ https://developers.google.com/speed/pagespeed/insights/?url=

モバイルと、パソコン２つの評価が確認できます。モバイルファーストの視点で、モバイルの評価のみ記載します。（モバイル70/100、パソコン84/100でモバイルの方が評価悪いです）

多くの方が利用している共用レンタルサーバーなので、重い時もあれば、軽い時もあります。契約した時点で選ばれるサーバーで当たり、ハズレもあるかもしれません。
本来であれば、時間をずらしながら、定期的にサンプルを収集し、多くのデータを集めて分析しないとブレます。今回掲載している内容は、時間要素、試行回数要素、ともに少ないです。なので、参考速度としてみてください。

また、モジュール版PHPとCGI版PHPの違いは、単一アクセスしている限り、ほぼ同じようなスピード、評価の傾向です。今回の評価では、モジュール版PHPだからすごい！という結果は出ていません、ただモジュール版PHPはCPUの専有率が低いのが大きな特徴です。複数のワードプレスをインストールして運用する、同時にアクセスするユーザーが多い場合にメリットがあります。

結論　ロリポップ！スタンダードのモジュール版は何もしなくても速いよ!

先に結論です。ロリポップ！スタンダード＋ワードプレスを使った評価をしてみました。
mod_deflateはデフォルトで有効、プラグインなしのデフォルト状態でも１秒程度(chrome)で表示ができます。

PageSpeedInsightsの指摘事項を改善する施策を行いましたが、速度はほとんど改善しません。お勧めできるプラグインを厳選していますので、安定した運用に貢献できると思っています。

３秒や、５秒かかるサーバーもあったりする中で、触っている中では常に１秒前後のロリポップ！スタンダードは優秀なレンタルサーバーの部類です。
ワンコインで100個のマルチドメイン、30個のデータベース、モジュール版PHPならロリポップ！スタンダードプランは検討の価値はあります。特徴スペックからは、
複数のワードプレスサイトを１つのレンタルサーバーで動かしたい方にオススメできます。

国内最大級の個人向けレンタルサーバー『ロリポップ！
』は、月額100円（税抜）～で容量最大400GB！しかも安いだけじゃなく

大人気WordPressの簡単インストール/ウェブメーラーなど機能も満載！共有/独自SSLもバッチリ対応でセキュリティ対策も万全！
もちろん、オンラインマニュアルやライブチャットなど、充実したサポートで初心者の方でも安心です。
無料のお試し期間が10日間でじっくり評価して契約することができます。

1秒という速度に満足できない方は、PageSpeedInsightsで調べた中では、https://www.xserver.ne.jp/lp/service01/
が安定して速かったです。
価格はロリポップ！スタンダードより高いです。

モバイル（初期）

簡単インストール（WordPress)直後の結果は、「７２点」でした。

指摘された事項を徹底列挙です！修正事項１件、修正考慮事項５件ありました。
- 修正が必要「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
- 修正を考慮:圧縮を有効にする
- 修正を考慮:サーバーの応答時間を短縮する(0.42秒でした）
- 修正を考慮:ブラウザのキャッシュを活用する
- 修正を考慮:CSS を縮小する
- 修正を考慮:JavaScript を縮小する
合格しているのは、４個のルールで、リンク先ページのリダイレクトを使用しない、HTML を縮小する、画像を最適化する、表示可能コンテンツの優先順位を決定するです。

ロリポップ！のサーバーはデフォルトで、gzip圧縮が有効になっています（mod_deflate）
圧縮を有効にする指摘は、「twentysixteen/genericons/Genericons.svg を圧縮すると 51.6 KB（68%）削減できます。」１件です。html、css、javascriptなどはデフォルトで有効です、一部拡張子で漏れているものがあるようです。

テーマをStinger7に変更

Stinger7に変更直後の結果は、「７２点」でした。指摘事項もテーマが変わったことで変化しました。
- 修正が必要「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
- 修正を考慮:サーバーの応答時間を短縮する(0.32秒でした）
- 修正を考慮:ブラウザのキャッシュを活用する
- 修正を考慮:CSS を縮小する
- 修正を考慮:JavaScript を縮小する
- 修正を考慮:HTML を縮小する
合格しているのは、４個のルールで、リンク先ページのリダイレクトを使用しない、圧縮を有効にする、画像を最適化する、表示可能コンテンツの優先順位を決定するです。

chromeの検証ツールでブラウザが表示するまでの時間を確認、比較したスナップショットです。
Documentの読み込みで386ms、表示に必要なコンテンツの読み込み完了に1.02秒の結果がわかります。

アクセスして、1秒で表示できる感じなので、これ以上手を加えなくても満足できる性能です^^

mod_expiresでブラウザのキャッシュを活用するが合格します

ロリポップ! のレンタルサーバーは、mod_expiresが使えます。
.htaccessに以下を追記するとすべてのファイルで１週間のキャッシュが効きます、２度目のコンテンツの読み込み完了は851msec（0.8秒）と高速です。
```
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 weeks"
</IfModuel>
```
ブラウザのキャッシュを活用する指摘が合格します、ブラウザ上は、「304 Not Modified」となり、キャッシュされた情報で表示が高速になっていることが確認できます。
ただ、画像、css、HTML、javascriptすべて１週間キャッシュされてしまうと、画像の差し替え、スクリプトの修正などで見た人によっては1週間のタイムラグが生まれてしまいます。

こういった場合には、MIMEタイプを個別に指定する方法も使えます。
css/javascript/pngは1日、それ以外は1週間の設定例
```
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 weeks"

 ExpiresByType text/css "access plus 1 days"
 ExpiresByType text/javascript "access plus 1 days"
 ExpiresByType image/png "access plus 1 days"
</IfModuel>
```
Exipresの期間を短めにすると、「ブラウザのキャッシュを活用する」は不合格になります。
はじめはよく分からないと思うので、運用が安定してから、設定することのがオススメです。

mod_expiresで使える構文＝＞https://httpd.apache.org/docs/2.2/ja/mod/mod_expires.html
拡張子とMIME typeの一覧がすっごい詳しく載っています。
＝＞http://www.iana.org/assignments/media-types/media-types.xhtml

Autoptimize 2.0.0 プラグインでCSS/JavaScript/HTMLを縮小！

Autoptimize 2.0.0 プラグインで指摘事項は減りました、結果は、「７３点」でした。
Autoptimizeによって、CSSとHTMLの縮小指摘が合格しました。
- 修正が必要「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
- 修正を考慮:サーバーの応答時間を短縮する(0.27秒でした）
- 修正を考慮:ブラウザのキャッシュを活用する
- ~~修正を考慮:CSS を縮小する~~
- 修正を考慮:JavaScript を縮小する
- ~~修正を考慮:HTML を縮小する~~
合格しているのは、6個のルールで、リンク先ページのリダイレクトを使用しない、CSSを縮小する、HTMLを縮小する、圧縮を有効にする、画像を最適化する、表示可能コンテンツの優先順位を決定するです。

Autoptimizeの設定は、「Optimize HTML Code レ」、「Optimize JavaScript Code　レ」、「CSS Options　レ」にしています。
そのため、「修正を考慮:JavaScript を縮小する」も消える予定でしたが、Stinger7ではてなブックマークへのリンクで、外部スクリプトb.st-hatena.com/js/bookmark_button.jsを必要としています。
Autoptimizeプラグインが対象としているのは、内部にあるファイルです、hatena.comは外部のJavaScriptファイルなので、この指摘は一個人でどうにかできるものではないので、これ以上こだわりません。

ブラウザでの速度

chromeの検証ツールでiPhone6ブラウザが表示するまでの時間は、Autoptimizeで減るどころか、増えました。
Documentの読み込みで466ms、表示に必要なコンテンツの読み込み完了に1.09秒でした。

javascript/cssを正しく圧縮する

WordPressのデフォルト状態では、スクリプトの後ろに?ver=x.x.xというようなバージョンパラメータが付加されてしまいます。
ロリポップ！デフォルトで設定されているmod_deflateがどのような設定になっているかはわかっていませんが、通常よく見かけるmod_deflateの設定例だとxxx.css?ver=とかxxx.js?ver=となっていると正しくCSSファイル、Javascriptファイルとして認識できずに圧縮できていなかったりします。

１年前の更新で、少し古い「Remove Query Strings From Static Resources 1.3」を適用します。
Autoptimize 2.0.0 プラグインは停止させています、テーマはStinger7です。
結果は、「７０点」でした。
- 修正が必要「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
- 修正を考慮:サーバーの応答時間を短縮する(0.36秒でした）
- 修正を考慮:ブラウザのキャッシュを活用する
- 修正を考慮:CSS を縮小する
- 修正を考慮:JavaScript を縮小する
- 修正を考慮:HTML を縮小する
合格しているのは、4個のルールで、リンク先ページのリダイレクトを使用しない、圧縮を有効にする、画像を最適化する、表示可能コンテンツの優先順位を決定するです。

ブラウザでの速度

chromeの検証ツールでiPhone6ブラウザが表示するまでの時間は、
Documentの読み込みで398ms、表示に必要なコンテンツの読み込み完了に0.9秒(989ms)でした。

Remove Query Strings From Static Resourcesではなくても、直接functions.phpを編集することでも対応できます。テーマの更新で修正が必要などのデメリットはあります。

AutoptimizeとRemove Query Strings From Static Resourcesの同時利用

結果は、「７１点」でした。
- 修正が必要「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
- 修正を考慮:サーバーの応答時間を短縮する(0.45秒でした）
- 修正を考慮:ブラウザのキャッシュを活用する
- ~~修正を考慮:CSS を縮小する~~
- 修正を考慮:JavaScript を縮小する
- ~~修正を考慮:HTML を縮小する~~
合格しているのは、6個のルールで、リンク先ページのリダイレクトを使用しない、CSSを縮小する、HTMLを縮小する、圧縮を有効にする、画像を最適化する、表示可能コンテンツの優先順位を決定するです。

ブラウザでの速度

chromeの検証ツールでiPhone6ブラウザが表示するまでの時間は、
Documentの読み込みで391ms、表示に必要なコンテンツの読み込み完了に1.01秒でした。

まとめ：ロリポップ! PageSpeedInsights徹底チェック
- サーバの応答は0.2秒から0.5秒の間です。
- アクセスから表示するまでの時間は1秒前後です(Chrome調べ）
- ロリポップ！デフォルトで圧縮が有効になっています
- ロリポップ！mod_expiresが使えます
デフォルトで圧縮が有効なので、「Remove Query Strings From Static Resources」プラグインを適用するだけで、css/javascriptが圧縮対象にできます。
「Autoptimize」プラグインを使うと、縮小系の指摘を合格に導けます。

あとがき

PageSpeedInsightsとChromeの検証ツールの両方で確認してきました。
実際にユーザーが使っている視点で見ると、ユーザー環境に近い、Chrome検証ツールのLoad時間の方を重視したくなります。

PageSpeedInsightsの速度が出なくても、Chrome検証ツールで確認すると1秒未満だったりします。

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」修正項目は全く対応していなくても１秒未満です。

特に何もしなくても十分速いと感じる評価でした^^