Does your homepage need resuscitating?
Did you know that a mere one-second delay in web page response times can reduce conversions by a whopping 7%? It’s an alarming statistic, and rest assured there are more facts where that came from. The bottom line is that poor website performance – whether that’s slow load times, sluggish video or stilted scrolling – can cause real damage to businesses.
Scrolling performance is a major issue for many websites. Often, the problem stems from ambitious design features which, although they look great, are often stilted in practice. Thankfully, CSS can bring out the best in both design and performance.
In this article, we’re tackling a specific scrolling problem created by a static viewport-sized background image. In other words, these are websites where the background image remains static, while the foreground moves as you scroll. If you’re familiar with this, you’ll know that executed in the right way, it’s a stunning design feature. But all too often, it’s far from perfect – producing a jolting scroll and poor performance. So how can CSS rectify these issues?
How can the problem be fixed with CSS?
First, we want to point out that the role of CSS is not to completely undo your great design work. Instead, it strives to fix issues that hamper the performance of a site, when these problems stem from visual elements.
CSS can be used to rectify stilted scrolling, which can be an immediate source of frustration for web users. The first step is identifying what causes the problem, and then identifying a clever way to fix it.
So what causes this specific performance problem with static background images? The issue stems from the markup used to control this design feature – background-attachment: fixed – which requires a lot of background work. Every time a user scrolls, the webpage has to reposition content and repaint the image relative to this content, to create the illusion that it is static. This is known as ‘repainting’, and it can cause some serious performance flaws.
To fix the issue, you’ll need to confirm the diagnosis. A quick peek into the timeline feature of Google Chrome’s DevTools reveals the problem – simply hit record and you’ll have real-time insight into the fps (frames per second). At around 60fps, there will be jitter in scrolling. From 30fps, there is a real cause for concern.
To resolve the performance issues, you’ll need the help of CSS. The background image requires its own element, which allows the image to move independently of other elements. To do this, you’ll need the will-change: transform property, which tells the browser to render the background element separately.
Any CSS change comes with a word of caution. Before you take the plunge, you’ll need a testing environment and an understanding of any potential knock-on effects, because a simple change could do more harm than good to your website’s performance.
Do your research and, if you’re not a front-end developer, find an expert who can do the job on your behalf. Your website, and your customers, will thank you for it.