Home » Web Dev » Improve Website Load Speed (Tips & Tricks)

About Mokhtar Ebrahim

Mokhtar Ebrahim
LikeGeeks: Learn more about Linux, Server Administration, Web Development, Python, iOS, and Tech Tips

Improve Website Load Speed (Tips & Tricks)

Experiencing Slow Website Load Speeds? Here are Some Tips on Fixing This Problem

Making a great first impression on visitors to your website is a must. With all of the competition in the business world, having an appealing and functional website can help you stand out above the crowd. Studies show that 40 percent of all Internet users abandon a website if it takes more than 3 seconds to load.

For most business owners, working with web design professionals is essential when trying to bring their vision of the perfect website to life. During the construction of a website, a number of things will need to be done to ensure it loads quickly and correctly once it goes live.

If developers rush through the coding portion of a website, it is only a matter of time before problems occur. There are a variety of coding errors that can lead to a website loading very slowly, which will drive away the visitors to your website. When considering the debate of page load time vs bounce rate, you can clearly see slower loading websites have lower engagement rates.

However, improving website load speed is one of the required steps to improve website ranking too.

The following are some of the things developers need to consider when trying to avoid issues with slow page load speeds on your website.

Choosing the Right Order For Your Website Elements to Load

 All of the element that is in the (head) section of your website needs to be preloaded in the right manner. Before your visitors see anything on your website, all of these elements will have to load in sequence. Having JavaScript inside of the (head) section can lead to the page slowing down when trying to render the information.

If the order of the page load elements are not optimized, chances are the user will see the white screen during this process. By optimizing your page load elements, you can make the speed at which the page loads much faster. The last thing you want is for your website to appear to be a big white screen while it is trying to load. While optimizing the page load elements of a website is time-consuming, it is well worth the effort.

Server Performance Can Cause Page Load Problems

 As soon as someone clicks on your website, it activates a sequence of events starting with the server hosting the website. The first thing the browser being used by a website visitor will do when they type in your web address is to send a ping to your server. This ping is a request by the browser to unlock the information on your website.

If the existing server is slow to respond, it will result in page load issues, so you have to troubleshoot the network. If this problem becomes a regular occurrence, chances are you need to start looking for another web host. Even if you have to pay more for a reliable web host, it will pay off considering how much speed it can add to your website.

Optimizing Your Code is Important

 Using JavaScript minification is also a great way to address problems with slow page load speeds. With the minimizers, you can get rid of commas, comments and even white space that isn’t needed. Using programs like Google Closure Compiler is a great way to figure out how to optimize your code.

Before Optimization:

