I’ve helped a boutique travelsite with performance optimizations in WordPress. In this article, I share the issues we faced for site speed and provide an easy but yet advanced method for optimizing hero content. The example is based on Elementor for WordPress but the technique can be applied on any website and applied with most Content Management Systems.
In my previous article I’ve explained how the metric Largest Contentful Paint (LCP) is calculated. If you haven’t had the chance to read it, head over to the article and start reading the first paragraph (do not forget to return to this article 😉 ).
What issue do we face with hero content?
Most pages on the internet will provide you with some form of appealing image combined with a Call to Action (CTA) as shown in the examples below. It consists of a content section with a background image, text and a button on top of it. The easiest and widely used way to get this done is by setting a CSS background image. The below image shows a couple of different styled hero sections. All of them use a background image with buttons or even a complete form or carousel on top.
As a standard I’m not against the use of background images with CSS, but when dealing with content above the fold it becomes a different story. With the new Google Web Vital metrics this will have a negative effect on the user experience measured with the Largest Contentful Paint.
A CSS background image in Elementor
The image below shows the commonly used settings applied within Elementor and what it looks like on a desktop device. In some cases the background position should be different based on the type of device and what the how the focus point is positioned. In this example below the image for mobile visitors is more focused on the left part of the image while for visitors on a desktop device the surrounding is also shown.
The standard way versus the optimized way
The filmstrip below shows the visual loading progress of the homepage after we applied the optimizations compared to before state. We went from 4.6 to 1 second!
There are a couple of reasons why it originally took that long for the page to become visually ready. Most of the reasons are related to the order in which resources are loaded on the page. To be honest, optimizing for speed is all about the right order, so more about that in a later article.
In the case of a CSS background image the browser only knows that the image should be shown after the CSS is downloaded and read by the browser. Before actually showing the image, it needs (part of the) available resources (CPU) from the device. Depending on the type of device this can take longer (Samsung Galaxy S8 is considered a mid range device). When the CSS is added to the page with JavaScript (also known as CSS-in-JS) you are asking for performance issues.
How to solve this for a fast Largest Contentful Paint
The foundation for quickly showing the image is by making sure that all information about the image and styling is part of the page when it is being downloaded. By layering the text and CTA on top of the image with html tags we are able to accomplish this. Normally this is a more advanced type of optimization, but with Elementor this can easily be achieved for a simple hero header.
How we did it?
In Elementor we created two sections. The first one with an image component and the second with the text and CTA button.
The first section with a z-index of 1 and the second with a z-index of 2. Next to that we also gave the second section a negative margin to place it on top of the first section.
Now that we swapped the CSS background image for the regular image tag, we needed to apply CSS in order to stretch the image and apply the position options again. Luckily the CSS object-fit property already existed which allowed us to do exactly this.
Based on the optimisation we see the following results in terms of Site Speed Metrics:
Note: Do not try to add the CSS as custom CSS in Elementor itself, since that will be applied with JavaScript resulting in the same unwanted behavior. Instead add it with the WordPress Customizer in order to be injected in the page itself. Behavior can vary depending on the CMS and Page Builder being used. Example code is shown below:
.full-width.hero img {
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
object-fit: cover;
} Using this technique results in not being able to use the default background options anymore for above the fold content. When using this approach with multiple content editors it will only work with prebuild page templates and guidelines and some manual migration of existing pages.
Some tips for using this technique:
- After creating the two sections in Elementor give them some appealing names and export them as templates for later use.
- Just don’t use the default option for background images for above the fold content, optimise for user experience
- Whatever you do, don’t use an image carousel above the fold. They are hard to optimize (but, yes, it is possible) and so far I’ve never come across companies where it really worked out in terms of engagement. Most of the time it even hurts conversion.
Major take aways for user experience and site speed:
- Content needs to be visible fast for your visitors to understand if they’re in the right place and knowing what to buy. Make sure you prioritize your content accordingly
- Measure more than just page speed, also measure how your content loads in the browser itself using e.g. the filmstrip as shown above
- Optimize all of the assets being loaded on the page
Disclaimer: Optimizing for speed might become addictive!
This article is published before on LinkedIn.
