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. Why Slow Sites are Expensive
    By Koen Van den Wijngaert

    View full-size slide

  2. PageSpeed Insights
    opti.to/psi

    View full-size slide

  3. PageSpeed Insights

    View full-size slide

  4. More tools
    WebPageTest.org
    Lighthouse

    View full-size slide

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

    View full-size slide

  6. What’s the cost?

    View full-size slide

  7. Ad Quality Score
    * Unofficial numbers
    - Usability
    - Loading speed
    Higher Quality Scores
    typically lead to lower
    costs and better ad
    positions.


    View full-size slide

  8. WPENGINE.COM

    View full-size slide

  9. In short, speed
    equals revenue


    View full-size slide

  10. What’s fast?
    Rule of Three Ones
    ● 0.1 second
    ● 1.0 second
    ● 10 seconds

    View full-size slide

  11. Indirect costs
    Fewer conversions
    More support issues
    Missed opportunities (brand damage)
    Loss of loyal customers
    Lower search result rankings
    As of July ‘18

    View full-size slide

  12. Websites 101

    View full-size slide

  13. 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

    View full-size slide

  14. Let’s speed things up

    View full-size slide

  15. 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

    View full-size slide

  16. Network & DNS DNS
    Not Optimized Optimized

    View full-size slide

  17. 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

    View full-size slide

  18. But wait… there’s more!

    View full-size slide

  19. Frontend: The Browser
    The unsung hero

    View full-size slide

  20. 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!

    View full-size slide

  21. It’s all about perception

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. WPBelgium.be
    Time to First Byte
    First Paint and First
    Contentful Paint
    First Meaningful Paint
    Time to Interactive
    2,6 s

    View full-size slide

  26. Optimizing your frontend…
    Wake up, this is the important part!
    It’s easy!
    Limit the critical rendering path

    View full-size slide

  27. Critical Rendering Path
    The intermediate steps between receiving
    the HTML, CSS, and JavaScript bytes and
    the required processing to turn them into
    rendered pixels.

    View full-size slide

  28. 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

    View full-size slide

  29. Minimize the Critical Request Depth

    View full-size slide

  30. 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

    View full-size slide

  31. Don’t be like this…
    the user

    View full-size slide

  32. Optimizing your
    WordPress site

    View full-size slide

  33. Useful Plugins

    View full-size slide

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

    View full-size slide