Webサイトのペ－ジ速度を改善する

Webサイトのペ－ジ速度を改善する。

最初に現時点でのパフォ－マンスを『GTmetrix』で測定する。

本サイトでは、下記の結果となった。

GTmetrix 測定結果

Performance Scores

PageSpeed Score : F (30%)
YSlow Score : D (66%)

Page Details

Fully Loaded Time : 1.8s
Total Page Size : 2.74MB
Requests : 32

ま、まぁチュ－ニングなんてしてなかったし (震え声)。

で、『GTmetrix』のパフォ－マンス測定結果を参考に、下記の対策を施した。

gzip圧縮有効化
キャッシュ有効期限の設定
画像ファイルサイズを表示サイズへリサイズ

1.gzip圧縮有効化

『/etc/httpd/conf.d』配下に、gzip圧縮設定ファイルを作成する。

<IfModule mod_deflate.c>
        SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico) no-gzip dont-vary
        SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

        SetOutputFilter DEFLATE
        AddOutputFilterByType DEFLATE text/plain
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE text/xml
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE application/xhtml+xml
        AddOutputFilterByType DEFLATE application/xml
        AddOutputFilterByType DEFLATE application/rss+xml
        AddOutputFilterByType DEFLATE application/atom_xml
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE application/x-javascript
        AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

設定内容は下記の通り。

画像ファイルを除いてgzip圧縮を行う
旧ブラウザは捨てた (gzip圧縮に対応していないWebブラウザであろうと、gzip圧縮する)

2.キャッシュ有効期限の設定

『/etc/httpd/conf.d』配下に、キャッシュ有効期限設定ファイルを作成する。

<IfModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault "access plus 1 month"
</IfModule>

<IfModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault                     "access plus 1 month"
        ExpiresByType application/xml      "access plus 0 seconds"
        ExpiresByType text/xml             "access plus 0 seconds"
        ExpiresByType text/html            "access plus 0 seconds"
        ExpiresByType application/atom_xml "access plus 1 hour"
        ExpiresByType application/rss+xml  "access plus 1 hour"
</IfModule>

設定内容は下記の通り。

mod_expiresモジュ－ルの有効化
全ファイルタイプのキャッシュ有効期限を1ヶ月間に設定
一部タイプを個別設定 (ログイン後の上部バ－が表示されなくなった… orz パフォ－マンス測定結果は変わらなかった)

3.画像ファイルサイズを表示サイズにリサイズ

単純に画像ファイルサイズを、htmlタグで指定されている『width、height』の値にリサイズするというもの。

自分でアップロ－ドした画像ファイルをリサイズする。

上記対応をした後に再度パフォーマンス測定をした結果は、下記の通り。

GTmetrix 再測定結果

Performance Scores

PageSpeed Score : C (71%)
YSlow Score : C (78%)

Page Details

Fully Loaded Time : 2.3s
Total Page Size : 638KB
Requests : 32

『Performance Scores』は、約40%程度向上。

『Page Details』は、読み込み時間が0.5s程低下したが、総ペ－ジサイズが約2MB抑えられた。

これだけで、C判定まで持っていけたので良しとする。

どうせアクセスなんて大してないしね (´；ω；｀)

Meaningless Notebook