パフォーマンス改善あれこれ試してみる

このブログだとコンテンツも少ないから効果はすくないだろうけど、学習も兼ねて。

lighthouseのインストール

$ npm install -g lighthouse

$ lighthouse --view https://note.mersy418.com

スタート時

https://note.mersy418.com/reports/note.mersy418.com_2018-07-01_06-21-35.report.html

jpg画像を圧縮

https://compressjpeg.com/ja/

でとりあえずガワとかで使ってる画像周りを圧縮

https://note.mersy418.com/reports/note.mersy418.com_2018-07-01_06-40-33.report.html

画像周りのは出なくなったけどspeedIndexが下がった。

Gzip Brotli

とりあえずGzip

/etc/httpd/conf/httpd.conf

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf
</IfModule>

https://note.mersy418.com/reports/note.mersy418.com_2018-07-01_07-13-18.report.html

performanceのところは改善したと思う

参考

• https://weblabo.oscasierra.net/apache-httpd-mod_deflate/
• https://bowmiow.net/konamono/xampp-gzip/

Webfont周り外す

まぁ、これはなくてもいいか、、くらいで。

<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

https://note.mersy418.com/reports/note.mersy418.com_2018-07-01_07-22-06.report.html

CloudFront

CloudFrontの設定をする
一応、CloudFront経由のほうが改善はする。

https://note.mersy418.com/reports/d1hmmd7gbfdm7h.cloudfront.net_2018-07-01_11-41-59.report.html

Route53の設定をCloudFrontに向ける
→一旦なし。

Eliminate render-blocking resources

https://developers.google.com/web/tools/lighthouse/audits/blocking-resources?hl=ja
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=ja

イマイチわかってない

cache policy

30日とかにしといたが。

---

• 画像圧縮
• lazyload
• CDN（CloudFront、Fastly）
• PWA
• HTTP/2