Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Need for speed: Tips to Optimize your Website

378 views

Published on

No one likes to wait. Whether it’s waiting for a bus, the elevator or a site to load, it can be a frustrating experience. Slow sites lead to lost conversions and annoyed customers. Luckily, there are some straightforward practices that you can put into place to make sure your site performs its very best, regardless of screen-size or device. This talk is for everyone who has ever been frustrated by their slow-loading website, but never known how to kick it into high gear.

Published in: Technology
  • Be the first to comment

Need for speed: Tips to Optimize your Website

  1. 1. NEEDFORSPEED Tips to Optimize your Website
  2. 2. WHY ALLTHEFUSS?
  3. 3. 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
  4. 4. 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
  5. 5. THECULPRITS
  6. 6. Huge, full-width images.
  7. 7. Webfonts. A
  8. 8. Multiple server requests/large files.
  9. 9. Third-party JavaScript.
  10. 10. Uncached files.
  11. 11. Render-blocking JavaScript/CSS.
  12. 12. Crummy webhost.
  13. 13. Page reloads.
  14. 14. DEBUGTILDAWN
  15. 15. 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…
  16. 16. Lazy loading and dynamic content.
  17. 17. Minify CSS and HTML and JS.
  18. 18. AJAX adds some fancy.
  19. 19. EXAMPLESTHEFUTURE
  20. 20. • HTTP/2 (hopefully will soon be supported everywhere!) • Client hints • Service workers • AMP pages
  21. 21. TOOLSOFTHETRADE
  22. 22. 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
  23. 23. THISORTHAT
  24. 24. Speed index.
  25. 25. Time to first byte (TTFB).
  26. 26. Response time vs load time.
  27. 27. Perception of loading.
  28. 28. More resources. GROUPSANDRESOURCES
  29. 29. • Web performance meetups • User testing with family and friends • Lynda.com (free with Toronto Public Library card) • Velocity (http://conferences.oreilly.com/velocity)
  30. 30. HAPPY TRAILS @AlfalfaAnne

×