Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why Slow Sites Are Expensive

Why Slow Sites Are Expensive

In this talk I give a number of reasons why websites can be slow, why it sometimes costs a lot of money and how to fix it.

I did this talk for the Antwerp WordPress Meetup group: https://www.meetup.com/nl-NL/Antwerp-WordPress-Meetup/.

Want to provide some (anonymous) feedback? Feel free to do so at https://forms.gle/S7t1d1SKEFCzeXFWA!

8592f54ed57e8948e890308f6302054a?s=128

Koen Van den Wijngaert

June 13, 2019
Tweet

Transcript

  1. Why Slow Sites are Expensive By Koen Van den Wijngaert

  2. PageSpeed Insights opti.to/psi

  3. PageSpeed Insights

  4. More tools WebPageTest.org Lighthouse

  5. I could be on Snapchat right now...

  6. What’s the cost?

  7. None
  8. Ad Quality Score * Unofficial numbers - Usability - Loading

    speed Higher Quality Scores typically lead to lower costs and better ad positions. “ “
  9. WPENGINE.COM

  10. In short, speed equals revenue “ “

  11. What’s fast? Rule of Three Ones • 0.1 second •

    1.0 second • 10 seconds
  12. Indirect costs Fewer conversions More support issues Missed opportunities (brand

    damage) Loss of loyal customers Lower search result rankings As of July ‘18
  13. Websites 101

  14. browser server DNS wpbelgium.be? 94.130.138.229! * slightly simplified Response Request

    Building the Page - Parse the page - Fetch extra assets - Build stuff * DOM * CSSOM => Render Tree Rendering the Page - Style + Layout - Paint + Compositing
  15. Let’s speed things up

  16. Server / Backend ✔ Enable HTTPS + HTTP2 For parallel

    and reusable requests ✔ Make use of HTTP caching ➢ Static assets ➢ Full pages ➢ API responses ✔ Cache slow operations ➢ Slow database queries ➢ Partial templates ✔ Perform slow tasks in background
  17. Network & DNS DNS Not Optimized Optimized

  18. Network & DNS Top DNS Resolvers ✔ Use a fast

    DNS Provider ✔ Consider using a CDN ✔ Reduce number of requests ✔ Reduce size of requests ➢ Minification / Uglification of text-based assets ➢ Use compression ➢ Optimize images ➢ Leverage HTTP caching ✔ Use Service Workers Data: Europe / May 2019 - DNSPERF.COM
  19. But wait… there’s more!

  20. Frontend: The Browser The unsung hero

  21. Frontend Performance Use the right metrics. Time to First Byte

    * Strictly speaking not frontend First Paint and First Contentful Paint Yay, no more staring at a blank page! First Meaningful Paint Most important parts / Hero Elements Time to Interactive Page is now useable!
  22. It’s all about perception

  23. WPBelgium.be Time to First Byte First Paint and First Contentful

    Paint 1,7 s
  24. WPBelgium.be Time to First Byte First Paint and First Contentful

    Paint 1,9 s
  25. WPBelgium.be Time to First Byte First Paint and First Contentful

    Paint 2,2 s
  26. WPBelgium.be Time to First Byte First Paint and First Contentful

    Paint First Meaningful Paint Time to Interactive 2,6 s
  27. Optimizing your frontend… Wake up, this is the important part!

    It’s easy! Limit the critical rendering path
  28. Critical Rendering Path The intermediate steps between receiving the HTML,

    CSS, and JavaScript bytes and the required processing to turn them into rendered pixels.
  29. Optimizing the CRP ✔ Avoid render blocking CSS ➢ Avoid

    @import ➢ Media types ➢ Media queries ➢ Inline critical styles and lazy load styles ✔ Avoid parser blocking JavaScript ➢ Defer parsing by using defer and async keywords ➢ Even applies to inline scripts! ➢ Avoid long running JavaScript ✔ Reduce the CRP Length
  30. Minimize the Critical Request Depth

  31. Extra tips ✔ At least cache the CRP ✔ rel=”preload”

    ✔ Server push ✔ Inline small assets ✔ Define your image sizes ✔ Use lazy loading ✔ Prefer the system font stack
  32. Don’t be like this… the user

  33. None
  34. None
  35. None
  36. Optimizing your WordPress site

  37. Useful Plugins

  38. @vdwijngaert Koen Van den Wijngaert SiteOptimo.com Have a nice flight!