Web performance === How fast a web site loads
There are many factors, which affect web site performance:
- Servers and infrastructure (How fast is your hardware)
- Backend queries and code
- Networks (manged DNS - Dyn, Akamai network)
- Front ends
- Page organization (blocking script tags, render blocking css)
- Page Weight (minifying javascript, optimizing images, gzipping)
- Geographic location of servers (CDNs)
- Where content is served from (DNS lookups, parallelization of http requests)
- Number of http requests (http request bottlenecks, latency on mobile, inlining content, combining content, bundling js)
- Image opitimization (Size of images, responsive images, webp, progressive jpeg, http2)
- Caching
https://developers.google.com/speed/docs/insights/rules
It's important: https://wpostats.com/
We'll analyze one of our sites: http://thejewishmuseum.org/
Resources we'll use: https://www.webpagetest.org/ http://blog.patrickmeenan.com/ https://developers.google.com/speed/
Examples: https://www.webpagetest.org/result/170802_DV_1A0E/ https://developers.google.com/speed/pagespeed/insights/?url=twitter.com&tab=mobile
https://www.webpagetest.org/result/170802_CP_WP6/ https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fthejewishmuseum.org%2F
Waterfall explanation
- X/Y axis === Resource / Time in seconds
- Start Render - When a user starts to see stuff on the page
- DOM Interactive - When a user can start clicking on stuff
- DOM Content Loaded - The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
- On Load / Document Completed - Everything is done loading
https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
Render blocking JS SPOF HTTP/2 Ideal size of website