torinaブログ

DjangoとBootstrap4で作成したブログ
Python, Django, Kivy, Bootstrap, Apache等のメモです
ソースコード

ウェブサイトの表示速度を計測と、パフォーマンス改善

Apache Apacheモジュール マイサーバ初期設定1 パフォーマンス マイサーバ初期設定2
2016年5月25日1:58
ウェブサイトの読み込みが遅いな、っていうときに、まずどの部分に時間がかかっているかを調べる必要があります。
今回は便利なサイトを2つ後紹介します。

http://web-tan.forum.impressrd.jp/e/2013/01/29/14562


↑のページをブックマークし、調べたいサイトを開いた後に、先ほど登録したブックマークを開くだけで計測ができます。
すると、このように表示が出てきます。どこに時間がかかっているかも書いてくれています。



https://developers.google.com/speed/pagespeed/insights/


こちらは、ウェブページのURLを入力することで計測ができるGoogleのサービスです。
これの診断結果で指摘される圧縮やキャッシュといった設定は、ざっくり言うと、とりあえずやっとけば効果が出てくる無難なものになりますので、覚えておいて損はなさそうです。

例えば圧縮ならば、confファイル等に以下のように書けます。
参考
http://oxynotes.com/?p=6519
<IfModule mod_deflate.c>
     SetOutputFilter DEFLATE
 
     # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
     BrowserMatch ^Mozilla/4\.0[678] no-gzip
     BrowserMatch ^Mozilla/4 gzip-only-text/html
     BrowserMatch  MSI[E] !no-gzip !gzip-only-text/html
 
     # gifやjpgなど圧縮済みのコンテンツは再圧縮しない
     SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
     SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
 
     # htmlやcssなどは圧縮
     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/x-javascript
     AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>


キャッシュの設定は、例として以下です。
参考
http://welcustom.net/browser-cache/
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 30 minutes"
ExpiresByType text/html "access plus 10 seconds"
ExpiresByType image/jpg "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/gif "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
</ifModule>


png画像の最適化は、私のcentOS6 さくらvpsならば以下です。
参考
http://www.koikikukan.com/archives/2013/10/31-005555.php
# OptiPNGインストール
yum install optipng
 
# 最適化
optipng test.png
 
# まとめて最適化
find . -name "*.png" -print | xargs optipng


jsやcssの読み込み方法の改善も、結構効果があります。
jsは<head>内ではなく</body>の直前に読み込むことや、
他のjsに影響がない、独立したjsならば、以下のように非同期で読み込むこともできます。
<script src="a.js" async></script>