Core Web Vitals For WordPress: How To Fix Over 25 Items

Core web vitals will be a ranking factor soon in May, 2021.

But many WordPress users struggle to fix issues because they don’t know how to apply the solutions to WordPress.

• Is there a plugin for that?
• How do I fix it without a plugin?
• Just show me the code and where to put it!
• Which Facebook Groups can I find answers in?

This guide covers nearly every recommendation found in the opportunities and diagnostics section of PageSpeed Insights. Of course, if you want a more accurate measurement of your web vitals, you should be using Lighthouse or the core web vitals report in Search Console. You’ll want to view the mobile core web vitals report since Google uses mobile-first indexing.

Search Console tells you whether your WordPress site struggles with the 3 core web vitals:

Source: Google

 

Largest Contentful Paint (LCP)

LCP is the largest element in the viewport.

The largest element is usually an image, background image, or H1 tag, but it can be any of these:

• Image
• Background image
• Video or animation
• Block-level element

Your largest contentful paint element can be seen in your PageSpeed Insights report. In this particular case, the LCP element is a background image that appears across the entire website.

Optimizing LCP

• Preload the LCP image
• Compress the LCP image (try 85%)
• Serve the LCP image from your CDN
• Reduce the LCP image’s size using WebP or SVG
• Exclude LCP image (and other images in viewport) from lazy load
• Use asset unloading plugins to remove unused JavaScript and CSS
• Eliminate render-blocking resources with Autoptimize + Async JavaScript
• Reduce TTFB (get off shared hosting and try a faster, cloud hosting provider)
• Avoid loading heavy third-party JavaScript (e.g. advertisements) above the fold
• Delay JavaScript using Flying Scripts or “delay JavaScript execution” in WP Rocket
• Optimize fonts (host locally, preload, use font-display: swap, reduce weights/icons)
• Preconnect CDNs and third-party fonts if you’re using them (i.e. //fonts.gstatic.com)
• Minify CSS and use critical CSS (make sure optimize CSS delivery works in cache plugin)
• Read more on how to fix LCP

 

Cumulative Layout Shift (CLS)

CLS means elements on your website are shifting.

You can find these in Google’s Layout Shift Debugger.

They’re also shown in your PageSpeed Insights Diagnostics report under “avoid large layout shifts.” When viewing the report, you’ll see which elements have the highest CLS contribution.

Optimizing CLS

• Specify dimensions for images, videos, iframes
• Specify common ad dimensions in div containers
• Try to avoid showing advertisements in the viewport
• Fix FOIT by adding “font-display: swap” to your font’s CSS
• Host fonts locally on your server and test preloading them
• Avoid TTF font format (it’s often much slower than WOFF)
• Use CSS transform in animations instead of width/height attributes
• Ensure optimize CSS delivery is working (i.e. in WP Rocket) to avoid FOUC
• Delay JavaScript to prevent new content unless it’s triggered by user interaction
• When moving elements, use transform: translate() instead of top, bottom, left, right
• Read more on how to fix CLS

 

First Input Delay (FID)

FID is the time from when a user interacts with the page (i.e. clicking a link or button) to the time the page actually responds. This does not include scroll or zoom. FID requires a real user and can’t be measured in the lab, so Google suggests using total blocking time (TBT) instead.

Input delay generally happens when the browser’s main-thread is busy doing something else. Long main-thread tasks can be caused by your website (check your long main-thread tasks report) or caused by a third-party website (check your reduce impact of third-party code report).

Optimizing FID And TBT

• Defer, delay, minify JavaScript
• Use GZIP or Brotli (preferably Brotli which is faster)
• Test whether combining CSS/JS has a positive impact
• Fix 4xx and 5xx errors in your GTmetrix Waterfall chart
• Remove unused JavaScript with an asset unloading plugin
• Remove heavy page builders that adds lot of extra CSS/JS
• Try using jQuery-free plugins and avoid slow loading plugins
• Check for issues with “optimize CSS delivery” in cache plugins
• Reduce impact of third-party code (fonts, analytics, GTM, ads, videos)
• Consider splitting large CSS/JS files into multiple smaller files (code splitting)
• Optimize images and animations especially if they cause long main-thread tasks
• If using a heavy page builder, consider hard coding header, menu, sidebar, and footer
• Read more on how to fix TBT

 

 

1. Avoid an excessive DOM size

DOM size can be reduced by simplifying your design.

Page builders like Elementor and Divi had extra div wrappers, CSS, and JavaScript to your site. A simple thing you can do is reduce the number of columns/widgets in your design. This video shows you how to reduce DOM elements in Elementor but the concepts can be used elsewhere.

It can be tedious to replicate your design while trying to reduce DOM elements, JS, CSS, and fonts created by page builders. If you plan on using a page builder, this may require more work.

Heavy page builders can have a negative impact on performance (source: Gutenberghub)

This is why you’ll see many people in Facebook Groups moving away from Elementor/Divi to more lightweight builders such as Gutenberg, Oxygen Builder, GeneratePress, and Kadence.

Summary

• Avoid heavy page builders
• Lazy load images, videos, comments, etc
• Reduce number of fonts, weights, families
• Merge multiple widgets into one single widget
• Avoid mega menus, spacers, and too many inner sections
• Remove blank columns used for alignment and use margins instead
• Disable unused features/modules in page builders/plugins
• Consider removing elements causing high DOM size on mobile
• Remove unused CSS and JavaScript with asset unloading plugins
• Hard code menu, header, footer, and sidebar instead of using a page builder
• If using Elementor, enable “Optimized DOM Output” in Experiments settings
• Use HTML size as a benchmark in Chrome Dev Tools → Network → HTML Size

 

2. Avoid enormous network payloads

Large network payloads means you need to reduce page size.

PageSpeed Insights tells you which files have a large transfer size. It can be anything from a single image to JavaScript (i.e. third-party JS), fonts, or CSS. Optimize files with the largest size.

Your GTmetrix Waterfall chart can sort JavaScript files by the largest size:

Summary

• Optimize CSS/JS items listed throughout this guide
• Minify, defer, delay, and remove unused JavaScript
• Use a better caching plugin and use server-side caching
• Avoid huge images (compress them and consider WebP)
• Reduce impact of third-party code (try hosting files locally)
• Identify plugins loading heavy JavaScript and optimize or remove them
• Optimize fonts by hosting them locally, using woff2, and preloading them

 

3. Avoid large layout shifts

Layout shifts were briefly covered in the CLS section, but let’s dig deeper.

Google’s Layout Shift Debugger and even the “avoid large layout shifts” recommendations in PSI may not be useful because they don’t say how to actually improve CLS. It could be caused by fonts (FOIT) which can affect the entire page. It could also be from not specifying dimensions of images, iframes, and advertisements. Here are common ways to actually improve the CLS score.

Fix FOIT, FOUT, FOUC – these are a flash of invisible text, unstyled text, or unstyled content. Using font-display: swap (to ensure text remains visible during webfont load) and optimizing CSS delivery (done in WP Rocket and most cache plugins) can fix CLS caused by fonts and CSS.

Specify dimensions of images, videos, iframes – this refers to “use explicit width and height on image elements” and means you need to add the element’s width + height in the HTML or CSS.

width="680" height="250" />

width="680" height="340" >

width="680" height="450" allowfullscreen="" loading="lazy"> 

Reserve space for ads and dynamic content – ads without dimensions can also cause layout shifts. Inside the ad’s div code, include the ad’s most commonly used size (or the largest size).

Use CSS transform properly for animations – instead of changing the width and height attributes for animations, try using the CSS transform properly instead to avoid layout shifts. And when moving your elements, use transform: translate() instead of top, bottom, left, right.

• Avoid TTF fonts (slower than WOFF)
• Specify dimensions of images, videos, iframes
• Fix FOIT (ensure text remains visible during webfont load)
• Reserve space for ads by specifying common size in ad’s div code
• Reserve space for other dynamic content to avoid pushing down content
• Delay JavaScript to avoid showing new content unless triggered by user interaction
• When moving elements, use transform: translate() instead of top, bottom, left, right
• Use the CSS transform properly for animations, instead of changing the width/height
• Fix issues with WP Rocket’s “optimize CSS delivery” and “critical CSS” to avoid FOUC

 

4. Avoid multiple page redirects

Eliminate unnecessary redirects caused by the wrong HTTP(S) and WWW vs non-WWW version of your site. Plugins and third-party code can also create redirects. If you must use them, add redirects on a server level instead of using a redirect plugin which is always faster.

 

5. Avoid serving legacy JavaScript to modern browsers

If you’re serving legacy JavaScript, it probably means you’re using a WordPress plugin or theme that uses outdated code and the developer hasn’t stayed on it. Contact them and let them know.

 

6. Defer offscreen images

This means you need to lazy load images.

Some images (such as background images) aren’t always lazy loaded. For example, background images aren’t lazy loaded in WP Rocket if they’re added in a CSS file or internal CSS

You may also want to try another method for lazy loading. Try disabling lazy loading in your cache plugin and using native lazy load or the Optimole plugin instead. Then test the results of each method. Some page builders also support lazy load which can ensure better compatibility.

loading="lazy" src="https://mydomain.com/wp-content/example.png" />

Summary

 

7. Efficiently encode images

Optimize images by compressing them (ShortPixel and Photoshop are popular methods).

Google uses an 85% compression level and will flag images if they have a potential savings of 4KiB or higher – that’s why many image optimization plugins use an 85% default compression.

Serving images from a CDN also has a range of benefits. Flying Images uses Statically’s CDN and automatically rewrites image URLs to be served from the CDN. Make sure this happens if using one, otherwise you can enable CDN rewrite in Perfmatters or use a CDN rewrite plugin.

https://domain.com/wp-content/uploads/2021/01/example.png

https://cdn.domain.com/wp-content/uploads/2021/01/example.png

Summary

• Compress images at 85%
• Consider WebP
• Lazy load images
• Serve images from a CDN
• Specify image dimensions
• Use ShortPixel Adaptive Images to serve smaller images to mobile

 

8. Eliminate render-blocking resources

Render-blocking resources are usually fixed by deferring JavaScript.

Autoptimize and Async JavaScript usually do the trick. In Autoptimize, you’ll want to optimize CSS and JavaScript code, as well as aggregate CSS and JS files. In Async JavaScript, just install it and click “apply defer.” For the OMM site, this reduced render-blocking resources from 7 to 1. This may disable settings in your cache plugin (in WP Rocket, it disables minify/combine CSS/JS) and lets Autoptimize handle these files. This is good since Autoptimize usually does a better job.

You’ll also want to inline critical CSS.

Most cache plugins have an option to optimize CSS delivery and create a fallback critical CSS. For example, WP Rocket has instructions to make sure the “optimize CSS delivery” is working.

Summary

• Defer JavaScript
• Inline critical CSS
• Removed unused CSS/JS
• Avoid jQuery-heavy plugins
• Use lightweight forms and sliders
• Reduce impact of third-party code

 

9. Enable text compression

Enable GZIP or Brotli. Brotli has a better compression ratio than GZIP (it’s faster) and can be enabled in Cloudflare’s dashboard under Speed > Optimization. Some hosts also support Brotli.

 

10. Ensure text remains visible during webfont load

Fonts can cause FOIT (flash of invisible text) which can also cause layout shifts.

This happens when fonts take longer to load than the rest of this page. It looks like this:

FOIT: flash of invisible text  – source: malthemilthers.com

To prevent this, edit your font’s CSS file and in the font-face, you’ll see a property called font-display. This can be set to auto, fallback, optional, etc. The one you want is font-display: swap. While fonts are loading, font-display: swap uses the fallback font until the custom font is ready. As the recommendation in PSI suggests, this ensures text remains visible during webfont load.

Google Font With Font-Display:

@font-face { font-family: Lato; font-display: swap; }

Google Font Without Font-Display:

@font-face { font-family: Lato; }

Other Font With Font-Display:

https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap

Other Font Without Font-Display:

https://fonts.googleapis.com/css2?family=Lato:wght@100

If you’re not sure where a font’s CSS file is located, search for it using String Locator.

Alternatively, you can use one of the following plugins to add font-display: swap:

 

11. Keep request counts low and transfer sizes small

Reduce the number of requests and make them smaller.

This is a generic recommendation, but it’s a good reminder on which parts of your WordPress site you should focus on: JavaScript, CSS, fonts, images, media, third-party code, or documents. For example, reduce the number of fonts, host them locally, and preload them to improve fonts.

 

12. Minify CSS And JavaScript

Enable minify CSS and JavaScript (typically done in your cache plugin or you can use Autoptimize). This removes unnecessary characters and makes the files smaller. If it breaks your website, view your source code, find the problematic file(s), and exclude them from minify.

 

13. Minimize main-thread work

Long main-thread tasks are usually from heavy JavaScript and CSS.

This can be from jQuery-heavy plugins, page builders, and third-party code. Many JavaScript and CSS optimizations are already covered in this guide (removed unused JavaScript, CSS, third-party code). Look at your “avoid long main-thread tasks” report as well as “reduce the impact of third-party code” which shows you which files block the main-thread the longest.

The main-thread is where browsers process most tasks related to your page load including layouts, parsing CSS/HTML, building DOM, and executing JavaScript. Chances are if you need to minimize main-thread work, your report also has errors related to JavaScript, CSS, and DOM. Focus on those individual items and your main-thread work score should also improve.

• Reduce impact of third-party code
• Remove unused JavaScript and CSS
• Avoid jQuery-heavy plugins and themes
• Minify CSS and JavaScript (sometimes combine)
• Make sure critical CSS is working if enabled in your cache plugin
• Hard code areas of your site instead of using heavy page builders

 

14. Preconnect to required origins

Preconnect establishes an early connection to third-party domains.

This is typically done with external fonts and CDNs where should also use the crossorigin attribute. You can add preconnect tags to your header.php or use a plugin that supports preconnect. These should be used sparingly and tested to make sure they have a positive impact on your load times. That’s why Google only says to preconnect to required origins.

WP Rocket automatically preconnects your CDN URL (in the CNAME field of your CDN settings) and Google Fonts (fonts.gstatic.com) if your website uses them. WP Rocket does not let you preconnect to other third-party domains – add manually or use another plugin instead.

preconnect" href="https://onlinemediamasters.com/https://fonts.gstatic.com" crossorigin>
preconnect" href="https://onlinemediamasters.com/https://cdn.yourdomain.com" crossorigin>

Plugins That Support Preconnect

• Perfmatters
• Autoptimize
• Asset CleanUp
• LiteSpeed Cache
• Pre* Party Resource Hints
• WP Rocket (only CDNs and Google Fonts if your site uses them)

 

15. Preload key requests

Preload tells browsers to download critical resources ASAP.

It’s commonly done with LCP image(s) like your background image and logo, fonts, CSS, or JavaScript. It should also be used sparingly and tested to make sure it has a positive impact.

You can also preload links so when users hover over a link, the page is downloaded in the background. By the time the visitor actually clicks the link, the page is loaded almost immediately. WP Rocket and the Flying Pages plugin both support preloading links. Most plugins that support preconnect (listed above) also support preload either fully or partially.

Which files you preload depends on your site, but you can easily view the source code of WP Rocket, Kinsta, or Backlinko and see which type of files they preload, preconnect, and prefetch.

preload' href="https://onlinemediamasters.com/image.png' as="https://onlinemediamasters.com/image'>
preload' href="https://onlinemediamasters.com/style.css' as="https://onlinemediamasters.com/style'>
preload' href="https://onlinemediamasters.com/script.js' as="https://onlinemediamasters.com/script'>
preload' href="https://onlinemediamasters.com//font.woff2' as="https://onlinemediamasters.com/font' crossorigin>

 

16. Preload largest contentful paint image

Remember your largest contentful paint element from the LCP section?

If your LCP element is an image, you may see a recommendation to preload it. Follow the steps in the previous section to preload your largest contentful paint image. Remember to exclude all above the fold images from lazy load (since lazy loading key images would be counterintuitive).

preload' href="https://onlinemediamasters.com/https://webolutions.com/wp-content/
uploads/2019/11/Webolutions-Home-Page-Hero-Balloon.jpg' as="https://onlinemediamasters.com/image'>

 

17. Properly size images

Resize large images to smaller dimensions.

You can usually find the correct image dimensions in your theme documentation, otherwise GTmetrix legacy reports provide the correct dimensions under “serve scaled images.” If you take a lot of screenshots like me, try using the Zoom Chrome Extension + Awesome Screenshot. The Zoom Extension lets you set the perfect zoom level so no resizing is needed (just cropping).

• Find large images in your report
• Resize them to correct dimensions
• Find the correct dimensions in GTmetrix legacy reports
• Crop/resize images before uploading them (i.e. Photoshop or GIMP)
• Create a cheat sheet for dimensions of your blog, sidebar, featured images, etc

 

18. Reduce impact of third-party code

Find third-party code in your report and optimize it, or remove it if you don’t need it.

Google Analytics – host locally using WP Rocket, CAOS, Flying Analytics, or Perfmatters. Use a smaller tracking code (analytics-minimal.js is 1.5 KB instead of roughly 51.5 KB from gtag.js v4 or gtag.js). CAOS and Perfmatters can use smaller tracking codes, and Perfmatters can disable remarketing/advertising for analytics.js which prevents a 2nd request to DoubleClick. If you don’t use specific features in Google Analytics, try using a smaller code and disabling features.

Google Fonts – host locally instead of serving fonts from https://fonts.gstatic.com or https://use.fontawesome.com. Can be done manually using transfonter.org or with OMGF. Preload fonts if they’re being served from your server or preconnect them if they’re served from Google Fonts or Font Awesome. Reduce the number of font families, weights, and icons.

Cloudflare, Google CDN, Other CDNS – you may be serving third-party code from your CDN, in which case the CDN will show error(s) in PageSpeed Insights instead of the original third-party domain. If you’re using Cloudflare, try disabling their Rocket Loader and unused apps. And if you’re still getting errors for your CDN, try adding the async attribute to the JavaScript.

Google Tag Manager – CAOS can host analytics.js/gtag.js locally. You can also delay GTM using WP Rocket or Flying Scripts and clean up your tags. Finally, avoid hardcoding tags in the header.

Google Maps – take a picture of the map and link it to driving directions. If you have to use a map, only use it on your contact and local pages. Enable “lazy load iframes” in your cache plugin.

Google AdSense – lazy load ads or delay the JavaScript using WP Rocket or Flying Scripts. Remember to reserve space for advertisements (using div containers) to avoid layout shifts.

YouTube – lazy load videos, replace the YouTube iframe with a preview image, and delay it’s JavaScript. If you’re using Elementor, Adam from WPCrafter has a clever way to embed videos.

Social Media – use a fast social sharing plugin like Grow Social which was the fastest social sharing plugin in WP Rocket’s test. Embedded widgets and like boxes are also third-party code.

Gravatars – delay Gravatars and use a local Gravatar image using WP User Avatar (I use this plugin and delay both Gravatars and wpDiscuz, and now my comments load lightning fast). You can also try caching Gravatars, but I haven’t found a Gravatar cache plugin that worked for me.

Summary

• Host fonts/analytics/GTM locally
• Use a smaller Google Analytics tracking code
• Replace YouTube iframes with a preview image
• Delay third-party code with WP Rocket or Flying Scripts
• Use preconnet and prefetch to load third-party scripts early

 

19. Reduce JavaScript execution time

Most JavaScript tips are already covered in this guide (e.g. remove unused JS). Core web vitals put a heavy emphasis on optimizing JavaScript which can improve multiple items in your report.

• Remove unused JavaScript
• Minify and (sometimes) combine JavaScript
• Optimize JavaScript with Autoptimize + Async JavaScript
• Use Brotli, avoid heavy page builders, and delay non-critical JavaScript
• Optimize high impact JavaScript files in your PageSpeed Insights report

 

20. Reduce server response times

TTFB is mainly determined by hosting.

Hosting affiliate commissions are typically $150/sale which is why people’s recommendations are so biased and “off.” Many speed tests (including Matthew Woodward’s and Darrel Wilson’s) have also proven to be biased because they used caching + CDNs on some hosts, but not others.

I recommend joining the WordPress Hosting Facebook Group (and WP Speed Matters). Search those groups for Facebook polls and conversations taken on “the best hosting” and you’ll quickly see some trends. Look at Backlinko’s PageSpeed test and browse reviews on TrustPilot.

A good rule of thumb is to skip shared hosting all together and go straight to cloud especially if you’re running heavy plugins or page builders. Cloudways, GridPane, LiteSpeed, and RunCloud are generally good options while SiteGround, EIG (i.e. Bluehost), and GoDaddy are usually not.

I personally use Cloudways DigitalOcean.

 

21. Remove unused CSS

The first step to removing unused CSS is to use an asset unloading plugin (such as Asset CleanUp or Perfmatters) to disable CSS files where they’re not being used (covered in step 22).

There are also plugins/tools to remove unused CSS. The premium RapidLoad plugin by Autoptimize automates removing unused CSS. Free online tools like PurifyCSS and Unused-CSS may also be worth a try, but can be a little difficult if you don’t know what you’re doing.

Make sure your cache plugin is configured properly to optimize CSS. For example, WP Rocket can optimize CSS delivery which generates critical CSS needed for above the fold content. It also loads all other CSS files asynchronously, that is deferred, without render-blocking. Don’t forget to ensure optimize CSS delivery is working and to minify (and sometimes combine) CSS.

 

22. Remove unused JavaScript

Removing unused JavaScript can improve multiple items:

• Main-thread work
• JavaScript execution time
• Enormous network payloads
• First input delay + total blocking time
• And of course, remove unused JavaScript

Use Asset Unloading Plugins – Asset CleanUp and Perfmatters are popular plugins for removing unused JavaScript and CSS. I wrote a comparison of the two, but I use Perfmatters because the UI/UX is easier. Both have bloat removal options and other speed features (many of which are not included with WP Rocket and other cache plugins). Asset CleanUp pro also lets you remove custom CSS while the free version (and Perfmatters) do’nt. Choose the one for you.

Install a plugin, edit a page/post, and see scripts/styles loading on the page. A classic example is disabling contact forms everywhere but the contact page, but there are more things you can do.

• Disable slider plugin on pages that don’t use sliders
• Disable rich snippets plugin on pages that don’t use rich snippets
• Disable affiliate link management plugin on pages that don’t use aff links
• Disable social sharing plugin on all pages (since it’s usually for blog posts)

Remove Unused Page Builder JS/CSS – Elementor and other page builders load CSS and JavaScript files you may not be using. For example, you might be able to disable elementor-sticky, dialog, share-link, swiper, animations, icons, and wp-block-library if you don’t use them.

Summary

• Remove unused JavaScript with an asset unloading plugin
• Use the plugin to also disable unused JS/CSS from page builders
• Activate “Improved Asset Loading” in Elementor Experiment settings
• Reduce impact of third-party code
• Delay JavaScript with WP Rocket or Flying Scripts
• Defer JavaScript with Autoptimize and Async JavaScript
• Use a smaller Google Analytics tracking code (minimal.js)
• Disable WooCommerce scripts and styles on non-eCommerce content (Perfmatters and Disable WooCommerce Bloat both do this)

 

23. Serve images in next-gen formats

Convert JPEGs/PNGs to WebP which typically have 26% smaller files sizes than PNGS. This can be done using plugins like ShortPixel or WebP Converter For Media. Most image optimization plugins supporting WebP have two options: deliver WebP images via .htaccess or tag.

If you’re not ready to go full-blown WebP, use an online WebP Converter to only convert individual images recommended in your PageSpeed Insights report. However, Safari versions before the Big Sur update do not support WebP so they will not show the image. So if you use a WebP converter to manually upload images to WordPress, test them in multiple browsers. Otherwise, most image optimization plugins serve WebP images only to supported browsers.

 

24. Serve static assets with an efficient cache policy

Change the cache expiration to 180 days (6 months).

First, view files with short cache expirations in your PSI report (usually fonts, images, etc). How you change the cache expiration depends on your setup, but this is typically done in your cache plugin, .htaccess file, CDN, or hosting dashboard. As an example, cache plugins like WP Rocket will use a 4 month expiration for images/fonts. Changing it to 6 months makes this item green.

• In Cloudflare, change browser cache TTL to 6 months
• Some hosts have cache expiry settings in the dashboard
• In W3 Total Cache, make sure expires header lifetime is over 15552000s
• If using a plugin for local analytics (i.e. CAOS), change cookie expiry period to 180 days
• In WP Rocket, edit your .htaccess file (use the Htaccess File Editor plugin if you don’t know how) and change the file’s cache expiration to 6 months (i.g. instead of 4 months)

 

25. Use explicit width and height on image elements

Add a width and height to your image’s HTML (same thing as specify image dimensions in GTmetrix legacy reports). Or enable “add missing image dimensions” in WP Rocket’s Media settings. Remember to also specify dimensions of video, iframes, and ads. These improve CLS.

width="680" height="680" />

 

26. Use passive listeners to improve scrolling performance

I borrowed this from Gijo Varghese’s response in the WP Speed Matters Facebook Group:

Locate the JavaScript file/code which adds “addEventListener” and modify the script to something similar to: element.addEventListener(“mouseup”, handleMouseUp,{ passive: true.

 

Wrapping It Up

WordPress speed isn’t as easy as configuring a cache plugin anymore.

Sites need to be made lean from the ground up. From hosting to page builders (or lack thereof), plugins, fonts, CDNs, and even how you design your pages all have an impact on core web vitals.

Just like SEO, web vitals have started to encompass more and more things. And it’s up to us to stay on top of it. That’s why if I missed any common solutions, I would appreciate you leaving me a comment so it can help other people too.

Cheers,
Tom

About Tom Dupuis

Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-04-19 21:17:44.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.