タグ: Mac

webサイトを長年運営していると表示速度の低下に直面します。KOKOPELLI for Smudgingも10年が経過し、その遅さ（重さ）が気になっていました。サイトのデザインを一新したついでにスピード対策もしてみました。
※ブログでの公開を念頭に置いて作業したわけではないのでスクリーンショットはありません。ほぼ文章のみになります。

PageSpeed Insights

まずはGoogleのPageSpeed Insightsで現在の表示速度を計測してみます。トップページは77、ホワイトセージのページは72とあまり良い数値ではありません。体感上もかなり遅い印象です。
「修正が必要」の項目ではサーバーの応答時間を改善しろ、「修正を考慮」では画像の最適化やCSSやらの縮小といったことが表示されています。

画像の最適化

手始めに画像の最適化を行います。最適化とは画像に含まれる余計な情報（データ）を削除してファイルサイズを縮小することなのですが、既に最適化は行っているので確認程度の作業です。ImageOptimやExifPurgeといったフリーウェアのソフトを使っています。compressor.ioというサイトでも同様のことができます。

CSSとJavaScriptの縮小

これは改行や余計なスペース、注釈などを削除してファイルを軽量化させるというものです。この作業でファイルサイズは半分程度まで縮小できます。また、使っていないCSSなどもついでに削除しておくとさらに縮小できます。CSS Compressorというサイトで縮小させることができますが、オリジナルのファイルはどこかに保存しておかないと手直し等の作業が事実上できなくなりますので注意しましょう。コンピューターにとっては改行や余計なスペースはゴミデータでしょうが、人間にとっては視覚的に必要なデータになります。

CSSとJavaScriptの読み込みタイミング

まずCSSは＜HEAD＞タグ内の一番上に置くのがいいそうですので移動させます。また、@importで読み込ませている場合は読み込みが遅くなるらしいので直接読み込むように記述を書き換えます。JavaScriptは＜/BODY＞タグの直前でいいそうです。通常は＜HEAD＞タグ内にあるので＜/BODY＞タグの直前へ移動させます。

ここまでで結構な労力を使いましたが、サイトの表示速度はトップページ80、ホワイトセージのページ75と若干の向上に留まりました。この後CSSのファイル数を減らしてみたり複数の画像をひとつに纏めて読み込み回数を減らすCSS Spriteを試しましたが、これ以上の速度向上は望めませんでした。。

データベースのバージョンアップ

万策尽きたかと思いましたが突然閃きました。データベースのバージョンっていくつだろう。。確認してみるとバージョンは5でした。契約しているサーバーでの最新は5.6です。もしかしてと思いデータベースのバージョンアップを試みました。使用中のデータベースをエクスポート。新規にデータベース作成。エクスポートしたデータをインポート。configファイルを書き換え。これで完了。
体感上かなりサクサクになりました。速度を計測してみるとトップページ91、ホワイトセージのページ93と予想を超えた爆速化に成功しました。古いバージョンのデータベースで運用している方はまずここから手を付けてみましょう。