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!

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?
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
36. Optimizing your WordPress site
37. Useful Plugins
38. @vdwijngaert Koen Van den Wijngaert SiteOptimo.com Have a nice flight!