How to fix Cumulative Layout Shift in WordPress (Core Web Vitals Item)
How to fix Cumulative Layout Shift in WordPress (Core Web Vitals Item)
A simple guide to fixing cumulative layout shift (CLS) in WordPress which is currently 15% of core web vital scores.
Cumulative layout shift is when things “shift” on your website and can be seen in Google’s Cumulative Layout Shift Debugger (https://webvitals.dev/cls). CLS issues are often caused by fonts, asynchronous CSS (i.e. Optimize CSS Delivery in WP Rocket), not setting a fallback critical CSS, elements without specified dimensions, and animations that don’t use transform/translate properties.
Written article: https://onlinemediamasters.com/cumula…
0:00 - Intro
1:36 - Ensure text remains visible during webfont load
4:52 - Preload fonts
5:46 - Disable asynchronous CSS
7:28 - Specify dimensions
8:14 - Use CSS Transform property in animations
Tools/Resources Used In This Video
Swap Google Fonts Display https://wordpress.org/plugins/swap-go…
String Locator https://wordpress.org/plugins/string-…
10% off WP Rocket Coupon: https://onlinemediamasters.com/go/wp-…
OMGF: https://wordpress.org/plugins/host-we…
FOIT vs. Fout: https://www.malthemilthers.com/font-l…
Font-display: swap issues: https://wpmudev.com/forums/topic/font…
Critical Path CSS Generator: https://www.sitelocity.com/critical-p…
Happy Addons for Elementor: https://wordpress.org/plugins/happy-e…
Oxygen Builder Github Solution: https://github.com/soflyy/oxygen-bugs…
Like and subscribe if you found this helpful :)
Peace out,
Tom
Content
0.24 -> what's up this is tom and in this video i'm going
to show you how to fix your cumulative layout
4.56 -> shift in wordpress now you can use gtmetrix
to measure this but i really recommend using
10.16 -> the cumulative layout shift debugger on the web
vitals website i'll leave a link to this in the
15.6 -> video description but this actually creates a gif
showing you all the shifting elements on your site
21.2 -> if you load your site in a browser it's
probably too quick for you to notice
25.28 -> but things might be shifting and this can be
related to fonts asynchronous css animations
32.16 -> or things that don't have specified dimensions
like images iframes or even ads you can also use
38.56 -> pagespeed insights to see any elements that have
large layout shifts or in web page tests they have
45.2 -> a cumulative layout shift score and if you click
this it will also show a gif cls is currently
51.04 -> 15 of core web vitals it used to be 5 but just in
the last version 8 they increased it from five to
59.28 -> fifteen so just know that there is more weight on
cls in core web vitals now and to improve it you
65.92 -> want to aim for a cls score of .1 or less anything
over will either need improvement or score as poor
73.92 -> i currently have a cls score of zero but if
you update wp rockets sometimes this can change
80.8 -> i feel like there's a lot of issues with cls and
wp rocket at the moment and they need to figure
86 -> things out and i did write an article covering
cumulative layout shift in wordpress which i'll
91.36 -> leave a link to in the video description
but without further ado let's get into it
96.96 -> fonts are a very common issue when it comes to
cumulative layout shift now if you check your
101.6 -> pagespeed insights report and you see you need to
ensure text remains visible during web font load
107.44 -> then chances are they're contributing to your cls
the first step to optimizing fonts is to make sure
113.92 -> they are hosted locally and not being pulled from
third-party font websites like fonts.gstatic.com
120.72 -> if they are you can use plugins like omgf or
transponder to host your fonts locally and
127.6 -> this will make it so your fonts are being served
from your website mine is onlinemediamasters.com
135.44 -> but you'll see that none of my fonts are being
served from fonts.g static.com the next step to
141.36 -> optimizing fonts is to avoid foit and fout flight
is flash of invisible text and happens when you
148.56 -> don't have a fallback font so while your font
is being loaded you're not gonna see anything
154.16 -> it's just gonna be a blank white page but in fout
flash of unstyled text you're gonna see there's a
160.88 -> fallback font and that is loaded until the regular
font is loaded to fix this you're going to add
167.68 -> font display swap so if you ever downloaded google
fonts from their website you'll notice they add
174.4 -> this automatically to the end of the url but if
you need to do this yourself then you can use the
181.04 -> swap google fonts display plugin just note that
this is only for google fonts and it automatically
187.28 -> adds font display swap to those urls if you're
hosting fonts locally which is what you should be
193.12 -> doing then you're going to use the string locator
plugin to find all your font files what you're
199.6 -> going to do is use the gt metrics waterfall chart
go to the fonts tab click your fonts and then just
207.84 -> search for the last part of the url where the font
is so you're going to go ahead and paste that here
214.56 -> and string locator is going to show you where your
fonts are located so here you can see this is in
220.88 -> my style.css and this is where most of my fonts
are it really depends on your theme and css but in
228.48 -> most cases you're going to find the font face and
add font display swap into the font style sheet
237.12 -> now if you're using wp rocket they automatically
add font display swap in three situations if you
243.6 -> enable optimize google fonts minify css or combine
as well as optimize css delivery they will add
251.28 -> font display swap but if you re-test your site and
still need to ensure text remains visible during
257.52 -> web font load then you may be running into issues
and you need to solve them with font display swap
264.48 -> now i'll be the first to admit that i'm not a css
wizard or anything close to it but there is a nice
271.12 -> article i found on wpmu that covers common issues
when using font display swap and i'll leave a link
278.8 -> to this in the video description but adding
font display swaps should fix the ensure text
284.8 -> remains visible during web font load item in page
speed insights which should also help improve cls
292.16 -> another way to fix layout shift issues with fonts
is to preload them you need to make sure you're
297.68 -> hosting fonts locally on your server and they're
not being pulled from fonts.gstatic.com before
304.08 -> you pre-load them once you do that then you can go
into your waterfall chart and go to the fonts tab
312.16 -> and just copy your font urls and paste them into
the preload tab and wp rocket if you're not using
319.44 -> wp rocket you can use plugins like pre-party
resource hints or perf matters or even do this
326.24 -> manually by adding it to your header.php file
just make sure that you do testing while you're
332.4 -> pre-loading fonts because pre-loading too many
can actually have a negative effect but if they're
337.76 -> loading across your entire website then chances
are you can pre-load them but this will help fix
343.36 -> any cls issues related to fonts as well the next
issue has to do with optimized css delivery in wp
351.04 -> rocket or if you're using lightspeed cache
loading css asynchronously this is a very common
357.76 -> issue with cumulative layout shift i personally
have it disabled but if you do have it enabled
364.24 -> sometimes the css delivery causes FOUC flash of
unstyled content to fix this they have a little
371.44 -> article about it but um it is related to the css
delivery option like i said i personally have it
377.44 -> disabled but the other option is you can set a
fallback critical css and the way to do that is
383.6 -> to go to a css generator i'll leave a link to this
one in the video description and you're going to
390.08 -> just enter your site under your home page and
click generate critical path css copy the css
397.68 -> and paste it into the fallback right here you
should retest your cls after you do this to see if
403.84 -> it made an improvement but i would also test your
cls with optimized css delivery off no matter what
410.72 -> i did even sending a fallback and troubleshooting
making sure optimized css delivery is working
417.6 -> by finding this in the source code no matter
what i did it was causing layout shifts so i
423.52 -> ultimately chose to disable it but if you want
to use it that is how to do it you want to make
428.48 -> sure it's working by searching for rocket critical
css and your source code and also set a fallback
435.44 -> critical css if you're using lightspeed or another
plug-in try disabling load css asynchronously
443.2 -> or if you have it on try generating a critical
css another way to fix cumulative layout shift
450.32 -> in wordpress is to make sure that your
elements have an explicit width and height
455.68 -> now if you view your source code you will see that
every time you add an image it should add a width
463.04 -> and a height to the html now if it doesn't you can
either go into your image html manually and add it
470.8 -> or if you're using a plugin like wp rocket the add
missing image dimensions should fix this this also
477.76 -> happens with iframes or even advertisements
if you're using google ads you need to
484.48 -> specify dimensions and reserve space because
if you don't reserve space for that content
491.44 -> then it's going to cause layout shifts animations
can also cause layout shifts now if you are using
498.8 -> animations i recommend at least disabling them
on mobile specifically just because they can
505.04 -> add a lot of load time and google is mobile
first but if you insist on having animations
511.04 -> then you should use the transform and translate
option now i have this in an elementor demo site
518 -> but to add this i actually used the happy add-ons
for elementor plugin and this actually makes it
525.28 -> so there are settings where you can use the css
transform property and this allows you to animate
531.52 -> elements without causing layout shifts the last
and final tip to reduce cumulative layout shift
537.68 -> in wordpress is if you're using oxygen builder
i personally don't use oxygen although i'm open
544.56 -> to it eventually but if you are using it there is
a github form here basically you have to set the
552.88 -> default font or the global font to mulish don't
ask me why but i just want to include this for
560.32 -> those of you using oxygen builder that this may
be something that reduces layout shifts otherwise
567.28 -> i hope this video was helpful and if you have any
questions leave me a comment otherwise peace out
Source: https://www.youtube.com/watch?v=XU7NPNLWm94