How to improve your image performance
By following these steps you can improve the image performance on your site, which should improve the experience for your visitors and give you a better PageSpeed score.
- Reduce file size by using modern image formats.
- Use lazy-loading to load images as they enter viewport.
- To lower layout shift, add
srcsetto serve correctly sizes images.
- Use placeholders to increase user experience.
1. By using modern image formats you can reduce images file size, witout losing quality. To cover all modern web browsers you can use
WepB. Soon enough
AVIF should be available as well everywhere.
2. Lazy-load your images using the native
loading="lazy" attribute. This lets the browsers decide when it's time to load the image, right on time for you to look at it. The browser will decide this, depending on your connection speed.
<img src="cat.webp" loading="lazy">
height to your image elment you decrease layout shift. Modern browsers will allocate space for the image before it's loaded, which will lead to less "flashing" content.
<img src="cat.avif" width="1920" height="1080">
srcset will let the browser decide what image is best for the device and screen size. Provide multiple options and your users will only download the smallest image possible.
<img srcset="cat480w.jpg 480w, cat800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="cat800w.jpg">
5. Provide a placeholder, for example a blurred image, to improve the user experience before images has been loaded.
BlurHash is perfect for this.
Four tips which could improve your HTML forms and inputs
This quick article includes tips and tricks for HTML forms and inputs with which you can both increase the user experience and let you get correct data sent in the form.
Npm 7 is now the standard, here is what you'll get
Finally npm 7 is generally available and published as latest in the npm registry. Read up on the differences, new features and performance boosts compared to npm 6.