We know what's slowing your website down!

Wednesday, December 7, 2016

Do you ever visit a website and get the impression that it's slow? Do you actually own a website that's slower than your competition's? If that's the case, in this article, we'll help you find out what's causing that and what you can do to fix it.

Too many pictures slows your websitE

Of course, it's the basis of Internet speed, how many kilobytes does your browser have to download to display your website. The heavier your site is, the longer it will take to download. Knowing that today, having big, beautiful images (and even videos) is pretty much a necessity, what can we do to increase its speed? 

Install a scroll-load on your website

What exactly is a scroll-load? It's basically something you can install on your website that allows your visitors to only download the images that are displayed on their screen. By doing so, it allows the website to be displayed much faster since it will only download all the hidden elements when/if the user scrolls down. 

Preload some images

One way to give the impression that your website is faster is to preload required images from the start. The visitor will then see your website in all its beauty right from the start and would download the rest of the content afterwards, giving the impression of a faster website. To specify which images you want to preload, add the following code in your header:  

<link rel="preload" href="/images/photo1.jpg">

Reduce the number of hidden images

Sometimes, we're actually the ones responsible for slowing our own website down. For example, if your website has sliding images, normally, a visitor wouldn't spend 45 seconds on your home page waiting to do something. Knowing that, you now know that having, for example, 10 sliding images is just a waste of bandwidth. Limit yourself to 4 or 5 images and you'll really increase the loading speed of your website.

Your javascripts slow your website down

Nowadays, a website isn't a boring, static place anymore. Today's websites are dynamic, adapt depending on your device and, more and more, adapts it content to its visitors. That being said, all these extra functionalities require Javascripts that need to be installed on your website, which ends up draining resources and slowing everything down. So what can we do to limit these problems without going back to the Web's stone age?

Only download scripts that are necessary to your page

Your website might require a dozen or so different Javascripts to manage a wide range of things, but it doesn't mean that every page on your site uses every functionality available. That means you can target exactly which scripts you load on each page, allowing you to increase your sites performances.

Use a compressed version of your scripts and CSS

The vast majority of Javascript libraries offer a compressed version of their files. We often find the suffix "min" at the end showing that it's the compressed version. Using this version allows you to reduce the kilobytes required for your website, therefore increasing its speed. FYI, at Numérique.ca, we developed our own system that regroups all our files together (CSS as well as Javascript) and compresses them automatically. 

Download your Javascripts in the end

Very often, certain scripts are required for your website to work, and be displayed properly. That being said, we're sometimes able to download some scripts at the bottom of the page, giving the impression to your visitors that your website loads faster. By the time the visitor decides what he wants to do, the rest of your scripts are already downloaded. 

Move your Javascripts on a sub-domain

With our current version of HTML, you're limited in the number of connections you can have with a single server (that will change with the next version!). One strategy that we use to increase a website's speed is by creating sub-domains for scripts as well as for your CSS files. Each sub-domain (e.g.: js.numerique.ca) allows you to increase the number of connections you can make at the same time since they're considered on another server (even if it's not physically the case), so you can easily triple the number of items you download at the same time just by using 2 sub-domains (js and css). 

Your site is hosted on a server that doesn't offer enough bandwidth

If everything I mentioned earlier is done and you still find your website is too slow, it might be time to check with your hosting company.  

It's possible that either your plan doesn't fill your needs, or even worse, your site doesn't have access to enough bandwidth. Ask your hosting company what's the speed of your network link on which your website is hosted. If he talks in terms of megabits, you had better start asking questions because today, you should have at least 1 gigabit of bandwidth (which is 10 or 100 times faster).

Your Internet connection is too slow

Even though it's the last thing on our list, it's the first thing you should check. If you're at home and you find your website is too slow, ask yourself: 

• Are all the websites I'm visiting this slow or is it just mine?
• Am I downloading something at the same time?
• Is someone watching a video/movie in streaming on Netflix?

If you answered "Yes" at anyone of these questions, it's quite possible that the problem isn't on your website at all, but with your Internet connection. Today's Internet accesses are very fast, but if someone is using a large part of that available bandwidth to download, for example, a movie in 4K, it's very possible that you'll see your browsing speed decrease.

We hope this article was useful and will help you get even better performances with your website, and if ever you have some questions, don't hesitate to contact us!