Webinar: Optimizing WordPress for Core Web Vitals and Performance

If your website is slow, the user won’t give a second thought before leaving your site. A dissatisfied user is worse than not getting traffic at all!
Get ready for a deep dive into the world of WordPress optimization, where we’ll demystify the tech side of things, especially when it comes to meeting the demanding standards of Core Web Vitals and overall website performance. This session is your backstage pass to understanding the nuts and bolts of WordPress optimization.

Vineet will break it down with some examples and easy-to-follow strategies that’ll help you supercharge your website’s speed, boost interactivity, and ensure rock-solid layout stability. Whether you’re a developer or a website owner, you’ll leave with practical knowledge and the tools needed to fine-tune your WordPress projects. Join us for this enlightening session and unlock the full potential of your online presence.

More about the webinar here.

Watch the webinar here

Transcript

1. Optimitzing WordPress for Core Web Vitals and Performance Learn.WordPress.org Vineet Talwar Hosted by Benjamin Evans
2. " Vineet Talwar 2x Startup Founder & CTO with 10+ Years at the Helm | 100k+ User Growth in MusicTech | Agency, MarTech & EdTech | Public Speaker | AWS Certified WPTV: https://wordpress.tv/speakers/vineet-talwar/ contact@vineet.de @vineetsktalwar /in/vineetsktalwar
3. #LearnWP @vineetsktalwar Learn.WordPress.org
8. https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
9. " @vineetsktalwar
13. " @vineetsktalwar
15. Credits: https://web.dev/case-studies/vitals-business-impact
16. https://web.dev/vitals
17. https://web.dev/vitals
18. Jake Archibald at google i/o16
19. https://csshint.com
23. Image credits: crystallize.com
25. https://direction.com/wp-content/uploads/2022/02/pagespeed-blame.jpg
27. https://wordpress.org/about/stats/
31. " @vineetsktalwar
32. Shared Dedicated Cloud
33. "
34. Source: Reddit
40. " @vineetsktalwar
41. Lazy Loading Responsive Images Use Lighter formats Image Compression CDN
42. • Lazy loading offscreen images with JS • <img loading=“lazy”> • WP (5.5 onwards) supports lazy loading • Libraries: Lozad.js or Lazysizes • Define Height, Width Attribute to images explicity to decrease CLS https://web.dev/browser-level-image-lazy-loading/
44. "
45. • Tinypng • Smush • Optimizilla • https://images.guide
46. • S3+ CloudFront • Digital Ocean Spaces • Akamai CDN • Fastly • Plugins: W3 Total Cache, WP Offload S3
48. Font Swap http://fonts.googleapis.com/c ss?family=Roboto&font- display=swap @font-face { font-family: ‘custom font’; src: url(..); font-display: swap; }
50. • Page Cache • Browser Cache • Object Cache • Database Cache • Transient Cache • Opcache, Redis, Memcached • Plugins: W3 Total Cache, WP Super Cache
51. • Use case • Estimate traffic • Expectations from visitors • User Retention • Test as your end user • Think abut mobile users first • A/B Test • Hotjar Test
52. https://developer.wordpress.org/reference/classes/wp_query/
54. • Queries are slow • Multi Dimension Meta Queries • Multi Dimension Taxonomy Queries
57. • Inline Critical CSS: addyosmani/critical, filamentgroup/criticalcss, pocketjoso/penthouse • Load CSS Async: filamentgroup/loadCSS
58. • High bootup time • Defer Third Party Embeds • Obese Expensive Libraries • Split the Code • Preload, preconnect, prefetch, dns-prefetch • Minify, Automate minification
59. • Compress everything • Gzip, brotli • Configure in Web server
60. • Minify CSS, Minify JS • Optimize libraries with webpack: GoogleChromeLabs/webpack-libs- optimizations • Plugins: Autoptimize, W3 Total Cache
61. • Preconnect Critical Origin • Preload Critical Scripts • Prefetch Visible Links • Priority Hints (For Future)
63. • Tracking based with GTM. • Block Tracking scripts, before cookies are accepted. • Load Async • Scripts On Window Load • OneTrust, Cookiebot
65. • Scale Up and Scale Forward • Load Balancer Architecture • Serverless if and when possible • Elasticsearch for queries (Elasticpress Plugin)
67. • WP_DEBUG, WP_DEBUG_LOG • Query Monitor • Debug Bar
68. • Bloats • Unwanted Plugins • Optimize DB • Cleanup wp-admin • Expiry Header
69. Image Source: WP Rocket
70. "
71. Source: knowyourmeme.com
72. And It’s a wrap!
73. " Linktree: /vineetsktalwar @vineetsktalwar