Slide 1
Slide 1 text
By Vineet Talwar
@vineetsktalwar
Google ‘Core Web Vitals’:
Improving the performance
and SEO of WordPress
websites for a better user
experience
Slide 2
Slide 2 text
2
#WCGR2021
Slide 3
Slide 3 text
3
Let’s talk about buttons
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
6
Terminology
• DNS
• Latency
• Time to Interactive (TTI)
• First Contentful Paint (FCP)
Slide 7
Slide 7 text
7
Core Web Vitals
https://web.dev/vitals
Slide 8
Slide 8 text
8
Google wants you to speed up
Slide 9
Slide 9 text
9
Google <3 User Experience
Slide 10
Slide 10 text
10
Bad website performance
has a measurable
business impact
Slide 11
Slide 11 text
https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
13
“
But How?
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
16
“
Website Hosting
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
18
Website Hosting
• Shared
• Dedicated
• Cloud
Slide 19
Slide 19 text
19
“
Go Cloud!
Slide 20
Slide 20 text
Source: Reddit
Slide 21
Slide 21 text
DNS
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
23
Testing
• Tools.pingdom.com
• Lighthouse test (web.dev)
• Gtmetrics
• Chrome devtools
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Images
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
27
Images
LAZY LOADING RESPONSIVE
IMAGES
USE LIGHTER
FORMATS
IMAGES
OPTIMIZATION
IMAGES CDN
Slide 28
Slide 28 text
28
Lazy Loading
§ Lazy loading offscreen images with JS
§ Lozad.js or Lazysizes
§ ![]()
§ Library as fallback with loading=lazy
https://web.dev/browser-level-image-lazy-loading/
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
30
Image Optimization
• Tinypng
• Smush
• Optimizilla
• https://images.guide
Slide 31
Slide 31 text
webp is new black.
Slide 32
Slide 32 text
32
Images CDN
• S3+ CloudFront
• Digital Ocean Spaces
• Jetpack Photon
• Akamai CDN
• Fastly
• Plugins: W3 Total Cache,
WP Offload S3
Slide 33
Slide 33 text
Fonts
Slide 34
Slide 34 text
34
Fonts
• Font Swap –
http://fonts.googleapis
.com/css?family=Robot
o&font-display=swap
• @font-face {
• font-family: ‘custom
font’;
• src:url(..);
• font-display: swap;
• }
Slide 35
Slide 35 text
Caching
Slide 36
Slide 36 text
36
Caching
• Page Cache
• Browser Cache
• Object Cache
• Database Cache
• Transient Cache
• Opcache, Redis, Memcached
• Plugins: W3 Total Cache, WP Super
Cache
Slide 37
Slide 37 text
Transient Caching
'featured',
'posts_per_page' => 5
)
);
// Put the results in a transient. Expire after 12
hours.
set_transient( 'foo_featured_posts', $featured, 12
* HOUR_IN_SECONDS );
}
?>
// Run the loop as normal
have_posts() ) : ?>
have_posts() ) : $featured->the_post(); ?>
// featured posts found, do stuff
// no featured posts found
Using Trasients with WP_Query to retrieve featured posts
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
40
Slide 41
Slide 41 text
Jake Archibald at google i/o16
Slide 42
Slide 42 text
42
“
Go Offline!
Slide 43
Slide 43 text
Source: chunkbytes.com
Progressive Web
Apps (PWA)
Slide 44
Slide 44 text
44
Service Workers
Source: Medium
Slide 45
Slide 45 text
JS and CSS
Slide 46
Slide 46 text
46
Critical CSS
• Inline Critical CSS: addyosmani/critical,
filamentgroup/criticalcss,
pocketjoso/penthouse
• Load CSS Async: filamentgroup/loadCSS
Slide 47
Slide 47 text
47
Javascripts
• High bootup time
• Defer Third Party Embeds
• Obese Expensive Libraries
• Split the Code
• Preload, preconnect, prefetch, dns-prefetch
• Minify, Automate minification
Slide 48
Slide 48 text
48
Minify
• Minify CSS, Minify JS
• Optimize libraries with webpack:
GoogleChromeLabs/webpack-libs-optimizations
• Plugins: Autoptimize, W3 Total Cache
Slide 49
Slide 49 text
49
Compression
• Compress everything
• Gzip, brotli
• Configure in Web server
Slide 50
Slide 50 text
50
Resource Hints
• Preconnect Critical Origin
• Preload Critical Scripts
• Prefetch Visible Links
• Priority Hints (For Future)
Slide 51
Slide 51 text
51
Adaptive serving
• Data saver mode / Light Applications
• Slow network specific version
• Offline first
Slide 52
Slide 52 text
52
Scaling
• Scale Up and Scale Forward
• Load Balancer Architecture
• Serverless
• Elasticsearch for queries
Slide 53
Slide 53 text
53
What else ?
• Bloats
• Unwanted Plugins
• Optimize DB
• Cleanup wp-admin
• Expiry Header
Slide 54
Slide 54 text
54
Source:
knowyourmeme.c
om
Possible Issues ?
Slide 55
Slide 55 text
Website Speed is more
important than ever
Slide 56
Slide 56 text
Core Web Vitals have
to be part of every SEO
audit
Slide 57
Slide 57 text
No content