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 -
Can't get Google to index our site although all seems very good
Hi there, I am having issues getting our new site, https://vintners.co indexed by Google although it seems all technical and content requirements are well in place for it. In the past, I had way poorer websites running with very bad setups and performance indexed faster. What's concerning me, among others, is that the crawler of Google comes from time to time when looking on Google Search Console but does not seem to make progress or to even follow any link and the evolution does not seem to do what google says in GSC help. For instance, our sitemap.xml was submitted, for a few days, it seemed like it had an impact as many pages were then visible in the coverage report, showing them as "detected but not yet indexed" and now, they disappeared from the coverage report, it's like if it was not detected any more. Anybody has any advice to speed up or accelerate the indexing of a new website like ours? It's been launched since now almost two months and I was expected, at least on some core keywords, to quickly get indexed.
Technical SEO | | rolandvintners1 -
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 -
Thinking about redesigning site to reduce bounce rate - have a couple of questions
BACKGROUND Im looking at redesigning the website for a creative consultancy to improve the user experience. The website is mainly an image portfolio along with “press”, “our services”, “about us”, “contact” pages. I originally designed the website a few years ago and when we did, we wanted to make the image portfolio the most important feature. So we made it a full screen JS image slider with lazy loading of images, so that there are about 40 full screen images on the homepage that rotate. From a users point of view i still feel this is the best system as it very quickly allows them to browse the portfolio, which we looking for a creative consultancy is their UPS (unique selling point). The site has a very strong backlink profile compared to its competitors in the SERPS it has about 20-25% increase in PA and DA. But our site has been slipping down the rankings in recent years / months. From spot 1-2 to about spot 5-7. MY HYPOTHESIS I think that the reason the site may be dropping back in the SERP is that although its a very usable site, all its portfolio information is “too easy to find / view” and results in a user coming to our site, seeing everything they need to see, then bouncing back to the SERP. Our site has a bounce rate of 40-60%. Where as on competitors sites, their “portfolio” is a separate page off the homepage, so a users has to click through to a separate page, and even if they don't like the design content of the portfolio it doesn't get logged as a bounce. MY QUESTION Does bounce rate affect SERP ranking ? Could the sites SERP performance be improved by redesigning the site to put the portfolio on a separate page so a user would have to click through to it, if that would get the bounce rate down, would the site see a benefit even if people still clicked back to the SERP results eventually after seeing our portfolio, even though it wasn't a true 1 page bounce ? Dose time on site affect SERP ranking ? Is there a way i can see a competitor's bounce rate ? Would welcome any other thoughts inputs on this matter.
Web Design | | sl_pa0 -
Good web design layouts
Hello, Where do you guys go to get inspiring new ideas for web design layouts. I'm making a portfolio and need one more design. I'm thinking 4 is enough sample sites. So far I have 3. Thanks!
Web Design | | BobGW1 -
Including key words in alt image attributes - stuffing etc?
I'm pretty new to all this but seem to have been getting good result by adjusting our sit to meet the seomoz on page analysis factors. I'm currently adjusting the alt image attributes for this page: www.katalysticevents.com The copy I'm writing is aimed at targeting "luxury marquee hire". It's quite hard to get the keyword into a readable image attribute which properly relates to the image. So my question is if I add say " | Luxury Marquee" onto the end of each image attribute would this get penalised and seen as keyword stuffing or something like that? My image attributes would be:
Web Design | | EdoubleD
Cocktail bar inside Giant Tipi at night | Luxury Marquee Hire Live Band on stage | Luxury Marquee Hire and so on. Thanks!!!!0 -
Best layout pages for SEO
Dear all, what would be the ideal layout of a webpage for SEO? How would a homepage and landingspage look like? Thanks in advance! Best regards, Ben
Web Design | | HMK-NL0