Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 #WCGR2021

Slide 3

Slide 3 text

3 Let’s talk about buttons

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

6 Terminology • DNS • Latency • Time to Interactive (TTI) • First Contentful Paint (FCP)

Slide 7

Slide 7 text

7 Core Web Vitals https://web.dev/vitals

Slide 8

Slide 8 text

8 Google wants you to speed up

Slide 9

Slide 9 text

9 Google <3 User Experience

Slide 10

Slide 10 text

10 Bad website performance has a measurable business impact​

Slide 11

Slide 11 text

https://www.thinkwithgoogle.com/intl/en-ca/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

13 “ But How?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

16 “ Website Hosting

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

18 Website Hosting • Shared • Dedicated • Cloud

Slide 19

Slide 19 text

19 “ Go Cloud!

Slide 20

Slide 20 text

Source: Reddit

Slide 21

Slide 21 text

DNS

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

23 Testing • Tools.pingdom.com • Lighthouse test (web.dev) • Gtmetrics • Chrome devtools

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Images

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

27 Images LAZY LOADING RESPONSIVE IMAGES USE LIGHTER FORMATS IMAGES OPTIMIZATION IMAGES CDN

Slide 28

Slide 28 text

28 Lazy Loading § Lazy loading offscreen images with JS § Lozad.js or Lazysizes § § Library as fallback with loading=lazy https://web.dev/browser-level-image-lazy-loading/

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

30 Image Optimization • Tinypng • Smush • Optimizilla • https://images.guide

Slide 31

Slide 31 text

webp is new black.

Slide 32

Slide 32 text

32 Images CDN • S3+ CloudFront • Digital Ocean Spaces • Jetpack Photon • Akamai CDN • Fastly • Plugins: W3 Total Cache, WP Offload S3

Slide 33

Slide 33 text

Fonts

Slide 34

Slide 34 text

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; • }

Slide 35

Slide 35 text

Caching

Slide 36

Slide 36 text

36 Caching • Page Cache • Browser Cache • Object Cache • Database Cache • Transient Cache • Opcache, Redis, Memcached • Plugins: W3 Total Cache, WP Super Cache

Slide 37

Slide 37 text

Transient Caching '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 have_posts() ) : ?> have_posts() ) : $featured->the_post(); ?> // featured posts found, do stuff // no featured posts found Using Trasients with WP_Query to retrieve featured posts

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

40

Slide 41

Slide 41 text

Jake Archibald at google i/o16

Slide 42

Slide 42 text

42 “ Go Offline!

Slide 43

Slide 43 text

Source: chunkbytes.com Progressive Web Apps (PWA)

Slide 44

Slide 44 text

44 Service Workers Source: Medium

Slide 45

Slide 45 text

JS and CSS

Slide 46

Slide 46 text

46 Critical CSS • Inline Critical CSS: addyosmani/critical, filamentgroup/criticalcss, pocketjoso/penthouse • Load CSS Async: filamentgroup/loadCSS

Slide 47

Slide 47 text

47 Javascripts • High bootup time • Defer Third Party Embeds • Obese Expensive Libraries • Split the Code • Preload, preconnect, prefetch, dns-prefetch • Minify, Automate minification

Slide 48

Slide 48 text

48 Minify • Minify CSS, Minify JS • Optimize libraries with webpack: GoogleChromeLabs/webpack-libs-optimizations • Plugins: Autoptimize, W3 Total Cache

Slide 49

Slide 49 text

49 Compression • Compress everything • Gzip, brotli • Configure in Web server

Slide 50

Slide 50 text

50 Resource Hints • Preconnect Critical Origin • Preload Critical Scripts • Prefetch Visible Links • Priority Hints (For Future)

Slide 51

Slide 51 text

51 Adaptive serving • Data saver mode / Light Applications • Slow network specific version • Offline first

Slide 52

Slide 52 text

52 Scaling • Scale Up and Scale Forward • Load Balancer Architecture • Serverless • Elasticsearch for queries

Slide 53

Slide 53 text

53 What else ? • Bloats • Unwanted Plugins • Optimize DB • Cleanup wp-admin • Expiry Header

Slide 54

Slide 54 text

54 Source: knowyourmeme.c om Possible Issues ?

Slide 55

Slide 55 text

Website Speed is more important than ever

Slide 56

Slide 56 text

Core Web Vitals have to be part of every SEO audit

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

E-Mail: [email protected] Twitter: @vineetsktalwar Thank You