There are huge differences in satisfaction and trust ratings for sites that have load times that differ by just a couple seconds, and those perceptions and frustrations make the difference between thousands of conversions. So obviously, speed is incredibly important for any kind of site. But, you ask, what does that have to do with the designer’s role? Isn’t that the forte of back end developers?
In fact, up to 90% of the responsibility for slow loading times lies with front end design. This means that optimizing and organizing all your HTML, CSS, Javascript, and supporting files is the most important thing you can do to improve your site’s performance. Every image, video, typeface, and other element should be considered before it’s brought into the mix. It’s the designer’s job to make sure that all these front end elements can be reduced in size to make a speedy site, while retaining aesthetic appeal.
The Minimalist Design Trend
Not only do a simple, flat designs confer a sense of modernity and restraint, they also save a ton on server resources, and load much faster than their counterparts with lots of effects.
- Tip #1: If it works with your project’s aesthetic, consider simplifying your designs. For example, try using flat buttons with no drop shadows, glow effects or other flourishes. Reduce your navigation to a simple typographic list that can be styled with CSS alone. Not only will this cut on load time, it’s on-trend and easy on the eyes.
Optimizing Your Images
Image optimization is tricky, because different techniques work for different types of files. Nevertheless, there are some tricks you can easily employ in the most common formats, such as:
- Tip #2: Never save your file at 100% quality; 90% or 95% should always be sufficient for web images.
- Tip #3: In Adobe Illustrator, learn to align your artwork to the eight-pixel grid. This can be done automatically to groups of objects, or manually. Having the correct alignment and whole numbers for dimensions makes shapes much more crisp.
- Tip #4: In Adobe Photoshop, try posterizing PNGs at a high level to reduce the number of colors without affecting the visual perception.
Testing Your Results with Google Analytics
Of course, if you’re working to speed up your site, you need to be able to accurately gauge how much your improvements are helping. You can use a site speed test to find out how you’re doing; there’s even an option to compare it to a competitor’s site.
- Tip #5: Employ Google Analytics’ PageSpeed Insights to get insights on how to further improve your optimizations; for those who aren’t familiar with this powerful tool, turn to an Analytics guide to learn more.
Web design is getting to be more and more mobile-centric, and that has repercussions for designers that we can no longer ignore. There’s a big difference between being at home on a fast desktop with a reliable connection, and being out and about on a 3G connection with your phone. But users expect a good performance from both situations, and designers must adapt by making speed a priority.
