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

'Google Core Web Vitals': Improving the Perform...

'Google Core Web Vitals': Improving the Performance and SEO of WordPress websites for a better user experience.

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!

Vineet Talwar

April 16, 2021
Tweet

More Decks by Vineet Talwar

Other Decks in Technology

Transcript

  1. By Vineet Talwar Google ‘Core Web Vitals’: Improving the performance

    and SEO of WordPress websites for a better user experience @vineetsktalwar
  2. 6 Terminology • DNS • Latency • Time to Interactive

    (TTI) • First Contentful Paint (FCP) @vineetsktalwar
  3. DNS

  4. 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/
  5. 32 Images CDN • S3+ CloudFront • Digital Ocean Spaces

    • Jetpack Photon • Akamai CDN • Fastly • Plugins: W3 Total Cache, WP Offload S3
  6. 34 Fonts • Font Swap – http://fonts.googlea pis.com/css?family= Roboto&font- display=swap

    • @font-face { • font-family: ‘custom font’; • src:url(..); • font-display: swap; • }
  7. 36 Caching • Page Cache • Browser Cache • Object

    Cache • Database Cache • Transient Cache • Opcache, Redis, Memcached • Plugins: W3 Total Cache, WP Super Cache
  8. 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_pos // 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
  9. 40

  10. 48 Javascripts • High bootup time • Defer Third Party

    Embeds • Obese Expensive Libraries • Split the Code • Preload, preconnect, prefetch, dns-prefetch • Minify, Automate minification
  11. 49 Minify • Minify CSS, Minify JS • Optimize libraries

    with webpack: GoogleChromeLabs/webpack-libs-optimizations • Plugins: Autoptimize, W3 Total Cache
  12. 51 Resource Hints • Preconnect Critical Origin • Preload Critical

    Scripts • Prefetch Visible Links • Priority Hints (For Future)
  13. 52 Adaptive serving • Data saver mode / Light Applications

    • Slow network specific version • Offline first
  14. 53 Scaling • Scale Up and Scale Forward • Load

    Balancer Architecture • Serverless if and when possible • Elasticsearch for queries
  15. 54 What else ? • Bloats • Unwanted Plugins •

    Optimize DB • Cleanup wp-admin • Expiry Header