webサイトの爆速化

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を試しましたが、これ以上の速度向上は望めませんでした。。
pagespeed insights

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

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

pagespeed insights
pagespeed insights

Mac Mini 2012 SSD導入

Mac Mini購入から1年が経過し、予定通りSSDの導入に踏み切りました。
当初インテルの評判がすこぶる良かったのですが、サンディスク派の私はサンディスクのSDSSDHII-480G-J25Cを購入しました。
現在のディスクの使用量が200GB以下だったので480GBもいらないと思いましたが念のため容量の大きい480GBにしました。

交換法は細かく説明しているサイトが山ほどあるので割愛します。
このSSDは厚さ7mmですが、そのまま装着するとスカスカになりネジ穴がずれてしまうので付属のスペーサーを貼付けてから取り付けた方が良いようです。(画像なしでは意味が解らないと思いますが、やってみれば解ります)
取り付け後、CPUの温度が90℃に上昇したので再度蓋を開けて確認したところ、ファンのコネクターが外れていました。取り付けは慎重に。。

取り付け後の感想ですが、体感速度は劇的に上がります。起動時間は僅か10秒足らず。
システム終了もスパッと終わります。
重たいPhotoshopやIllustratorもさくっと立ち上がります。時間的には半分以下です。
動作音はもちろんしません。
CPUの温度が若干高めのような気がしますが気のせいでしょうか?

2010hdd
Mac Mini 2010のHDDの速度
遅いです。

2012hdd
Mac Mini 2012のHDDの速度(購入時測定)

2012-2015hdd
Mac Mini 2012のHDDの速度(最近測定)
1年程度使用していますが、既に10%近く遅くなっています。

2012-2015ssd
Mac Mini 2012 SSDの速度
読み込みは約6倍!メーター振り切れてます!書き込みは2.5倍です。