WEBページの表示速度を測定
2019年11月現在、さくらインターネットのレンタルサーバを利用していますが、管理画面の操作やページ表示がもっさりするんですよね・・・
また、月間のPVが10,000に近づくにつれ、ブログの表示速度が気になりだしました・・・
「PageSpeed Insights」でWEBサイトの表示速度（スコア）を測定すると・・・
見事に爆死ｗｗｗｗ
PCはまだ及第点ですが、モバイル版が「35」ってどうしてなのォォオオオーーーーｗｗｗｗ
ちなみにサーバー応答時間(TTFB)は1.44sと激遅ですｗ
管理画面でのレスポンスも多少遅い印象ですし、もっとサクサク表示して欲しい・・・
ってことでサーバー乗り換えを検討します。
- 他の方のブログを見ると、モバイルはどうしてもスコアが低くなる傾向らしい
- スコアが落ちる原因の一つは「adsense」の自動広告
- twitterのタイムラインなど外部から情報を引っ張ってくるとスコアが落ちる
・・・なので、実際にアクセスしてみて体感的に余りにも表示が遅く無ければ、それでいいんじゃね？という結論もアリなのではと思ったりしました。でもスコアはGoogleの評価に繋がるので検索上位を目指すなら改善すべきなんでしょうけどｗ
【さくらのRS】PHPはCGI版とモジュール版が存在する
分析結果を見てみると「CPUの初回アイドル」に11.7秒もかかってますね・・・その他にも要因がありそうですが、現在WordPressをインストールしているさくらのRSはPHPがCGI版です。
2018年4月18日以降に新規でRSを申し込むと高速なモジュール版が利用可能ですが、古参ユーザはCGI版のみ利用可能な状態です。
WordPressは内部でPHPを使っていますのでPHPの実行速度がページの表示速度に直結します。ですので実行速度が速いモジュール版PHPを使うことは、そのままWEBサイトの表示速度向上に繋がる訳です。多分。
モジュール版PHPが使えるさくらのRSを別途新規契約してサイト移行すればいんじゃね？と思いましたが、それだと面白く無いので他社のRSを試してみようと思います。そう、エックスサーバーさんに白羽の矢を立てました。
レンタルサーバ比較
最安のプラン特徴を抜粋、比較してみました。
CPUはいまだにsandyちゃんを使っているあたり、さくらさんのsandyおじさん愛を感じます（え
XSERVERのCPUはもともと12C/24Tですが、そのうち2コアが1ユーザーに割り当てられてるっぽい。 さくらはE3-1220あたりだとすると4Cだから1ユーザー/1コアかなｗｗｗ
RAMはXSERVERが圧倒的ですが、ユーザーが全て使える訳では無いので鵜呑みにできませんが、それでもろもろの差がすごい・・・(´・ω:;.:…
機器の性能面で言えばXSERVERの圧倒的勝利。レンタルサーバ初心者の登竜門としてさくらのRSはコストが最安でおすすめです。
| 移行元（さくらのRS） | 移行先（XSERVER） | |
| プラン | スタンダード | X10 |
| CPU | Xeon E312xx Sandy Bridge ？ | Xeon Gold 6126 Skylake 2.60GHz x 2 |
| RAM | 18GB | 256GB |
| ROM | 100GB（RAID10） | 200GB （RAID10） |
| WEB鯖 | Apache/2.4.41 | nginx |
| MySQL | 20個 | 50個 |
| 無料SSL | ○ | ○ |
| PHP | 7.3.9 (CGI版) | 7.2.17（FastCGI/OPcache） |
| WP | 5.2.4 | 5.2.4 |
| 独自ドメイン | ムームードメイン管理 | ムームードメイン管理 |
| ネームサーバ | さくらのNS | XSERVERのNS |
| 初期費用（税込） | 1,048円 | 3,300円 |
| 月額費用（税込） | 524円 | 990円 |
XSERVERへの移行方法
10日間の無料お試し期間が利用可能
2019年11月現在、エックスサーバーでは10日間の無料体験が可能です。この期間中にサイトを移行して満足したなら本契約する、という流れです。以下から申し込むことができます。
10分も経たずに「 サーバーアカウント設定完了のお知らせ 」がメールで届きます。ここに各種ログイン情報が掲載されていますので大切に保管しておきましょう。
ではさっそく移行作業を行います。
さくらのレンタルサーバも2週間無料なので、初心者の方やとにかくコストを抑えたい方におすすめです。
ドメイン設定
まず初めにエックスサーバー（X）で独自ドメインを利用するための設定を行います。以下の公式マニュアルから移行予定のWEBサイトの独自ドメイン（ここではhomediy.com）を設定してください。
注意点1：NS変更は最後に実施する
ネームサーバ（NS）はまださくらインターネットのサーバを利用しているので以下の警告が出ますが構わず進んでください。NSの設定変更（さくら→X）は移行作業が終わってから最後に実施します。先にNSを変更してしまうとユーザーがWEBサイトに到達できなくなる可能性があります。
注意点2：SSL設定は事前に作業が必要
また、以下のように「無料独自SSLの設定に失敗しました」と表示されますが、同じくNSの設定変更を行っていないため表示されます。今回移行するサイトはhttpsのサイトになるため、事前設定をしておく必要がありますが、公式マニュアルを確認すると「外部サーバーでのWeb認証」「外部ネームサーバーでのDNS認証」を行うことで事前のSSL設定ができる模様。
マニュアルを確認する限り、「外部ネームサーバーでのDNS認証」 は今回は実施不可です。独自ドメインはムームードメインで取得しているため、さくらのNSのゾーン編集ができないからです。なので今回は 「外部サーバーでのWeb認証」 でSSL設定を行います。
「SSL設定」＞「認証方式」＞「外部サーバーでのWeb認証」
トークンがダウンロードできるようになるので、移行元（さくら）の該当ディレクトリにトークンを設置しましょう。トークンは複数表示される場合もある模様。
さくらのファイルマネージャーを使ってトークンをアップロード。」こんなディレクトリ構成になるはずです。
マニュアルに従って進むと無事SSL設定が完了します。割と面倒臭い。
注意点3：画像ファイル名に日本語が含まれていないことを確認しよう
この先の手順でＷＰを移行したあと、ブログの各記事を眺めてみると、表示される画像と、表示されない画像があることに気づく・・・。そして表示されない画像のファイル名を確認すると「日本語」が入っていた・・・・。
そう、移行した際に日本語を含む画像ファイルが「文字化け」してしまっていたのだｗｗｗ
幸い、日本語を含む画像ファイルは少なかったため、移行元でファイルを書き換えして再度移行する手順で事無きを得た。
みんな！画像ファイルは英語と数字のみで構成しような！お兄さんからのお願いだ！
WordPress移行
事前のドメイン設定作業が終わったらやっとWordPress（WP）の移行作業です。XさんはWPの移行が簡単にできるよう、独自の移行サービスを提供しています。
以下が公式マニュアルです。
動作要件として以下が記載されています（一部抜粋）
- WPのバージョンは 4.0 ～ 5.2
- PHPのバージョンは 5.3以上
- DBの容量は１GB以下であること
要件を満たさない場合は自力で移行する必要があります
特に難しい作業はありません。マニュアル通りにポチポチしていくだけで完了しました。以下の画面では前述の「ドメイン設定」で作業した情報が必要です。
移行時間はそれほどかからず、5分ほどでした。容量は1GBちょっとくらい。
最後の作業。「ネームサーバーの変更」を実施しろ！と表示されています。さっそくやっていきましょう。
ネームサーバー変更
ここまでの作業で移行先（Ｘ）にＷＰのデータを移行するまでが完了できています。ですが実際にユーザーがＷＥＢサイトにアクセスしているのは移行元（さくら）のＷＥＢサーバの状態です。ユーザーからのアクセスを移行先（Ｘ）に変更するにはネームサーバの変更を実施する必要があります。
NS変更前に移行先でのWEBサイト表示を確認したい場合
NSを変更したあと、実際にエックスサーバーで表示されるWEBサイトを確認すると、動作がおかしかった。・・・みたいなことを防ぐために事前に動作確認できます。以下の公式マニュアル（下部のほう）を参考にしてください。自分のPCのhostsファイルを弄ればエックスサーバーでの動作を確認可能です。
XSERVERで簡単移行すると、phpmyadminにアクセスするためのDBのパスワードはランダムで指定される模様。「infoパネル」＞「サーバー」＞「操作パネル」＞「ファイル管理」からフォルダにアクセスできるのでwp-config.phpファイルの中身を確認してDBのパスワードをチェック！
あ、確認後はhostファイルを元に戻すのをお忘れなく。
ムームードメインの管理画面でNS変更作業
独自ドメインはムームードメイン（M）で取得、管理しているため、M側で作業を実施する必要があります。
マニュアルにも記載がありますが、以下の5つのNSを指定すればOKです。
- ns1.xserver.jp (219.94.200.246)
- ns2.xserver.jp (210.188.201.246)
- ns3.xserver.jp (219.94.200.247)
- ns4.xserver.jp (219.94.203.247)
- ns5.xserver.jp (210.188.201.247)
ムームードメインにログインしたら「コントロールパネル」＞「ドメイン管理」＞「ドメイン操作」＞「ネームサーバ設定変更」＞「取得したドメインで使用する」で上記NSを指定するだけです。（既存設定はさくらのNSになってるので、Xに変更する）
NSの変更後、24時間程度でドメインは反映されるはずです。お疲れ様でした！
常時SSLの設定
忘れずに常時SSLの設定も行っておきましょう。httpでのアクセスを強制的にhttpsに変更します。htaccessファイルを弄りますが、XSERVERはサーバーパネルからhtaccessのファイル編集が簡単にできます。
XSERVERの実力はいかに
さっそく移行したサーバーにてWEBページの速度を測定してみましょう！
サーバー応答時間（TTFB)が1秒を切り、改善していることが確認できました！
体感的にもブログの表示速度が向上しています。
| 【前】さくらのRS (モバイル/PC） | 【後】XSERVER (モバイル/PC） | |
| フィールドデータ —– | —– | —– |
| スコア | 35/74 | 45/86 |
| First Content Paint(FCP) | 3.5s/3.3s | 3.4s/3.3s |
| 初回入力遅延（FID) | 82ms/136ms | 82ms/136ms |
| ラボデータ —– | —– | —– |
| First Content Paint | 1.9s/0.5s | 1.9s/0.5s |
| First Meaningful Paint | 1.9s/0.7s | 1.9s/0.6s |
| 速度インデックス | 8.3s/2.7s | 5.8s/1.4s |
| CPUの初回アイドル | 11.7s/2.5s | 11.3s/2.7s |
| インタラクティブになるまでの時間 | 15.4s/3.1s | 13.6s/3.3s |
| 初回入力遅延の最大推定時間 | 640ms/120ms | 480ms/130m |
| 改善できる項目 —– | —– | —– |
| サーバー応答時間の短縮（TTFB) | 1.44s/1.86s | 520ms/500ms |
今回の移行では単純にサーバを乗り換えただけなのですが、その他のスコアにはあまり大きな影響ありません。そうなるとWPの構成、スクリプトなど中身を変更することにより大幅なスコアアップが見込めると思います。改善項目である「キーリクエストのプリロード」は移行前後で指摘されていたので、この部分ですね・・・。
その他体感できる部分としては管理画面がサクサク動くようになり、ログイン画面～ダッシュボードが開くまでに約5秒程度かかっていたのが、2秒程度になりました。
ブログを書く側にとっても快適なインターフェースで作業ができることは生産性の向上に繋がりますね。
まとめ
- レンタルサーバは初心者なら最安のさくらのレンタルサーバをおすすめ
- 訪問数が多くなって（月間10,000PV）ページ表示速度が気になったらXSERVERをおすすめ
- 管理画面もサクサク作業したい人はXSERVERをおすすめ
