フロントエンドエンジニアをやっています。
頑張るから読んでほしい。

webpagetest.orgでGoogle MAPを計測

計測結果

最適化グレード

image.png (318.8 kB)

すべてA

  • キープアライブの有効
  • 圧縮転送(gzip
  • 画像圧縮
  • 静的コンテンツをキャッシュ
    • cdn使っている

  • LoadTime速い
  • Document CompleteのBytes Inが少ない
    • ページが読み込まれまでにブラウザがダウンロードしなければならなかったデータ量
  • Document CompleteとFully Loadedに差が大きい
    • 遅延ロードしている
    • ちなみにYahoo!地図、マピオンは差がほとんどない

Waterfall View

image.png (263.0 kB)

  1. 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を生成しているっぽい(中身にdivcssの記述があるので)
  2. 3-23番目のリクエストで最初に表示される地図画像が読み込まれている。地図画像は正方形に分割されていて、最適化されている。合わせてjsfontも読み込まれている。おそらくjsは地図上に表示される座標データ
  3. 24-30番目のリクエストでmanifest.jsonGoogleのアイコン画像が読み込まれている。
  4. 31-48番目以降のリクエストで地図に必要なアイコン画像、記号画像などを読み込んでいる。
  5. 48番目以降のリクエストで初期に読み込まれた周りの地図画像や航空写真などを読み込んでいる

Connection View

image.png (195.3 kB)

Request Details

WebPageTest Test Details   Dulles   www google com maps   04 20 19 11 54 41.png (1.9 MB)

  • Before On Loadが比較的少なくAfter On Loadが多い
    • 初期表示に不必要な地図画像(周りの地図画像)は遅延読み込みしている

Dev tool Network

image.png (1.7 MB)

image.png (1.7 MB)

image.png (2.1 MB)

  • Worker使っている
  • gzip
  • cache-control: private, max-age=0
    • ブラウザにキャッシュさせるけど、変更ないか都度確認するようにしてる
  • quic使用している。
  • 最初の読み込みで必要最低限の画像を読み込んでいる
  • スクロールすると画像が読み込まれている

コード

image.png (2.0 MB)

image.png (1.3 MB)

  • async
    • 非同期で実行しているjsが2箇所
  • 直接jscssを記述している
    • 最初に読み込む必要最低限なものだけ最初に読み込む

まとめ

初期表示を速くするために、必要最低限のリソースを最初に読み込み、スクロールして見える地図部分などは遅延読み込みをするように工夫し、最適化をしている。