Remove margins on Featured Image: Running the Lighthouse tool along with Chrome Dev Tools, on one website, the figure class=”featured-media” code proved to be an issue. By adding this additional CSS code .featured-media { img display: none; }, the desktop’s performance score immediately improved two full points. Resolve any issues with how fonts load: Some web designers favor the look of fancy headline web fonts; however, often how they load causes a layout shift. Test to discover if there are potential issues of cache dilution to resolve as well as how the overall size of fonts is delivered. We’ve found that by specifying fallback font-display, by adding { font-display: fallback;}, we can improve the rendering behavior of elements using the font face instruction. Dynamically injected content: This commonly occurs when banners or forms are being added to a page dynamically. Additionally, users who cannot see an “x” for opt-outing of a pop-up can be frustrated. Also, when on-page elements are usable, they still are the culprit behind why the page is being rearranged and shifted. Lack of image specifications: When a page’s images have either wrong, poor, or no image dimensions specified, the browsers have added work to and time to load the page without this information and then need to later shift to calculate it.
On-page embeds, ads, and iframes with no dimensions: By informing the browsers of the layout space needed for these visual on-page elements, you can avoid the browser needs to shift once each of these is visually in place.