高速なブログを作りたい
Chrome の OSS ツールである Lighthouse を使うと、web page のどこを改善できるのか調べられます。 （最近のブラウザは開発者ツールが充実していて、本当便利になりました…）
早速、2019/01/13 現在の amasuda.xyz の性能を有名サイトと比べてみた
google.com, bbc.com, yahoo.co.jp
さすが google は Performance が高い。 Progressive Web App は通常の Web ページだと無視して良い。 面白いのは SEO が 80% な点だ。
google.com では SEO 対策は不要ということか。
次にニュースサイトの bbc.com。ニュースサイトにありがちだが、Performance が低く、そして SEO が高い。
SEO が高くなければ生きていけない世の中だ。
多くの日本人が見ているだろう Yahoo! はさらに Performance が低い。Speed Index がアラートになっており、bbc.com より低性能なことが伺える。
amasuda.xyz
このブログはどうだろうか。
悪くはないが、まずニュースサイトと比べると、広告や js, css などのアセットや互換性への考慮が圧倒的に少ないため、速くて当然と言える。
Performance と Accessibility, Best Practice は google.com より見劣りしているため、ここは改善の余地があるだろう。
具体的に何を改善するか？
実はこの記事を書くまえに、malchata/yall.js を導入し、画像などを遅延読み込み（lazyload）するようにした。
そして比較してみたのだが、数値の改善は見られなかった。 ちゃんと Lighthouse が指摘した内容を修正する必要がありそうだ。(´・ω・｀)
Performance の改善
Performance とはもちろん、web page の速度だ。現在の amasuda.xyz は下記の問題がある。
- Eliminate render-blocking resources (0.65s)
- Serve images in next-gen formats (0.3s)
- Defer unused CSS (0.15s)
- Efficiently encode images (0.15s)
見ての通り、css と img が適切でないことがわかる。やはり web page を遅くするのは、不良な js の実行はさておき、基本的には asset だ。
これに対するアプローチとしては、CDN を利用するのが良いだろう。また、画像フォーマットも webp など圧縮率の高いものにするよう、記事作成の段階から気をつける必要がある。
Eliminate render-blocking resources
DOM の描画が速ければ、ユーザーに速くページが表示される。そのとき、CSS を読み込むとどうしても描画までに時間がかかってしまう。
このブログは bootstrap を利用しているのだが、その読み込みに時間がかかってしまう。改善方法は現在考え中だが、media を利用して環境に応じた CSS の配布などをおこなうと良いようだ。
Serve images in next-gen formats
Cloudinary で画像をキャッシュ。さらにレスポンシブに画像を生成する – Think Abstract
こちらの記事で書いたとおり、Cloudinary などの CDN を使うことで画像にかかわる面倒な作業を任せることができる（お金もかかるが）。
これにより、webp や レスポンシブな画像の作成は簡単に行うことが可能。
Defer unused CSS
こちらは Hugo の Page Variables .Type | Hugo を利用することで、ページの性質にあわせた js, css の読み込みを行うようにした。
Accessibility の改善
Accessibility とは、webreader のようなものを使ったときに、page が正常に表示されるためのメタ情報を載せられているかどうかだ。また、初めて知ったが文字の色のコントラストも評価されている。
- Links do not have a discernible name
- <frame> or <iframe> elements do not have a title
- Color Contrast Is Satisfactory
web page を見やすく、理解しやすくするためには思っていた以上の修正を入れたほうがよさそうだ。特に文字色も見られているとは思わなかった（ここらへんは、色弱な方も意識されているのだろう）
Links do not have a discernible name
alt attribute が入っていないのが原因のため、入れるようにする。
Best Practice の改善
- Uses document.write()
- Includes front-end JavaScript libraries with known security vulnerabilities
document.write 時に外部の js を読み込む場合は通信が遅い環境だと web page のレンダリングにとても時間がかかるなど、作っている最中にあまり意識しなかった箇所が指摘された。
2.については、「そこまで見てくれるのか… 優秀すぎだろ」 と思いました。Open Source Security Platform : Snyk から js の脆弱性情報をとってきているようだ。
ちなみに、bootstrap 4.1.1 については、脆弱性対応のために 4.2.1 にアップデートした。