New project: Flaunt Digital x Oakland
Company Updates
intro.
Following the new Google Algorithm update, there is a focus on Core Web Vitals that developers now need to bear in mind to ensure that the websites we develop/maintain to continue to perform in the SERPs.
So What Is CLS?
CLS (Cumulative Layout Shift) is a Google performance measurement that determines how much your page jumps around whilst loading — in other words, how much the layout of your page shifts.
There are several technical ways this is measured by Google but as a basic example; Have you ever loaded up a news website and you go to click “View article”, then all of a sudden an ad loads in causing you to accidentally click it? This is an example of the layout shifting — annoying, right?
So, unsurprisingly with Google’s effort to make the web a better place, this is a key metric that plays into the SERPs. (Realistically they are probably just wanting to reduce the bounce rate of their Display ads, but I’ll leave my conspiracy hat off for today.)
How Do You Spot CLS issues?
There are a few different ways to discover CLS issues which will help to spot and solve any issues your site might have.
The Quick Way – Be A Customer
Just click around your website and behave like a normal user on your phone/tablet/computer. You should be able to see any obvious issues, such as images popping in and pushing content down the screen.
Lighthouse
(For this, I’m going to assume you are using Chrome and have familiarity with Chrome Dev Tools).
Lighthouse is a helpful tool that is now part of Chrome Dev Tools. It allows you to look at how Google views your page and gives you top-level improvements that you can carry out to improve the performance scores. This also helps to enhance the customer experience.
Step 1
Navigate to the webpage that you are wanting to test.
Step 2
Open Dev Tools (Windows Ctrl + Shift + i / Mac CMD + OPTN + I) and navigate to the Lighthouse tab. I recommend opening this in an incognito window just to help the test results.
Step 3
Run the Desktop & Mobile report. On each report, you will get a score for CLS and you will receive advice on the areas that need fixing under the “Avoid large layout shifts” and “Image elements do not have explicit width and height” tabs.
This information might be enough to help you spot the problem and fix it. However, if you want some more advanced tooling, the next method is really useful.
Performance Tab
(Again for this I’m going to assume you are using Chrome and have familiarity with Chrome Dev Tools).
If you have been doing web development for a few years, then I am sure you have been here a few times in your career. It is a nice friendly place full of graphs that are not at all over-facing but are very powerful at finding optimisations.
As part of a recent feature, web vitals have been integrated into dev tools which helps to highlight any problems on your website with a practical visual timeline of the page loading. Which saves refreshing the page a million times trying to spot a problem.
So how do we run a performance report?
Step 1
Navigate to the webpage that you are wanting to test.
Step 2
Open Dev Tools and navigate to the Performance tab. Now click Ctrl + Shift + E on Windows/CMD + R on Mac or the refresh button in the tab.
Step 3
The page will refresh and the report will be generated.
Step 4
Scrub through the timeline looking out for red marks or “LS” tags. These indicate when a layout shift has taken place. You can now look through the timeline and see the impact that the shift has had on the website’s performance.
Creating a Google Analytics Event For CLS Events
Google has built out a Web Vitals JS Library that can be used to help create “Tracking Events” to see how often layout shifting happens for your customers.
To learn more view their GitHub: https://github.com/GoogleChrome/web-vitals
So great I have seen the layout shift, how do I fix it?
Well just to be transparent, every website is different. There is no one thing that fixes all. But below I have listed some common things that I have personally spotted and fixed.
1. Images do not have width/height attributes set
This is a common issue that is often seen. The developer or the user that has uploaded the content has included an image and popped the URL into the image tag to let the browser determine the aspect ratio. This is normally disregarded as a nonissue because when the image loads the browser will work out the size and adjust the content around it (shifting the layout). But this is what Google is pushing us to avoid.
The solution: when we put the height/width attributes on our image tag this will then tell the browser to reserve x amount of pixels for the image when loading the page and therefore will stop content moving about.
2. Hiding content on page load
A great example of this is accordion menus. You often see the full element loaded and a JavaScript function will go through each element hiding the content until click. Instead, a better solution would be to add a `hide` class or inline style the hiding logic server-side to make sure this isn’t moving the page around whilst loading.
3. JavaScript Elements
Sometimes when building a website, static blocks just don’t do enough and instead, you need to mount a Vue app or some form of Javascript to your element. If not built optimally these can cause the page to shift as the app is initialising. For example, a slider plugin may completely change the dom for the element, causing everything below it to jump around.
The best solution that I have found so far is similar to images — through CSS, set a fixed height and width on the parent element to reserve the space in the browser and then style the app to fit this space. Looking at Lighthouse scores, this can be a great solution!
4. CSS/JS Animations
There are some powerful elements you can create with CSS / JS, forming some beautiful animations. However, it’s important to be mindful in regards to the layout shifting. Try to only do position-based animations with css transform compared to padding/margin/height/width etc. The reason for this is transform takes the content out of flow when animating so will not affect any other elements, whereas the other functions keep the element inflow and will have the capability to shift the layout around as the page is animating.
What results have we noticed?
Whilst we have been making these changes to live websites we have made an effort to measure a few pages from each site as a base mark through Lighthouse. This has allowed us to see the scores consistently improve (as much as 10 points) once the changes have gone live.
Outside of chasing lighthouse scores?
This is rather subjective, but by clicking around websites, the experience feels a lot smoother. Also, due to the browser having to do less repainting I would argue that it feels a bit faster too (Although I may be reaching a bit here) but the browsing experience is definitely improved.
Overall fixing CLS issues improve the customer experience, and Google’s push to have this as a ranking factor will hopefully lead to Website users having a better experience whilst browsing making the web a better place.
Head over to the Flaunt Digital blog for more website development and digital marketing advice.
