0

As most of us have witnessed, there is a "semi new" scan entitled CLS in GTMetrix. I am at the start of learning to resolve these, and really need an example of doing so that is worthwhile (I believe this can help thousands of others as well when searching for a more informative tutorial)

The URL in question is: www.Darnalls.com

The GT Metrix reads: enter image description here

I have attempted to add width and height variables to and no resolution was experienced. I am sure the solution goes beyond this..can someone please educate me (and others) on what intuitive steps to take to resolve such an issue in regards to locations. I have read other articles in regards to this process, but am looking for a human to human explanation

UPDATE: If I remove the "Preload" of my css, the CLS drops to 0.16 (Still the same elements contribute however)

ttattini
  • 196
  • 1
  • 17
  • Not entirely sure what the question is here? It looks more like you are looking for a tutorial on the subject. Can you provide a minimal reproduceable example. If you want you can look through my answer history as I have covered a lot about CLS but at the moment your question is too broad to offer any assistance. – GrahamTheDev Dec 02 '20 at 22:33
  • I am seeking a clear resolution for at least one of the above issues. It is to my understanding that CLC could be a magnitude of issues and I am looking for the best course of action to take in relevance to a
    inside of HTML (like the example provided). While also hoping that this specific resolution example can help others like myself who have failed to find anything that doesnt say, "Hey, here are 100 ways this can be resolved"
     – ttattini Dec 02 '20 at 22:53
  • The problem is solving an issue for your site does not help anyone else, if you create a fiddle that replicates the problem I will show you how to fix that no problem, otherwise I can point you to several general [answers I have already given on CLS such as this one](https://stackoverflow.com/a/62929465/2702894), but I feel they would be no more useful to you than just Googling. An example (that relates to your issue) of how CLS occurs is [if you load an image but don't define a height and width, as explained in this other answer I gave.](https://stackoverflow.com/a/65077326/2702894). – GrahamTheDev Dec 02 '20 at 23:20
  • Also [this question and answer](https://stackoverflow.com/a/63021718/2702894) might be useful as one technique I use to find cumulative layout shifts. – GrahamTheDev Dec 02 '20 at 23:21
  • I have not seen a resolution in regards to a div (instead of an image) in which simply declaring height and width actually fixed it. I have also tried to declare height and width for both the elements listed above and still had no avail. With this in mind, I do think a general resolution would provide a general guideline for others. Especially if answered from both perspectives. Regardless, I will continue to search for a resolution unless you would like to provide one. This site is hosted at www.Darnalls.com – ttattini Dec 02 '20 at 23:22
  • I have already located the areas of CLS refinement, now an stuck as what actually to do to resolve this (when declaring height and width do not work) – ttattini Dec 02 '20 at 23:24
  • Both items listed are just large wrapper divs. As items are added to them their size and shape changes and causes layout shifts (plus the items **within** those divs can move about and cause layout shifts). The way you have defined the height `(height: 100)` apart from being invalid as it has no units, will not help as there is not enough information to calculate the height of the element on page load. You need to look at every item "above the fold" and ensure that the inline CSS has enough information to calculate the width and height of that item. – GrahamTheDev Dec 02 '20 at 23:39
  • I have tried
    and this does not solve the issue. What am I missing?
     – ttattini Dec 02 '20 at 23:43
  • 1
    Inline CSS is the key to fixing this problem, what happens is your inline CSS loads and the page is rendered, then other CSS, components etc. load in and the page layout changes. For example your "weather widget" causes a layout shift, I would guess because it is rendered using Angular, if you define a fixed height and width for the item then that will fix that issue. Your slide also seems to cause a layout shift, this appears to be because the slider height gets set by JavaScript – GrahamTheDev Dec 02 '20 at 23:43
  • `height: 100%` is not as you would expect. let me try and think of a good analogy, two secs. – GrahamTheDev Dec 02 '20 at 23:44
  • I think I know where you are going to go with this. But then my question is.. how and why would setting an exact height for everything be recommended; especially if conducted with animation. I always enjoyed how everything shifted and appeared in an elegant way.. it is odd that we will be punished for not being "stamped" static – ttattini Dec 02 '20 at 23:45
  • 1
    Right so here is an example, you have a div with height 100%. Then you add a paragraph to that div, the height will change. Height 100% doesn't mean much unless there is a container it can grow into and you have the right display properties. Now if you set that height to say 1000px and that was sufficient to fit everything in it would not have a layout shift. Obviously it is not feasible to set a fixed height so what we do instead is make sure all of the elements that show above the fold can have their height and width calculated. – GrahamTheDev Dec 02 '20 at 23:46
  • This is why critical CSS is so important (and annoying) you have to make sure the browser has enough information to calculate the width and height of every element "above the fold" – GrahamTheDev Dec 02 '20 at 23:47
  • 1
    In the example of your weather widget, that appears to be loaded via AJAX from what I can tell (or just takes a while to calculate from the Angular JS), so when that loads in we need to have already allocated space on the page for it (so you would need a fixed height for that item). When the initial page HTML is downloaded the browser cannot say "this widget is going to be 150px tall" as it does not have all the HTML / SVGs yet. – GrahamTheDev Dec 02 '20 at 23:47
  • 1
    You can animate items in, that isn't a problem, but their **end position** needs to be calculated and space allocated for it. – GrahamTheDev Dec 02 '20 at 23:50
  • So we do need a fixed height for this or we need to calculate this? The examples above do not include the weather widget; but are you stating they are affected BY it? Hopefully in the future allocation for these causes is much easier – ttattini Dec 02 '20 at 23:50
  • 1
    Yes so for items that load in later you would need to manually allocated space for it (think of it as "placeholder space"). For anything that is in the initial page HTML you just need to ensure sufficient information is within your Critical CSS to calculate the layout. Another example is the slider you have, it appears to adjust the height to match the image via JavaScript. This will cause the item to grow (or shrink) slightly and causes a slight layout shift. I see a few different items as I have a large screen. The two items in your list are containers so they obviously shift massively. – GrahamTheDev Dec 02 '20 at 23:52
  • Thank you for this declaration so far! I do have a few other sites having this problem "without" any inserted elements (but it is less than 1.0). But back to this topic of discussion; to define this location before the weather widget pops up.. I should do this in Critical or Inline? And how do you recommend configuring the height & width without taking a guess – ttattini Dec 02 '20 at 23:55
  • Inline and critical are in essence the same. Your **critical CSS** is all CSS required to render "above the fold"...all critical CSS should be **inlined** so you don't have to wait for a second request to render the page (this helps your First Contentful Paint for example). Width can be defined as a percentage as you know the page width (and container widths can be calculated). Height is down to how the widget is implemented. I assume it has a fixed height. If it doesn't you may need to use `calc()` in your CSS to calculate a container in the correct proportions. – GrahamTheDev Dec 03 '20 at 00:14
  • On my screen the weather widget is in a container of 123px height. You would have to check it at different screen widths and define the heights in relevant media queries. – GrahamTheDev Dec 03 '20 at 00:17
  • I am afraid I need to go for now, it is past midnight here in the UK so bed time! I will pop back on tomorrow if you have more questions but I think you now understand the essence of what you need to do (which hopefully will help you search for how to solve individual items on the page). – GrahamTheDev Dec 03 '20 at 00:18

1 Answers1

0

The following is a part of <head>:


    <!-- Preloading -->
    <link rel="preload" href="assets/fonts/Montserrat-Regular.ttf" as="font" type="font/ttf" crossorigin>
    <link rel="preload" href="assets/fonts/Montserrat-Bold.ttf" as="font" type="font/ttf" crossorigin>
    <link rel="preload" href="assets/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="assets/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="assets/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin>

    <!-- Styles -->
    <style>
        <?php
        // Inlining critical CSS, so it's known before DOM load (preventing CLS)
        include_once __DIR__ . '/assets/css/critical-inline.min.css';
        ?>
    </style>
    <link rel="stylesheet" href="assets/css/critical-link.min.css?v1" type="text/css" />
    <link rel="stylesheet" media="none" onload="this.media = 'all'" href="assets/css/main.min.css?v1" type="text/css" />

I initially only wanted two files (critical and main), but having both of them loaded through <link> resulted in CLS. Moving just critical CSS to inline <style> fixed CLS issues, but fonts stopped loading. Hence I moved fonts to critical-link and renamed critical to critical-inline.

Works for me, but I'm not saying that's the best practice!

s3c
  • 1,481
  • 19
  • 28