!""""#NEEDFORSPEEDTips 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