ConoHaVPSで動かしてるこのブログの高速化に着手した話

スポンサーリンク

どーもまるほいです。ゲームとは無関係のWebページの高速化についてです。先日、ブログの平均ロード時間が900ms前後になっていたのでやべえ長くね!?と思い平均ロード時間だけではなくサイト自体の第三者評価が出来ないか調べていた所、Googleが開発者向けに公開している「PageSpeed Insights」というものを始めて知り、試してみました。結果は、

site-evaluation

モバイルで48、パソコンで56という表示でした…

ひええ!やべえ!「修正が必要」とか言われた…。

という訳で、さすがにこのスコアは少しでも改善出来るかぎり改善した方が良いなという考えになりました。そこで、今回は3つ高速化に向けて色々試してみたんですが、スコアが15ぐらいは改善されたので、良かったなと。

900ms前後は0.9秒前後という訳で別に全然遅い訳じゃなかったですけど、結局やってみたらスコアの方は上がりましたという話です。平均ロード時間は設定により2.3sとかに伸びました。

site-evaluation-after

緑では無いもののモバイル+15、パソコン+16の改善!

どの様な事をしたらこのスコアの改善に繋がったのかまとめておきたいと思います。その前に、前々からやっていた事を1つ紹介。

前提:画像コンテンツを使うなら「EWWW Image Optimizer」を導入しよう

polarr5

自分のブログではゲームの話を扱うので、画像を使う機会が多いだろうという考えから「鯖の容量を画像で一杯にさせるのは…」と思い導入したプラグインが「EWWW Image Optimizer」でした。が、これが高速化にも一役買っていたみたいです。WordPress上に画像をアップロードさせるとファイルサイズを自動で圧縮したりmeta情報(Exif)を削除してくれたりと便利なので導入オススメです。

サイトスコアの改善に繋がった方法3つ

「autoptimize」というプラグインを導入

先ほど述べたEWWW~のプラグインでは画像の圧縮などで高速化に繋げるプラグインでしたが、「autoptimize」はソースコードの方で高速化させるプラグインです。対象はHTML/CSS/JavascriptでWordPress環境では必ず確実に様々な場所で使われているものたちです。これらのソースコードを圧縮する事で高速化に繋がる訳ですね。ちなみに自分が導入してみたところ、両方でスコアが10改善されてモバイルで59(+10)、パソコンで67(+11)になりました。

Simplicityとの相性が悪いプラグインの様で、自分が導入してみたところTable of Contents Plusの目次背景が表示されなくなりました。なのでオプションでTOCのCSSを除外する設定にして凌いでます。他にも不具合起きているかも…。

静的ファイルに対してキャッシュを設定

常連の人が毎日ブログを見に来てくれたとして毎回毎回ファイルをサーバーから取ってくるのは毎回ロードがかかり大変アレという話で、サーバー側から静的ファイルに対してキャッシュを設定させる事で高速化を実現させるという感じです。行なった事はhttpd.confに以下を追加しただけです。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 12 days"
ExpiresByType image/gif "access plus 12 days"
ExpiresByType image/jpg "access plus 12 days"
ExpiresByType image/jpeg "access plus 12 days"
ExpiresByType image/png "access plus 12 days"
ExpiresByType application/x-javascript "access plus 12 days"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

これでモバイルは63(+4)、パソコンは71(+4)になりました。

phpの実行コードをキャッシュさせる「APC」フレームワークを導入

WordPressはPHP+MySQLで動いているCMSです。という訳でそのPHPの実行コードを上手く改善出来ないか調べていたらAPCという物があるそうなので導入してみました。

yum -y install php-pecl-apc  が終わったら、設定ファイルでメモリサイズを変更します。

# sudoedit /etc/php.d/apc.ini
;apc.shm_size=64M #無効化(デフォルトをのこしておく)
apc.shm_size=512M #上をコピペして有効化させ数値を弄った

以上です。全ての実行コードがキャッシュされてスコアが変わるまではちょっと時間がかかりそうです。評価自体に変化はありませんでした。

ちなみに

旧ブログはモバイルが62、パソコンが0というヤバめなスコアを叩きだしていて、こういう改善をする事が出来る自由度があるのもWordPress+ConoHaの長所の1つなんだなぁと思いました。まあテーマを流用している点とか考えると導入障壁が高いのは事実なんですが…。

また、こういった評価サイトは複数あったり、スマートフォンでの表示テストが出来るサイトなど、探せば無限に出てきそうです。色々試しながら緑色を目指してぼちぼち続けたいと思います。

サイト GTmetrix
サイト Pingdom Website Speed Test
サイト BrowserStack
サイト Screenfly

そして現在利用しているVPSのConoHaですが、チャージ金額に応じて最大2000円のプレゼントキャンペーンやってるみたいです。月900円からなので試しに初めて見てはいかがでしょうか?ここから登録すると1ヶ月分無料になります。

ConoHaは初期費用、データ転送一切無料のVPSです。すべてのストレージにSSDを採用したハイスペックなVPSは630円/月~。豊富なOS/アプリケーションテンプレートや多機能なAPIでサービスの運用・構築を大きくサポートします。