Step-by-step: Analyzing CLS on the BVDW website
First, we looked at the subpage of the BVDW site that deals with SEO certificate holders. When loading the page, we immediately noticed a jump - a typical CLS problem. To investigate this further, we opened the developer console by right-clicking on a free area and selecting "Investigate".
Throttle the speed for better analysis
Visualisation of layout shifts
To visualise the shifts better, we went to ‘More tools’ and selected ‘Rendering’. Here we activated the ‘Layout shift areas’ option, which highlights all shifts in blue. After reloading the page, all shifts were clearly visible.
Use of Google Lighthouse to measure the CLS
Once we had completed the visual analysis, we used Google Lighthouse to test the performance of the site. We removed the throttling and had Lighthouse analyse the site. The test showed a CLS of 0.37, indicating that there were significant shifts.
Local CSS changes to fix the CLS
To fix the problem, we used the ‘Overwrite’ function in the developer console. We chose a local folder to save the changes and added a fixed height of 310 pixels to the header element ‘pagehead’. This change was saved in the ‘styles.css’ file and remained in place even after the page was reloaded.
Result of the optimization
A new Lighthouse test showed that the CLS was reduced to 0.028 and is therefore in the green zone. This improvement confirms the effectiveness of the changes made.
Another Lighthouse test showed that the CLS was reduced to 0.028 and is therefore in the green zone. This improvement confirms the effectiveness of the changes made.
