WP Core Web Vitals :: Images
Take back control of your website's speed with WP Core Web Vitals
WP Core Web Vitals Images overview:
Images are important for websites because they grab attention, add visual interest, convey information quickly, enhance brand identity, and improve user engagement and experience.
Table of Contents!
Since image often take up a large portion of the visible space on a page we need to optimize these images for speed! We need to make sure that important images are downloaded immediately. We also need to ensure that images that are not in the visible viewport do not compete with resources that are more important at that time.
How do Images affect the Core Web Vitals?
1. Largest Contentful Paint
Large images in the visible viewport will often become the Largest Contentful Paint element. To make sure this element is painted on the screen as soon as possible we need to make sure the image start downloading as soon as possible and has al little as possible competition form other network and CPU resources
2. Layout shift
Images with missing width and height attributes will often cause a layout shift. If the width and the height are not known in advance the browser does not know how much space to reserve. A browser will usually reserve 0x0 pixels and once the image has loaded and the dimensions are known the browser will shift come content to create space for the actual image size.
3. Network competition
Images that are not visible should not load immediately. This saves up valuable bandwidth for resources that are much more important to the browser at the start of page loading such as fonts and scripts. WP Core web vitals can add the native loading="lazy" attribute or use JavaScript based lazy loading.
Did you know ...
"WP Core Web Vitals outperforms other pagespeed plugins by 160% on average!"
WP Core Web Vitals - Image optimization
Page Caching has a few options that will help you speed up your site.
- LCP elemen
- Add image missing width and height
- Enable native lazy load
- Lazy load background images
- Async render images
- WebP
LCP element
LCP element is one of the most important settings of WP Core Web Vitals. When we are able to identify the LCP element we can optimize it for you. In case of images this means that we can make sure that the LCP element is enqueued by the browser as early as possible.
You will need to add the LCP elements class name OR the class name of a parent attribute. We will explain this in more detail below!
Recommended setting: yes
Add image missing width and height
Add image missing width and height does exactly what it says it does. It adds missing image dimensions. Be careful with this feature though because it requires the plugin to analyze each image that is missing dimensions (the html width and height attribute). It would be much better to fix your template and add all the image dimensions in there then to enable this setting. Unfortunately that is not always an option. In that case enable this setting!
Recommended setting: it depends
Enable native lazy load
Enable native lazy load will add loading="lazy" to all images on the page except for images that we have identified as visually important. We can identify important images either by the LCP element setting or when we find the loading="eager" attribute.
Recommended setting:yes
Enable JavaScript lazy load
Enable JavaScript lazy load will use the intersection observer API to lazy load your images and not the native loading attribute. The advantage to this is that it has better cross browser support. But in most cases you are better off disabling this setting!
Recommended setting:no
Lazy load background images
Lazy load background Images will delay background images just a tiny bit. This will prioritize non-background images over background images and in some cases speed up the LCP. Do NOT enable when your LCP element is a background image!
Recommended setting:it depends
Async render images
Async render imagess will add the native rendering="async" attribute to all non-LPC images ! It means the browser now has permission to show content before the image has finished the loading and decoding proces
Recommended setting:yes
Find the LCP element class name!
To find the LCP element classname we first need to identify the LCP element itself. There are several ways to do this but by far the easiest way is to add the Core Web Vitals Visualizer plugin to your browser and click on it. It will highlight the LCP element for you!
Once you have found the LCP element and have confirmed that that it is indeed an image we need to identify the classname. That is also easy, right click the image and select 'inspect element'. Thsi will open the chrome console and you will see the HML version of the current page. Here we can see one of 2 possible situations. If the image has a classname just add that classname to the plugin. Otherwise add the classname of the closes parent element.
<div class="imagecontainer"> <img src="hero.jpg"> </div>Add .imagecontainer to WP core Web Vitals LCP element
<div> <img class="heroimage" src="hero.jpg"> </div>
Add .heroimage to WP core Web Vitals LCP element
Frequently asked questions
Do I need to lazy load images?
Yes, you do. From a pagespeed perspective it makes to sense at all to load images early during page-load when you will know for certain they are not visible to the visitor!
Do I need to disable other image optimization plugins?
Please disable all other lazy load plugins. You do not need to disable plugins that generate responsive images or optimize image filesize. As a matter of fact we encourage you to install plugins like WebP Express
Can optimizing images cause issues with my WordPress site?
Yes it can, but that is an easy fix. If you let us look up the width and height of an image make sure the image cannot grow out of it's container by adding img{max-width:100%;height auto} to your stylesheet.
