...
Good | Needs improvement | Poor | |
---|---|---|---|
Score | <=0.1 | <=0.25 | >0.25 |
More can be found in the Google support document.
How to measure
The easiest way to measure the score of a page is by using the Web Vitals extension for Chrome Web Vitals.
It's also possible to get this information using the reports function in the Google Search Console. More can be found in Core Web Vitals or Google Pagespeed Insights.
AdEngine ignores all the calls from bots, so the ads are not triggered by Google Pagespeed Insights this means that the measure of CLS created by Snigel ads using this tool is impossible. You, as Publisher can confirm this by validating one of your pages and then adding the Snigel script and validating again, the scores will remain the same.
...
For ads with a fixed height, it's easy we need to reserve the exact height of the ads.
But when there are multiple sizes in competition, we need to adopt a different strategy; either reserve min-height to limit CLS or reserve the biggest size available.
In both situations, it's important to make sure the ads are centered, and adding a background in line with the page on these situations can also make these ads more appealing.
For the CSS it's also recommended to use media queries to mimic the size mapping and always have the best solution for each viewport and situation.
e.g.: for the placement adngin-sidebar_1-0 which will have the sizes 300x250 and 336x280 until the max-width 820px, and then additionally also have the 300x600 and 160x600 onward, we can use the following example of CSS to minimize the CLS. Any changes should be checked on staging pages first, as different values might be needed to work correctly with iei.e. parallax units.
Code Block |
---|
#adngin-sidebar_1-0 { position: relative; display: table-cell; vertical-align: middle; text-align: center; height: 280px; } @media screen and (min-width: 821px) { #adngin-sidebar_1-0 { height: 600px; } } #adngin-sidebar_1-0 > div { display: inline-block; } |
...
Useful links
Google Developers: Minimize Layout Shift
web.dev: Optimize Cumulative Layout Shift
w3schools: CSS height Property
w3schools: CSS Backgrounds
w3schools: Responsive Web Design - Media Queries