Google ‘Core Web Vitals’: Improving the performance and SEO of WordPress websites for a better user experience - Vineet Talwar

Let’s talk about speed! One of the major factors leading to online frustration is a slow website. Users do not want to wait – and if you’re not careful, this can make you lose traffic before your page has loaded! As we all know, a dissatisfied user is worse than not having users at all! A better user experience is the driver behind Google’s anticipated Core Web Vitals update, which focuses on loading, interactivity, and visual stability of a website. This talk mainly deals with how you can speed up your WordPress website and make it faster for users, thus improving their conversions, importantly before Core Web Vitals come into force. We’ll start by looking at website hosting, latency and DNS, and then discuss how you can optimize the performance of your WordPress website. Solutions will be for all sort of users, from beginner to advanced, and for different hosting scenarios. Further discussion will be about different performance optimization strategies like cutting down your queries, tweaking the code base, caching mechanism, use of cloud services, scaling up/forward and so on. All this together shall help a newbie or even someone who has their website slow and frustrating for users, faster and better optimized. Thus, saving their day and being ready for Google’s update in May 2021!

Transcript

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