With Anne Thomas
People don’t often think about site optimization, but it is crucial to keeping visitors on your site.
Why All The Fuss?
-
People want information NOW/can’t wait (case in point: loader bars turn people off)
-
There are business reasons for this!
-
It’s good for business - conversion/sell all the things!
-
Instantaneous response time (to add items to cart)
-
Bounce rates (high bounce rates are bad!)
-
Google likes fast sites
- MYTH: People are more forgiving of desktop sites than those on mobile. In reality, desktop users are just as impatient as mobile users.
-
Ground Rules
-
Do no harm to data plans
-
Embrace the new and progressive (e.g. check your site with PHP tools)
-
Listen to your townsfolk and your stats
-
Always be optimizing
Optimization Culprits
-
Huge, full-width images
-
Thing is, conversion is 98% higher with images
-
Tradeoffs needed!
-
PRO TIP: Set a performance budget with your client, e.g. Set expectations as to what can and can’t go on the site in the name of performance
-
Use SVGs and responsive images whenever possible
-
-
Webfonts
-
Multiple server requests/large files (combine CSS files, don’t separate them)
-
Third-party JS
-
Uncached files (use CDNs to address this)
-
Render-blocking JS/CSS
-
Crummy webhosts
- <200ms = ideal server response time
-
Page reloads
- Use AJAX whenever you can to simply target the asset that needs to reload/update (thereby doing away with reloading the ENTIRE site)
Debugging
-
Responsive images (srcset and sizes attribute)
- WP has implemented responsive images
-
Lazy loading and dynamic content
-
Minify CSS, HTML, and JS
-
AJAX
The Future
-
HTTP/2
-
Client hints
-
Service workers
-
AMP pages
Tools of the Trade
-
Speed Testing (webpagetest, google page speed, vary, GTMetrix, Chrome dev tools)
-
Vocabulary:
-
Speed index
-
Time to first byte
-
Response time vs load time
-
Perception of loading
-
-
Groups and resources
-
Webperf meetups
-
User testing
-
Lynda.com (free to Toronto Public Library users)
-
Velocity Conference
-