It’s very important for your website to load quickly for usability reasons. Many studies have shown that if your website doesn’t appear in a few seconds, people WILL leave. In this article, we’ll explain how you can keep this from happening by keeping your page weight low.
Page weight is the overall size of the files that the browser has to download in order to display your website. Most of these suggestions have to be done by a web developer, however it is a subject that businesses with an online presence should be aware of.
1. Remove unused assets.
2. Minimize CSS.
While it might not always be possible, you should aim for one CSS file. This reduces page load time because the browser doesn’t have to download additional files. If you are using multiple CSS files, join them and get rid of unnecessary whitespace prior to launch. There are several tools, called pre-processors, such as Sass, LESS and Stylus that can do this for you.
4. Put images in the correct format.
Using the wrong image format results in unnecessary page weight. In general, use JPEG for photographs and PNG for everything else. It’s also important to resize photos before you put them on your page. Image dimensions should never exceed the dimensions of their containing element.
5. Remove unnecessary fonts.
Webfonts have given us access to a huge amount of font options. It is very easy to go overboard with this feature, so we need to be careful how many fonts we use. Webfonts also have to download which can result in a 150kb+ download. Try sticking to only 3-4 webfonts max in your web design.
6. Remove social media network buttons.
7. Replace images with CSS3 effects.
Instead of using modified images to display gradients or drop shadows, use the CSS3 properties devoted to this task. These properties are quicker to build and result in a lighter download.
9. Simplify your website.
Ultimately, in order to reduce the size of your download you may just have to cut things directly from the website. Consider what you need and what you don’t need. Do a little user testing to see which functionalities are rarely used, and then remove or replace these with cleaner and lighter options.
10. Get rid of excess framework code
Many websites make use of frameworks, such as Bootstrap or Foundation. These frameworks are pre-built responsive html/css templates that make building websites quicker and easier. However, these two frameworks in particular come with many, many lines of code, some of which you’ll never need. Even if you’re not using this code, the browser still has to download it resulting in longer load times. Find out what code you need, or switch to a smaller framework.