最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、gzip圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあたりはこの記事ではまとめていません。
今回は「測定する」「ブラウザがどう表示しているか知る」「改善を検討する」の流れで調べていったのでその順にまとめる。
測定する
何はともあれ測定しないと何も始まらないので、まずは測定の仕方について調べた。
PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ )と、webpagetest( http://www.webpagetest.org/ ) はとりあえずURLを入れて計測すると何が悪いか教えてくれるのでひとまず使った。
さらに以下の記事で、ChromeのDeveloper Toolsでパフォーマンスを測定する方法について学んだ。この記事は一通りの操作方法や計測方法を教えてくれるので良い。
またChromeのDeveloper Toolsのことなら、Web+DBのVol. 89の特集も参考になった。
ブラウザがどう表示しているか知る
計測したので改善しようと思ったのだけど、よくよく考えるとブラウザがどういう仕組みで表示しているか全く知らなかったので、このままでは正しい改善方法を判断できないのではないかと思い、大雑把でも良いのでブラウザの仕組みについて学ぼうと考えた。
この記事ではWebページを表示する根幹部分のHTTPリクエストの処理についてざっくりまとめてある。ChromeのDeveloper Toolsのネットワークタブを見る時の基礎知識としてやリクエスト自体を減らさないといけない理由とかがなんとなく分かった。
https://www.philosophyguides.org/howto/how-to-load-critical-rendering-path-under-2-seconds/www.philosophyguides.org
ブラウザがページを表示するまでをザーッとまとめてくれているのがわかりやすい。レンダリングの開始までの概観が何となく分かる。対策については場合によりけりなので、1つの例として見るくらいで良いと思う。
http://dresscording.com/blog/performance/layout_painting.htmldresscording.com
レンダリング中のLayoutとかPaintingのフローについてまとめてくれている。
ブラウザがページを表示するまでに何が行われているか詳しく知りたければ、この資料が非常に良くまとまっているので、これを読んだら良さそう。
改善を検討する
何が悪いかがわかり、大体のブラウザがやっていることのイメージが分かれば、続いて改善を検討する。
まずPageSpeed Insightsで計測した時に警告と一緒に出てくるgoogleの解説を確認するとわかりやすい。詳細についてもリンク先に書いてくれている。
また「ハイパフォーマンスWebサイト」も参考になった。キャッシュの話とかHTTPリクエストを減らすとかgzip圧縮しようとかそういうふうな基本的な改善について理解することが出来る。
こちらはgoogle がまとめてくれているパフォーマンスの最適化についての資料。どれもちゃんとまとまっているが、個人的には「HTTPキャッシュの作成」という章が非常に参考になった。
これはちょっとした宣伝だけど、はてなブログ改善という一つの例として。
まとめ
今後また自分がフロントエンドパフォーマンス改善した時に参考になるように、参考になった資料をまとめておいた。フロントエンドのパフォーマンスが悪くなるとユーザーにクリティカルに遅いと思わせることになるので、今後何か問題が起こったら今回の資料をもう一度参考にして改善していきたい。
