Slide 1
Slide 1 text
The Importance of Performance
By Koen Van den Wijngaert
Slide 2
Slide 2 text
Performance is Awesome
Why I ❤ Performance, and why you should, too.
Slide 3
Slide 3 text
Why Performance Matters
Slide 4
Slide 4 text
Why Performance Matters
✓ Performance keeps users engaged.
✓ Bad performance is costly.
✓ Performance can save lives.
Slide 5
Slide 5 text
Performance can save lives
#663399, aka “rebeccapurple”
Slide 6
Slide 6 text
Optimizing Performance
Slide 7
Slide 7 text
Optimizing Performance
✓ Start with performance in mind
✓ Know what impacts performance
✓ Collect and monitor regularly
Some basic pointers.
Slide 8
Slide 8 text
Optimizing Performance
✓ Less is more. Send less resources.
✓ Send resources efficiently.
✓ Limit the size of what you send. It’s not a contest.
Golden rules.
Slide 9
Slide 9 text
Measuring Performance
Slide 10
Slide 10 text
Performance === UX
Slide 11
Slide 11 text
The Perception of Delays
Delay Perception
0-16ms Animations feel smooth and natural.
0-100ms Visual changes in response to input feel instant.
100-300ms Delays are becoming noticeable.
300-1000ms These delays are acceptable for things like long tasks and navigation.
>= 1000ms Disconnectedness, harder to keep focus.
>= 10000ms Frustration occurs and users are more likely to abandon tasks.
Slide 12
Slide 12 text
Introducing the RAIL Model
Slide 13
Slide 13 text
Introducing the RAIL Model
Slide 14
Slide 14 text
Response
The amount of time between a user’s interaction and
the visual response must be at most 100ms for it to
feel instant. Users love snappy navigation.
Keep this in mind and your users will love you.
Slide 15
Slide 15 text
Users spend the majority of
their time waiting for sites to
respond to their input, not
waiting for the sites to load.
https://developers.google.com/web/fundamentals/performance/rail
Slide 16
Slide 16 text
Animation
✓ Most screens refresh at least 60 times per second.
✓ 60 fps translates to 16ms per frame.
✓ Browser needs ~6ms for rendering.
How much time do you have?
Slide 17
Slide 17 text
Animation
✓ Visual animations (transitions, loading indicators, …)
✓ Scrolling
✓ Dragging (Pinching and/or dragging an element)
Not just fancy effects.
Slide 18
Slide 18 text
Animation
✓ Use translations instead of positions (left, right)
✓ UX friendly easing function: ease-out
✓ Use the right timings:
➢ General rule: 100ms in, 300ms out. *
Transition Tips & Tricks
* Except for modals, then it’s flipped.
ease-out
Slide 19
Slide 19 text
Use the Magic Window
Slide 20
Slide 20 text
Idle
✓ Honor the 100ms rule by executing longer tasks
while the browser is idle.
✓ Don’t block the main thread!
✓ Use blocks of 50ms
Time is costly, use it wisely.
Slide 21
Slide 21 text
Load
✓ First load in 5 seconds or less
✓ Subsequent loads in 2 seconds or less
✓ Focus on optimizing the Critical Rendering Path
Try and load meaningful content as soon as possible.
Slide 22
Slide 22 text
Optimizing Performance
Slide 23
Slide 23 text
Optimizing for Performance
✓ Loading Performance
✓ Rendering Performance
Two main parts
Slide 24
Slide 24 text
Rendering Performance
✓ How a browser renders your pages
✓ What impacts rendering performance?
✓ How can we optimize it?
A brief introduction
Slide 25
Slide 25 text
How it Works
Slide 26
Slide 26 text
Basic Rendering Steps
1. HTML Elements parsed into DOM Tree
2. CSSOM is generated from CSS selectors
3. DOM + CSSOM = Render Tree
Slide 27
Slide 27 text
DOM Tree + CSSOM = Render Tree
Slide 28
Slide 28 text
The Pixel Pipeline
Slide 29
Slide 29 text
JavaScript
Something triggers need for visual changes.
✓ Usually triggered by JavaScript
✓ Changes can also be triggered by CSS:
➢ Animations
➢ Transitions
Slide 30
Slide 30 text
Styling
✓ CSS rules are matched to elements
✓ DOM and CSSOM combine into the Render Tree
Element style calculations
Slide 31
Slide 31 text
Layout / Reflow
Figuring out what goes where
✓ Based on the render tree
✓ Figuring out layouting:
➢ Locations
➢ Dimensions
Slide 32
Slide 32 text
Paint
✓ Rasterization in tiles
✓ Filling in the pixels
✓ Multiple layers
Time to start coloring
Slide 33
Slide 33 text
Composite
✓ Drawing the layers on screen
✓ In the correct order
Bringing it all together
Slide 34
Slide 34 text
Pipeline flows
Slide 35
Slide 35 text
Optimizing Rendering Performance
Slide 36
Slide 36 text
Optimizing JavaScript-triggered renders
✓ Time your visual changes appropriately
✓ Avoid big tasks
➢ Use idle time blocks of ~50ms
➢ Offload to Web Workers
✓ DON’T. BLOCK. YOUR. MAIN THREAD.
Slide 37
Slide 37 text
Use requestAnimationFrame
function doAnimation() {
// Animation magic.
}
elem.addEventListener('click', (evt) {
requestAnimationFrame(doAnimation);
});
Slide 38
Slide 38 text
Also, there’s a special place in
hell for people that hijack your
default scroll behavior.
Koen Van den Wijngaert, Ghent, 2020
Slide 39
Slide 39 text
Optimizing Style Calculations
✓ Simplify your CSS Selectors’
➢ Scope: number of affected elements
➢ Complexity: amount of work required to match an element
Slide 40
Slide 40 text
Optimizing Style Calculations
✓ KISS: Keep it short, stupid.
✓ Favor classes over elements and IDs
✓ Processing starts from right to left
✓ Keep the key selector specific
Slide 41
Slide 41 text
Key Selectors
.title {
/* styles */
}
#head .box:nth-last-child(-n+1) .title {
/* Your key selector --^ */
}
Slide 42
Slide 42 text
Optimizing Layout / Reflow
✓ Flexbox and CSS Grid over floats and positioning
✓ Layout affects the entire document
✓ Know your enemies
➢ Forced Synchronous Layouts (forced reflow)
➢ Layout Thrashing
Slide 43
Slide 43 text
Forced Synchronous Layouts
function logBoxHeight() {
box.classList.add('super-big');
// Logs the height of “box” in pixels.
console.log(box.offsetHeight);
}
Slide 44
Slide 44 text
Layout Thrashing
function resizeAllParagraphsToMatchBlockWidth() {
for (var i = 0; i < paragraphs.length; i++) {
// Set new width of paragraph
paragraphs[i].style.width = box.offsetWidth + 'px';
}
}
Slide 45
Slide 45 text
Optimizing the Painting Process
✓ Reduce areas that need repainting
✓ Use layer promotion
✓ Simplify by reducing usage of
➢ Blurs, shadows, ...
➢ Overlaps
Slide 46
Slide 46 text
Layer Promotion
.moving-element {
will-change: transform;
}
/* Hackz */
.moving-element {
transform: translateZ(0);
}
Slide 47
Slide 47 text
Compositor Optimization
✓ Compositor-only elements
➢ Transform
➢ Opacity
✓ Use Layer Promotion
✓ Do some trickery
Slide 48
Slide 48 text
Know Your Triggers
> csstriggers.com
Slide 49
Slide 49 text
Know Your Triggers
> csstriggers.com
Slide 50
Slide 50 text
Loading Performance
Slide 51
Slide 51 text
How to Measure?
Slide 52
Slide 52 text
Loading Performance
✓ Lighthouse
✓ WebPageTest.org
✓ Browser DevTools
Measuring and Testing: using the right tools
Slide 53
Slide 53 text
Lighthouse
✓ Browser extension
✓ Online: PageSpeed Insights (may include field data)
✓ Comprehensive results
✓ Concrete, actionable advice
All-round performance tool
https://developers.google.com/speed/pagespeed/insights/
Slide 54
Slide 54 text
WebPageTest.org
✓ Highly customizable settings (such as browser, location, connection, ...)
✓ Modify expert variables
✓ Controlled lab environment
✓ Open Source
Online performance testing
https://webpagetest.org/
Slide 55
Slide 55 text
Browser DevTools
✓ Advanced tools for auditing your site
✓ Important panels:
➢ Network
➢ Performance
➢ Memory
In-depth audits in your browser
Disclaimer: I use Chrome’s DevTools. Personal preference.
Slide 56
Slide 56 text
Non-Dev Tools
✓ TestMySite:
➢ Test results compared to industry benchmarks
➢ Compare your results with competitors
➢ Basic advice on improving performance
➢ Calculate impact and potential revenue
For marketeers, decision takers and beginners
Slide 57
Slide 57 text
Not all Performance is Equal
✓ Metrics are useless without Dimensions
✓ Lab Data !== Field Data
Things to keep in mind while testing.
Slide 58
Slide 58 text
Not all Performance is Equal
✓ Pick user-centered metrics
✓ Results are not universal; influencing conditions:
➢ Device type (desktop vs. mobile, high-end vs. low-end)
➢ Network type (wifi, 4G, 2G, …)
➢ Connection type (high bandwidth / low latency)
Metrics and Dimensions
Slide 59
Slide 59 text
User Centered Metrics
1. No more blank screen: First Paint
2. First bit of content: First Contentful Paint
3. Actual useful content: First Meaningful Paint
4. User can start using the page: Time To Interactive
It’s all about Perceived Performance and UX.
Slide 60
Slide 60 text
User Centered Metrics
Slide 61
Slide 61 text
Not all Performance is Equal
✓ Lab Data is a great start for general improvements
✓ Not enough? Try RUM.
➢ Real User Monitoring
➢ Metrics available through JavaScript API
Lab Data vs. Field Data
Slide 62
Slide 62 text
What goes into a network request?
1. DNS: the internet’s Yellow Pages
2. Connection negotiation
3. Client sends Request to server
4. Server responds with a Response
5. Repeat if necessary
Slide 63
Slide 63 text
Real User Monitoring
✓ Detailed loading metrics for resources and
navigations.
✓ Performance API
➢ Resource and navigation loading metrics
➢ PerformanceObserver
For the adventurous amongst us.
Slide 64
Slide 64 text
Resource and Navigation timings
// Get timing data for an important image
var imgTime = performance
.getEntriesByName(
"https://.../funny-cat.jpg"
);
// Get all timing data at once
var allTheTimings = performance.getEntries();
Slide 65
Slide 65 text
PerformanceObserver
// Instantiate the performance observer
var perfObserver = new PerformanceObserver(function(list, obj) {
var entries = list.getEntries();
});
// Run the observer
perfObserver.observe({
// Polls for Navigation and Resource Timing entries
entryTypes: ["navigation", "resource"]
});
Slide 66
Slide 66 text
Sending back data
✓ If you use the unload event, don’t block the thread.
✓ Use navigator.sendBeacon
✓ Best to send raw data and process server-side
Things you should know.
Slide 67
Slide 67 text
Optimizing Loading Performance
Slide 68
Slide 68 text
Loading Performance Optimization
✓ Optimize content efficiency
✓ Optimize your JavaScript
✓ Be lazy.
✓ Order carefully. Loading order is everything
The most important ideas in a nutshell.
Slide 69
Slide 69 text
Not actual advice ;-)
Slide 70
Slide 70 text
Content Efficiency
SO. MUCH. DATA!
https://httparchive.org/reports/state-of-the-web, 2010 - 2019
Transfer size Total requests
We now bundle everything
Slide 71
Slide 71 text
Content Efficiency
Average page bytes by content type.
https://httparchive.org/reports/state-of-images
Slide 72
Slide 72 text
Content Efficiency
Be mindful of what you send, and how you send it.
✓ Less is more!
✓ Optimize your assets
✓ Optimize your scripts
✓ USE. PROPER. CACHING.
Slide 73
Slide 73 text
Content Efficiency
Less is more.
✓ Do some spring cleaning!
➢ Do I need these fancy animation?
➢ Do my users actually view my image slider?
➢ Does this add any value to my content?
➢ What’s the impact on performance?
* shouldiuseacarousel.com (spoiler alert: NO)
Slide 74
Slide 74 text
Content Efficiency
Optimizing text-based assets.
✓ Examples: JS, CSS, HTML
✓ Minification: content-specific optimizations
✓ Compression: optimizing transfer size
Slide 75
Slide 75 text
Content Efficiency
Smaller transfers with content encoding.
✓ Less bytes == faster page loads
✓ Compression algorithms
➢ Drastically reduces file sizes
➢ deflate, gzip and Brotli
✓ Savings range from 60 to 88%
Slide 76
Slide 76 text
Content Encoding
# Client Request
Accept-Encoding: gzip, deflate
# Server Response
Content-Encoding: gzip
Slide 77
Slide 77 text
Content Efficiency
Optimizing images.
✓ Avoid them where possible
✓ Don’t forget about vectors
✓ Use compression (lossless and lossy)
✓ Use the right format
Slide 78
Slide 78 text
Content Efficiency
SVGs are awesome.
✓ Ideal for geometric shapes
✓ They scale ridiculously good
✓ Text-based, don’t forget compression
✓ They can be styled using CSS
✓ Re-usable!
Slide 79
Slide 79 text
Content Efficiency
Tips for displaying images.
✓ Don’t forget about setting sizes.
✓ Send the right size(s) of images.
➢ Not too big.
➢ Responsive images: srcset and sizes
Slide 80
Slide 80 text
Responsive images
Slide 81
Slide 81 text
Content Efficiency
Image compression.
✓ Lossless compression
✓ Lossy compression
Slide 82
Slide 82 text
Image Compression
Lossless
kinsta.com/blog/lossy-compression/
Slide 83
Slide 83 text
Image Compression
Lossy
kinsta.com/blog/lossy-compression/
Slide 84
Slide 84 text
Content Efficiency
Use the right image format.
✓ Choose the right type: GIF, PNG, JPEG
✓ Consider using modern alternatives:
➢ MP4, WebP, ...
Slide 85
Slide 85 text
Content Efficiency
Font optimizations
✓ Just use the system fonts.
✓ Use compression.
✓ Use only what you need.
➢ You probably don’t need Cyrillic, Greek and Vietnamese.
✓ FOIT vs. FOUT
Slide 86
Slide 86 text
The System Font Stack
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
Slide 87
Slide 87 text
Flash of Unstyled Text
@font-face {
/* First display fallback font */
font-display: swap;
/* Only display if the font is loaded */
font-display: optional;
}
Slide 88
Slide 88 text
Make use of HTTP caching
Slide 89
Slide 89 text
HTTP Caching
✓ Choose on the right cache policy
✓ Decide how long things can last
✓ Don’t forget about invalidating
A primer on using HTTP caching
Slide 90
Slide 90 text
HTTP Caching
✓ Cacheability
✓ Expiration
✓ Revalidation and reloading
The Cache-Control Header
Slide 91
Slide 91 text
Cacheability
Cache-Control: public
Cache-Control: private
Cache-Control: no-store
Cache-Control: no-cache
# Resource can be cached.
# Resource is cacheable *only* for the user.
# Prevent caching.
# Allow caching, but first check with me.
Slide 92
Slide 92 text
Cache Expiration
# Cached resource considered “fresh” for 120 seconds.
Cache-Control: max-age=120
# Freshness for public caches.
Cache-Control: s-maxage=120
# You don’t need “Expires” anymore.
Expires: Thu, 9 Jan 2020 21:00:00 GMT+1
Slide 93
Slide 93 text
There are only two hard things
in Computer Science: cache
invalidation and naming things.
Phil Karlton
Slide 94
Slide 94 text
Cache Invalidation
# Cached resource considered “fresh” for 120 seconds.
Cache-Control: must-revalidate
# Same, but only for public/shared caches.
Cache-Control: proxy-revalidate
# This resource will *never* change (!)
Cache-Control: immutable
Slide 95
Slide 95 text
Cache Validation: using time
# Server Response.
Last-Modified: Thu, 9 Jan 2020 20:00:00 GMT+1
# Subsequent Browser Request.
If-Modified-Since: Thu, 9 Jan 2020 20:00:00 GMT+1
# Server will return 304 Not Modified if not modified.
Slide 96
Slide 96 text
Cache Validation: using tokens
# Server Response includes version token of resource.
ETag: 5485fac7-ae74
# Subsequent browser Request.
If-None-Match: 5485fac7-ae74
# Server will return 304 Not Modified if the token matches.
Slide 97
Slide 97 text
Examples
# Static assets may be cached aggressively, for one year
# Note: “public” is implicit here
Cache-Control: public, max-age=31536000
# Store a file for up to one day (eg; animage)
Cache-Control: max-age=86400
# Cache, but always revalidate first
Cache-Control: no-cache
Slide 98
Slide 98 text
HTTP Caching Pro Tips
Combine to get the best of both worlds!
✓ Use consistent URLs
✓ Store and forget: immutable files
➢ Include fingerprint or version number IN the URL. (eg: style.x234dff.css)
➢ Prevents caching inconsistencies
✓ Use validation tokens for variable files
Slide 99
Slide 99 text
HTTP Caching Pro Tips
An example strategy.
Slide 100
Slide 100 text
HTTP Caching
✓ Cloudflare
✓ nginx
✓ varnish
➢ Highly configurable (using VCL - Varnish Configuration Language)
➢ Can evaluate and manipulate requests/responses
➢ Load balancing
➢ Remote purging and invalidation
Reverse caching proxies.
Slide 101
Slide 101 text
Content Efficiency
Negotiate and accommodate.
✓ Lots of media queries? Group ‘em!
✓ The Accept request header
✓ Client hints are the bomb
github.com/SassNinja/postcss-extract-media-query
Slide 102
Slide 102 text
Grouping media queries
Slide 103
Slide 103 text
The Accept Header
# I can render fancy image formats (Chrome)
Accept: image/webp,image/apng,image/*,*/*;q=0.8
# Just the json version, please
Accept: application/json
Slide 104
Slide 104 text
Content Efficiency
Accommodate your users with Client Hints
✓ Device Hints (Viewport-Width, DPR, Width, Device-Memory, ...)
✓ Network Hints (RTT, Downlink, ECT, Save-Data, ...)
✓ Don’t forget about the Vary header
Slide 105
Slide 105 text
Client Hints
# Response header
Accept-CH: Viewport-Width, Downlink
Vary: Viewport-Width, Downlink # Don’t f* the caches
Slide 106
Slide 106 text
Optimize your JavaScript
✓ Don’t use huge libraries for a small piece of the
functionality.
✓ Consider smaller alternatives:
➢ Zepto is a smaller jQuery alternative
➢ Preact is a much smaller alternative to React
Reducing the amount of scripts you send.
Slide 107
Slide 107 text
Optimize your JavaScript
The horror stories of unused code
Slide 108
Slide 108 text
Optimize your JavaScript
✓ Combat unused code
➢ Using Tree Shaking
➢ Using Code Splitting
✓ Start experimenting with ES Modules
➢ Loading used JS modules when needed.
On bundling your scripts
Slide 109
Slide 109 text
Be lazy.
Images and videos are not uncommon on today’s web
sites. Don’t make them impact initial loading times.
✓ Lazy load off-screen media
✓ During idle time and/or when they enter the viewport
✓ Please don’t autoplay videos
Don’t forget about lazy loading resources.
Slide 110
Slide 110 text
Be lazy.
✓ Use a library like lazysizes.js
➢ Also works with srcset & size.
➢ Customizable: blur, styles, ...
✓ Use fallbacks (noscript and on errors)
✓ Native lazy loading is coming!
On lazy loading your media assets.
Slide 111
Slide 111 text
Lazy loading
Slide 112
Slide 112 text
GO OFFLINE
Slide 113
Slide 113 text
Use Progressive Web Apps
✓ Offline Capabilities using Service Workers
✓ Installable on your user’s device
✓ Near-native capabilities
Designing offline-first experiences.
Slide 114
Slide 114 text
Going Offline
Because Service Workers are AWESOME.
Slide 115
Slide 115 text
Service Workers
Main advantages.
✓ Full control over the network
✓ Endless caching strategies
✓ Providing fallbacks when offline
✓ Background syncing
✓ Higher user engagement with Push Notifications
Slide 116
Slide 116 text
Optimizing Loading Performance
The Golden Rule
Slide 117
Slide 117 text
Optimize your CRP
Slide 118
Slide 118 text
Web page loading: an example
Hello world!
Slide 119
Slide 119 text
The Critical Rendering Path
✓ Progressively load your pages
➢ Defer render blocking resources
➢ Load critical resources ASAP
✓ Avoid long Critical Request Chains
What it takes to start rendering meaningful content.
Slide 120
Slide 120 text
The Critical Rendering Path
✓ A tag is render-blocking if
➢ It’s in the <head> of the document
➢ It does not have a defer attribute
➢ It does not have an async attribute
✓ A <script> tag can also be parser-blocking
Render-blocking scripts
Slide 121
Slide 121 text
The Critical Rendering Path
✓ A tag is render-blocking if
➢ It does not have a disabled attribute
➢ It has a matching static media attribute
✓ Note: non render-blocking styles are also downloaded.
Render-blocking styles
Slide 122
Slide 122 text
Critical Rendering Path
Avoid long Critical Request Chains
Slide 123
Slide 123 text
Optimizing the CRP
✓ The number of critical resources
✓ The critical path length
✓ The number of critical bytes
Minimize these things
Slide 124
Slide 124 text
Optimizing the CRP
✓ Push (or preload) critical resources
✓ Render the initial content
✓ Pre-cache remaining assets
✓ Lazy load other routes and non-critical assets
With the PRPL pattern
Slide 125
Slide 125 text
Optimizing the CRP
✓ Optimize your CSS:
➢ Inline critical CSS, preload the rest
➢ Put all CSS in the head
➢ Avoid @import
✓ Optimize JavaScript usage:
➢ defer and/or async
Useful recommendations
Slide 126
Slide 126 text
Don’t be a dinosaur
✓ Request multiplexing
➢ Sending multiple parallel requests over single connection
✓ Header compression
➢ Low overhead. Smaller headers.
✓ HTTP/2 Server Push
➢ Push your critical resources along with your page.
Use HTTP/2, it has huge performance benefits.
Slide 127
Slide 127 text
Resource prioritization by pre-*
Slide 128
Slide 128 text
Performance in WordPress
Slide 129
Slide 129 text
Performance in WordPress
✓ Backend Performance: TTFB
➢ Running code, database communication, external systems, ...
✓ Frontend Performance: Loading
➢ What do I send, how do I send it? How much do I send?
✓ Frontend Performance: Rendering
➢ What happens after loading? How smooth are interactions and navigation?
Know what performance is made of.
Slide 130
Slide 130 text
Performance in WordPress
✓ Have a good hosting environment.
✓ Minimize your Time to First Byte.
✓ Make sure your configuration is optimized.
✓ Consider the impact of plugins and themes.
✓ Don’t trust theme frameworks and page builders.
General recommendations
Slide 131
Slide 131 text
WordPress Performance Tips
✓ Use the latest software (PHP, database, web server, cache, …)
✓ Have their configurations tuned for performance
✓ Run on performant hardware
✓ Be located close to you
Good hosting environments should
Slide 132
Slide 132 text
WordPress Performance Tips
✓ Reduce the number of requests by using Content
Delivery Networks for static assets.
➢ Cloudflare
➢ Cloudfront
➢ MaxCDN
➢ ...
Reduce server load by offloading.
Slide 133
Slide 133 text
No content
Slide 134
Slide 134 text
Performance in WordPress
✓ Mostly Static
➢ Content does not change very often.
➢ Content is not tailored to the user.
✓ Highly Dynamic
➢ Content changes often, or is specific for the current user.
How dynamic is your site, really?
Slide 135
Slide 135 text
Performance in WordPress
✓ Mostly Static
➢ Use the all-mighty quick fix: “just cache it”.
✓ Highly Dynamic
➢ Boy, are you in for a treat!
Optimizing Backend Performance.
Slide 136
Slide 136 text
Backend Performance in WP
By identifying bottlenecks in the code.
✓ By using profilers like xdebug
✓ By using plugins
➢ P3 Plugin Performance Profiler
➢ Debug Bar & Query Monitor
Troubleshooting long TTFB.
Slide 137
Slide 137 text
Backend Performance in WP
✓ Offload slow tasks to background
➢ WP-Cron, Cronjobs, external providers
✓ Decrease database query latency
✓ Make use of server side caching
✓ Increase your PHP Workers
➢ More simultaneous requests for high-traffic sites
Tips on improving.
Slide 138
Slide 138 text
Backend Performance in WP
✓ Caching Types
➢ Object caching, Page caching, Opcode caching
✓ Caching media/tools
➢ Persistent caching stores (redis, memcache)
➢ APCu
➢ Disk
Server Side Caching in WordPress
Slide 139
Slide 139 text
Performance in WordPress
✓ Use tools like:
➢ Lighthouse
➢ WebPageTest.org
➢ DevTools
Troubleshooting Frontend Performance.
Slide 140
Slide 140 text
Frontend Performance in WP
✓ Optimize Loading Performance
➢ Be mindful of what is being loaded and how.
➢ Optimize the Critical Rendering Path
✓ Make sure network requests
➢ Implement proper caching
➢ Are optimized for fast delivery
Improving Frontend Performance.
Slide 141
Slide 141 text
Frontend Performance in WP
✓ Check your theme and plugin settings.
✓ Use plugins to handle things like:
➢ Optimizing network requests
➢ Lazy loading assets
➢ Reducing your CRP
➢ Image delivery and compression
Improving frontend performance.
Slide 142
Slide 142 text
WordPress Optimization Plugins
Backend Performance
✓ W3 Total Cache
✓ WP Super Cache
✓ WP Rocket
✓ Redis Object Cache
✓ Perfmatters
Some suggestions, your mileage may vary.
Frontend Performance
✓ Asset management:
➢ Autoptimize
➢ Async JavaScript
➢ Hummingbird
✓ Image compression:
➢ Imagify
➢ EWWW (local or Cloud)
➢ WP Smush
➢ ShortPixel
Slide 143
Slide 143 text
Last but not least...
Slide 144
Slide 144 text
Don’t fall for the trap!
✓ Law of Diminishing Returns
✓ Start with quick wins
✓ There’s more to online success than performance*
Know when to stop, don’t overdo it.
* Don’t make me say it twice.
Slide 145
Slide 145 text
“What did we learn
today?”
- S.O.S. Koen
1. Performance Matters
2. Measuring Performance
a. It’s all about UX
b. The RAIL Model
3. Optimizing Performance
a. Loading Performance
b. Rendering Performance
Slide 146
Slide 146 text
Optimizing Loading
Performance
1. Measure correctly.
Use your tools.
2. Send things efficiently.
a. Send less
b. Reduce transfer size
c. Something about caching
3. Optimize your JS.
4. Optimize your CRP.
5. Use HTTP2.
Slide 147
Slide 147 text
Optimizing Rendering
Performance 1. Remember the Pipeline.
JS > Style > Layout > Paint > Composite
2. Keep it smooth.
3. Something about blocking the
main thread.
Slide 148
Slide 148 text
March 27-29, Antwerp | #WCANT
Slide 149
Slide 149 text
Have fun Optimizing! @vdwijngaert
Koen Van den Wijngaert
SiteOptimo.com