The goal of this module is to provide a mechanism to help improve the Largest Contentful Paint web vital metric.
How does it work?
This module provides a mechanism that attaches to the core responsive image field formatter plugin that is capable of generating a set of preload links that can cause the proper image derivatives to be downloaded much earlier in the rendering process. It does not otherwise change the behavior of the core formatter plugin.
What can it do?
Sometimes browsers can use a helping hand prioritizing asset downloads. By preloading an asset, it is able to jump to the front of the line. Take the following example:
Before
After
What's the difference?
Before, there was a period of roughly 600 milliseconds where the asset that determines the LCP timing was in limbo waiting for the HTTP/2 socket to become available. There seems to be a much better chance of the asset downloading quicker if it is the first asset to use the socket.
As can be seen in the second image, there is no queueing period anymore.
Installation
Install this module via composer composer require drupal/responsive_image_preload
Configuration
This module provides a third party setting for the core Responsive Image
formatter. Configure it on the entity view displays that need to be preloaded. It is highly recommended to check out the configuration guide for more details and recommendations.
Attachment | Size |
---|---|
before.png | 171.54 KB |
after.png | 174.57 KB |
Project information
- Module categories: Media, Performance
- 342 sites report using this module
- Created by Luke.Leber on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.