広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog

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!、サンプルページの2つだけです。


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

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

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

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


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


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


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


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


国内最大級の個人向けレンタルサーバー『ロリポップ!レンタルサーバー』は、

月額100円(税抜)〜で容量最大400GB!しかも安いだけじゃなく
大人気WordPressの簡単インストール/ウェブメーラーなど
機能も満載!共有/独自SSLもバッチリ対応でセキュリティ対策も万全!

もちろん、オンラインマニュアルやライブチャットなど、

充実したサポートで初心者の方でも安心です。

無料のお試し期間が10日間ありますので、

まずはお気軽にご利用してみてくださいね!


▼ロリポップ!レンタルサーバーはこちら


1秒という速度に満足できない方は、PageSpeedInsightsで調べた中では、XServerが安定して速かったです。
価格はロリポップ!スタンダードより高いです。






モバイル(初期)


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

指摘された事項を徹底列挙です!修正事項1件、修正考慮事項5件ありました。
  • 修正が必要 「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
  • 修正を考慮:圧縮を有効にする
  • 修正を考慮:サーバーの応答時間を短縮する(0.42秒でした)
  • 修正を考慮:ブラウザのキャッシュを活用する
  • 修正を考慮:CSS を縮小する
  • 修正を考慮:JavaScript を縮小する


合格しているのは、4個のルールで、リンク先ページのリダイレクトを使用しない、HTML を縮小する、画像を最適化する、表示可能コンテンツの優先順位を決定するです。

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


テーマをStinger7に変更


ロリポップ!Stinger7
Stinger7に変更直後の結果は、「72点」でした。指摘事項もテーマが変わったことで変化しました。
  • 修正が必要 「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」
  • 修正を考慮:サーバーの応答時間を短縮する(0.32秒でした)
  • 修正を考慮:ブラウザのキャッシュを活用する
  • 修正を考慮:CSS を縮小する
  • 修正を考慮:JavaScript を縮小する
  • 修正を考慮:HTML を縮小する

合格しているのは、4個のルールで、リンク先ページのリダイレクトを使用しない、圧縮を有効にする、画像を最適化する、表示可能コンテンツの優先順位を決定するです。

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

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

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


ロリポップ! のレンタルサーバーは、mod_expiresが使えます。
.htaccessに以下を追記するとすべてのファイルで1週間のキャッシュが効きます、2度目のコンテンツの読み込み完了は851msec(0.8秒)と高速です。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 weeks"
</IfModuel>

ブラウザのキャッシュを活用する指摘が合格します、ブラウザ上は、「304 Not Modified」となり、キャッシュされた情報で表示が高速になっていることが確認できます。
ただ、画像、css、HTML、javascriptすべて1週間キャッシュされてしまうと、画像の差し替え、スクリプトの修正などで見た人によっては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 プラグインで指摘事項は減りました、結果は、「73点」でした。
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ファイルとして認識できずに圧縮できていなかったりします。

1年前の更新で、少し古い「Remove Query Strings From Static Resources 1.3」を適用します。
Autoptimize 2.0.0 プラグインは停止させています、テーマはStinger7です。
結果は、「70点」でした。
  • 修正が必要 「スクロールせずに見えるコンテンツのレンダリングをブロックしている 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の同時利用


結果は、「71点」でした。
  • 修正が必要 「スクロールせずに見えるコンテンツのレンダリングをブロックしている 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 を排除する」修正項目は全く対応していなくても1秒未満です。

デフォルトで十分速いと何もしなくてもいい!と感じる評価でした^^


今回評価したレンタルサーバーはロリポップ!です。
スタンダードプラン 詳細はこちら
です









2016年3月最新ロリポップのスタンダードプラン申込手順の流れ

ロリポップのPHPモジュールモードで超速い、次世代ホスティングのスタンダードプランを申し込んでみました。
(この記事を書いている段階では、まだお試し期間中です)

ロリポップのスタンダードプラン申し込み手順をスクリーンショット満載で説明します。

ロリポップのスタンダードプラン申し込み手順


ロリポップに限りませんが、無料お試し期間があるレンタルサーバーは多いです。
=> ロリポップは、10日間のお試し期間がありました。

=> お試し期間中クレジットカードの入力不要でした。

=> 他にブログを所有していて、引っ越しするなら、初期費用が半額で750円ほどお得になります。



登録には、メールアドレスが必要です。また、住所、氏名入力が必要です、ただ、クレジットカードの入力は不要なので自動課金とかの心配不要なのがいいです。




では、プランの申し込みをします。
よりプランを申し込んだ流れで説明します。

1. スタンダードプランを申し込みました


ロリポップ スタンダード 申し込み手順
モジュール版PHPで快速ワードプレスが使える、月額500円〜、容量120GB、マルチドメイン100個を目視で確認した後、

「選択する」をクリックします。


2. アカウントと「ロリポップ!のドメイン」を選んでお申込み内容を入力します


