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.

I will break it down with real-world 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.

Talk Link: https://skopje.wordcamp.org/2023/session/optimizing-wordpress-for-core-web-vitals-and-performance/

Transcript

1. VINEET TALWAR
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. #WCSKP @vineetsktalwar
8. https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
9. " @vineetsktalwar
13. https://web.dev/vitals
14. Jake Archibald at google i/o16
15. https://csshint.com
20. https://wordpress.org/about/stats/
24. Shared Dedicated Cloud
25. "
26. Source: Reddit
32. Lazy Loading Responsive Images Use Lighter formats Image Compression CDN
33. • 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/
35. "
36. • Tinypng • Smush • Optimizilla • https://images.guide
37. • S3+ CloudFront • Digital Ocean Spaces • Akamai CDN • Fastly • Plugins: W3 Total Cache, WP Offload S3
39. Font Swap http://fonts.googleapis.com/c ss?family=Roboto&font- display=swap @font-face { font-family: ‘custom font’; src: url(..); font-display: swap; }
41. • Page Cache • Browser Cache • Object Cache • Database Cache • Transient Cache • Opcache, Redis, Memcached • Plugins: W3 Total Cache, WP Super Cache
42. • Use case • Estimate traffic • Expectations from visitors • User Retention • Test as your end user • Think abut mobile users first • A/B Test • Hotjar Test
43. https://developer.wordpress.org/reference/classes/wp_query/
45. • Queries are slow • Multi Dimension Meta Queries • Multi Dimension Taxonomy Queries
48. • Inline Critical CSS: addyosmani/critical, filamentgroup/criticalcss, pocketjoso/penthouse • Load CSS Async: filamentgroup/loadCSS
49. • High bootup time • Defer Third Party Embeds • Obese Expensive Libraries • Split the Code • Preload, preconnect, prefetch, dns-prefetch • Minify, Automate minification
50. • Compress everything • Gzip, brotli • Configure in Web server
51. • Minify CSS, Minify JS • Optimize libraries with webpack: GoogleChromeLabs/webpack-libs- optimizations • Plugins: Autoptimize, W3 Total Cache
52. • Preconnect Critical Origin • Preload Critical Scripts • Prefetch Visible Links • Priority Hints (For Future)
54. • Tracking based with GTM. • Block Tracking scripts, before cookies are accepted. • Load Async • Scripts On Window Load • OneTrust, Cookiebot
56. • Scale Up and Scale Forward • Load Balancer Architecture • Serverless if and when possible • Elasticsearch for queries (Elasticpress Plugin)
58. • WP_DEBUG, WP_DEBUG_LOG • Query Monitor • Debug Bar
59. • Bloats • Unwanted Plugins • Optimize DB • Cleanup wp-admin • Expiry Header
60. Image Source: WP Rocket
61. "
62. Source: knowyourmeme.com
63. And It’s a wrap!
64. " Linktree: /vineetsktalwar @vineetsktalwar