$30 off During Our Annual Pro Sale. View Details »

WordPress Web Performance In 2020: Modern Techniques For Sub-Second Page Loads

WordPress Web Performance In 2020: Modern Techniques For Sub-Second Page Loads

In this session, we’re going to take an uncomplicated dive into modern web performance to learn how to identify and fix performance bottlenecks in your WordPress website through topics such as:

– Web performance metrics you should be measuring and how. Which are the most important and to optimize your site for each?
– How do browsers render web pages, and how you can use this knowledge to optimize the loading experience.
– What is the JavaScript main thread? How can can you optimize for this?
– WordPress performance plugins: What to look for when evaluating.
– How to identify and evaluate performant WordPress themes.

Michael Herchel

February 29, 2020
Tweet

More Decks by Michael Herchel

Other Decks in Technology

Transcript

  1. Mike Herchel
    Senior Front-end Dev at Lullabot // @mikeherchel
    Wordpress Web Performance In 2020:
    Modern Techniques For Sub-Second Page Loads

    View Slide

  2. WHAT TO EXPECT
    ‣ Why make webpages fast?
    ‣ What is fast?
    ‣ Quick rundown on how browsers work
    ‣ How to measure performance
    ‣ Tips and tricks to optimize each browser rendering stage.
    ‣ How this can be tied in with WordPress

    View Slide

  3. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    Mike Herchel
    Millie Herchel
    Dexter
    Herchel

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. https://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
    80-90% of the end-user
    response time is spent on
    the frontend. Start there.
    — Steve Souders

    View Slide

  8. – https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
    53% of mobile site visits are
    abandoned if pages take
    longer than 3 seconds to
    load.

    View Slide

  9. – https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
    Mobile sites load in 5
    seconds earn up to 2x
    more mobile ad revenue.

    View Slide

  10. – Me (Right Now)
    I get f**king annoyed by
    slow websites

    View Slide

  11. WHAT IS FAST?
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  12. FRONTEND
    PERFORMANCE
    METRICS
    ‣Time to First Byte
    ‣Time to First Meaningful Paint
    ‣Time to First Interactive
    ‣Speed Index
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  13. TIME TO FIRST BYTE
    ‣Time from when you begin navigation until the first byte of the
    html file hits your browser.
    ‣Delays here can indicate backend performance issues.
    ‣Effective caching really helps with thisCDNs can dramatically help.
    They position content closer to the user.
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  14. TIME TO FIRST BYTE
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  15. TIME TO FIRST
    MEANINGFUL PAINT
    ‣Primary content is visible.
    ‣Marks the paint event that follows the most significant change to
    layout.
    ‣Can be ambiguous.
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  16. TIME TO FIRST
    MEANINGFUL PAINT
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  17. TIME TO
    INTERACTIVE
    ‣Load is finished, and main thread work is done
    ‣Consistently interactive
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  18. TIME TO INTERACTIVE
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  19. SPEED INDEX
    ‣Calculated value
    ‣Average time at which visible parts of the page are displayed
    ‣How quickly does the page approach visually complete?
    ‣Essentially the time it takes for average pixel to paint (milliseconds)
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

    View Slide

  20. SPEED INDEX
    https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

    View Slide

  21. SPEED INDEX
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  22. HOW BROWSERS WORK:
    NETWORK DOWNLOAD
    1. Download index file
    2. Parse index file as it is downloading
    3. Prioritize critical content
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  23. HOW BROWSERS WORK:
    PRIORITIZING CONTENT
    1. Highest
    ‣ Initial document
    ‣ CSS
    2. High
    ‣ Webfonts
    ‣ Script tags in the
    ‣ XHR
    3. Medium
    ‣ Script tags outside of the
    4. Low
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  24. Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  25. HOW BROWSERS WORK:
    PARSE / EXECUTE CSS & JS
    1. Browser parses and executes JS
    2. Will completely parse and execute JS in the head that is not
    async’d or deferred before rendering layout.
    3. Will execute synchronously or afterwards if JS is in the footer
    (or async’d or deferred).
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  26. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
    HOW BROWSERS WORK:
    CREATING THE CSSOM

    View Slide

  27. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
    HOW BROWSERS WORK:
    CREATING THE DOM

    View Slide

  28. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
    HOW BROWSERS WORK:
    CREATING THE RENDER
    TREE

    View Slide

  29. LAYOUT
    (AKA REFLOW)
    ‣Browser calculates how much space it takes to put elements on
    screen.
    ‣Calculates where to place the elements on the screen in relation to
    other elements and the viewport.
    ‣Expensive.
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  30. PAINT
    ‣The process of filling in pixels.
    ‣Text, colors, images, borders, etc
    ‣Expensive.
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  31. COMPOSITING
    ‣Multiple layers within browser get placed on the screen.
    ‣Think of these as Photoshop layers - they can easily be moved
    around
    ‣Cheap!
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  32. MEASURING
    PERFORMANCE

    View Slide

  33. MEASURING PERF:
    DEVTOOLS AUDITS
    TAB
    1. Demo
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  34. OPTIMIZATIONS

    View Slide

  35. OPTIMIZATIONS:
    NETWORK
    DOWNLOAD
    ‣Serve pages faster
    ‣Serve critical resources first
    ‣Use less bandwidth
    ‣ Limit the use of large images (use responsive images)
    ‣Limit network requests (if not using HTTP/2)
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  36. Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  37. Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  38. CONTENT DELIVERY
    NETWORKS (CDN’S)
    ‣CDNs cache your content at a datacenter that’s close to you
    ‣They serve it to you super fast!
    ‣They use modern (faster) protocols to serve this to you!
    ‣Not too expensive and sometimes free!
    ‣Many popular WP hosts have integrations where you just turn it
    on!
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  39. RESOURCE HINTS
    ‣Link tags inserted in that tell the browser to reach out and
    download or connect to resources

    ‣ ‣ Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  40. PRELOAD IN ACTION
    ‣Preload Resource hints FTW

    View Slide

  41. PRECONNECT IN ACTION
    ‣Preconnect Resource hints FTW

    View Slide

  42. Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  43. Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  44. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    ALL TOGETHER NOW…

    View Slide

  45. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    START USING TODAY!

    View Slide

  46. PRPL PATTERN
    ‣Push critical resources for the initial URL route.
    ‣Render initial route.
    ‣Pre-cache remaining routes.
    ‣Lazy-load and create remaining routes on demand.
    https://developers.google.com/web/fundamentals/performance/prpl-pattern/

    View Slide

  47. PREFETCH
    ‣Prefetch links within the viewport, while the CPU is idle
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  48. 1. https://wordpress.org/plugins/flying-pages/
    2. https://wordpress.org/plugins/quicklink/
    3. https://wpspeedmatters.com/quicklink-vs-instant-page-vs-flying-
    pages/

    View Slide

  49. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    PREFETCHING
    LINKS

    View Slide

  50. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    LINKS ENTERING VIEWPORT

    View Slide

  51. IMAGE
    OPTIMIZATIONS
    ‣Avoid use of PNG (unless it has transparency)
    ‣Use modern formats (WEBP)
    ‣Use responsive images (supported by WP core)
    ‣Potential plugin:
    ‣https://wordpress.org/plugins/shortpixel-image-optimiser/
    Mike Herchel // @mikeherchel // WordCamp Miami 2020

    View Slide

  52. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model
    OPTIMIZATIONS:
    RENDERING

    View Slide

  53. WHAT IS THE
    CRITICAL PATH?
    ‣Anything and everything that prevents the webpage from
    rendering
    ‣ HTML
    ‣ CSS in the head
    ‣ JavaScript in the head
    ‣ Fonts!
    ‣You want to minimize everything that is in the critical path.

    View Slide

  54. PERFORMANT
    ANIMATIONS
    ‣Animations cause repaints
    ‣ background-position
    ‣ top, left, right, bottom
    ‣ margin, padding
    ‣ height, width
    ‣Animations skip repaints - straight to compositing
    ‣ transform

    View Slide

  55. CSS OPTIMIZATIONS
    ‣Avoid inlining images via Base64 encoding
    ‣Avoid large stylesheets
    ‣ Follow best practices and componentize your styles. Make them easy to
    delete
    ‣ Don’t worry about selector performance.
    ‣ Inline CSS for critical path
    ‣Split up monolithic stylesheets
    ‣ Chrome developer tools has a coverage tool that will help ID
    unused CSS (and JS).

    View Slide

  56. OPTIMIZE YOUR
    JAVASCRIPT
    ‣Less JavaScript the better!

    View Slide

  57. JAVASCRIPT
    MAIN THREAD
    EXECUTION

    View Slide

  58. Mike Herchel // @mikeherchel // WordCamp Miami 2020
    https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
    2018 JAVASCRIPT
    PROCESSING TIMES

    View Slide

  59. OPTIMIZE YOUR
    JAVASCRIPT
    ‣Less JavaScript the better!
    ‣Identify unused code through Chrome DevTools coverage tool.
    ‣Identify third party scripts.
    ‣Profile!

    View Slide

  60. ‣https://wordpress.org/plugins/wp-asset-clean-up/

    View Slide

  61. PROFILING
    JAVASCRIPT
    1. Demo

    View Slide

  62. PROFILE 3RD
    PARTY SCRIPTS
    1. Chrome Developer Tools Demo

    View Slide

  63. KEY TAKEAWAYS
    (START DOING THIS TODAY!)
    ‣Use a CDN!
    ‣Learn how to identify perf issues
    ‣Less JavaScript
    ‣Start using resource hints today!
    ‣ Preload your fonts!
    ‣ Async and then preload your scripts
    Mike Herchel // @mikeherchel // WordCamp Miami 2020
    PLUGINS
    1. https://wordpress.org/plugins/wp-asset-
    clean-up/
    2. https://wordpress.org/plugins/flying-pages/
    3. https://wordpress.org/plugins/quicklink/
    4. https://wordpress.org/plugins/shortpixel-
    image-optimiser/
    5. https://wordpress.org/plugins/nazy-load/

    View Slide

  64. MAKE THE WEB A
    BETTER PLACE!
    Don’t let proprietary solutions win!

    View Slide

  65. View Slide

  66. “ THANK YOU!
    Mike Herchel
    Senior Frontend Developer at Lullabot
    @mikeherchel

    View Slide