Reasons Behind Cumulative Layout Shift (CLS)<\/strong><\/h4>\nThe micro-levels at which CLS works are mind-boggling! There is not a single reason that leads to shifting. Web designers need to keep improving every day and polish their designs from grassroots.<\/p>\n
Google cites five main reasons for cumulative layout shifting, as follows-<\/strong><\/p>\n\n- Dimension-less pictures<\/li>\n
- Dimension-less Images and advertisement embeds<\/li>\n
- Content inserted afterwards<\/li>\n
- Flash Of Unstyled Text (FOUT)- causing fonts<\/li>\n
- Actions awaiting a response from the network before updating DOM<\/li>\n<\/ol>\n
The aspect ratio of the images should be synchronized throughout devices in a flexible design and layout. Responsive images have aspect ratios that exist in harmony across platforms. Make sure that you calculate accurate figures before writing it down in your source code.<\/p>\n
How To Fix Ads That Cause Cumulative Layout Shift (CLS)?<\/strong><\/h4>\nAds complicate giving of CLS but it cannot be called ‘impossible’. It can be managed by manipulating elements that display the ad. For instance, manipulating the div slightly can fix the height and width of your ad substantially. If the ad still doesn’t show up, you have two options- \u00a0\u00a0\u00a0\u00a0<\/strong><\/p>\n\n- First, set the ad-containing element in a way that another banner ad or placeholder image shows up to fill in the empty space.
<\/li>\n<\/ul>\n\n- Second, for ads that fill the entire top, left or right-hand side rows of a web-page, and the page itself doesn’t show up, it won’t make any difference because the shift wouldn’t happen at all. In a few sporadic themes and layouts, the situation might turn out differently. You will have to test it over, just to be sure.<\/li>\n<\/ul>\n
Dynamically Injected Content (DIC)<\/strong><\/p>\nDynamically Injected Content (DIC) is the kind that is embedded later in the web-page. You can take an example of a tweet or a Facebook post whose link you embed later in your web-page.<\/p>\n
Flash of Unstyled Text (FOUT)<\/strong><\/p>\nWhen you download a font from the internet and incorporate it into your web-page, sometimes Flash of Invisible Text (FOIT) or Flash of Unstyled Text (FOUT) happens.<\/p>\n
Use rel= ‘preload’<\/strong> in the link when you\u2019re downloading the font to prevent it.<\/p>\nMeasuring CLS<\/strong><\/h4>\nGoogle recommends using two different methods of calculating CLS-<\/strong><\/p>\n\n- In the lab<\/li>\n
- In the field<\/li>\n<\/ul>\n
\n- In the lab: <\/strong>In this method, a simulation of a user who is downloading a webpage is undertaken. Moto G4<\/em><\/strong> is Google’s choice for calculating the lab-generated CLS score. Lab Tools that are required for this exercise are Lighthouse<\/em><\/strong> and Chrome<\/em><\/strong> DevTools<\/em><\/strong>.<\/li>\n
- In the field:<\/strong> As the name suggests, in the field calculation is done by gathering data from live website visitors and users. Although this method gives a more accurate data, it is still recommended to undertake the in the lab simulation before testing it live.<\/li>\n<\/ol>\n
Diagnosing The Causes of CLS<\/strong><\/p>\nIt might seem like shooting in the dark if you try diagnosing the causal elements of CLS, but with the right tools, it is a cakewalk. Chrome DevTools<\/em><\/strong> includes a performance panel, which further opens an Experience row. Here, you can find the layout changes and shifts that have undergone by the various elements in the form of layout shift score as well as the affected areas.<\/p>\nFixing CLS Issues<\/strong><\/p>\nMere diagnosis of CLS causing elements is not enough; fixing it is just as important. Here are a few quick and easy ways of doing that:<\/strong><\/p>\n\n- Make use of font: display values ( auto, swap, block, fallback and optional)<\/u><\/em> in addition to your customized fonts<\/li>\n
- Mention ‘width’ and ‘height’ attributes<\/u><\/em> with picture and video elements present on your web-page using a proportional aspect ratio<\/li>\n
- Ads are the biggest static sources of CLS in a web-page. Sadly, there are only a few ad-related adjustments you can make to avoid CLS. Make sure to allocate<\/u><\/em> placeholder images for collapsible ad spaces<\/u><\/em>. Also, reserve your ad space by stylizing your elements before embedding the ad.<\/li>\n
- The management of HTTP response and synchronization<\/u><\/em> in loading speed of all elements on the web-page reduce CLS score.<\/li>\n
- Dynamically Injected Content (DIC) leads to a lot of shifting of web-page elements, which lead to a poor CLS score. Make sure to add skeleton images<\/u><\/em> or banners to avoid shifting after adding layers of content over and above the existing one.<\/li>\n<\/ul>\n
Parting Thoughts<\/strong><\/h4>\nAs web-surfers who are stuck to our mobile devices for the better part of our days, we should be grateful that responsive design is now being taken seriously<\/strong> and CLS issues are addressed as a priority in core designing<\/strong>. Otherwise, keeping track of flying objects is only fun for a little while.<\/p>\nEven though many web developers have just now started to utilize the full potential of the CLS metric, it is scheduled to become the most important ranking factor in the coming year.<\/p>\n","protected":false},"excerpt":{"rendered":"
Aren’t we all tired of the constantly shifting pictures on our mobile web-pages? You think they’ll make it easier for you to actually read the article that you were so interested in, but no. You have got to deal with shifting text and pictures that are deeply punctuated by advertisements and pop-ups. Just when you […]<\/p>\n","protected":false},"author":1,"featured_media":47850,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[833],"tags":[],"class_list":{"0":"post-47849","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-digital-marketing"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/posts\/47849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/comments?post=47849"}],"version-history":[{"count":7,"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/posts\/47849\/revisions"}],"predecessor-version":[{"id":69632,"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/posts\/47849\/revisions\/69632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/media\/47850"}],"wp:attachment":[{"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/media?parent=47849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/categories?post=47849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kinexmedia.com\/wp-json\/wp\/v2\/tags?post=47849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}