こんにちは。Takitaです。
PageSpeed Insightsで100点を目指すにあたり、今回は「ラウザのキャッシュを活用する」という指摘を改善しました。nginxのgzipを有効にすることで圧縮されていないファイルを圧縮して63点から85点までスコアを上げることができました。
Google PageSpeed Insightsの以下の点についてはGoogle PageSpeed Insightsとはで解説しています。
静的なリソースをブラウザでキャッシュすると、ユーザーがサイトに複数回アクセスした場合に時間を節約できます。
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
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はそのままにしました。