Check Page Load Speed Through Chrome or Firefox Developer Tools

There are many ways to run a website speed test and to do a full page performance check, including some online tools, but the easiest way is to use the Chrome or Firefox developer tools right there on your desktop.

Before any page load testing, enable caching and be sure you see the X-LiteSpeed-Cache: hit header.

LSCache is the ultimate solution if you want to dramatically improve your website page load time and make it fly. Make sure you have followed our wiki and enabled caching first. Installing a LiteSpeed Cache plugin for your web app, or clicking the Enable button within that plugin does not work, if the cache hasn't been enabled at the server level. You will need to verify the header through you browser's developer tools.

For example, Visit your website using Chrome. Navigate to Chrome menu > More tools > Developer tools > Network, or simply use the shortcut Ctrl+Shift+I to bring it up. The test page may contain many requests, but you can just click your main domain to check the header. You might see X-LiteSpeed-Cache: miss or X-LiteSpeed-Cache: hit or some other headers. If you cannot see a X-LiteSpeed-Cache: hit header, you can refresh the page a few times. Normally the first visit to a page is a miss, but subsequent visits should be a hit. If you still do not see X-LiteSpeed-Cache: hit after a few refreshes, it means LSCache is not enabled properly yet, and you might want to revisit our wiki to see if there were any steps missed.

Another way to access the HTTP headers in Chrome is to visit a URL, right click, select Inspect to open the developer tools, then Select the Network tab.

If you are interested in learning more about the Chrome Developer tool's functions, please see Google's documentation.

The initial page load time refers to the loading of the document and doesn't include static files or remote requests. This is the place where LScache can make significant improvements.

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. Meanwhile, the Load event can be used to detect a fully-loaded page.

The test in the following example was run without LSCache. The domain's initial page loaded very slowly as 29.28s, and was fully loaded in 41.21s.

After LSCache was enabled, the domain's initial page loaded very quickly: only 669ms! Full page load was 7.72s.

As shown in the above example, although the initial page load is only 669ms, the total Load is still 7.72s. Can LiteSpeed cache nudge it a little faster?

When you look at the page, you can see it contains 207 requests. Many of them are static files or remote site requests. With numbers like these, you may be using a very heavy theme on your CMS. LiteSpeed Cache can help you to reduce the load time of dynamic content, but it can not reduce the number of requests. You may need to consider switching to a lightweight theme or reducing some of the unnecessary requests from your page design. These are out of the scope of LiteSpeed Cache.

Additionally, by design, LiteSpeed cache doesn't cache static files. You may want to consider a browser cache setup for static files. If you use a CDN, you can also enable a static file cache on the CDN.

If you are running a WordPress site, LiteSpeed Cache has some additional optimization features that can help to speed up your site further. Learn more.

  • Admin
  • Last modified: 2018/10/25 19:57
  • by Lisa Clarke