Use lazy loading for images and videos
Posted: Thu Feb 20, 2025 3:17 am
Used well, images make your website more user-friendly and attractive. They also add value to your site.
However, each image on your site is a separate HTTP request, so if you have images that don't add value, it's best to remove them to eliminate those HTTP requests.
For example, is that funny GIF worth it ? Maybe it is… but maybe it isn’t. You need to think about the pros and cons every time you add more images to your content .
Finally, make sure to resize and compress the rest of your images . While this won't reduce the number of HTTP requests by itself, it will reduce the size of those HTTP requests, making them load faster.
With lazy loading, your site will wait to load images, videos , and iframes below the fold until the user starts scrolling down.
Because these resources are not loaded immediately, there is no need to make an HTTP request for the initial page load.
As of WordPress 5.5, WordPress now includes native lazy loading of images using the HTML load attribute . For other ways to implement lazy loading (including for video files), you can check out our complete chile phone number data WordPress lazy loading guide .
6. Limit the use of custom fonts and/or use system fonts (same for icon fonts)
Custom fonts are great for improving the design and user experience of your site. However, you need to be careful how you use them because each type of custom font you use adds another HTTP request.
If you're going to use custom fonts, make sure you keep them to a minimum. Do you really need a different font for the title and body of your message? Or could you just use the same font? Do you really need all five font weights? Or could you choose just two?
The same goes for icon fonts like Font Awesome and IcoMoon. Icon fonts can be useful, but you probably don't need to load multiple icon font libraries. It's best to pick a single icon font library and stick with it.
Finally, if you want to go one step further and completely remove font-related HTTP requests from your site, you can consider using a system font stack. While this will give you less flexibility in terms of design, it also means that your visitors won’t have to load any font files just to render your site.
However, each image on your site is a separate HTTP request, so if you have images that don't add value, it's best to remove them to eliminate those HTTP requests.
For example, is that funny GIF worth it ? Maybe it is… but maybe it isn’t. You need to think about the pros and cons every time you add more images to your content .
Finally, make sure to resize and compress the rest of your images . While this won't reduce the number of HTTP requests by itself, it will reduce the size of those HTTP requests, making them load faster.
With lazy loading, your site will wait to load images, videos , and iframes below the fold until the user starts scrolling down.
Because these resources are not loaded immediately, there is no need to make an HTTP request for the initial page load.
As of WordPress 5.5, WordPress now includes native lazy loading of images using the HTML load attribute . For other ways to implement lazy loading (including for video files), you can check out our complete chile phone number data WordPress lazy loading guide .
6. Limit the use of custom fonts and/or use system fonts (same for icon fonts)
Custom fonts are great for improving the design and user experience of your site. However, you need to be careful how you use them because each type of custom font you use adds another HTTP request.
If you're going to use custom fonts, make sure you keep them to a minimum. Do you really need a different font for the title and body of your message? Or could you just use the same font? Do you really need all five font weights? Or could you choose just two?
The same goes for icon fonts like Font Awesome and IcoMoon. Icon fonts can be useful, but you probably don't need to load multiple icon font libraries. It's best to pick a single icon font library and stick with it.
Finally, if you want to go one step further and completely remove font-related HTTP requests from your site, you can consider using a system font stack. While this will give you less flexibility in terms of design, it also means that your visitors won’t have to load any font files just to render your site.