🔥 Took a look at the Air Pods pro website. Some interesting stats about a media-heavy site:
(apple.com/ca/airpods-pro/)
(apple.com/ca/airpods-pro/)
70 megs once fully loaded
1500+ jpgs, most loaded after page load
1500+ jpgs, most loaded after page load
* 348KB of JS
* ~25,000 lines
* Uses RequireJS
* Heavy use of data-attributes
* Lots of event delegation
* ~25,000 lines
* Uses RequireJS
* Heavy use of data-attributes
* Lots of event delegation
* ~18,000 lines of CSS
* 704 Media Queries
* 10 MQ widths
* 1 MQ for inverted-colors
* ~3500 lines dedicated to small typography adjustments for different languages.
* 704 Media Queries
* 10 MQ widths
* 1 MQ for inverted-colors
* ~3500 lines dedicated to small typography adjustments for different languages.
* Mobile site is 5.8mb fully loaded
* They seem to have lots of internal libs under the "ac_" namespace
* They seem to have lots of internal libs under the "ac_" namespace
The only libraries I saw reference to was WaveSurfer.js, to make this visualization:
It does seem they detect slow connections and don't serve up the 70meg / 1500jpg visualization.
Loading via "Fast 3g" in chrome dev tools shows 7.5 megs requested - 5 of that being images
Loading via "Fast 3g" in chrome dev tools shows 7.5 megs requested - 5 of that being images
That's all folks! Just reporting stats here - I bet you are angry about some of this, and I encourage you to take a walk 😃
