How to redesign an existing website to be performance-focused

There are many best practices for improving performance that require highly technical development expertise to implement. However, there are some ways to make performance a priority on your website that don’t require extensive technical knowledge. Performance should no longer be just a concern for developers, but for everyone who is involved in the creation of a website.

Web designers in particular play a big role in setting the stage for a website’s performance. The following tips and best practices can help you craft websites that are both fast and user-friendly.

Start collaborating with developers early

The best way to avoid issues in the development phase is to involve your developers early on in the web design process. The development team should review any design comps well before they are completed and approved so they have the opportunity to raise any concerns about issues, including performance, as soon as possible.

This will save you time and effort in the long run and will prevent having to sacrifice design integrity when the website is built out.

Design for all users

Remember that you are designing for a multitude of experiences. Whether that is a smaller screen size for mobile users or a slow internet connection for others, consider how a website design will translate to those experiences.

If entire groups of users are just an afterthought, then you’ll likely find yourself scrambling to find solutions later on in the project.

Now, that is not to say that you can’t create complex designs, just make sure you’ve considered how elements might adjust or be stripped down to provide a more basic experience when necessary.

Optimize images

Images are often the biggest culprit when it comes to slowing performance. As desktop computers have gotten larger and screen resolutions have increased, so have the size and number of images web designers use on our websites.

This is not necessarily a bad thing! Images are a crucial part of an effective website, as they can help forge a connection with users and improve conversion rates. However, since they are so important, careful consideration must be given to properly optimizing images so they don’t slow down your website.

Here are some things to keep in mind when using images in your design:

Evaluate the number of images actually needed. Don’t use images just to fill space, but because it is adding some value to the content. Not every page needs an image!

Use image treatments to reduce size. There are various effects you can apply to photos to keep file sizes down. For example, changing a photo to black and white, adding a color overlay, or blurring parts of an image will all reduce an image’s size

Try a different file type. Consider using illustrations or icons on your website so that you can take advantage of SVGs, which are typically much smaller than PNGs or JPGs. Be aware of image file formats available to you and select them accordingly.

Compress images. Whether this falls on the designer or the developer depends on your workflow, but either way, ensure that the final image delivered to your user is as compressed as possible.

Reduce the number of custom fonts

Sometimes better website performance is as simple as reducing the number of custom fonts you incorporate into your page design. This also applies to what weights of a font you are using as well.

The less variety of fonts you use, the fewer number of files that need to be accessed and the faster your site will load. Take this into consideration from the beginning of a design and think twice before introducing another font.

Use animation and special features wisely

When designing how a user will interact with a website, it’s important to consider things like movement and interactive elements, as these features improve the user experience. Unfortunately, they also can have a negative impact on performance.

While there is a time and a place for adding animation or interactivity just for fun, typically performance is a more important concern. Use animated elements purposefully when they add value for your users. Consult with your developers to determine what types of effects could sacrifice performance so you are designing the best possible experience.

For example, you might consider adding an image slider to a page that will flip through multiple images. This means adding special functionality, which likely will increase the amount of assets and code loaded on to the page. Would a single image in this space be just as effective? Or is it something like a collection of product photos were the value to the user would be worth the extra loading time? Keep having these types of performance-focused conversations throughout a project.

Reuse design elements

Another way to reduce website loading time is to reuse elements across your website. Every unique page design requires more code to create. When designing new pages, consider what elements you’ve already created and determine if they can be reused instead of creating something new.

For example, if you are creating a landing page for a campaign, could you repurpose elements from the main site? Maybe a mixture of existing elements and new elements would work best?

Don’t just design something new without thinking of how it ties in with the rest of the website. By establishing design patterns, you not only create a more consistent user experience, but you also ensure that developers can better optimize their code for performance.

Consider perceived performance

Perceived performance is the interpretation of speed by a user, not necessarily the actual loading time. Consider ways that improve a user’s perception, such as displaying a simple loading animation while elements are loading into the page or including a feedback message that pops up after a user completes an action but before your site is finished processing.

This is especially important for users with slow connections who will have longer load times. Even a simple loading screen can make someone more willing to wait for content to load in. Design details like this go a long way towards improving a user’s interaction with your website.

Is it time to redesign your website? We can help. Let’s talk

Read more about website speed & performance:

• 10 ways to improve your website performance
• Improving website performance with image optimization: A beginner’s guide
• Quick tip: Improve the speed of your website