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:
<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:
- 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
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 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.
To optimize assets, there are 3 main things you can do:
- 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.
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).
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.
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.