Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress Web Performance In 2020: Modern Techn...

Avatar for Michael Herchel Michael Herchel
February 29, 2020
Technology
0
150

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.
Avatar for Michael Herchel

Michael Herchel

February 29, 2020
Tweet

More Decks by Michael Herchel

See All by Michael Herchel
Building Olivero’s hyper-accessible (and beautiful) navigation from the ground up
Avatar for Michael Herchel mherchel
0
56
CSS Selectors 101-199
Avatar for Michael Herchel mherchel
0
220
Deep Dive into Web Performance
Avatar for Michael Herchel mherchel
0
760
WordPress & Drupal: Community and Contribution Differences and Lessons
Avatar for Michael Herchel mherchel
1
540
Making Syfy.com's scroll interactions not suck
Avatar for Michael Herchel mherchel
0
240
Lean, Mean, & Maintainable Theming - Drupal Theming Best Practices
Avatar for Michael Herchel mherchel
0
430
Forty-six Rules and Methods to Make Drupal Hella-Fast!
Avatar for Michael Herchel mherchel
0
140
Secrets to Awesomizing® Your Editor’s Back-end Drupal Experience
Avatar for Michael Herchel mherchel
0
280
Simple Ways to Awesomize® Drupal's Page Load Times
Avatar for Michael Herchel mherchel
0
93

Other Decks in Technology

See All in Technology
Software Delivery Observability CI・CD , DORA metrics も Datadog で可視化しよう / datadog-ci-cd-observability
Avatar for Annosuke Yokoo parupappa2929
0
200
TypeScriptで実践するクリーンアーキテクチャ ― WebからもCLIからも使えるアプリ設計 / CClean Architecture with Typescript Application
Avatar for panda_program panda_program
10
3.3k
テスト設計チュートリアル ちびこん編 ’25
Avatar for k.i. omn
0
140
Lakehouse в Лемана Тех. От архитектуры до оптимизации
Avatar for Elena Meremyanina emeremyanina1234
0
510
インフラからSREへ
Avatar for Issei Naruta mirakui
20
7.9k
え!! 日本国内でGo言語のバイリンガル勉強会を!?
Avatar for logica / Takuto Nagami logica0419
2
110
ITベンダーから見る内製化支援の本質/in-house-dev
Avatar for Serverless Operations slsops
1
190
名単体テスト 禁断の傀儡（モック）
Avatar for iwamot iwamot
PRO
1
340
ゆるくはじめるSLI・SLO
Avatar for Mirai Yato (yato) yatoum
1
150
撤退危機からのピボット : 4年目エンジニアがリードする TypeScript で挑む事業復活 / crisis-to-pivot-4th-year-engineer-ts-relaunch
Avatar for CARTA Engineering carta_engineering
2
160
トップエンジニアが語るDX最前線 / 20250517 Kazutoshi Ono & Ken Yamazaki
Avatar for SHIFT EVOLVE shift_evolve
0
160
さくらのクラウド 開発の挑戦とその舞台裏
Avatar for kazeburo kazeburo
0
300

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Building Adaptive Systems
Avatar for Chris Keathley keathley
41
2.5k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
24
2.8k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
177
9.7k
Navigating Team Friction
Avatar for Lara Hogan lara
185
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.7k

Transcript

  1. Mike Herchel Senior Front-end Dev at Lullabot // @mikeherchel Wordpress

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

  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

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

    Millie Herchel Dexter Herchel
  4. None
  5. None
  6. None

  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

  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.

  9. – https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/ Mobile sites load in 5 seconds earn up

    to 2x more mobile ad revenue.

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

    websites

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

    2020

  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

  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

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

    Miami 2020

  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

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

    WordCamp Miami 2020

  17. TIME TO INTERACTIVE ‣Load is finished, and main thread work

    is done ‣Consistently interactive Mike Herchel // @mikeherchel // WordCamp Miami 2020

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

    2020

  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

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

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

  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

  23. HOW BROWSERS WORK: PRIORITIZING CONTENT 1. Highest ‣ Initial document

    ‣ CSS 2. High ‣ Webfonts ‣ Script tags in the <head> ‣ XHR 3. Medium ‣ Script tags outside of the <head> 4. Low Mike Herchel // @mikeherchel // WordCamp Miami 2020

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

  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

  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

  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

  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

  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

  30. PAINT ‣The process of filling in pixels. ‣Text, colors, images,

    borders, etc ‣Expensive. Mike Herchel // @mikeherchel // WordCamp Miami 2020

  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

  32. MEASURING PERFORMANCE

  33. MEASURING PERF: DEVTOOLS AUDITS TAB 1. Demo Mike Herchel //

    @mikeherchel // WordCamp Miami 2020

  34. OPTIMIZATIONS

  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

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

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

  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

  39. RESOURCE HINTS ‣Link tags inserted in <HEAD> that tell the

    browser to reach out and download or connect to resources
 ‣ <link rel='preload' ...
 ‣ <link rel='prefetch' ...
 Mike Herchel // @mikeherchel // WordCamp Miami 2020

  40. PRELOAD IN ACTION ‣Preload Resource hints FTW

  41. PRECONNECT IN ACTION ‣Preconnect Resource hints FTW

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

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

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

    NOW…

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

    TODAY!

  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/

  47. PREFETCH ‣Prefetch links within the viewport, while the CPU is

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

  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/

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

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

    VIEWPORT

  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

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

    RENDERING

  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.

  54. PERFORMANT ANIMATIONS ‣Animations cause repaints ‣ background-position ‣ top, left,

    right, bottom ‣ margin, padding ‣ height, width ‣Animations skip repaints - straight to compositing ‣ transform

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

  56. OPTIMIZE YOUR JAVASCRIPT ‣Less JavaScript the better!

  57. JAVASCRIPT MAIN THREAD EXECUTION

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

    JAVASCRIPT PROCESSING TIMES

  59. OPTIMIZE YOUR JAVASCRIPT ‣Less JavaScript the better! ‣Identify unused code

    through Chrome DevTools coverage tool. ‣Identify third party scripts. ‣Profile!

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

  61. PROFILING JAVASCRIPT 1. Demo

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

  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/

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

    win!
  65. None

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

    @mikeherchel