improving web performance · •chrome devtools network throttling audits (google lighthouse...
TRANSCRIPT
![Page 1: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/1.jpg)
Robert Boedigheimer
@boedie
Improving Web Performance
![Page 2: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/2.jpg)
• Microsoft MVP – Developer Technologies
• Progress Developer Expert – Fiddler
• ASPInsiders
• Pluralsight Author
• 3rd Degree Black Belt, Tae Kwon Do
• @boedie
• www.boedie.dev
About Me
![Page 3: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/3.jpg)
• For most web sites, 80-90% of time is spent waiting for page resources▫ Not optimizing (server-side) code!
• Make fewer HTTP requests
• Send as little as possible
• Send it as infrequently as possible
Performance Rules
![Page 4: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/4.jpg)
• Tracing tool built specifically for HTTP(S)
• Eric Lawrence (@ericlaw)
• Acquired by Telerik in 2012
• https://www.telerik.com/fiddler (free)
• Fiddler Everywhere (cross platform, built on .NET Core)
Fiddler
![Page 5: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/5.jpg)
• First Byte (IT)
• SpeedIndex
• Time to Interactive
• Onload
• Fully Loaded
Metrics
![Page 6: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/6.jpg)
• WebPageTest.org
• Fiddler
• Synthetic Monitoring▫ “Lab” data
• Real User Monitoring (RUM)▫ “Field” data
▫ W3C Navigation Timing (DNS, connection, TTFB)
▫ W3C Resource Timing
Measure
![Page 7: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/7.jpg)
• Does web site performance impact your goals?▫ Amazon and Walmart.com
100ms delay lost 1% of sales!
▫ IT and customer goals
• How does it compare with competitors?▫ Speedcurve Benchmarks (tinyurl.com/wgvajvj)▫ Google CrUX (tinyurl.com/y9yrzeb3)
• Avoid unnecessary optimizations
Is it Good Enough?
![Page 8: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/8.jpg)
• Server evaluates the “Accept-Encoding” header for request, compresses resulting response
• Gzip, Deflate, Brotli
• [Used 53% less bandwidth, ~25% faster synthetic measurements]
• IIS Compression▫ Enable dynamic compression
HTTP Compression
![Page 9: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/9.jpg)
• Leverage browser’s cache
• My goal is returning visitor makes 1 request!
• Set expiration times for content folders
• Avoids “If-Modified-Since” and 304 response
• Change URL if need to override browser caching
Content Expirations
![Page 10: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/10.jpg)
• “Bandwidth Doesn’t Matter Much” - tinyurl.com/btqpclr▫ Latency has much larger impact for most web sites
• Global network of servers▫ Geographically closer to users
▫ Offloads work from your servers
• Typically used for static files (images, CSS, JavaScript, fonts, etc.)
Content Delivery Network (CDN)
![Page 11: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/11.jpg)
• Minimize CSS, JavaScript, possibly HTML▫ Remove whitespace, comments, excessive semicolons, etc.
• Bundle/combine to reduce number of HTTP requests (HTTP 1.1)
• [Home page was 46% faster]
Bundling and Minification
![Page 12: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/12.jpg)
• Avoid if possible! (CSS 3)
• Use proper type▫ SVG
▫ JPEG (photos)
• Responsive Images (srcset, <picture>)
• Client Hints
Images
![Page 13: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/13.jpg)
• Compression▫ Tradeoff size vs. quality, often cut size by 50+% without any impact
• Progressive
• Image optimizers▫ Jpegtran – removes unnecessary metadata, lossless
JPEG Images
![Page 14: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/14.jpg)
• JavaScript plugin and modified HTML to request images as scroll down▫ data-src – set to image URL (or data-srcset)
▫ src – set to 1x1 clear pixel image
• Pages with lots of images only load those “above the fold”
• Github.com/aFarkas/lazysizes
• Native support
Image Lazy Loading
![Page 15: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/15.jpg)
• Use data-deferred-src instead of src▫ When onload is complete a custom script will copy URL to src
• <img>▫ Uses bandwidth but immediately available when scroll
• <iframe> fine, some <script> won’t work
• Great for many 3rd party beacons and resources
Deferred Loading
![Page 16: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/16.jpg)
• JavaScript (avoid blocking parsing)▫ async – execute when downloaded▫ defer – execute in source order
• Resource Hints▫ dns-prefetch▫ preconnect▫ preload
▫ prefetch▫ prerender
Loading Resources
![Page 17: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/17.jpg)
• Critical Rendering Path!
• URLs are case sensitive (impacts caching)!
• Strict Transport Security (HSTS)
• Font subsetting
Miscellaneous
![Page 18: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/18.jpg)
• Binary framing layer
• Streams▫ Prioritization and dependencies
• Fully multiplexed on single TCP connection
• Header Compression (HPACK)
• Server Push
HTTP/2
![Page 19: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/19.jpg)
• Bundling JavaScript and CSS files
• CSS Sprites
• Domain Sharding▫ Using multiple host names so browser uses more connections
• Inlining▫ Data URIs, CSS (critical ok), JavaScript
Techniques to (probably) Avoid (HTTP/2)
![Page 20: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/20.jpg)
• Review a web page for how well it implements various performance techniques like compression, expirations, etc▫ Google PageSpeed (“Lab” and “Field”)
tinyurl.com/m65jex6
• Chrome DevTools▫ Network throttling▫ Audits (Google Lighthouse – “Lab”)
• Fiddler (AutoResponder)
Tools
![Page 21: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/21.jpg)
• Pluralsight Courses▫ Web Performance
▫ A Web Developer's Guide to Images
▫ Debugging Your Website with Fiddler and Chrome DevTools
▫ Fiddler
Resources
![Page 22: Improving Web Performance · •Chrome DevTools Network throttling Audits (Google Lighthouse –“Lab”) •Fiddler (AutoResponder) Tools •Pluralsight Courses Web Performance](https://reader033.vdocuments.us/reader033/viewer/2022042420/5f37aade46fdc04d74312659/html5/thumbnails/22.jpg)
• @boedie
• www.boedie.dev
• Slides and code - https://tinyurl.com/y9y2e6zb
Questions