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:
Each request from the client (browser) server includes 3 main steps:
- Client (browser) sends request to server
- Server processes client request
- 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.
Let's have a look at a sample web-page request and see how the browser parses and processes the request:
<link rel="stylesheets" type="text/css" href="abc.css"></link>
<img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
- 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>
- 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
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:
- Connection between the server and client is too slow
- Server takes too much time to process one request
- There are too many resources to load for each web page request
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.
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.
To optimize assets, there are 3 main things you can do:
- Reduce the total size of the assets (by minifying and gzip)
- Reduce the number of asset requests (by combining multiple assets into one)
- 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
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:
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.