May 07, 2017

How to speed up your website loading


Users are extremely impatient, they do not want to wait for a slow website to finish loading. If a user is looking for something and the website loads too slow, he/she will immediately go to another website as there are so many alternatives and options out there. Even if your website has something that others don't which force the users to stay on the site, he/she will spend less time navigating your site if the loading speed is too slow. A slow loading website will also affect your website search engine ranking, as Google gives higher ranking to fast loading websites.

Each time you open your browser and key in an address to the address bar, the browser (your machine) will have to connect to the server, (the machine that hosts the website you want to visit) download the webpage content, parse the downloaded content then render the everything to display on the view port.

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

How the browser request a web page from the server

Each request from the client (browser) server includes 3 main steps:
  1. Client (browser) sends request to server
  2. Server processes client request
  3. Server sends response to server
Once the browser completes downloading the web page, it will have to parse the content (in code) to display for you.

How the browser processes and renders a web page

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

  <script src="jquery.js" type="text/javascript"></script>
  <script src="abc.js" type="text/javascript">
  <link rel="stylesheets" type="text/css" href="abc.css"></link>
     $("#img").attr("src", "kkk.png");
    <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
    <script src="kkk.js" type="text/javascript"></script>
  1. The HTML document gets downloaded
  2. The parsing of the HTML document starts
  3. HTML Parsing reaches <script src="jquery.js" ...
  4. jquery.js is downloaded and parsed
  5. HTML parsing reaches <script src="abc.js" ...
  6. abc.js is downloaded, parsed and run
  7. HTML parsing reaches <link href="abc.css" ...
  8. abc.css is downloaded and parsed
  9. HTML parsing reaches <style>...</style>
  10. Internal CSS rules are parsed and defined
  11. HTML parsing reaches <script>...</script>
  12. Internal Javascript is parsed and run
  13. HTML Parsing reaches <img src="abc.jpg" ...
  14. abc.jpg is downloaded and displayed
  15. HTML Parsing reaches <script src="kkk.js" ...
  16. kkk.js is downloaded, parsed and run
  17. Parsing of HTML document ends
(Source: StackOverflow)
As you can see, each web page request may require more than 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:
  1. Connection between the server and client is too slow
  2. Server takes too much time to process one request
  3. There are too many resources to load for each web page request
  4. 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 hops 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 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 hops. 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 hops before reach 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 decision for other markets as well.

Currently, Nilead can host your website on several data-centers around the globe, simply let us know your major markets and we will host your website from the best location. In the future, we will soon implement smart DNS routing that allows your website load amazingly fast from anywhere in the world without any configuration on your side.
[cta2 variant="3"]

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.

To optimize assets, there are 3 main things you can do:
  1. Reduce the total size of the assets (by minifying and gzip)
  2. Reduce the number of asset requests (by combining multiple assets into one)
  3. Optimize the code quality of your assets (good coding and bad coding can give the same final rendered layout, the later however can make the website loads many times slower)
You can also 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 which talks about src-set and size in details.
Website assets - HTML,JS and CSS

III. Optimize your website images

Image loading is one major and most common factor that affects the site's loading speed. Since the invention of smartphone and readability of the digital cameras on smartphones, capturing moments and sharing them on the website have never been easier. The cameras available on smartphones are being improved every day giving higher quality images which have the side-effect of being bigger in sizes. Most users do not realize this and post the images directly from their smartphone or digital camera to the websites without realizing these images can be too huge for the websites. In most cases, web visitors do not need the high-quality images that the digital cameras provide by default. In fact, you can reduce the size of these images more than 10 times without the normal users noticing anything different.

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 (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:
  1. Riot
  2. TinyPNG
  3. PNGOptimizer
  4. ImageOptim
  5. Compressor
  6. Optimizilla

IV. Optimize your web server (backend) code

This is a bit harder to do as it requires the deep knowledge of how the server and the backend code which renders the web-page work. This is what Nilead team is constantly working on each day, improve the website overall performance and silently applies these new updates to the Nilead Platform that powers your website without you having to do anything. We understand that the website loading speed directly affects your business bottom line and we take serious effort in optimizing this from the initial website design to every feature we implement in the system.

About the author


Vu Nguyen

Vu Nguyen is an entrepreneur, a developer, and a founder of nilead.com. While his love is in the backend website development work, his experience covers eCommerce (being both a real online store owner and a developer), Search Engine Optimization, UX Design and Content Strategy.

Since 2005, Vu Nguyen has led and directed UX design, full-stack development teams on projects large and small for corporations, start-ups, individuals and more. He was involved in every task of each project, from idea to concept and vision, prototype, detailed design, build and deployment.

Related News