This document discusses web performance optimization techniques. It is a summary of rules for web performance by Mark Tomlinson, who has 27 years of experience in performance. Some of the key techniques discussed include reducing HTTP requests, optimizing file compression, minimizing code, improving web font and image performance, prefetching resources, avoiding unnecessary redirects, and optimizing infrastructure and databases. The document emphasizes measuring performance through load testing and monitoring to identify bottlenecks.

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