"How One Second Could Cost Amazon $1.6 Billion In Sales" - Fast Company "Google says 53% of people will leave a mobile page if it takes longer than 3 seconds to load" - Search Engine Journal
I love designing sites. Designing is the stage of the website process I love the most, and the one phase that I insist on handling myself. But the challenge isn't in making a site look pretty, it's with ensuring we can achieve ludicrously low load times while retaining the aesthetics and usability that our clients and their users expect. Nailing form, function and speed is a three-way balancing act, and one that can easily tip to one side without careful consideration.
Nailing form, function and speed is a three-way balancing act, and one that can easily tip to one side without careful consideration.
We all want our websites to look the best they can be. After all, studies show that prettier sites are more trustworthy, and trust is a key consideration when a prospect is looking to buy from us. But this makes my job that little more interesting. I have to find creative ways to reduce load times as much as possible, without sacrificing good looks.Luckily, most of our clients understand this. That's why they come to us. Typically our clients need to increase traffic and improve conversion rates and understand that speed is an important first step in this journey. With this in mind, they're willing to compromise on the aesthetic qualities of the design.But how do we do this? Here's some of our quick wins.
Before I get into the specifics, it's worth noting that you shouldn't blindly employ every single one of these techniques. Like I said, it's a balancing act. We must make considered decisions as to whether a feature or design decision is worth sacrificing load times for. Sometimes, it makes business sense to add a feature, even if it increases load times.
It's pretty standard for websites to feature large images on their homepage hero/slider, or at the top of any of their content pages and blogs. They look cool, I get it. But even with the best compression technologies applied, they can still weigh 250kb. Multiply that by as many images that feature on the page and the total weight can spiral out of control.Sometimes images on a page serve no purpose. They add no value to the site's content and exist simply to fill unused space. This adds unnecessary weight to the load times. Embrace the white space and design for it, or utilise an alternative way of adding visual flair to the site.When we need something visual, perhaps in a hero or title bar, we can turn to CSS gradients instead. CSS gradients are incredibly lightweight, adding mere kilobytes to your website's weight. Once loaded, this CSS is cached by your browser, meaning it's not downloaded on each page load, reducing load times even further. You can't go wrong.Here's an example on one of our recent sites, NetConsulting, where we implemented a blue CSS gradient in the title bar.
Another alternative to high-resolution imagery are vectors.Vector (or SVG) is an incredibly light-weight image format for simpler illustrations, digital drawings and patterns. They're also scalable, meaning they can be enlarged to an unlimited physical size without pixelation. We commissioned an SVG pattern to use on one of our past projects. Rolling in at 50kb, it's more weighy than a CSS gradient, but offers greater design flexibility.[caption id="attachment_1696" align="alignnone" width="2500"]
Although simpler. vector formats still allow you to create interesting imagery[/caption]I love Stripe's website. It's the one I turn to most often for design inspiration. You can see their use of SVG throughout the site and their entire hero is comprised of a number of layered SVG images.
You can be more adventurous. One of our sites allows us to define a background image in SVG format, and then animate in another SVG for a little eye-candy. Both elements combined weigh about 50kb.
We recently developed a site for a packaging agency. As you would expect, the site was incredibly visual, relying on image and video content to tell a story. When tonnes of weighty content like this is unavoidable, place it below the fold and implement lazy loading.Lazy loading ensures images are only loaded as they come into the browser's view meaning the initial load only includes media that resides above the fold. If a user doesn't scroll down to the locations of the remaining media, they're simply not downloaded. This speeds initial page loads.
Most sites use icons to help explain some of the features or services on offer. You've likely seen these on our What We Do page. Aside from being nice to look at, they help explain the feature or service. Used right, icons can negate the need to read the accompanying text, great for the lazy time conscious user.
Most sites are still utilising PNGs for these kind of icons because the format supports transparent backgrounds. Unfortunately PNGs icons are pretty weighty and when you have several on a page, they will unnecessarily increase load times.There's literally no benefits of PNG icons over SVGs. Utilise vector icons instead and you'll benefit from infinitely scalable icons at a fraction of the weight.
The more features you pack into a page, the greater your load times. Ask yourself if a feature you're adding is going to benefit your customers, or help you achieve your business goals. If the answer is no, remove it.
The more features you pack into a page, the greater your load times.
YouTube, Google Maps and Vimeo are great, but the moment you embed a video or map into a page, your load time increases by a second. This isthe case for almost any third-party embed. We can't optimise these embeds since we have no control over the source host, so avoid relying on these in your design.If you must use an embed, be sure that you can implement an image placeholder, where the embed is only loaded when the user interacts with the element. This ensures the slow-loading embeds don't affect your page's initial load times. Ask your developer to implement the iFramely API or similar.
Autoplaying videos in a hero or row/column look great, there's no denying that. But a well-compressed 30 second video can still weigh 10mb which is rarely justifiable if speed if a priority. If your aim is to reduce load times, auto-playing videos should be the first thing to go, particularly if they're above the fold.
Every typeface and weight variation used in your design will require the site to download it to your user's browser. If your design requires three different fonts, each with four different weights, then we must download a total of twelve files to render your page. Since the average font weights about 40kb, this can quickly add up.
Every design is different, but I try and restrict my typeface usage to four files; a headline font in three weights and a body font in one weight. If you're going for an uber-minimal design, then you might get away with one font in two weights.
Designing a website to be fast is just half of the job. The development of the design is just as, if not more important. There's a lot of technical considerations that must go into the development, upkeep and hosting of the site to ensure tip-top speeds to benefit from increased traffic and conversion rates. Failure to consider speed at every stage of the process will destroy all of the work you've put into design.I may well come back to this post and expand on developing and hosting for speed.
