How to Design an Interface That’s Built for Speed
Is your website slow? Be honest. Could it be faster? Users demand websites that load quickly and continue to deliver content without lag. If your website falls the least bit behind in meeting this demand users could abandon your site (and they might never return).
Today, we’re going to look at ways to make sure your website interface is built for speed, so you never have to worry about page load times again.
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
Landing Pages & Email
Shopify, Tumblr & More
Icons, Vectors & More
Test Your Website
Before you stop at “there’s no way my website is slow,” test it out. Google has a great tool that anyone can use to test any website by entering the URL.
You get a nifty report that tells you how quickly your site is moving and where it could be improved. It’s a good idea to run the test periodically to ensure that everything is functioning smoothly. (Plus, it breaks down performance on mobile and desktop devices and offers suggestions for improvement.)
The report makes three recommendations – should fix, consider fix and passed – for the following items:
- Browser caching
- Image optimization
- Server response
- Scripts and CSS above the fold
- Prioritization of visible content
Dump Unnecessary Plugins
Are you holding on to plugins or add ons that you just don’t use? It’s time to dump them.
Even elements that aren’t in use are pulling speed away from your site. (This is especially true if you are working off a system such as WordPress.)
Get into cleanup mode and remove any unused plugins. You should consider thinking about plugins in use as well and make sure you are actually using them or that they contribute to the overall user experience, if not find a better option.
In addition to number of plugins, quality is also a concern. Don’t just add any old plugin to your website. Try to find elements that provide actual value and come highly rated. Old, out of date elements can also drag your site down.
Share Only as Needed
While we are thinking about plugins, how many social media sharing buttons do you have on your website? Now answer honestly: How many do you actually need?
Too many of these buttons can be confusing to users – how many are actually going to share on multiple platforms anyway – and bog down speeds and load time. (This is particularly true of ones that are trying to figure out how many likes, or shares a post already has with queries running in both directions.)
Pick one or two networks where you are active and where users connect with your website regularly and includes those buttons. Ditch the rest. They are only getting in the way.
Be Wary of Image Overload
Video, illustrations, photos and animations … oh, my! All of these great visual elements can add to load times. Choose wisely.
Before adding any visual to your website design, weigh its value against other elements. Does it provide something for users? If so, proceed. If not, why are you using that design element?
You should optimize all images appropriately for the web. As a general rule, images should be only as big as needed. Don’t go overboard and upload full size photos. It takes a little work on the front end, but you will be glad you did it later (particularly if your website continues to grow).
Take advantage of other tricks as well. Try icon fonts rather than image-based icons. Convert elements to SVG (scaled vector format) if an icon font does not work. Use as much HTML and CSS “magic” as you can and don’t bog the site down with elements that are loading as photos such as buttons, arrows and other user interface tools.
Take a Load Off with Shrinking Tools
Small files are the key to top speed. The balance is in the idea that high resolution displays allow you to share and showcase content in top quality. That’s where shrinking tools come in.
If you don’t feel confident in your ability to size and shrink – or you just aren’t getting the desired result – try one of these options to get files down to the smallest usable sizes.
- WP Smush shrinks images for WordPress users
- Kraken compresses images for all users
- TinyPNG reduces the size of the common format even more
- Gzip packages files for optimal compression
- Minify Your CSS reduces overall code size and includes an API
- SpriteMe turns background images into a CSS sprite to save HTTP requests
- CSS Compressor reduces overall code size
Just Cache It
Enable caching on your website.
If you aren’t doing this, your users are paying the price. There are still a few people out there that might argue otherwise, but the value to users outweighs those arguments. Your website needs to be fast.
A cache create a temporary file from pages so that the browser “remembers” the site when a user returns. It reduces bandwidth usage, server load and lag time (actual or perceived). Users will thank you, particularly when it comes to accessing more massive websites.
Clean It Up Regularly
Just like you have to clean your home on a regular basis, you need to clean up and maintain your website database, links and files.
These are the items on your website cleaning checklist:
- Optimize your database. Over time your database can get clogged with revisions, out of use photos and saved data. You don’t have to keep it all. Purge elements that are no longer part of your website plan.
- Don’t hotlink images. Pulling images from someone else’s website (and server) to yours is just a bad idea. And it is slow. The same it true of almost any other external file request. Use them only when necessary.
- Fix links. Broken links might not slow down your site, but it slows down the connection users make from your site to other places, which can be equally bad. Get in the habit of checking for, and correcting, broken links.
- Keep everything updated. If you are running on a platform such as WordPress, take the updates. If you are using a theme or boxed elements of any type, the same is true. Updates can contain patches that contribute to speed as well as keep your website safe from potential threats. (And nothing is slower than a site that’s been hacked or infected with malware.)
Now work through the list above and go back to Google’s Pagespeed Insights tool. Run it again. Do you notice a difference?
Nothing will make a user happier and more likely to return to your website than a great, and fast, experience. During all phases of the visual design, remember to think about the interface design as well so that your website is built for speed.