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
-
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 -
Specifying image dimensions for site speed vs. responsive
I'm working on improving site speed from an SEO perspective, and one bit of advice I see often is to specify the dimensions of the images you're using so the browser knows the size of the image it needs to download. However, I am wondering what impact this may have if the site is responsive? If you specify the large dimensions suited for a desktop browser, would you be forcing a mobile browser to use that sized image? Has anyone seen dramatic improvements in site speed using the <picture>tag for responsive images?</picture> Thanks! Jannette
Web Design | | JannetteP1 -
Ecommerce web design read more toggle vs menu link on home page and product pages
Hello, We have an Ecommerce store. We have a lot of content on the home page and product pages and we are going back and forth between which one to use between a toggle "Read More" "Show Less" toggle for each section and a anchor linked menu. We have long product pages We're thinking a read more toggle is more appropriate for category descriptions so that they can go at the top of the category and not take up space. But the read more toggle with lots of content scrolls the page down and doesn't scroll it back up when you hit "show less" We're leaning towards a linked menu for the home pages and product pages for this reason, but an accordion type set of toggles would look nicer. What do you recommend, and how have you set up your read more toggles if they have lots of info so that they are not confusing? Are there other options? ' Not looking for code (I can do that) I'm looking for ideas on the cleanest home page, category pages, and product pages when they have tons and tons of textual content. Wanting to trim it up and make it look compact and neat! Thanks!
Web Design | | BobGW0 -
Does anyone know if the YOAST SEO plugin works 100% on a responsive wordpress template?
Hi, Does anyone know if the YOAST SEO plugin works 100% on responsive wordpress template? In other words, when you configure the custom title and metadescription is it also configured for the tablet and cellphone views as well? Thanks Carla
Web Design | | Carla_Dawson0 -
How can the Web site designer and the SEO strategist work together peacefully?
The organization I work for has decided to re-design or re-develop the existing company Web site. My part in this project is to come up with new features to add to the site, as well as making the site SEO-friendly (copywriting, link-building, keyword research, etc.). I don’t know a thing about Web site design, coding, format, etc., and I guess I will have to work with a designer on this project. How would I go about finding a Web site designer? Should they have some SEO knowledge? How much designer, coding and site structure knowledge should I have? And how do we not infringe on one another as we work together? (Sorry so many questions.)
Web Design | | Obie0 -
What's the best SEO option for jQuery image carousels?
My client wants a fancy jquery carousel at the top of their home page, as is all the rage these days. I would like to add some nice SEO friendly text to that carousel, but I'm not sure how best to do that..I assume that by keeping the text which will appear in the carousel in divs on the page, which will be swapped out as the images cycle, it should still be easily picked up by search engines?
Web Design | | TroyCarlson1