Update entry to solve the CLS issue
I have downloaded your source code from mydoginsurance.com.au and do some testing with Google Lighthouse. I have figured out that you have included the width and the height properties in every tag, which is great. But the div.banner still causes the CLS issue. I have figured out that your banner is causing the issue because the amp has not been loaded before the element is loaded. So that both the banner and the menu are affected and shift the layout. To solve this problem, I have removed the "async" of the script in line 2656, so the amp will be fully loaded before displaying any element. The result is amazing. Not only the CLS is acceptable, but also your page performance is much better. All the changes and performance reports are included in this entry. I hope you are satisfied with the result and implement it on your page for a better user experience. Best regards, Ngoc
Public Clarification Board
-
ARMahee
- 3 years ago
I have solved this problem showed in entry #32 by adding javascript. I have hide all element first then show all element after load everything. So that no element have shifted.
- 3 years ago
-
Developernur
- 3 years ago
async is not responsible for CLS. "asinc" A script that will be run asynchronously as soon as it is available. If you want to know more about async, go to this link: https://www.w3schools.com/tags/att_script_async.asp
- 3 years ago
-
minhngocnguyendu
- 3 years ago
Yes, you are right. Async is not responsible for CLS in most cases. But in this case, the page is built with amp and if the amp script is loaded after the HTML code, it will affect all of the amp elements in the code and cause CLS.
- 3 years ago
-
Contest Holder - 3 years ago
This seems to work, although I'm not sure the impact of removing async from the file. If you want me to specify image sizes, would this be difficult in responsive site -?
- 3 years ago
-
minhngocnguyendu
- 3 years ago
Why removing "async" make it work? Your site is built using amp as I can see in your code. You are loading the amp script asynchronously. And the problem is when is your amp script loaded? Loading amp script asynchronously means the amp script can be loaded before or after loading your whole page. If it is loaded before, nothing could go wrong. But it is usually loaded after your HTML code, which can cause all of your amp element in your HTML code (60-80% of your page) shifted a huge amount of space leads to a very bad CLS score. Remove the "async" tells the browser to load the amp script first and then the HTML code to have no side effect.
- 3 years ago
-
minhngocnguyendu
- 3 years ago
Please feel free to ask any question.
- 3 years ago
