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.
Websites can and often do change, as do the needs of your customers. If you are no longer using a widget, definitely consider removing all the associated Javascript/CSS. This can be an easy process depending on where the widgets are kept. If they’re not in their own dedicated file you can use one of the following tools: JSLint, Dust-Me Selectors, CSS Usage, unused-css.com.
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.
3. Minimize javascript.
Just like CSS, you’ll also need to minimize the amount of Javascript files you use. Certain Javascript libraries such as JQuery need to be in their own files, but try to fit all of your custom Javascript into one file. Also try using one of the Javascript compressors available. Finally, it’s good practice to load your Javascript at the end of a page, right before the closing </html> tag. This will ensure that your script downloads don’t block content for that page.
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.
Facebook, Twitter, Google+, and LinkedIn sharing buttons on your page contribute to a large page weight because of all the Javascript involved in them. Sometimes a network might even insist that this script be loaded before the content on the page, which serves to frustrate your users. If you’re using a WordPress widget to display these links, consider that the same task can be completed with a few lines of HTML, resulting in a quicker load time.
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.
8. Replace javascript with CSS3 animations/transitions.
In the past, Javascript has been used to animate and move certain html properties. Now with CSS3 we don’t need Javascript to do this. CSS3 animations, transitions, and transformation properties execute natively in the browser, and they require less code than Javascript.
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.
Conclusion
Some of these suggestions are very simple, such as using CSS to replace Javascript animations or modified images. The web will continue to evolve and more and more Javascript and other widgets will be replaced with simpler CSS solutions so always continue to keep an eye on this. It’s also a good idea to use one of the following tools to monitor download speed and website hits: Google Page Speed Insights, Pingdom, or Firefox Web Developer Add-on. If you’re finding that your website isn’t giving you as much business as you would like, contact us at EMWD for a free consultation.
[av_hr class=’default’ height=’50’ shadow=’no-shadow’ position=’center’ av_uid=’av-lhese’]
[av_hr class=’invisible’ height=’50’ shadow=’no-shadow’ position=’center’ av_uid=’av-ckscm’]
[gravityform id=”1″ name=”List Sign-up Form” title=”false” description=”false”]
[av_hr class=’default’ height=’50’ shadow=’no-shadow’ position=’center’ av_uid=’av-b2kym’]
You must be logged in to post a comment.