The ultimate guide to speed up your website

In today's world, users are extremely impatient, they won't wait for a slow website to load. It is common that a user will go to another website if a website loads too slowly while looking for something as there are so many alternatives. While it may be that your website offers something that others do not, you will lose visitors if the loading speed is too slow. In addition, a slow-loading website will also affect your website's ranking in search engines, as Google gives higher rankings to websites that load quickly.

It is worth noting that Google has been placing greater emphasis on User Experience. As a result of the widespread use of its browser and analytics tools, Google can now quantify the browsing experience on a website. The recent "Core Web Vitals" (which will be addressed later in this article) is just one of the recent changes that will eventually affect your search ranks on Google.

Each time you open your browser and key in an address to the address bar, your browser will have to:

Connect to the server, (the machine that hosts the website you want to visit).
Wait for the server to return the content.
Parse the downloaded content then render the website.

Let's take a look at the round trip from browser to server:

Each request from the client (browser) server includes 3 main steps:

Client (browser) sends a request to the server
Server processes client request
The server sends a response to the client

Once the browser completes downloading the web page, it will have to parse the content (in code) to display for you.

Let's have a look at a sample web-page request and see how the browser parses and processes the request:

<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  </script>
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
  <style>h2{font-wight:bold;}</style>
  <script>
  $(document).ready(function(){
     $("#img").attr("src", "kkk.png");
  });
 </script>
 </head>
 <body>
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
 </body>
</html>

The HTML document gets downloaded
The parsing of the HTML document starts
HTML Parsing reaches <script src="jquery.js" ...
jquery.js is downloaded and parsed
HTML parsing reaches <script src="abc.js" ...
abc.js is downloaded, parsed and run
HTML parsing reaches <link href="abc.css" ...
abc.css is downloaded and parsed
HTML parsing reaches <style>...</style>
Internal CSS rules are parsed and defined
HTML parsing reaches <script>...</script>
Internal Javascript is parsed and run
HTML Parsing reaches <img src="abc.jpg" ...
abc.jpg is downloaded and displayed
HTML Parsing reaches <script src="kkk.js" ...
kkk.js is downloaded, parsed and run
Parsing of HTML document ends

(Source: StackOverflow)

As you can see, each web page request may require more than a round trip to the server (each image, stylesheet, javascript file is a request to the server).

Now that we know how a web page is downloaded, processed, and rendered, we can see that there are several factors that affect the loading speed:

The connection speed between the server and client is too slow
The server takes too much time to process one request
There are too many resources to load for each web page request
The website code is not optimized (inefficient HTML, Javascript, and CSS code)

If you believe your website has a loading speed problem, first you need to determine which factor is affecting the loading speed.

I. Use traceroute to troubleshoot your website loading speed

Traceroute is a command-line tool included with Windows and other operating systems to troubleshoot and understand connection problems. You can use traceroute to determine if the connection from your machine to the server is too slow and why.

To use traceroute and understand the results it returns, please refer to this article on how to use traceroute to troubleshoot website speed.

Now that you have used traceroute to troubleshoot your connection to the server, you may find out that your machine has to go through a lot of hoops to get to the server, and some of these hops may have extremely high latency. Before you do anything, take note that it's not important that your connection to the server is slow or not, it's important that your client's connection to the server is fast.

If your target audience is in the US for example, then you should traceroute from a US-based machine. If your website serves a global audience, you may want to prioritize the markets that have the major share.

To fix the latency issue, first, check if the problem is with your hosting/server. It could be that your website is hosted on a server or data center with a limited in/out connection. In this case, it's best to move out to a faster server/data center.

The second most common issue is the distance between the client machine and the server forcing the request and response to go through too many hoops. For example, if your server is located in the US and your client comes from China then he/she will have to jump through lots of hoops before reaching your website. You may decide to move to a server closer to your clients, or use CDN and various other techniques to mirror and serve your clients from a closer location. We have written a very detailed article regarding choosing the best hosting for Vietnam based websites, you can use it as a reference when making hosting decisions for other markets as well.

