When a visitor navigates to a website, their browser begins the process of making a TCP connection to the server that is hosting that website. A TCP connection, which stands for Transmission Control Protocol, is a set of networking protocols that allows two or more computers to communicate.
The initial response back from the web server will tell the browser all of the content that it needs to load in order to properly display the website.
An example of some of the content that a browser may need to open a TCP connection to the server in order to download that content is:
//example.com/css/global.css //example.com/css/font-awesome.css //example.com/img/header-image.png //example.com/img/image1.png //example.com/js/global.js //example.com/js/script.js
Technically, you can add as many assets to your site as you desire. However, the performance of the website can suffer if the website is relying on too many requests in order to populate the website.
The reason for this is due to TCP limitations that each web browser places when a request for a website is made. Most common browsers allow up to six (6) simultaneous connections to be made. This means that any request after the initial six will have to sit back and wait for one of the previous connections to be completed.
As an example, I created a simple website with little content to show as an example. Below you can find the WaterFall request information.
Note: Most websites have much more content than this, as this is just a simple example.
You can see from the example image above, that only a small number of requests were immediately started. The rest of the request had to wait until a TCP connection from one of the previous request was freed up.
Hint: If your website is using WordPress you can skip to the section of this article related to Wordpress.
Now that we’ve explained browser HTTP request limitations, above, let’s explore some ways to reduce the number of requests the browser has to make when loading your website.
A goal when developing your website is to keep performance in mind. Knowing that browsers have HTTP limitations, it is a great idea to limit the number of requests that you’re requiring the visitor to download.
A great way of doing this is to combine all of your CSS (cascading style sheets) files into a single file. In the example image I provided earlier we had three (3) separate CSS files that were requested. If you combine all three of those files into a single file (normally named something like global.css), then this would prevent two TCP connections from ever having to be made!
While reading the name of this section some developers will automatically know what I’m about to say. To others, including some developers, this isn’t something that would normally be thought of. I mean, developers just want to write code, right?
An expire header is something that the developer can easily implement with code and this will reduce the need for browsers to perform a download request. Okay, so what is it?
Expire Headers are part of the request that the server sends back to the visitors’ browser, essentially telling that browser to download and store (locally within Browser Cache) that file. So, if you tell the browser to cache all static images, css, js, etc… then the browser will already have that content locally on the visitors’ computer. Therefore, there is no need for the visitors’ browser to re-download that content.
If your website is regularly updating the same CSS files, images, etc. with new content, then it’s recommended to either not use this method or to keep the expire time set to a very low value (such as 24-48 hours).
We’ll provide ways to add expire headers to your website below (click appropriate platform):
Click to expand/collapse steps.
The easiest method for adding caching to your website for all static files is to use your WCP control panel. You can see the guide on setting caching within WCP for this method.
Alternatively, you can add the below to your
web.config file and update the time frame to your desired caching time preference.
<system.webServer> <staticContent> <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" /> </staticContent> </system.webServer>
Click to expand/collapse steps.
- You can create, or edit, your websites
.htaccessfile and add the below code. You can update the expire times to meet your desired caching preference.
Note: The above code allows you to set specific expire times for each individual file type. The last line sets a default expiration time for files that are not specified.
Note: Expire Headers will have no effect on performance on the first page load (for each unique visitor browser).
Now that we’ve discussed how we can reduce the number of HTTP request a visitor has to make, let’s now talk about how we can reduce the time it takes to download the remaining request.
Having a CDN for your website’s content is a must-have if you are worried about performance or are just wanting to reduce the overhead (load) on your web server.
The benefits of having your website’s content cached around the world are already great. To add on to this, all of the statically cached content is also compressed. This compression allows for the transfer of content between the browser and server to go much quicker.
For example, we often see websites that are serving an average of 2MB to 3MB worth of content (images, html, css, js, etc.) that is taking a while for the browser to download each individual file. Placing the website behind a content delivery network (such as Sucuri or Cloudflare) can reduce that total size greatly. We have seen request go from an average download required of 3MB decrease all the way down to a few hundred KB, which is a huge improvement.
If you plan on utilizing a CDN, such as Sucuri or Cloudflare, then enabling GZip Compression is not technically necessary (since that CDN will compress the files regardless). If you do not plan on using a CDN for your website, then we definitely recommend enabling GZip Compression to reduce the overall size of the files that are being requested by the visitor browser.
This option is enabled by default on all Windows Environments. See guide on IIS Advanced Settings for more information on this option.
Our Linux/cPanel environment typically has mod_deflate enable on the server level. To enable this for your specific website create, or edit, your websites
.htaccess file and place the code below:
Note: You can add/remove any specific file types that wish to compress or not by updating the code with your specific preferences.
LiteSpeed Cache - This plugin is a must have for WordPress websites. LSCache is a plugin developed by LiteSpeed, which is the developer of the leading WordPress server platform (LiteSpeed Web Server).
This plugin has to many performance benefits to name. However, we’ll provide the most important benefits to using this plugin below:
- Minify inline CSS/JS
- Combine CSS/JS
- Image Optimization
- Object Cache, Browser Cache & Server Cache (LS Exclusive Feature)
- Lazyload images/iframes
- Load CSS/JS Asynchronously
As mentioned earlier the above are just a small number of the amazing benefits to using this plugin. You can really improve your website performance if you run this plugin on a website utilizing LiteSpeed as the web server platform.
We, Hostek, run LiteSpeed as the web server platform for all of our WordPress optimized packages (shared & dedicated platforms). If you already own your own dedicated cPanel server, then you can contact our team to schedule an upgrade for your server to utilize LiteSpeed in place of Apache.
Note: You do not have to use LiteSpeed Web Server in order to use this LiteSpeed Cache plugin. Most of the features of this plugin work on any server platform. There are, of course, additional features of this plugin that only work on the LiteSpeed platform.
There are many tools out there available to the public to test your website for performance bottlenecks, including the number of HTTP request and whether those requests are properly optimized.
Some of these great tools are listed below:
Pingdom Website Speed Test - Pingdom is great for seeing your website performance score. This tool will provide a nice visual for areas that your website could benefit from optimizing, as well as break down the order of request completed and the time taken, etc…
Google PageSpeed Insights - This tool provided by Google is great for determining ways to increase performance for both mobile and desktop versions of your website.
Additional information on securing your Wordpress Application can be found in the following link:
Wordpress: Application Security