Reducing cumulative layout shift for responsive images - core web vitals
-
In preparation for Core Web Vitals becoming a ranking factor in May 2021, we are making efforts to reduce our Cumulative Layout Shift (CLS) on pages where the shift is being caused by images loading. The general recommendation is to specify both height and width attributes in the html, in addition to the CSS formatting which is applied when the images load. However, this is problematic in situations where responsive images are being used with different aspect ratios for mobile vs desktop. And where a CMS is being used to manage the pages with images, where width and height may change each time new images are used, as well as aspect ratios for the mobile and desktop versions of those.
So, I'm posting this inquiry here to see what kinds of approaches others are taking to reduce CLS in these situations (where responsive images are used, with differing aspect ratios for desktop and mobile, and where a CMS allows the business users to utilize any dimension of images they desire).
-
@seoelevated
Hi,
I am facing issue of higher cumulative layout shift. The reason behind this is that I am loading css script at the end once complete page is rendered (in order to reduce page loading time. So page loading time is reduced on the cost of higher cumulative layout shift. I am new in SEO. Kindly suggest me, for improved google search ranking, whether it will matter and whether I should load css at the start itself for reducing cumulative layout shift. Also, being a pin code finder website, texts are limited only. Should I add more text in webpages for improved ranking. (for reference, the website is https://pincodeinfo.online ) -
I'm in the same exact situation as well! Feels like we are kind of stuck as I also have different aspect ratios for device and use a CMS that has a lot of limitations.
-
yes please, would love to know also, getting this error through aa gtmetrix and PSI reports
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Sudden Drop in Mobile Core Web Vitals
Web Vitals Screengrab.PNG For some reason, after all URLs being previously classified as Good, our Mobile Web Vitals report suddenly shifted to the above, and it doesn't correspond with any site changes on our end. Has anyone else experience something similar or have any idea what might have caused such a shift? Curiously I'm not seeing a drop in session duration, conversion rate etc. for mobile traffic despite the seemingly sudden change.
Technical SEO | | rwat0 -
50% Visibility drop following June 2021 Google Update
Hello everyone,
Algorithm Updates | | yacpro13
We've observed a 50% drop in our Visibility score in the last week. This is our biggest drop ever, which coincides with June Google updates. We're an established ecommerce website located in Canada. This has obviously severely impacted sales. I'm frantically searching for information regarding fixes / implementations to recover asap, but if anybody could point us in the right direction, that would be hugely appreciated. Thanks!0 -
Should We Wait To Launch a Redesigned Site After Google's Core Web Vitals & Page Experience Algo Update
We are redesigning our WordPress site (over 1300 posts and pages) and are on schedule to launch in May of 2021. Should we wait for after Google's Core Web Vitals & Page Experience algorithm update?
On-Page Optimization | | opiates0 -
Responsive image plugins and seo / crawlability
Note : For the background of this question please read the preface below. Ive been researching responsive image options the main issue i can see with them is that they are not semantic html so bots may not index them correctly. For instance many of the responsive image plugins use data-src for an image rather than src. Does any one have any experience with this and if it impacts on SEO ? Does any one know of a client side responsive image soltion that uses a normal img tag with the image stored in the src and with the option to set an alt attribute ? **Preface : ** Ive got a site we are currently developing, the site has a large full width responsive image slider. To serve images that wont be pixilated we are making the width of the images 1800px wide (which should cover most screens, but isn't actually big enough if the site was viewed on a 27" imac) these 1800px wide images weight about 350kb - 500kb per image and our image slider has about 20 of them. As you can see this would be a problem for anyone with a connection slower than c.10 mbps. This is especially true for mobile devices that will be downloading an image 1800px wide although only require a much smaller one, this coupled with a 3g connection will make the site really slow.
Web Design | | Sam-P0 -
What seo benefit does setting up a photo gallery where each photo is a separate web page?
what seo benefit does setting up a photo gallery where each photo is a separate web page? My old SEO guy set up my photo gallery like that claiming that because each photo was a separate page, it added a big seo benefit and i never understood what he was talking about. Maybe alt text on the photo with key phrases in it pointing to my other pages to give my site a theme for google? I'm not really sure. He has since moved away and i am considering redoing the photo gallery to multiple images on one page to be more user friendly to my users. This photo gallery is 3 years old and the photos might have some page rank to them helping my site so i don't want to remove this gallery if there really is a benefit to it and it will hurt my site. I once removed four static page rank 3 pages from my site that weren't used for my site anymore and my rankings dropped 5 positions. Thoughts anyone? Thanks! Ron
Web Design | | Ron100 -
Can someone suggest a good wordpress plugin for compressing images?
I am building a new website and it has 500+ photo images. I've got less than 100 in there at the moment and the page speed is already very slow. I'm trying to reduce the size of the images before uploading but without a photoshop application it is very difficult. Are there any great plugins for wordpress that can help?
Web Design | | skehoe0 -
What are the top web design agencies?
I have a big client who is looking to have some design work done on their websites. Really just redoing them essentially. They were asking me who the top web design companies in the country are. Anyone have any suggestions? Who are the most renown agencies?
Web Design | | DanDeceuster0 -
Any discussions on the actual web page design and how it might affect SEO?
Are there any links to previous discussions or tips, techniques for how creative design has any impact on seo??
Web Design | | theideapeople1