function test(node) {
  var parent = node.parentNode;
  if (0) {
    alert( "Hello Everybody" );
  } else {
    alert( "We love Websites" );
  alert( 1 );

After Optimization:

function test(){alert("We love Websites")}

As you can see, the optimization accomplished things like getting rid of a variable parent that won’t be used. These optimizers also deleted dead code.

Optimizing server-side code is very important like we saw in processing big files without losing high performance.

Understanding Defer and Async Tags

 One of the most used sync loading mechanisms in JavaScript is asynchronous loading. Basically, this mechanism ensures that your site loads in a multi-streamed fashion.

After the browser being used finds a string of code like <script src=”some.js”></script> , it will immediately stop creating CSSOM and DOM models. This results in faster page load speeds and is the main reason why most developers put their JavaScript code after their main HTML code.

This code provides you with a better understanding of the power of async tags:

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

 This text will not be present until big.js is loaded.


Adding an async tag to this code ensure that the creation of the DOM model happens immediately and does not interfere with JavaScript being loaded and executed properly. Here is an example of an async tag being used properly.

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

This text will be present and it’s not dependent with big.js loading progress.


You need to be aware that using an async tag may not be the best course of action if your JavaScript has to make HTML or CSS manipulations. Async tags should be avoided when you have to load your script in strong order.

Beware of Complex File Formats and Large Images

While coding errors are one of the main culprits when it comes to slow loading websites, things like large images and complex file formats can cause problems too. Once the server you are using has been pinged by a browser, it will start to load each bit of your site onto the user’s mobile device or computer.

If you have a number of large images, it will take them far longer to load. This is why you need to take advantage of file compression software and plugins. While compressing the size of these images can help, in some cases you may have to remove a few.

The last thing you want to do is sacrifice the functionality of your website for images that don’t really matter. Consulting with a web designer will allow you to get some guidance regarding which elements of your website can be altered for better performance.

Unused Components of .JS Libraries

Many developers use libraries like jQuery UI as is, without trying to modify it at all. Doing this may cause you to use code components that aren’t really needed. If you are given the option to manage what components can be excluded from a JavaScript library, you need to definitely take this opportunity. By altering the code from these libraries, you can provide users with a better experience and speed up your website as well.

Using the GZIP Module is Ideal

 While gzip is a relatively old invention, it is definitely worth using when trying to make a fast loading website. This program is designed to deflate the number of files on a web server and can even shrink static files to 99 percent of their original size.

Since JavaScript is considered a textual file, gzip can be used to compress it and decrease the amount of time it takes for a page to load.

Using Node.js to compress your files is also a good idea. Here is how you can set this up.

const zlib = require('zlib');

You can use the code in a few ways like:

const gzip = zlib.createGzip();
const fs = require('fs');
const inp = fs.createReadStream('input.txt');
const out = fs.createWriteStream('input.txt.gz');

With the help of gzip, you can find and eliminate repeated elements within your code. These repeated elements may also get replaced with small symbols from the archive dictionary. The final code you are left with will be far less bulky and completely optimized for performance.

Be Aware of Code Density

Any large and dense elements included in your website will only slow it down. Among the densest elements of your website is the code that has been used to create it. Large websites like Facebook have over 60 million lines of code. While your site won’t have this much code, you will need to find ways to optimize the code you do have to ensure fast load speeds.

Constantly going through the code on a website and optimizing it is the only way to avoid issues. The amount of time and effort you invest in optimizing your code will definitely pay off in the long run.

Dealing With Too Many File Requests

Every CSS file, social share button and JavaScript element on your website generates a new file request each time a new visitors signs on. Even the most robust and reliable server can only handle so many requests before it starts to slow down.

Rather than scratching your head trying to figure out how to increase the speed of your server, you may need to think about removing some of the file requests on your page.

Working with web design and programming professionals can help you see where the fat on your website can be trimmed. Leaving this problem unattended is going to lead to lots of issues when it comes to attracting people to your website. Your main goals should be doing all you can to speed up your site and make it easy for people to navigate it.

Avoid Using Too Many Plugins

 Even if you use a WordPress site, you may run into problems when it comes to page load speeds. Most business owners use WordPress templates because it allows them to hit the ground running with their new site. However, you will usually need to use a number of different plugins to make the site more functional.

These plugins can be beneficial, but having too many of them can create problems. If too many plugins are trying to operate at one time, it is going to slow your website down significantly.

Taking an objective look at what plugins are being used can help you figure out which ones you can do without. Reducing the number of plugins you have will make your WordPress website much faster.

Use CSS3 Effects Instead of JavaScript When Applicable

Some programmers fail to realize that the updated version of CSS can do far more than previous versions. In the past, CSS 1.0 and 2.0 would require lots of JavaScript modifications for advanced styling affects. Using CSS3 will not only provide you with more flexibility, but it will also reduce your CPU usage as well.

Below is some code you can use to add sliders with CSS3 without having to use JavaScript:


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>CSS Slider</title>
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>


@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
  position: relative;
 width: 500%;
 margin: 0;
 left: 0
 text-align: left;
 font-size: 0;
 animation: 30s slidy infinite;

Learning how to work with the updated tools on the programming market will help you achieve the page load speeds you are after.

Update Your Content Management System Regularly

Most businesses use website platforms that provide them with content management systems. Platforms like Wix and WordPress are a great way to get the functionality you need without spending lots of time and money. If you are using one of the content management systems, it is imperative that you regularly update it.

These updates are usually provided because there are kinks that need to be ironed out in the program. Failing to update these content management systems can lead to website crashes and slow speeds. Generally, these updates are free of charge so there is really no reason why you should use them. If you are paying someone else to maintain your website, make sure they are updating on a regular basis.

Your website is a representation of your business, which is why keeping it in pristine shape is a must. Failing to take the upkeep of your website seriously can lead to the inability to attract new visitors and generate quality sales leads.

I hope you find the post useful. Keep coming back.

Thank you.

Published on Web Code Geeks with permission by Mokhtar Ebrahim, partner at our WCG program. See the original article here: Improve Website Load Speed (Tips & Tricks)

Opinions expressed by Web Code Geeks contributors are their own.

(0 rating, 0 votes)
You need to be a registered member to rate this.
2 Comments Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newest Most Voted
Inline Feedbacks
View all comments
Rachel Kieran
2 years ago

You have written outstanding article I enjoyed each and every aspect of your tricks. I have even seen people who are so much stupid that they upload whole Youtube video on the website while working in WordPress although giving direct link to the video makes it get load. These type of mistakes cause website to load very slow and now animation trend is hot so people have started adding heavy flash made animations to the website which causes it to load like a lifetime while an average visitor just leaves if your website loads in more than 3 seconds.