A quality website improves your brand’s visibility and credibility, and acts as an extension of your sales team by generating leads and potentially even closing sales. However, in order for your website to live up to its full potential, it needs to be properly planned, built, optimized and maintained. A poorly performing website won’t yield the best results, and could even be harmful to your brand by providing a sub-par user experience to your customers. 

One of the primary symptoms of poor website performance is slow site speed. Slow load times can be detrimental, as consumers’ expectations for a fast and smooth experience only continue to grow. If your website is suffering from slow load times, users will bounce from your site much more frequently, and will spend less time exploring and ultimately converting into customers. Even just a one second delay will reduce conversions by 4.42%. A slow website will also be less favoured by search engines, leading to poor SEO and less organic traffic.

What’s slowing down your website?

There are many factors that can affect your website speed, here is a list of the most common offenders:

• Heavy or un-optimised Javascript/CSS/HTML code 
• Un-optimized images 
• Bad cache support
• Improper server structure
• Unused or bulky plugins

Is this all gibberish to you? Don’t worry, we’ll unpack these issues in our tips below. 

How can you fix or avoid these issues?

1. Work with a professional  to update and clean up your codebase

Run a performance test on your site and check out the top issues or best practices section of the report. You may see errors with “javascript libraries” or recommendations like “remove unused css”. Issues like these can be easily resolved by having a developer update the codebase. For example, your developer can start by minifying all CSS and JS, which is “the process of removing unnecessary or redundant data from the code, without affecting how the resource is processed by the browser”.

2. Optimize your images

File Size

The first step in optimizing images for the web is to ensure that they are sized properly. For example, using an image that is 4k resolution (3840 pixels wide), in a section of your website that will never go above 1200 pixels wide is bad practice and leads to longer load time. Instead, make the image smaller, matching the size of its container. This will ensure that the image isn’t taking up any more time to grab from your web server than it needs to. Unsure of your image container size? There’s a standard guideline of “no image above 1440 pixels wide”. While not perfect, you will have a high resolution image that can scale up or down reasonably with minimal quality loss. 

Image format

You are likely familiar with the image formats .jpg and .png, however .webp and SVG are the best practice standard for image file formats in accordance with Google.

Webp standard is an image format that is made specifically for use on a website. It offers a lossless compression that is on average, 26% smaller than its .png counterpart. This means it will load significantly faster than most other formats offered. Note: webp is not viewable by safari before version 12.

If you are unable to use Photoshop or command line tools to convert your images, you can use an online converter like Cloud Convert to change the format. If you’re utilizing WordPress, you can include a plugin like Converter for media that will do this automatically for you. Keep in mind that plugins also hurt the performance of your site and should be used sparingly (more on that later).

SVG Is a Vector Graphic. Other file formats (Raster Graphics) store image content by creating a grid, and work similarly to pixels on a screen. This is called a bitmap; every grid item then has a set color. The downside of these formats is that they have set resolutions, meaning that the image gets blurry if it isn’t the size it’s intended to be. In cases where the image size is changing often (like your logo) developers and designers will often use SVGs instead. SVGs work by creating mathematical points and formulas to create shapes and lines. This means it will never be blurry because it’s code! SVGs offer complete scalability, smaller file sizes, and help with your SEO and accessibility ratings. If you have an infographic or illustration on your website, consider converting it to an SVG.

Lazyload 

Lazyload is another feature that can allow an image-heavy page to load faster, as it allows a user to load the image only when it actually appears on screen. This leads to faster load times, since content off the page can load only when it needs to.

3. Ensure Your Site Has Cache Support

A proper caching setup is crucial for improving your site speed. How does caching work? Once you’ve loaded the website once, your computer will temporarily store some of the information (like images, files, fonts, and videos) in its memory, making the website load faster on your next visit.

You can add a server level cache with most hosting platforms, which is controlled by the server instead of relying on a browser, or user. This type of caching has similar functionality, but instead of it potentially differing from user to user, it is consistent across the board. This ensures that all users will reap the benefits of faster cache.

4. Set up your server structure for success

This is crucial and often overlooked. Your server structure is the foundation of your entire website, and can make or break its performance. Work with a developer to ensure you have an updated and optimized database, remove unnecessary redirects from your server, have storage on your server (never above 80% used), and your website will thank you for it.

5. Remove unused or bulky plugins

If you are utilizing a CMS like WordPress, you may be used to installing plugins or widgets to your website to quickly and easily add functionality. However, there is a downside to having too many plugins on your website. Plugins take up a lot of your server’s processing power, and end up having a direct impact on your website speed. Pick and choose when and where to use plug-ins, and audit your website for any that are too bulky, unnecessary or unused (not activated).

How can I assess my website’s performance?

Utilize tools like GTmetrics or lighthouse to view your basic performance statistics, and work with your agency to further understand the insights and recommendations to improve these stats. 

• Performance score should be above 85
• Time Till Interactive (TTI) should be no longer than 2s
• GTmetrics should see a grade of A for sites newer than 2 years
• For websites that are 3-5 years old, you should score between B-C

These tools perform industry standard checks, and provide reports that narrow in on the issues most adversely affecting your website performance. The Flipp team uses these tools throughout the website build process to ensure we are hitting performance targets. 

It’s important to note that performance issues like bulky third-party plugins and widgets, or outdated codebase will not show up in these reports. It’s recommended to work with an agency partner to ensure that insights from these reports are coupled with a website audit to properly diagnose the root issues and implement solutions. 

Having a quick loading website has never been more important than it is today. Poor website performance can cost you customers and ultimately damage your brand. 

Is it time for a new website? Flipp us an email to learn more about how we can build a thriving website for your brand.