Tips: Don't skimp on hosting costs. The cost savings on servers really do not justify the loss of potential leads and sales. Almost all cheap hosting plans place your website on a server that is overcrowded with hundreds of other websites. Any one of those websites gets heavy traffic and your website will suffer as a result.

If you have customers around the globe, consider using a Content Delivery Network. A Content Delivery Network (CDN) refers to a "geographically distributed group of servers which work together to provide fast delivery of Internet content". Basically, it's a network of servers located around the globe with an exact copy of your website content. When a user visits your website, instead of having to download the content from a server far away, the browser can download it from a server located nearby.

Nilead can host your website on the fastest servers at several data centers around the globe, just let us know your major market locations, we will then host your website at the best available location. Our upcoming implementation of smart DNS routing will allow your website to load amazingly fast from anywhere in the world without requiring any configuration on your part.

II. Optimize your website assets (HTML, Javascript, and Stylesheet)

HTML (HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a web page. JavaScript is a programming language that is run by most modern browsers, it is often used to control effects on the web pages as well as user interaction with the web pages. Stylesheet, on another hand, as its name implies, is often used to control the style of the web pages (font, color, layout, etc,....)

Before the browser can render a page it has to download and parse the HTML markup. During this process, whenever the parser encounters a script (Stylesheet, Javascript) it has to stop and execute it before it can continue parsing the HTML. In the case of an external script, the parser is also forced to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page. As a rule of thumb, the browser treats everything it finds in the <head> section of an HTML page as render-blocking.

To optimize assets, there are 3 main things you can do:

Deferring CSS and JavaScript files: load and execute non-critical files after parsing the full page HTML. The trick is to identify which files are critical.
Minify for CSS and JavaScript: remove comments and spacing from those files to make their size smaller.
Concatenation of CSS and JavaScript: take several or all of the CSS or JS files you have and combine them into one big file. The plus is only 1 file to load. The minus is that unless you meticulously test each file, stuff breaks. You may also end up with one huge file that blocks everything until it is fully downloaded.
Lazy Load integration: you can decide to lazy load certain parts of your website (such as the sections below the first screen). Lazy loading allows you to reduce the initial file size the browser has to download before displaying meaningful content. Make sure that you use placeholders properly to avoid causing "layout jumps" that may result in a poor user experience.
Eliminate used resources: your website may contain CSS and JavaScript that is not needed. Sometimes junior developers may blindly include huge libraries just to achieve some simple effects. The fix for this is to identify this unnecessary code and remove them (if you use WordPress, it's sometimes easier to just replace the plugin in question with a better plugin).

Tips: If you use WordPress, pick the plugin carefully. Some plugins may use an excessive amount of code. There are many WordPress plugins that can help you to optimize your code, we are not going to cover that topic here.

If you are using Cloudflare CDN, even its free plan will offer the option to automatically minify your HTML, CSS, JS for you. If you use Nilead's platform, you have to option to optimize your assets when you publish a new page, you should use that in all cases.

III. Optimize your website images

One of the biggest factors that affect the loading speed of a site is image loading. The invention of smartphones and the easy use of digital cameras on smartphones have made it possible to capture moments and share them online. The cameras available on smartphones are constantly improving, resulting in better pictures with a side-effect of being bigger in size. Most users do not realize that such images can be too large for websites and therefore post them directly from their smartphones or digital cameras to the websites. Typically, web visitors do not need high-quality images that come standard with digital cameras. These images can be reduced in size by more than ten times without the users noticing the difference.

While Nilead CMS will always attempt to optimize your uploaded images, we strongly recommend that you pre-optimize manually before uploading them. The rule of thumb is to make the image size as small as possible without losing the quality (the total size of each image should not be more than 2 MegaBytes)

There are a few free tools to help you optimize the image size:

You should also consider serving responsive images to your users. People with low-end phones and slow connections may not need to see high-resolution photos. Dynamically detecting and serving appropriate images will give users an improved experience. You can utilize the new html5 src-set and size attribute to serve the most optimized version of each image for each display device, CloudFour published a series of articles that talks about src-set and size in detail.

Note: Do not lazy load the images on your first screen (such as logo, hero banners, etc). You want everything on the first screen to load as soon as possible.

Tips: Whenever possible, save images as JPG/JPEG, not PNG. JPG files are usually much smaller in size without much noticeable loss of quality. Lazy load your images whenever possible to reduce the wait time for loading images. There are newer image formats such as webp, avif, or jpeg2000 but they are not well supported on all devices and browsers yet. If you plan to use these images, make sure that you use the new picture element (not supported by Internet Explorer) or ensure your system can detect and serve the correct image extension.

Nilead platform automatically generates up to 12 variants of your uploaded images to smartly serve your visitors. Lazy loading is supported by default, and we will soon bring avif support to further reduce the image sizes and speed up download speed.

IV. Optimize your web server (backend) code

This is more difficult to accomplish since it requires a thorough understanding of how the server and the backend software render web pages. Depending on the technologies that you use to create and serve your website, there are many tweaks you can apply to improve the loading speed of your pages.

Caching is often the most obvious option. Most websites store content in databases which require various queries and computation to generate the web page for each and every request. With caching, content that does not change very often can be stored so that future requests can be served faster. You can cache part of the whole web page or just some sections of the web page.

You can also consider caching your web page not only on the server but also on the CDN nodes as well. This has 2 major benefits: the full content will be served directly to your visitors from a location closest to theirs, and your server can now handle much more traffic as well.

A problem with caching is invalidating the cache correctly. If you invalidate the cache too often, then that defeats the whole purpose of caching. If you don't invalidate the cache properly, then your visitors will see stale content which is not really good as well.

Our team at Nilead is continually working to improve the website's overall performance and silently apply the latest updates to the Nilead Platform that powers your website without you having to do anything. From the initial website design to every feature you select, we take a serious effort in optimizing the website loading speed knowing that it directly affects the bottom line of your business.

V. Pass the Core Web Vitals test

Core Web Vitals is a new set of requirements that Google has recently pushed for. According to Google, CWV hasn't yet had a major impact on ranking. If you fail this test, you shouldn't worry too much (even Google's own websites fail their own test). It's best for you to recognize the requirements to pass this test and begin aiming in that direction. The ultimate goal of Core Web Vitals is to provide a pleasant browsing experience for your visitors, and we can all agree on that.

1. Webpage load time

Google calls it “Largest Contentful Paint” or LCP. LCP is the amount of time that your users must wait between the time the initial request is sent to your server and the time when they are able to view the largest content block. Ideally, there should be no more than 4 seconds, with around 2.5 seconds being considered good.

What is the Largest Content Block? It's the largest text block(s) or image(s) that appear on the very first screen of your web page.

Tips: avoid loading anything heavy on the first screen of your website (such as a huge image or a slider). Fancy effects can also delay the website rendering and cause your web page to fail the LCP test.

2. Webpage interactive

Google calls it “First Input Delay” or FIP. FIP is the amount of time that your users must wait before they can start clicking or scrolling on your page. Ideally, users should be able to interact with your website within the first 100ms (milliseconds).

FID is mostly affected by JavaScript.

Tips: defer loading JavaScripts when possible, avoid fancy effects on the first screen heavy on the first screen of your website.

3. Website visual stability

Google calls it “Cumulative Layout Shift” or CLS. CLS is measured by the stability of your web page's layout after its initial rendering.

Imagine that your first screen contains a banner image, if the browser loads the image first without knowing the size to display the image, or the position it should display the image (because all that is defined in a separate CSS file which is loaded later). In cases like this, you will see a "jump" or "shift" in the layout within the first few seconds after the initial render. Other things such as web fonts, JavaScript can also affect your layout.

Tips: separate the code required for your first section and load that first if possible. You should also explicitly specify the width & height of the images and other elements on your first screen whenever possible.

Vu Nguyen is an entrepreneur, developer, and founder of Nilead. He loves backend website development and has experience in eCommerce (owning an online store as well as being a developer), Search Engine Optimization, UX Design, and Content Strategy.

Since 2005, Vu has headed and overseen UX design teams for projects in corporations, start-ups, individuals, etc., regardless of their size. He has been involved in both the creative and technical aspects of each project - from ideation to concept and vision, prototype building to detailed design, and build-up to deployment.

How to speed up your website loading

I. Use traceroute to troubleshoot your website loading speed