お馬の写真 別館

「お馬の写真」管理者による徒然なるブログ

PageSpeed対応

      2016/07/20

pagespeed

Webサイト最適化のためのアドバイスをしてくれるサービス、PageSpeedに「お馬の写真 別館」をかけてみました。

沢山指摘してもらいましたが、その中で、比較的すぐに対応出来る2点に絞って対応。

ブラウザのキャッシュを活用する

指摘の内容としては

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。

というもの。

うちはApacheでWordpressを運用しているので、WordPressインストール先ディレクトリにある「.htaccess」に以下を追加。

ExpiresActive On
ExpiresByType image/jpg "access 1 week"
ExpiresByType image/jpeg "access 1 week"
ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType text/css "access 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType image/x-icon "access 1 week"

圧縮を有効にする

指摘の内容としては

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。

というもの。

httpd.confを修正して、deflate_moduleとfilter_moduleを有効に。
自分のところのhttpd.confでは、deflate_moduleの方は有効になっていたので、filter_moduleの行の先頭にあった「#」をはずしました。

…
LoadModule deflate_module modules/mod_deflate.so
…
LoadModule filter_module modules/mod_filter.so
…

続いて、.htaccessの方にも以下を追加。
はじめの方のBrowserMatchは圧縮に対応していない古いブラウザ用。

<IfModule deflate_module>
# NetScape4.x
BrowserMatch ^Mozilla/4 gzip-only-text/html
# NetScape4.06-4.08
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# Internet Explorer
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
# フィルタ設定
FilterDeclare Compression CONTENT_SET
FilterProvider Compression DEFLATE resp=Content-Type $text/html
FilterProvider Compression DEFLATE resp=Content-Type $text/css
FilterProvider Compression DEFLATE resp=Content-Type $text/javascript
FilterProvider Compression DEFLATE resp=Content-Type $application/javascript
FilterProvider Compression DEFLATE resp=Content-Type $application/x-javascript
FilterChain Compression
# proxyサーバー経由のアクセス対応
Header append Vary Accept-Encoding env=!dont-vary
</IfModule>

とりあえずここまでやって、パソコン用の評価は「修正が必要」から「修正を考慮」に改善。

 - WordPress