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!

Koen Van den Wijngaert

June 13, 2019
Tweet

More Decks by Koen Van den Wijngaert

Other Decks in Programming

Transcript

  1. Ad Quality Score * Unofficial numbers - Usability - Loading

    speed Higher Quality Scores typically lead to lower costs and better ad positions. “ “
  2. Indirect costs Fewer conversions More support issues Missed opportunities (brand

    damage) Loss of loyal customers Lower search result rankings As of July ‘18
  3. 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
  4. 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
  5. 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
  6. 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!
  7. WPBelgium.be Time to First Byte First Paint and First Contentful

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

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

    CSS, and JavaScript bytes and the required processing to turn them into rendered pixels.
  10. 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
  11. 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