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.

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