PAC 2019 virtual Mark Tomlinson
- 1. Web Performance: Behind the Scenes By Mark Tomlinson, The Performance Sherpa
- 2. Mark Tomlinson - The Performance Sherpa - 27 years doing performance things - Former Microsoft, HP & PayPal - PerfBytes Podcaster - STPRadio Podcaster - Speaker and Teacher on Performance - Online mentoring and coaching - Currently full-time at a startup in Philly
- 3. It all started with Steve Souders’ realization that we needed more focus on client-side performance. <- so he wrote this book ...and it was such a total hit with engineers around the world, he decided to write another one ->
- 4. RULES FORWEB PERFORMANCE 9. Adopt Website Monitoring 10. Prefetch and reconnect 11. SSL certificate/ HTTPS 12. Web Font Performance 13. Hotlink protection 14. 404 Errors 15. Infrastructure 16. Database Optimization 1. HTTP requests reduction 2. File compression 3. Web caching optimization 4. Code minification 5. Lossy compression 6. Replacement of vector graphics 7. Image Optimization 8. 301 Redirects Everyone agrees on a basic list of guidelines for web perf: Source: https://apiumhub.com/tech-blog-barcelona/web-performance-optimization-techniques/
- 5. RULES FORWEB PERFORMANCE Thou shall not block thy DOM.
- 6. Browser: use localbrowser caching? Local resources are fastest: • reduces round-trip http requests • retrieved from local storage • Web Storage API • IndexedDB API • New: Cache API Gotchas: • far-futures expires headers on locally cached content specific to functionality or branding • Limits on storage space and speed
- 7. Put your CSS at the top of the page: • avoid the “waiting on a blank page” • immediately style the DOM after it loads • CSSOM is created immediately after the DOM Put your javascript at the bottom of the page: • Scripts act upon the DOM/CSSOM • Only really useful after the page is active • Loading a script resource blocks HMTL and CSS Generally avoid “embedded” script or css Browser: css andjavascript placement
- 8. Browser: async javascript loading? Script tags have 2 steps: • Load the script (local or remote) • Execute the script With async (or defer): • the script download will not block • html and css will render (DOM/CSSOM) Be careful again: • if script is required for functionality • if javascript makes remote calls
- 9. Browser: prefetch andreconnect? Perception of Performance Improvement: • Pre-loading the “next” page/resource • Runs “in the background” • If user clicks on a link, it seems fast! Three main kinds of prefetch: • Link Prefetching • DNS Prefetching • Prerendering Watch out: bandwidth limitations anyone
- 10. Browser: replace vector graphics? Raster Images are mostly bad! • Made of pixels in a grid • Non-responsive • Larger images = more pixels Scalar Vector Graphics are GOOD! • Small source size • Responsive and scales up • Minimal CPU to dynamically/resize Gotcha: complex SVG can get big Alternative: use “srcset” or “picture” tags
- 11. Browser: webfont performance? Basics of web fonts: • Unicode fonts can contain thousands of glyphs. • There are four font formats: WOFF2, WOFF, EOT, and TTF. • Some font formats require the use of compression. Optimizing: • Each font is an additional resource (round-trip) • Some fonts can “block” the text rendering • Use local() and url() directives for font-family
- 12. System:makefewer requests? The starting point for all web optimization: • Each remote resource requires a round-trip to/from • always having some network latency • always has at least 1 DNS lookup • Generating the remote resource relies on back-end systems? Storage? Database? Messaging? Optimizing: • load more content in a single roundtrip • reduce the remote resources required to render • use HTTP/2+ which helps do this for you
- 13. System:usenetwork caching? Content Distribution Network (Akamai): If you must make a round-trip: • …maybe only go half-way? • content can live in a “network cache” • reduces load on the actual origin server • has “time-to-live” settings • programmatic API for CDN content CDN Gotchas: • pre-distributing large static content (video)
- 14. System:usefile compression? Make big things smaller: • any file-based resource can be compressed • reduce network transfer time • reduce remote storage • Gzip is most common, also see Brotili Compression Gotchas: • requires cpu to compress on the server • requires cpu to decompress on client • requires time to compress on the server • requires time to decompress on the client
- 15. System:minifyyourcode? “Why you sendin’ all that white space?” Pre-parsing code to be smaller size: • reduces transfer time & bandwidth • removing superfluous characters • most end-users will not read your code • most everyone will not ready comments Optimizing: • works on CSS, JS, and HTML and other code • have both minified & non-minified versions
- 16. System:avoid404 not-foundand301 redirects? Avoid 404 Not Found: • why make the round-trip? • fast, but still blocks a connection • fast, but still hits the server • consider caching custom 404’s Avoid 301 Redirects: • why make the round-trip? • paying twice for 1 resource • might be fast, but blocks a connection • fast, but still hits the server • consider a cache-header
- 17. LoadTesting – ISSTILL RELEVANT!! Consider the last 2 items: • #15 is Infrastructure • #16 is Database Optimization WELL OF COURSE!!!! • finding and removing bottlenecks • optimizing data source queries • tuning the system bottom-up • applying elastic scaling • monitor all the things!
- 18. Thank you!! Mark Tomlinson The Performance Sherpa @perfsherpa PerfBytes Podcasting www.perfbytes.com