reevo – 表示速度最適化

担当：メンテナンス

課題と目標

Webサイトの表示速度が遅く、挙動がもっさりしているので直して欲しいとのご依頼をいただきました。

Chromeで検証してみると、確かにロードに時間がかかっていることがわかります。そのため、標準的な速度として3秒を目標として設定しました。

結果としては、表示までにかかる時間を約10秒、ファイルサイズを80%ほど下げることができ、WEBサイトの平均的な表示速度にすることができました。

検証してみるとキャッシュ設定がされておらず、サイトを訪れるたびにファイルを読み込んでおり、再訪問時の表示速度も遅いことがわかりました。そのため、htaccessに下記のように追記し、画像などのファイルの一時ファイルを保存するよう設定しました。

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

これを行うことで再訪問時の読み込みファイルサイズは激減し、再訪問時の表示速度は4秒近くまで速くなりました。

使用していないcssファイルが見つからないという404エラーで2.59秒の時間をロスしていることが判明し、読み込みを停止させました。

画像が多く使われているサイトであったのでEWWW Image Optimizerというプラグインによりアップロード済みの画像ファイル1384個を最適化しました。

また、AutoptimizeというプラグインにてHTML, CSS, JSコードも合わせて最適化し、ページサイズとリクエスト数が若干改善されました。

マウスホバーで画像が切り替わる仕様になっており、サムネイルだけで合計80枚の画像を読み込む必要がありました。算出したところこれらの画像だけで16.7MBあることがわかりました。

これらの画像のサイズは大きく、最適化はしておりretina対応のためこれ以上小さくできなかったので、1ページあたりに表示する件数を半分にし、マウスホバーのアクションを変更することを提案しました。

また、phpのバージョンが5系のままでありました。

5系のサポートは年内に終了する予定であったのと、php7では従来のphp5より2倍以上高速になるのでバージョンアップしました。（Speeding up the Web with PHP 7 より）

php7にすると配列を初期化しないといけなく、次のようなエラーが吐き出されます。

Warning: array_push() expects parameter 1 to be array, null given in・・・

そのため、エラーの箇所で次のように配列の初期化を行います。

$categories = array();