We’re all too familiar with the current Web design trends being replicated across many websites these days: much longer-scrolling pages, full-screen background photography (and auto-playing videos), parallax regions, scrolling takeovers, and tons of animations flying in and out. All of these techniques have gotten much easier to implement over the last few years, which has led us where we are today. What has been overlooked along the way, however, is the performance of websites using these techniques. And let me tell you, the Web is slow right now. Go ahead and finish your New York Times crossword while you wait for that home page with its 40-megabyte background video to load. You might as well multitask.
But we can fix it. As Uncle Ben says:
It’s our responsibility, as Web designers and developers, to make sure we’re considering the users who still have slow Internet connections, spotty LTE coverage, or limited data plans on their mobile devices. If you have an auto-playing background video on your home page, you’d better be disabling that for small screens or mobile devices. Forcing someone to download that with their data plan is irresponsible.
If you don’t fix it, you’re hurting yourself, too.
Did you know that your slow site could be hurting your SEO as well? Google admits that site speed is part of its criteria for ranking sites (though, like most of their metrics, they won’t specify the exact details of how it’s evaluated). The general consensus, though, is that anything beyond three seconds is “too slow.” After this amount of time, users may start jumping ship (this is called “bounce rate” when you’re looking at your analytics), which can also impact your ranking. If the user does stick around, they might be entering your website with a certain amount of frustration.
But performance goes beyond page-load speeds. The FPS (frames per second) that a browser renders on a Web page as you scroll through the pages and interact with elements should also be evaluated. Parallax background images are a common FPS killer. Visit one of those sites that you know uses the parallax technique (you probably know a few) and watch how the page seems to get choppy as you scroll through it. That’s because, while the parallax technique is relatively easy to implement now, optimizing it to perform is not. As a general rule of thumb, your browser should never dip below 30 FPS when using a website. The perceived slowness will drive users away, much like a slow-loading page would.
There are plenty of tools that can be used to evaluate website performance, and they usually give you suggestions on how to fix any issues they encounter. Google’s PageSpeed Insights is a commonly used one, for example. Type your website’s URL into the search box and get ranked on various criteria for desktop and mobile (including categories for speed and user experience).
Make Performance a Goal
Describing how a site can be optimized is beyond this article (maybe we can get nerdy and talk about this together). What I would like to urge you to do today is to start considering the implications of certain design decisions from the beginning of a project. Is that parallax region on the home page worth the increased page-load time and lower FPS? If it is (and it very well might be), then plan on spending some extra time on optimization to make the experience as smooth and buttery as possible.
It is possible to achieve great performance with these awesomely ambitious design techniques, but only if performance is one of your development goals, and you’re willing to spend the time to make it right.
Let’s make it right.