NEEDFORSPEED
Tips to Optimize your Website
WHY ALLTHEFUSS?
Business, business & more business.
• Selling all the things - conversion
• Instantaneous response time (to add items to the cart)
• Bounce rates (and all that analytical jazz)
• Google likes fast sites
Saddle up, partner.
• Keep some simple rules in mind.
• Do no harm to data plans
• Embrace the new and progressive
• Listen to your townsfolk (and your stats)
• Always keep optimizing
THECULPRITS
Huge, full-width images.
Webfonts.
A
Multiple server requests/large files.
Third-party JavaScript.
Uncached files.
Render-blocking JavaScript/CSS.
Crummy webhost.
Page reloads.
DEBUGTILDAWN
Responsive images.
• How to leverage responsive images when you aren’t sure
what size the image is going to be on the page
• Minimizing the pain of srcset by using variables (Shopify
solution)
• Here comes an example…
Lazy loading and dynamic content.
Minify CSS and HTML and JS.
AJAX adds some fancy.
EXAMPLESTHEFUTURE
• HTTP/2 (hopefully will soon be supported everywhere!)
• Client hints
• Service workers
• AMP pages
TOOLSOFTHETRADE
Speed Testing
• Web page test [http://webpagetest.org] - really great resource with up to
the moment information
• Google page speed [https://developers.google.com/speed/pagespeed/] -
will make you very happy or horribly sad
• Varvy [https://varvy.com/pagespeed/] - detailed and aesthetically pleasing
• GTMetrix [https://gtmetrix.com/] - gives your site a grade, which is
extremely satisfying
• Chrome Dev tools - great for local testing/ throttling
THISORTHAT
Speed index.
Time to first byte (TTFB).
Response time vs load time.
Perception of loading.
More resources.
GROUPSANDRESOURCES
• Web performance meetups
• User testing with family and friends
• Lynda.com (free with Toronto Public Library card)
• Velocity (http://conferences.oreilly.com/velocity)
HAPPY TRAILS
@AlfalfaAnne

Need for speed: Tips to Optimize your Website