サイトの表示高速化のためにやった５つのこと

Googleの計測ツールを使ってサイトの表示高速化を行いました。
逆引きPHPは特に重いと思ったわけではありませんが気になってやってみたのですが、体感的にも速くなった気がします。

やるべきことはこのサイトのレファレンスにまとまっています。

計測結果に対するアドバイスからこのルールを見ておなす流れになります。

CSS遅延読み込み

後から読み込んでも問題ないCSSがあります。このサイトではfontawesomeを使っているのでこれは後から読み込むことにしました。CSSはheadで宣言しなければならないのでscriptを使ってbodyタグの前か後に以下を記述します。

<script>
    var add_link = function() {
        var link = document.createElement('link');
        link.rel = 'stylesheet'; 
        link.href = "https://use.fontawesome.com/releases/v5.0.13/css/all.css";
        link.crossorigin = "anonymous";
        document.head.appendChild(link);
    };
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(add_link, 0); });
    else window.addEventListener('load', add_link);
</script>

これで評価が劇的によくなりました。
フォントも読み込んでいるので遅延読み込みさせたらなぜか評価が下がったのでやめました。

CSSのインライン化

コンテンツページは同じCSSを使うので保守性を考慮してそのままCSSファイルから読み込みますが、それ以外のトップページや管理者のページ用のCSSはページの中に埋め込みました。ほとんどないのですがコンテンツページの読み込みが少しでも速くなるように対応しました。
これはほとんどやる場所がなかったので評価に影響なしです。

CSSの縮小

リセットCSSとしてnormalize.cssを使用しているのですがオンラインで縮小させられるこちらのサイトで圧縮しました。

キャッシュの設定

キャッシュの設定を行なっていなかったので設定を行いました。.htaccessファイルを作って配置します。
こちらのサイトがわかりやすかったです。

# CACHE media files for 30days
<Files ~ ".(gif|jpe?g|png|ico|js|gz|otf|ttf|eot|woff)$">
  Header set Cache-Control "max-age=2592000"
</Files>
 
# CACHE media files for 24hours
<Files ~ ".(css)$">
  Header set Cache-Control "max-age=86400"
</Files>

デフォルトではどうなっていたのかわかりませんがキャッシュされていたので今回は明示的にキャッシュしたことになります。なので評価は変わりませんでした。

圧縮して通信

最近のブラウザではhttpリクエストでgzipによる圧縮をサポートしているようです。こちらの説明では最大９０％も圧縮されるらしくかなりの効果が望めそうです。
こちらのサイトが参考になりました。Apacheに設定もできるようですが、サイトごとに変更も効くのでこれも.htaccessファイルへ追加しました。

<IfModule mod_deflate.c>
     SetOutputFilter DEFLATE
 
     # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
     BrowserMatch ^Mozilla/4\.0[678] no-gzip
     BrowserMatch ^Mozilla/4 gzip-only-text/html
     BrowserMatch \bMSI[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>

これは体感的にも速くなったと感じました。評価はあまり上がりませんでしたが効果はかなりあったと思います。

終わりに

以上５つのことを実行しましたが以下のような結果になりました。