Webサイト高速化のために行った6つのポイント

Posted on | 8月 9, 2014 | No Comments

この記事は 7分28秒程度で読めます。

fast1
最近サイト(wordpress)の重さが気になって測定サイト[GTmetrix]で測ってみると、とても重い状態だったので色々ためして高速化できました。
ここでは実際に行った事を紹介します。

対策前はとても重かった

このブログのトップページ(http://oldlens.net/)を測定しました。

gtmetrix1

[Page load time]はページ全要素の読込にかかる時間です。約8秒かかっていますね。
[Total page size]はページ全体の合計ファイルサイズ、1.95MBもあります。
[Total number of requests]はページ全体でのWebリクエスト数です。141ファイルは多いですね。

Page Speed GradeがB(85%)、これを指標に改善してゆくことにしました。

対策でやったこと

  • Webサーバ(Apache)へmod_pagespeedモジュールを導入
    • mod_pagespeedインストール
    • mod_pagespeedのフィルター設定
  • EWWW Image Optimizerを導入
    • 既存画像最適化
  • Apache設定の見直し(KeepAliveを有効に)
  • CSSの見直し
  • JavaScriptの読込みをフッタへ

mod_pagespeedモジュール

mod_pagespeedモジュールとは?

Googleが提供しているWebサーバ(Apache)向けツール「mod_pagespeed」を導入します。Apacheに導入/設定するだけでサイト高速化のために色々自動的にサーバ側で行ってくれます。

  • CSSやJavaScriptの最適化
    • 外部CSSやJavaScriptから不要なスペースや改行を取り除いて軽量化
    • 外部CSSや外部JavaScriptが複数ある場合、それらを1つのファイルにまとめてHTTPリクエスト数を削減。
    • 小さなサイズの外部CSSや外部JavaScriptをHTML内の<style>や<script>へインライン化
    • 画像ファイル、外部CSS、外部JavaScriptのブラウザ側でのキャッシュ期間を長くする。内容が変わったときは正しく更新されるように内容のハッシュをURLに含める。
  • 画像ファイルの最適化
    • 画像ファイルからメタデータを削除してファイルサイズを削減
    • 小さな画像はHTMLにインラインかしてHTTPリクエストを削減
  • HTMLの最適化
    • meta http-equivの内容をHTTPヘッダーに置換える
    • HTML内の空白や改行を削除する。

他にもあるのですが、こういうことをWebサーバが勝手にやってくれるようにするツールです。すごいですね!

インストール

インストールコマンドはこんな感じ。

# wget https://dl-ssl.google.com/linux/linux_signing_key.pub
# rpm --import linux_signing_key.pub
# wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-
stable_current_x86_64.rpm
# rpm -U mod-pagespeed-*.rpm
# service httpd restart

あわせて、Apacheの設定ファイルを見直し、KeepAliveをonに変更。

mod_pagespeedフィルター設定

有効にしたフィルターは以下の通り。まだ設定を追い込んでいけそうではあるが、取り急ぎという感じになっている。

  • rewrite_javascript
  • combine_javascript
  • extend_cache
  • collapse_whitespace
  • convert_meta_tags
  • combine_css
  • rewrite_css
  • fallback_rewrite_css_urls
  • rewrite_style_attributes_with_url
  • flatten_css_imports
  • inline_css
  • convert_jpeg_to_progressive
  • rewrite_images
  • insert_img_dimensions

 

WordPressまわりの調整

  • EWWW Image Optimizerの導入
    Wordpress管理画面から「EWWW Image Optimizer」をインストールします。これで、次からの投稿画像は最適化されます。
    次に、既存のアップロード済みファイルも合わせて最適化します。EWWW
    「Optimize Media Library」で過去にアップロードした画像を最適化を行います。
    「Optimize Everything Else」では、使用しているWordpressテーマで参照している画像ファイルの最適化を行います。
  • テンプレート修正
    jquery.jsなどJavaScriptの読込みをフッタ部分で行うように変更しました。
    テーマで使用しているCSSを確認し、不要と思われるスタイルを削除しました。

 

対策完了後

これらの対策を施して再度GTmetrixで計測しました。
gtmetrix2

読込み時間:7.91秒 → 2.51秒 (31%)
ページサイズ:1.95MB → 897KB (46%)
HTTPリクエスト数:141 → 58 (41%)

良い感じになりました(^-^)

ここまで来ると体感でもページ表示が早くなっています。

GTmetrixで指摘されている項目は、Google Analyticsなど外部のJavaScriptなどしかありませんので、こちらでの対策は難しいです。
今のスタイル/機能で出来る限りのチューニングと言うところでしょうか。
あとはWebサーバをApacheからeginxへ置換えるとパフォーマンスが上がるのでしょうが、少し腰が重いので現状維持ですね。

 

まとめ

今回、まとめて対策を行ったなかではmod_pagespeed導入のインパクトは大きかったですが、関連して行った画像最適化やHTMLソース/CSS/JavaScript見直しの方が効果は高いです。

mod_pagespeedをON/OFFして比べてみましたが、ページ表示速度で2.5秒→3秒という程度の効果しかありません。つまり7.91秒→3秒への高速化はmod_pagespeed以外での改善と言うことになります。地道なソース改善が一番効果があるのでしょうね。

ですが、サーバを触れる環境にある方は、mod_pagespeedを入れておくと自動的に最適化してくれ、とても楽に一定の効果を上げられるのでオススメです。

あわせて読みたい関連記事:

    IMGP2334-

    長らく更新が止まっておりますが、ネタ不足から脱出すべく新機材を導入しました。 コシナの「Voigtlaender Super Wide Heliar 15mm…

    7040467697_b16ae2b1c5

    PENTAX K10D Carl Zeiss Jena Flektogon 35mm f2.8 昨日の大雨・暴風は凄かったですね。まさに春の嵐ですね。 この写…

    EOS Kiss Digital Nのファインダーは見難く、MFでのピント合わせは至難の業だ。その改善にフォーカシングスクリーンをスプリットマイクロへ交換したの…

    Scan-141020-0026

    MINOLTA TC-1 / KODAK Super Gold 400 フィルムスキャナ故障により、ここ2年ほどはFlektogonで複写を行っていましたが、…

    x4_blk_l

    色々忙しくて5日ほどMTBに乗れていませんが、頭の中はMTBでいっぱいです(笑) さて、ポジション出しをアレコレ考えていて、ステム交換を考えています。 今はCa…

Comments

Leave a Reply





  • アーカイブ

  • カテゴリー

  • 最新のコメント

  • SDA王滝(仮)

    SDA王滝2015年9月大会まであと
  • 購読