webpagetest.orgでGoogle MAPを計測
最適化グレード
すべてA
- LoadTime速い
- Document CompleteのBytes Inが少ない
- ページが読み込まれまでにブラウザがダウンロードしなければならなかったデータ量
- Document CompleteとFully Loadedに差が大きい
Waterfall View
- 1-2番目のリクエストでドキュメント本体と
/maps/_/js/k=maps.m.ja.D61iS2cbkq4.O/m=sc2,per,mo,lp,ti,ds,stx,bom,b/rt=j/d=1/rs=ACT90oGu35TczZS12uUzu-2-Uu94YaAN7w
というjsを読み込んでいる。 このjsでDOMを生成しているっぽい(中身にdiv
やcss
の記述があるので) - 3-23番目のリクエストで最初に表示される地図画像が読み込まれている。地図画像は正方形に分割されていて、最適化されている。合わせて
js
とfont
も読み込まれている。おそらくjs
は地図上に表示される座標データ - 24-30番目のリクエストで
manifest.json
とGoogleのアイコン画像が読み込まれている。 - 31-48番目以降のリクエストで地図に必要なアイコン画像、記号画像などを読み込んでいる。
- 48番目以降のリクエストで初期に読み込まれた周りの地図画像や航空写真などを読み込んでいる
Connection View
Request Details
- Before On Loadが比較的少なくAfter On Loadが多い
- 初期表示に不必要な地図画像(周りの地図画像)は遅延読み込みしている
Dev tool Network
- Worker使っている
- gzip
cache-control: private, max-age=0
- ブラウザにキャッシュさせるけど、変更ないか都度確認するようにしてる
- quic使用している。
- 最初の読み込みで必要最低限の画像を読み込んでいる
- スクロールすると画像が読み込まれている
コード
async
- 非同期で実行しているjsが2箇所
- 直接
js
とcss
を記述している- 最初に読み込む必要最低限なものだけ最初に読み込む
まとめ
初期表示を速くするために、必要最低限のリソースを最初に読み込み、スクロールして見える地図部分などは遅延読み込みをするように工夫し、最適化をしている。