WP Core Web Vitals :: Web Fonts

Take back control of your website's speed with WP Core Web Vitals

lighthouse 100 score
lighthouse 100 score

WP Core Web Vitals Web Fonts overview:

Web fonts are important to websites because they allow designers and developers to use a wider range of typography options beyond the basic fonts installed on most devices. This helps create a more engaging and visually appealing website that reflects the brand identity and enhances the user experience.

Most of the times your theme will give you no control whatsoever over your web fonts and icons sets. This is all about to change!

How do Web Fonts affect the Core Web Vitals?

1. Lay out Shift

When fonts the page might be rendered with a fall back font. When the fallback font is swapped for the final web font a 'Flash Of Unstyled Text (FOUT)' might create al ayout shift. Preloading the web-fonts might help prevent that lay-out shift in many cases

2. Third party hosted fonts

Third party hosted fonts are easy to integrate but bad for the Core Web Vtials. Third party fonts require 1 or 2 extra network connections, a render blocking stylesheet and cannot be preloaded.

Did you know ...

"WP Core Web Vitals outperforms other pagespeed plugins by 160% on average!"

WP Core Web Vitals - Web Fonts  optimization

Page Caching has a few options that will help you optimize the Web Fonts for your WordPress site.

  • Improve font rendering
  • Preload fonts
  • Remove google fonts & Adbode Fonts (typekit)
  • Lazy load icon sets
  • Icon set classlist Selector
Website Core Web Vitals Audit

Improve font rendering

Improve font rendering will add 'text-rendering: optimizeSpeed;' to your stylesheet. This is something that you could have done yourself but probably didn't :-)

Recommended setting: yes

Preload fonts

Preload fonts has been moved to the preload tab. Please add your fonts there to be preloaded more effectively!

Recommended setting: it depends

Remove google fonts & Adbode Fonts (typekit)

Remove Google fonts & Adbode Fonts (typekit) will remove all Google fonts & Adbode Fonts references from your page. This is a good option if your template injects these font references even when you might  not use them

Recommended setting:maybe

Lazy load icon sets

Lazy load icon sets  will prevent your icon sets from being queued for download super early in the loading process! Early icons sets can compete for resources with other, more important resources like your main web fonts.

Recommended setting:yes

Core Web Vitals

Frequently asked questions

Do I need to lazy load images?

Yes, you do. From a pagespeed perspective it makes to sense at all to load images early during page-load when you will know for certain they are not visible to the visitor!

Do I need to disable other image optimization plugins?

Please disable all other lazy load plugins. You do not need to disable plugins that generate responsive images or optimize image filesize. As a matter of fact we encourage you to install plugins like WebP Express

Can optimizing images cause issues with my WordPress site?

Yes it can, but that is an easy fix. If you let us look up the width and height of an image make sure the image cannot grow out of it's container by adding img{max-width:100%;height auto} to your stylesheet.

WP Core Web Vitals Web-fontsCore Web Vitals WP Core Web Vitals Web-fonts