Faster Loading Home Page
Google Analytics + Technical SEO + Content Design
The home page of this manufacturer’s website was very slow on mobile. While mobile page views were increasing, few visitors on mobile devices were converting. Replacing a decorative video background with an animation made the home page load much faster.
Project Overview
Key Objectives & My Approach
Since data says faster loading pages lead to more conversions, we decided to speed up the home page.
First, we tested the home page using Lighthouse and GTMetrix. We looked at the detailed reports to find areas we could improve.
The client didn’t want a major redesign. And they didn’t want to change hosting companies. I focused on
- Optimizing caching
- Removing unused CSS
- Breaking up or switching out slow-loading page items
Speed Testing Pinpoints The Slowest Element…
First I tested the home page with PageSpeed Insights from Google. This report starts with a snapshot of how users experience the web page. PageSpeed insights also rates things not related to speed, like accessibility and site structure. I wanted to focus on speed only. So I used GTMetrix. GTMetrix testing is based the same underlying tech as PageSpeed Insights. However, GTMetrix is focuses on speed. I like the overview format and the way they breakdown the waterfall graphs by asset type. (images, fonts, etc.)
…It was a Video
The slowest-loading asset was a video background. It didn’t relate specifically to the customer’s product or business. However, the customer liked the way it called attention to the Request Form. First, I tried compressing the video and removing the sound channel. While the video loaded faster, the page was still slow overall.
To keep motion on the web page while dropping the heavy video, I animated the text elements around the Request Form.
Final Impact
More Mobile Users, More Leads
Creative Highlights
- Removed slow loading video background
- Animated text boxes to highlight call to action
- Broke long text into shorter phrases
- Replaced single-use decorative font
Results and Outcomes:
- Cut page load time in half
- 200% more leads from visitors on mobile
- 21% more visitors using mobile device
- 30% more leads on desktop devices