ブログの軽量化が完了しました(とりあえず)。

こんばんは、QPです。
11日から行っていたサイトの軽量化作業を終了しました。

2012_12_14_000.jpg


今回変更した点は
・画像データの圧縮
・3カラムから2カラムにし、Topに表示されるコンテンツの量を減らす。
・CSSの圧縮
の3点です。テンプレートとCSSの変更と圧縮には時間がかからなかったのですが、画像データの圧縮にはまだ一部しか終えていないのにかなり時間がかかりました。
当初は30日くらいまで閉鎖して修正するつもりでしたが、全てを修正するのはあまりにも大変だったので、とりあえず、最近の記事のみの変更にすることにして徐々に修正していくことにしました。
下の画像は、GTmetrixという解析サイトで解析した際の画像です。

2012_12_14_002.jpg
GTmetrixでの解析

スクリーンショットを撮り忘れたので変更前の画像はありませんが、以前は、『Page Speed Grade:D』の『YSlow Grade:E』ぐらいで、各パラメータも
Page load time: 8秒くらい
Total page size: 18.2MB(笑)
Total number of requests: 250くらい
になっていました。
特にページ容量はすさまじく、自分でもスマホなどで見ようとは思えませんでした。それが1MBを切るようになったことを考えると、いかに無駄が多かったことか思い知らされます。
変更前は画像一枚当たり400から700KBもあり、記事の表示件数も10件だったので、その時点でTOPページの容量は5MBを上回っていました。さらにサイドカラムにあったコンテンツのサムネイルも、サムネイル用に圧縮したものではなく、記事に掲載した巨大なものをサイズ指定しただけだったので、18.2MBという膨大な容量になっていたようです。
それを今回は100KB程度に圧縮すると共に、記事のTOP画像にはタイトルだけのシンプルな画像(30KBくらい)を表示させてTOPページの表示速度を早くすることに成功しました。今後は、記事内の画像もそれぞれに合った容量で載せていこうと考えています。
3カラムから2カラムにしたのも、前途のサイドカラムに表示するコンテンツを削減するために行ったのですが、結果的にサイトの幅が従来の1400pxから1113pxになり、ノートPCなどで主流な(1366×768)解像度に収めることができました。
最後に、CSSファイルの圧縮についてはそこまで大きな効果はありませんでした。ただ、『Use efficient CSS selectors』(効率化できるCSSがあるということらしい)の項目がFランクですのでまだまだ効率化の余地があるようです。『Remove unused CSS』(使用されていないコマンドがあるらしい)のほうも改善する必要があるかもしれません。
ちなみに、『Specify image dimensions』はサイズ指定されていない画像があるということらしいです(後日修正予定)。
さて、今回の変更ではTwitterや複眼RSSなどを消すことになりましたが、こういった外部とやり取りするものは『Page Speed Grade(Googl?)』『YSlow Grade(Yahoo?)』といったグレードに影響を及ぼすようです。ただ、コミュニティ関連のブログパーツは入れたいので代替手段を現在検討中です。
サイトの軽量化もなかなか奥が深そうなですな。( ̄へ ̄|||) ウーム
以上、不定期更新でした。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次