This will ensure the hero image will fit the screen in all cases.īackground images are bad for Core Web Vitals. The usual way of doing hero images is by adding a background image to the hero container and setting the background-size of that container to cover. Your hero image should be a normal image and never a background image. Do not use background images, use normal responsive images When image conversion is difficult to integrate into your website a CDN with image conversion support might be the solution you are looking for.ģ. There are much faster alternatives to JPEG and PNG like WebP and AVIF.įor many CMS systems there are conversion plugins that will convert your images to gext-gen format. Most slow hero images are slower then they need to be because they are served in the 'wrong' image container like PNG of JPEG. Compressing images can be done in your photo editor, in your CSM (tip: your developer can set the wordpress compression level) or with an online image compression tool Smaller file-sizes will take up less bandwidth and are available to the browser as soon as possible. If you are interested in learning about early resource hints check out my article.Ģ Compress the hero image & use next-gen formatsĬompressing images will make their file-size smaller. 103 early hints are expected to be a game changer when it comes to improving the Largest Contentful Paint. This will make it possible to send resource hints BEFORE the final HTML response has been sent. In the near future 103 early hints will be supported by chrome browsers. Resource hint tell the browser something about the priority of an element and will trigger a very early download of that resource. Preloading involves using resource hints. When you want an element to be available as soon as possible in the browser you could preload that element. Most techniques can be combined for even better results! 1 Preload the hero image or Send 103 headers There are many techniques for optimizing the hero images and the Largest Contentful Paint. The largest contentful paint element is the Largest Element that will be painted in the visible viewport of the browser.īecause un-optimized images tend to take up much bandwidth and therefore take a long time to load hero images will often cause bad Largest Contentful Paint Metrics Optimizing the hero image and the Largest Contentful Paint The largest Contentful Paint is an important Core Web Vitals metric. A hero image serves as a user's first glimpse of your company and offering because of its prominent placement towards the top of a webpage that usually extends full-width.Ī quick reminder: Hero images, the Core Web Vitals and the Largest Contentful Paintīecause of the size of the hero image (it usually spans the entire width of the page a good portion of the height of the visible viewport) this element will become the Largest Contentful Pain element in almost all of the cases. Use 2-stage loading to improve the hero Core Web VitalsĪ Hero Image or sometimes called a called a 'hero header' is a large image with text, often placed at the top of a webpage. Avoid lay-out shifts caused by the hero image Avoid lazy loading the largest contentful paint images & explicitly eager-load the hero image Serve hero images from the main domain & consider a Content Delivery Network (CDN) 2 Compress the hero image & use next-gen formats.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |