There is a seemingly endless number of things you can do to optimize your site for Core Web Vitals. It can feel overwhelming. And there’s no “one-size-fits-all” solution, because each site has its own unique setup and stack of themes, plugins, and tools.
The good news is that there are several best practices that, when implemented, can have a strong positive effect on Core Web Vitals across all sites.
In this post, we’ll go over 5 key areas where you can make improvements on your site:
- Optimize your images
- Optimize resource delivery
- Optimize page caching
- Optimize your fonts
- Optimize your code
Some optimizations may be easy for you to make yourself, while others may require the assistance of your developer. Do what you feel comfortable with and seek help where you need it.
You may want to start with an initial assessment of your site to know which areas need the most improvement. Check out our playbook here to learn how to diagnose specific issues on your site.
Plus, you’ll find AdThrive publisher-exclusive discount codes for popular plugins WP Rocket and Perfmatters at the end of the post!
Optimize your images
Photos help establish your brand, convey a story, demonstrate how to make a recipe or craft, and invoke certain emotions in your readers. You spend so much time creating beautiful images for your site and you don’t want those very images to negatively affect your user experience.
Luckily there is a lot you can do to optimize images and other media to boost your site speed and Core Web Vitals scores.
How images can affect your Core Web Vitals scores
Images and LCP: Largest Contentful Paint (LCP) measures the length of time it takes the largest piece of content in the viewport to load (which could be an image or other media). By optimizing your images you can help ensure quick load times for a strong LCP score.
Images and CLS: Cumulative Layout Shift (CLS) measures the amount of page shift that happens on your site. You can improve your CLS score by setting up your images and media with the correct dimensions and reserving space for them to load on the page. Having elements like your logo at the top of the page formatted correctly with the exact width and height dimensions, for example, can prevent annoying layout shifts as the page loads.
How to optimize your images for Core Web Vitals
There are lots of ways to make your images speed-friendly — image optimizations make up 7 of our 23 site optimization suggestions!
1. Identify image issues with the Image Analysis Tool by Cloudinary.
Enter any URL to get back an analysis of the images on that page. Cloudinary will provide you with an overall Page Image Score, the overall and individual weight of your images, and how much you could reduce image file sizes with different image optimizations.
2. Compress your images
Make it a habit to compress your images — whether you do that before uploading them to your site or use a plugin to compress them after upload.
- Compress before uploading: use a tool like ImageOptim, JPEGmini, or a website like Squoosh, jpeg.io, or Kraken.io
- Use a plugin: popular options include ShortPixel, Imagify, and Smush
3. Adopt modern web-first formats like WebP and SVG
Transforming your assets into modern image formats like WebP or SVG is a great way to reduce file size while preserving quality. According to Google, WebP lossless images can have a 26% smaller file size compared to PNGs, while WebP lossy images can have a 25–34% smaller file size than a comparable JPEG image format.
SVG is a great, vector-based format for logos and icons that can help reduce the file size while keeping the image scalable and clear. Check out this WP Engine guide on how to securely enable SVG support in WordPress.
4. Serve responsive images in the appropriate dimensions for each device
Different devices display images at different sizes. If you display images at 1200px wide on desktop and don’t specify a smaller size for smaller screens, the full 1200px image will load on mobile as well, even though it displays at much smaller dimensions. These larger-than-necessary images represent excessive kilobytes of data that your readers are forced to download.
You can apply HTML attributes to your images, such as “srcset” and “sizes”, to always serve the appropriately-sized version of the same image on each device type.
Here are a few helpful guides to help you learn how to serve responsive images:
- Google’s Serve responsive images guide
- Elad Shechter’s Complete Guide to Responsive Images
- CSS-Tricks’ A Guide to the Responsive Images Syntax in HTML
5. Minimize or remove images above the fold — especially on mobile
When possible, remove the large media you have above the fold in the viewport to help improve load time and your LCP score. If you can ensure that text is the largest content on the screen when your page first loads, you will have a better LCP than if an image is identified by browsers as the largest piece of content at load.
6. Make sure to specify image dimensions
Setting the height and width dimensions of the images on your site sets you up for less page shifting and a better CLS score.
WP Rocket is offering an exclusive discount for AdThrive publishers! Sign in to your AdThrive dashboard account at the end of this post to get the code.
7. Lazy load images and videos below the fold
Lazy loading defers the loading of non-essential resources until they’re actually needed. Serving content to users only if it gets requested can help save on bandwidth and improve the page’s performance. Learn more about lazy loading here.
Optimize resource delivery
8. Evaluate your host and hosting plan and fine-tune your hosting service
A good host can make a world of difference in your site’s speed and delivery! Check out our resources on how to:
- Make sure your hosting plan is still the right fit
- Look for the signs it’s time to re-evaluate your current plan or provider
- Ask your host to help set up your site for optimal Core Web Vitals scores
9. Use a content delivery network (CDN)
A CDN can help boost your site’s performance by using a distributed network of servers to deliver resources to the users. It can help reduce server load, speed up delivery, and manage spikes in traffic.
CDN servers are located closer to the user than the host server in most cases and therefore have a quicker round-trip time (RTT), reducing latency.
Ideally, you should be using a CDN to serve your entire site from cache, which saves any future round trips to your hosting server once the page has been requested and cached by the CDN.
Check out Google’s helpful guide here to learn more about selecting the right CDN for your site and fine-tuning for maximum performance.
10. Preload critical assets to reduce page load time
You can cue your browser to fetch a certain resource sooner than it would normally discover it by indicating it should preload any resource you believe is important for the current page (such as an image that’s been identified as your Largest Contentful Paint and is affecting your LCP score).
In the “Opportunities” section of your Lighthouse report, you can see if you have opportunities to “preload key requests” and what those requests are.
Learn more about preloading critical assets via Google’s guide here. This may be a step where you need to loop in a developer. Just be sure not to preload any ad-related assets, to make sure your ads perform optimally.
Optimize page caching
11. Ask your host to make sure page caching is properly set up on your site
Page caching can help speed up your site by serving saved versions of some elements. Make sure to ask your host if page caching is set up optimally on your site and check out this post for other things you can ask your host to help you do.
12. Use a plugin to help with caching — like WP Rocket
WP Rocket is a popular plugin that can help with page caching and many other optimizations. See the bottom of this post for an AdThrive-exclusive discount code!
Optimize your fonts
13. As a best practice, stick to 2–3 fonts on your site
Not only does keeping the number of different fonts on your site to a minimum make it look more professional and well-structured, but it can also help reduce load time and undesirable page shift (CLS).
14. Use system fonts when possible
System fonts are a great option as they are already included on the reader’s device. This means that these fonts don’t require downloading when a reader visits your site, freeing up bandwidth and reducing the number of requests your site requires to properly load.
To help speed up your site, think about places you might be able to leverage system fonts in lieu of custom fonts. For example, system fonts might be a great option for body text and you could reserve your custom fonts for headings or post titles.
15. Preload fonts
This ties into the preload critical assets tip listed above. You may want to preload your fonts to help reduce load times and those annoying shifts on your site. If you’re using Google fonts on your site, WP Rocket has an option to preload them.
16. Avoid invisible text during font loading
Custom fonts can take some time to load due to their size and the way they get applied to a webpage. Browsers haven’t always handled this time consistently, with some browsers choosing to display no text at all until the custom font arrives (a “Flash of Invisible Text”, also known as FOIT), and others opting to show a fallback font to readers while the browser is waiting to display the custom font (“Flash of Fallback Text”, or FOFT).
By using font-display features, you can now standardize this behavior across browsers. Pro tip: “font-display: optional” guarantees no font-based layout shifts!
17. Use an optimal font format
There are a few different font formats available, and the ones you choose to use are often dictated by your site’s browser support policy: formats like EOT, TTF are old and clunky, but they do work in very old browsers; WOFF, and WOFF2 on the other hand are much faster but only work with more modern browsers.
That said, WOFF and WOFF2 enjoy widespread support. WOFF2 is the preferred font format choice offering a ~30% reduction in file size compared to other formats and it has a 94% browser adoption rate. WOFF may be a good choice for a fallback format as it offers font compression as well and is supported by 98% of browsers.
The good news is, if you’re using a service like Google Fonts, they take care of all of this for you. Otherwise, you can ask your developer to make sure you’re using the best font format.
18. Only load the fonts you need
Font files can be surprisingly large. By default, many web fonts and font families will load the entire suite of font styles, character sets, and glyphs, which you may not need. To help reduce this, you can opt to load only the fonts and font styles that your site is actually using.
One plugin that can help with this is Perfmatters — it has settings to turn off Google Fonts and unnecessary elements you might not be using on your site, like emojis. See the end of this post for an exclusive discount code for AdThrive publishers!
Bonus! If you use Google Fonts, OMGF Pro is another great plugin to help optimize font delivery. AdThrive publishers get a discount on the plugin AND on an expert configuration service to set it up for your site — unlock your discount at the end of the post!
Optimize your code
19. Inline critical CSS
Make sure to inline CSS that is critical to the general design and layout of your site — another optimization you can turn on in the WP Rocket plugin. Inlining critical CSS can help minimize the number of files the browser needs to request from the server to load your initial layout and render the first content on the page.
22. Optimize CSS delivery
It’s safer and faster to self-host your CSS and any other static assets, versus relying on a third-party, so make sure your CSS is self-hosted. Also, your page won’t start rendering until all of its CSS has been downloaded, so make sure the CSS you do have is as small as possible. This is another great area to loop in your developer and make sure your CSS is optimized.
22. Minimize third-party scripts
Many plugins need to run third-party scripts to function, but these scripts can slow down your site. You’ll need to find the right balance between helpful tools versus fast page performance.
Evaluate your plugins to weigh the cost-benefit. Plugins such as social sharing buttons, media embeds, and comment system tools might be slowing down your site and not worth the payoff in performance. Find places where you can minimize these scripts as much as possible or find different versions of those plugins that perform faster.
23. Async or defer scripts when possible
There are two attributes you can use to help speed up the page rendering and reduce this delay:
- Async: Asynchronous loading allows you to load the script at the same time as the browser continues to render the rest of the page. The script runs the moment it arrives, at which point it will interrupt the browser’s rendering and execute the file.
- Defer: Deferring your scripts also allows the browser to load the file in parallel to rendering the rest of the page, but instead of interrupting the browser when the file arrives, the file is guaranteed to execute after the page has finished loading.
Your Core Web Vitals roadmap
Knowledge is power! Start here:
Dig deeper to understand each metric and why it’s important for user experience:
- What is Largest Contentful Paint (LCP)?
- What is First Input Delay (FID)?
- What is Cumulative Layout Shift (CLS)?
Benchmark your site’s Core Web Vitals so you understand your starting position:
Make a step-by-step plan to improve Core Web Vitals:
- Your four-step playbook for diagnosing and improving Core Web Vitals + a handy one-sheet to go over with your developer or host
Tackle low-hanging fruit:
- How to choose the right hosting service for a speedy site
- 5 tell-tale signs you’ve outgrown your hosting service
- How a good host can help boost page speed and improve Core Web Vitals + a checklist for hosting optimizations
- Use a CDN to help speed up your site
- 23 optimizations to improve your page speed and Core Web Vitals scores [You’re here!]
Additional helpful resources:
- Read more about optimizing your images in this guide from Google.
- Google Web.Dev: Fast load times: Techniques for improving site performance
- The Daily Egg: 20 Ways to Speed Up Your Website and Improve Conversion in 2020
- Search Engine Watch: Core Web Vitals report: 28 Ways to supercharge your site
- CSS Wizardry: The Fastest Google Fonts
- Replace animated GIFs with video files
Exclusive plugin discounts for AdThrive publishers
Sign in below to unlock your AdThrive-exclusive WP Rocket and Perfmatters discount codes and start using these valuable plugins to help optimize your site!
AdThrive Publisher-Exclusive content unlocked!
AdThrivers can use code ADTHRIVE20 to get 20% off the WP Rocket plugin.
AdThrivers can use code ADTHRIVE20 to get 20% off the Perfmatters plugin. This is good for first-time purchases, and there is an automatic 15% renewal discount.