Save 37% off PRO during our Black Friday Sale! »

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

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!

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

April 16, 2021
Tweet

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

  4. None
  5. None
  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/

  12. None
  13. 13 “ But How?

  14. None
  15. None
  16. 16 “ Website Hosting

  17. None
  18. 18 Website Hosting • Shared • Dedicated • Cloud

  19. 19 “ Go Cloud!

  20. Source: Reddit

  21. DNS

  22. None
  23. 23 Testing • Tools.pingdom.com • Lighthouse test (web.dev) • Gtmetrics

    • Chrome devtools
  24. None
  25. Images

  26. None
  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/
  29. None
  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
  38. None
  39. None
  40. 40

  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
  57. None
  58. E-Mail: v.talwar@searchmetrics.com Twitter: @vineetsktalwar Thank You