When you install Drupal, you have the option to choose a “demo” profile that showcases different functionalities. This allows you to try out various features in a fun and safe way. However, you may notice that the background image used in the hero component is slow to load. This is a common issue with components that use large image files as background images. In this article, Mike Herchel provides modern techniques to address this performance problem.
Let’s take a look at an example of a hero component on the homepage of Drupal’s demo installation of the Umami theme. The image in this hero component is loaded through CSS using the background-image property. However, this creates a long chain of dependencies for the browser to display the image. It needs to download the HTML, parse the CSS, reconcile the CSS ruleset with the DOM, download the image, and finally display the image. This process takes time, especially on slower network connections, and can negatively impact the user experience.
One metric that measures the impact of slow loading images is called Largest Contentful Paint (LCP). It measures the time it takes for the largest image or text block to render on the initial load. In a test conducted through WebPageTest, the LCP for the hero component’s background image was 2.4 seconds. This is not ideal for page speed performance.
To tackle this issue, we can use an tag instead of a background image. By loading the image as a standard HTML element in the markup, we allow the browser’s preload scanner to detect and download the image early in the process. This eliminates the dependency chain and speeds up the loading time. To achieve the same visual effect as a background image, we need to use absolute positioning in CSS to stack the
element on top of a container element.
However, using an tag introduces new challenges. The image may appear squished and distorted because we set its width and height to 100% of the container. To prevent this, we can use the object-fit property in CSS, which works similarly to background-size: cover. Additionally, the absolutely-positioned image may cover other content elements. To address this, we can give the content container its own stacking context by setting its position to relative.
Another improvement we can make is to use a modern image format like WebP instead of a standard JPG. WebP is supported by all modern browsers and typically results in smaller file sizes. By configuring Drupal to serve WebP image formats, we can reduce the file size without noticeable loss of quality.
Furthermore, we can implement responsive images to serve different image sizes based on screen size. This allows smaller images to be served to smaller devices, resulting in faster downloads. We can achieve this using the element and specifying different image paths and sizes for each screen size.
By following these steps, we can significantly improve the performance of the hero component’s background image. However, there are still additional optimizations that can be made, such as using the AVIF image format and the fetchpriority HTML attribute for images.
In conclusion, addressing performance issues related to slow-loading images is crucial for improving the user experience on websites. Web developers should familiarize themselves with testing tools and metrics, and actively work towards optimizing performance. There are plenty of resources available to guide developers in their learning journey.
