7 Ways to Decrease Loading Times on Your Website

Is your site taking too long to load than it should ideally? Are you experiencing high bounce rates because users don't want to wait once more? Are the slow network users of your website being delivered the content in a fairly reasonable amount of time?

Whatever the case be, all these questions point to only one single aspect in web development - loading.

If you are tired of it, then your users might be too. So here is what you need to look into.

If you are delivering a 1080p resolution image on a 300px wide container on a mobile device then you are simply wasting your bandwidth and increasing loading, for absolutely no reason.

Compression would be your friend in dealing with this problem.

Basically compression is reducing the size of an image by removing some unneccessary pixels. For example the same 1080p image as discussed above can be reduced some where around 500KBs from 2 or 3MBs!

Now you don't need to really know how compression works - but rather how to implement it in your projects.

You can compress images using third party tools or right away on your server. For a detailed guide to compressing images please read this article.

Minification is to reduce the size of a file by reducing redundant code within it. For stylesheets and scripts one example of such code is comments - comments aren't needed for a script or stylesheet to work any differently and can therefore be removed from them to reduce their overall file sizes.

Consider the following unminified version of a CSS file styles.css:

/* .main-section is the element
* encapsulating all our main content */
.main-section {
-webkit-box-sizing: border-box; /* fallback box-sizing property */
box-sizing: border-box;
position: relative;
overflow: hidden; /* prevent content from flowing out of the element */
padding: 10px;
}

As you can see here, there are a handful of comments to describe certain pieces of the code, as well as indentation inside the style block to favour readability - all making the file worth 316 bytes.

Now consider the minified version of this file below:

.main-section{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;overflow:hidden;padding:10px}

Clearly you've lost readability as well as any means of understanding what purpose, some pieces of your code are fulfilling; but fortunately achieved a lower file size - 113 bytes.

CSS interpreters, as well JavaScript engines, don't need clean code and likewise there is no point of providing one.

If you have ever seen filenames such as script.min.js or style.min,css, then you have already encountered minified resources without you knowing about them!

Coming to how to minify CSS and JavaScript, there are tons of places out there to help you uglify code. You just need to input your code, press a button or two, and get the baked ugly version of it. It is that simple.

In the article What is Minification we discuss minification and how to do it in deep detail so consider checking it out if you are wanting to minify your resources.

Lazy loading is simply to load something only when it is needed.

For a website's resources such as images, audio, video, iframes and so on, lazy loading means to load them when they enter the viewport.

Unlike normal loading which delays the firing of the onload event, in lazy loading the webpage loads ASAP, after which subsequent requests are made for the needed resources. In this way our applications tend to do both, load quickly and load needed stuff too - no compromise!

Lazy loading works on the principles of Element Offsets in JavaScript and obviously HTML and CSS too. It can become quite complicated to write lazy loading code considering the fact of delivering browser compatibility, effects, efficiency etc with the script.

Therefore for these reasons we have frameworks already made for lazy loading stuff as discussed in the article What is lazy loading and how to do it. However it is not a bad idea, to learn how these frameworks work really! If you want to check this out go to our Lazy Loading Tutorial.

It sounds great to import multiple libraries in your website application for doing different things such as sliding panes, fading elements, doing AJAX stuff and so on.

Sometimes libraries do an amazing job of saving one's time as well as thinking in writing the code to carry out certain tasks, but every day isn't a Sunday! Sometimes having a library hurts more than it benefits, especially when the desired functionality can be rewritten in vanilla JavaScript in a couple of lines.

Let's illustrate this using an example.

Suppose you have an overlay to hide all the content on a webpage and perhaps give room to show a popup, you might go off by selecting the overlay using $("#overlay") and then invoking its fadeIn() method to fade it in.

Something similar to the following:

<div id="overlay"></div>

function showOverlay() {
// once this function is called
// fade-in the overlay
$("#overlay").fadeIn();
}

Now if you've brought on the jQuery's library on your website for only this purpose, then you have definitely not done justice with this superb library. In fact you've also not done justice with JavaScript - why do you fear writing such a simple task in vanilla JS, when the code is as easy as the task?

Below we utilise a bit of CSS and class toggles to accomplish this very task.

#overlay {
-webkit-transition: 0.5s linear;
transition: 0.5s linear;
opacity: 0;
visibility: hidden;
}
.fade-in {
opacity: 1;
visibility: visible;
}

var overlay = document.getElementById("overlay");
function showOverlay() {
// once this function is called
// fade-in the overlay, but in VanillaJS!
overlay.classList.add("fade-in");
}

The element, by default, has opacity: 0 and visibility: hidden to prevent it from being visually seen. By adding the class fade-in we change these properties to opacity: 1 and visibility: visible to bring on the element into view, transitionally, in a time span of 500 milliseconds.

It's just basic CSS and JavaScript!

Depending on your use case you can tailor these concepts to meet your requirements, and solve an easy task using a relatively much smaller span of code, as compared to a gigantic library.

Truly, jQuery is awesome, but not at any cost, when the underlying tasks can be done with a few lines of CSS and JavaScript. The idea might not sound senseless for just one library, but when you have tons of them you will realise the benefit of cutting down on some of them.

So go on, analyse your code, see where you're calling unnecessary bits of informations, remove them and consequently save at least some percentage of your site's precious resources.

A common mistake many web developers make is not analysing what resources are they requesting for on a web page - are they even neccessary or not?

Web fonts and icons, embedded in CSS stylesheets, aren't really right-away needed on websites and therefore can be loaded in JavaScript.

This would prevent them from blocking the HTML render while at the same time get loaded ultimately. Compared to this if we request font and icon stylesheets normally in the head section of an HTML page, and if they take too long to load, a potential user might be seeing a blank page for way longer than he should - and we don't want this to happen right?

How to:

So here is how to load fonts and icons in JavaScript:

document.addEventListener("DOMContentLoaded", function() {
var link = document.createElement("link");
link.rel = "stylesheet"; // rel="stylesheet"
link.href = "icon-font.css"; // link to the css file
});

Are you familiar with anything along these lines:

Leverage browser caching.

If not or even if you are but don't know what it means continue reading..

The resources that ideally can be cached are the ones often re-used such as CSS or JavaScript files, however you can cache literally any file. HTML files tend to be rarely cached since they are considered to be frequently updated.

We have two classifications of caches: browser caches also known as private caches and intermediate caches also known as public caches.

For this article we are concerned with the former type i.e browser caches. When your browser requests for a resource that it is instructed to cache, it will save it in the local storage and on the next request for that same resource will fetch it instantly from there reducing load times significantly.

Having a huge script in the head section of an HTML page, can potentially cause the page render to be blocked for quite long, if the script takes too much time to load, and thus keep the page uninteractive for long time too.

This is where asynchronous scripts can really help. They indicate the parser to make the request and consequently load it without blocking the render of the HTML.

And in this way we can have as many scripts as we want in the head element of a web page without having to worry for a blank page being shown to the users for a long time.

How to:

With JavaScript, it is very easy to asynchronise scripts using the async attribute.

<script src="script.js" async></script>