You may be surprised to see a big gap in waterfall charts of GTmetrix, Pingdom, KeyCDN, or other website speed testing tools. Those gaps don't exactly tell whether your site has any issues. Some of these gap time is normal but some aren't which means your site needs improvement.
What Do the Gaps in Waterfall Chart Mean
The gaps in the waterfall chart mean that the web server and the browser didn't communicate in that time. This mostly happens when the web browser is executing or going through the JS, CSS, and other files that have already been download from the server. This execution time is necessary to make the webpages load properly with all its contents, designs, and functionalities.
However, some of the gaps may be unnecessary that results from some issues on your site. These unnecessary gaps consequently slow down your website speed.
For instance, these unnecessary gaps may result from your website making delays in sending necessary resources to the browser. This can happen because of having insufficient web server resources that can't keep up with the page requests.
These unnecessary gaps can also appear if any of the resources are instructed to be transferred after a certain time or event (events like DOMContentLoaded, load, and so on). This type of delay may also be necessary for your website but they may also be unnecessary based on your specific website.
How To Resolve Gap in Waterfall Chart
These gaps in GTmetrix waterfall chart or waterfall charts from other website testing tools like WebPageTest, Pingdom, KeyCDN, and others represent two fundamentally different things. One that is necessary and the other that is not necessary.
Resolve Browser Execution Gap in Waterfall Chart
As said earlier, if the gaps are because of the rendering/execution, it is not because of any issues on your website. So, they are normal. But you can control when these gaps appear in the waterfall chart in order to further improve the perceived load time of your website. Doing so won't reduce your total website load time but it will help your website contents appear faster in the visitor's web browser.
Here is how it works. If these long gaps appear in the earlier resources in the waterfall chart, it may mean that these gaps are delaying the time when your website contents start to appear on the website visitor's browser. So, by making these gaps appear at the later resources, you can make your website load speed appear faster to the visitors. So, the goal will be to delay/defer these gaps so that they appear as later as possible in the waterfall chart.
In order to do that, you will need to defer your non-critical / render-blocking assets like the JS and CSS files so that they load at the later part in the waterfall chart. This is also a common warning found in website speed testing tools like PageSpeed Insights, and GTmetrix.
However, in order to make sure that your website's above the fold contents (it is the website contents that don't require scrolling to see in the web browser) load with proper design, you will need to use critical CSS. Critical CSS is that portion of the total CSS file that is required to style the above the fold contents of webpages.
Then you can defer the render-blocking resources so that they load after the above the fold contents have been rendered. This way the above the fold contents will load quickly with proper design and minimal delay and then the rest of the files will be loaded. This will improve the perceived load time of your website to the website visitors without actually reducing the total load time.
Resolve Resource Specific Gap in Waterfall Chart
Some of the gap time in the waterfall chart means that the website resources are instructed to delay until a specific time or event. In this case, you can check which assets have those long gaps in the waterfall chart before they are loaded. Then you can find out how those specific assets work and how to resolve the gap for that particular asset.
You can also see whether your website needs that resource. If it doesn't, it is already better to just remove that asset from your website or the particular webpage.
If you are using WordPress, try to find out which themes or plugins are responsible for that asset and then take action accordingly.
Resolve Insufficient Resource Gap in Waterfall Chart
If your web server resources aren't enough to quickly deliver your website resources, you will need to upgrade to a faster web hosting server. This will stop your server from being maxed out and therefore resolve the gap caused by insufficient server resources.
You can read more about web hosting in this article.
You can also preload resources, and use HTTP/2 server push to resolve this issue.