ロリポップ スタンダード 申し込み手順http://アカウント.ドメイン名/を選びます、

独自ドメインを設定する人はそれほど神経質になる必要はありません。

選んだアカウント、ドメインでしっかりワードプレスサイトを作る!と考えている方もいるかと思います。

そんな方のために、「ロリポップ!のドメイン」どれを選ぶのがいいのか、指標となるデータを調べたので参考にしてください。

グーグルのページランク(*1)が一番良かったドメインは、ページランク4の「chicappa.jp」です。

グーグルのページランクがついた「ロリポップ!のドメイン」は、ページランク4が1つ、1は、9つありました。
ページランクが1だったのは、「babyblue.jp」、「boy.jp」、「chu.jp 」、「heavy.jp」、「kilo.jp」、「main.jp」、「moo.jp」、「sub.jp」、「zombie.jp」です。(並びはアルファベット順で深い意味はありません)


一番人気がなかったのは、「pigboat.jp」です。
*1 指標としては古いですが、このランクをもとに中古ドメインの価格が変動するのも確かです
* seoチェキ!を使って「ロリポップ!のドメイン」すべてを調べた結果です。(2016/3/5調査)

以下、人気度を調べています。
  • ポップなドメインで一番人気が高い1位はjellybean.jp 、2位 lovepop.jp、3位 pupu.jpです。
  • クールなドメインで一番人気が高い1位はmain.jp 、2位 oops.jp、3位 mods.jpです。
  • 短いドメインは、人気が集中しているようです、その中でも一番人気が高い1位はsub.jp、2位 moo.jp、3位 boo.jpです。
  • オシャレなドメインで一番人気が高い1位はraindrop.jp 、2位 whitesnow.jp、3位 sunnyday.jpです。
  • カワイイドメインで一番人気が高い1位はitigo.jp 、2位 girly.jp、3位 littlestar.jpです。
  • ちょっと変わったドメインで一番人気が高い1位はchicappa.jp 、2位 fool.jp、3位 hiho.jpです。
* 人気度合いは単純にどれだけgoogleにインデックスされているかで調べています(2016/3/5調査)


アカウント、ドメインを決めて、パスワード、メールアドレスを入力します。

入力した内容を見直して、間違いなければ、「お申込み内容入力」をクリックします。

3. 住所、氏名を入力します。※ 初期費用半額を設定します


ロリポップ スタンダード 申し込み手順
個人 or 法人、名前、郵便番号、住所、電話番号を入力します。


郵便番号を入力すると、自動的に住所が展開されました、住所は、番地やマンション名などの入力だけで済みました。



初期費用半額キャンペーン中なので、サーバー移行 or 以前ロリポップを使っていた人は750円お得になります。
ロリポップ スタンダード 申し込み手順
「はい、サーバー移行 or 以前にロリポップ!を利用したことがあります」を選択すると、移行前 or 以前のホームページアドレスの入力欄が増えるスクリーンショットです。

ロリポップ スタンダード 申し込み手順

必須」項目に不備があると、「お申込み内容確認」ページには遷移しないで、エラー入力箇所の下に赤文字でメッセージが表示されました。


入力に問題なければ、「お申込み内容確認」をクリックします。




ロリポップ スタンダード 申し込み手順プランが正しいか、入力内容に不備、ミスはないかをしっかり確認します。

入力内容に不備や、ミスがあった場合、「無料お試し開始」ボタンの下に「お申込み内容を修正する」リンクがあります。このリンクから修正してください。



利用規約と、プライバシーポリシーのリンクがあります。納得できない内容だと困るので、しっかり確認しましょう。



納得できたら「無料お試し開始」をクリックします。



4. 以上でお申込みは完了です。


ロリポップ スタンダード 申し込み手順「無料お試し開始」をクリック後、しばらくすると「お申込みが完了しました」ページに移りました。

登録メールアドレスに1通、件名:「【ロリポップ!】お申込み完了のお知らせ」が届きます。
本文中に「【キャンペーン適用】 初期費用 \750 (税抜) ※通常 \1,500」と書いてあったので、ちゃんとキャンペーンが適用できたようです。





ちなみに、このページで表示されている「最大12ヶ月契約期間プレゼント」が気になったので、見てみたところ、
最大12か月は、エンタープライズプランの場合で、スタンダードプランの場合は6か月間でした。

新たに6か月分の契約ができるのではなく、今回契約したプランが延長されるイメージです。



クレジットカードや銀行口座など一切入力せずに、申込みができました、また、申込み完了後すぐに、コントロールパネルサイトへアクセスできて、操作も可能でした。

SSHの使い心地、PHPモジュール版の実力なども、今後情報をアップできたらと思います。








最新記事
最新コメント
タグクラウド
カテゴリアーカイブ
×

この広告は30日以上新しい記事の更新がないブログに表示されております。