Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimizing WordPress for Core Web Vitals and Pe...

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/

Vineet Talwar

October 14, 2023
Tweet

More Decks by Vineet Talwar

Other Decks in Technology

Transcript

  1. " 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/ [email protected] @vineetsktalwar /in/vineetsktalwar
  2. "

  3. • 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/
  4. "

  5. • S3+ CloudFront • Digital Ocean Spaces • Akamai CDN

    • Fastly • Plugins: W3 Total Cache, WP Offload S3
  6. • Page Cache • Browser Cache • Object Cache •

    Database Cache • Transient Cache • Opcache, Redis, Memcached • Plugins: W3 Total Cache, WP Super Cache
  7. • Use case • Estimate traffic • Expectations from visitors

    • User Retention • Test as your end user • Think abut mobile users first • A/B Test • Hotjar Test
  8. • High bootup time • Defer Third Party Embeds •

    Obese Expensive Libraries • Split the Code • Preload, preconnect, prefetch, dns-prefetch • Minify, Automate minification
  9. • Minify CSS, Minify JS • Optimize libraries with webpack:

    GoogleChromeLabs/webpack-libs- optimizations • Plugins: Autoptimize, W3 Total Cache
  10. • Preconnect Critical Origin • Preload Critical Scripts • Prefetch

    Visible Links • Priority Hints (For Future)
  11. • Tracking based with GTM. • Block Tracking scripts, before

    cookies are accepted. • Load Async • Scripts On Window Load • OneTrust, Cookiebot
  12. • Scale Up and Scale Forward • Load Balancer Architecture

    • Serverless if and when possible • Elasticsearch for queries (Elasticpress Plugin)
  13. "