こんにちは。Kajitz inc.の瀧田です。

PageSpeed Insightsで100点を目指すにあたり、今回は「ラウザのキャッシュを活用する」という指摘を改善しました。nginxのgzipを有効にすることで圧縮されていないファイルを圧縮して63点から85点までスコアを上げることができました。

Google PageSpeed Insightsの以下の点についてはGoogle PageSpeed Insightsとはで解説しています。

• Google PageSpeed Insights とはなにか
• SEO上、効果があるのか

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

静的なリソースをブラウザでキャッシュすると、ユーザーがサイトに複数回アクセスした場合に時間を節約できます。
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

私のブログでは *.css, *.js, *.woff2, *.jpg がブラウザのキャッシュを活用できていないため、指摘を受けています。
今回はS3などのストレージを利用していないため、nginxの設定変更がメインになっています。
S3 x CloudFrontという構成の場合は、S3 GUIでフォルダ以下のオブジェクトのメタデータ（e.g Cache-Control）を一括で変更するを参考にしてみてください。

ブラウザのキャッシュが有効になっていないことを確認する

ブラウザにキャッシュされている場合は、 レスポンスに Expires が含まれているはずですが、 Expires は見当たりません。

$ curl -I -H 'Accept-Encoding: gzip,deflate' http://tackeyy.com/assets/home-bg-6117cf5e4963c54ff894b903c1e4729082394fdbe2f598071210cf1c44b48718.jpg
HTTP/1.1 200 OK
Server: nginx
Date: Tue, 22 Aug 2017 06:33:08 GMT
Content-Type: image/jpeg
Content-Length: 104850
Last-Modified: Thu, 01 Jun 2017 08:10:23 GMT
Connection: keep-alive
ETag: "592fcbef-19992"
Accept-Ranges: bytes

nginx.confを修正する

add_header Cache-Control public; と expires 7d; を追加しました。

      location ~ ^/assets/ {
              root /var/www/blog/current/public;
              add_header Cache-Control public;
              expires 7d;
      }

      location ~ ^/packs/ {
              add_header Cache-Control public;
              expires 7d;
      }

webpackerでvue.jsを利用しているため、location ~ ^/packs/ を追加しています。
location ~ ^/packs/ を追加しないとキャッシュが設定されません。

$ curl -I -H 'Accept-Encoding: gzip,deflate' http://tackeyy.com/packs/ArchiveList-1f6ed033c15447f1f7e4.js
HTTP/1.1 200 OK
Server: nginx
Date: Tue, 22 Aug 2017 06:47:38 GMT
Content-Type: application/javascript
Last-Modified: Mon, 21 Aug 2017 10:03:05 GMT
Connection: keep-alive
ETag: W/"599aafd9-14c7b"
Content-Encoding: gzip

ブラウザのキャッシュが有効になっていることを確認する

レスポンスに Expires, Cache-Control が含まれていることを確認できました。

$ curl -I -H 'Accept-Encoding: gzip,deflate' http://tackeyy.com/assets/home-bg-6117cf5e4963c54ff894b903c1e4729082394fdbe2f598071210cf1c44b48718.jpg
HTTP/1.1 200 OK
Server: nginx
Date: Tue, 22 Aug 2017 07:00:22 GMT
Content-Type: image/jpeg
Content-Length: 104850
Last-Modified: Thu, 01 Jun 2017 08:10:23 GMT
Connection: keep-alive
ETag: "592fcbef-19992"
Expires: Tue, 29 Aug 2017 07:00:22 GMT
Cache-Control: max-age=604800
Cache-Control: public
Accept-Ranges: bytes

これで85点から87点に少しだけスコアが上がりました。

ただ、実はanalytics.jsがまだ引っかかっています・・・

http://www.google-analytics.com/analytics.js (2 時間)

UserAgentを利用してGoogle PageSpeed Insightsからのアクセスの場合はanalytics.jsを読み込まないというような方法もありますが、まあそこまでしなくてもなと思いanalytics.jsはそのままにしました。

https://stackoverflow.com/a/36137447/7807559