Mike Herchel
Senior Front-end Dev at Lullabot // @mikeherchel
Wordpress Web Performance In 2020:
Modern Techniques For Sub-Second Page Loads
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Mike Herchel
Millie Herchel
Dexter
Herchel
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
– https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
53% of mobile site visits are
abandoned if pages take
longer than 3 seconds to
load.
Slide 9
Slide 9 text
– https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
Mobile sites load in 5
seconds earn up to 2x
more mobile ad revenue.
Slide 10
Slide 10 text
– Me (Right Now)
I get f**king annoyed by
slow websites
Slide 11
Slide 11 text
WHAT IS FAST?
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 12
Slide 12 text
FRONTEND
PERFORMANCE
METRICS
‣Time to First Byte
‣Time to First Meaningful Paint
‣Time to First Interactive
‣Speed Index
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
TIME TO FIRST BYTE
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
TIME TO FIRST
MEANINGFUL PAINT
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 17
Slide 17 text
TIME TO
INTERACTIVE
‣Load is finished, and main thread work is done
‣Consistently interactive
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 18
Slide 18 text
TIME TO INTERACTIVE
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
SPEED INDEX
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
Slide 21
Slide 21 text
SPEED INDEX
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
PAINT
‣The process of filling in pixels.
‣Text, colors, images, borders, etc
‣Expensive.
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 31
Slide 31 text
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
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
Slide 36
Slide 36 text
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 37
Slide 37 text
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
RESOURCE HINTS
‣Link tags inserted in that tell the browser to reach out and
download or connect to resources
‣
Slide 40
Slide 40 text
PRELOAD IN ACTION
‣Preload Resource hints FTW
Slide 41
Slide 41 text
PRECONNECT IN ACTION
‣Preconnect Resource hints FTW
Slide 42
Slide 42 text
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 43
Slide 43 text
Mike Herchel // @mikeherchel // WordCamp Miami 2020
Slide 44
Slide 44 text
Mike Herchel // @mikeherchel // WordCamp Miami 2020
ALL TOGETHER NOW…
Slide 45
Slide 45 text
Mike Herchel // @mikeherchel // WordCamp Miami 2020
START USING TODAY!
Slide 46
Slide 46 text
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/
Slide 47
Slide 47 text
PREFETCH
‣Prefetch links within the viewport, while the CPU is idle
Mike Herchel // @mikeherchel // WordCamp Miami 2020
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
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.
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).
Slide 56
Slide 56 text
OPTIMIZE YOUR
JAVASCRIPT
‣Less JavaScript the better!
Slide 57
Slide 57 text
JAVASCRIPT
MAIN THREAD
EXECUTION
Slide 58
Slide 58 text
Mike Herchel // @mikeherchel // WordCamp Miami 2020
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
2018 JAVASCRIPT
PROCESSING TIMES
Slide 59
Slide 59 text
OPTIMIZE YOUR
JAVASCRIPT
‣Less JavaScript the better!
‣Identify unused code through Chrome DevTools coverage tool.
‣Identify third party scripts.
‣Profile!
Slide 60
Slide 60 text
‣https://wordpress.org/plugins/wp-asset-clean-up/
Slide 61
Slide 61 text
PROFILING
JAVASCRIPT
1. Demo
Slide 62
Slide 62 text
PROFILE 3RD
PARTY SCRIPTS
1. Chrome Developer Tools Demo
Slide 63
Slide 63 text
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/
Slide 64
Slide 64 text
MAKE THE WEB A
BETTER PLACE!
Don’t let proprietary solutions win!
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
“ THANK YOU!
Mike Herchel
Senior Frontend Developer at Lullabot
@mikeherchel