Differences

This shows you the differences between two versions of the page.

--- litespeed_wiki:cache:check-pageloadspeed-chrome-firefox [2018/10/25 16:13]
Jackson Zhang created
+++ litespeed_wiki:cache:check-pageloadspeed-chrome-firefox [2018/10/25 18:46]
Jackson Zhang
@@ Line 7: / Line 7: @@
 LSCache and plugins are the ultimate solutions to dramatically improve your website page load time and make it fly. Make sure you following our wiki to enable cache first. Installing the LiteSpeed cache plugin or click "enable" button within LiteSpeed cache plugin does not always mean the cache has been enabled. You will need to check header through browser developer tools.
-For example, Visit your website using Chrome, then 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 and you can just click your main domain to check the header.
+For example, Visit your website using Chrome, then 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 and you can just click your main domain to check the header. You might see "X-LiteSpeed-Cache: miss" or "X-LiteSpeed-Cache: hit" or other headers. If you can not see "X-LiteSpeed-Cache: hit" header, you can refresh the page a few times since page's first visit may be normally a cache miss then cache hit for the second visit. If you still could not see "X-LiteSpeed-Cache: hit" header after a few refresh, it means LSCache is not enabled properly yet and you might want to revisit our wiki to see if there were any steps missed.
+{{ :litespeed_wiki:cache:pageloadspeed5.png?800 |}}
+{{ :litespeed_wiki:cache:pageloadspeed4.png?800 |}}
+Alternatively, In Chrome, visit a URL, right click, select "Inspect" to open the developer tools, then Select "Network" tab.
+Reload the page, select any HTTP request on the left panel, and the HTTP headers will be displayed on the right panel.
+If you are interested in more about Chrome Developer tools' functions, please check [[https://developers.google.com/web/tools/chrome-devtools/network-performance/reference|here]].
+===== How to check the page load speed through a browser developer tool? =====
+The initial page loading is the page for your domain not including static files and other remote requests. It is the place where LScache can help to improve significantly.
+The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading while the load event can be used to detect a fully-loaded page.
+In the following example,  the test was run without lscache. The domain initial page loaded very slow as 29.28s, Load is 41.21s.
+{{ :litespeed_wiki:cache:pageloadspeed1.png?800 |}}
+After LSCache enabled, the domain initial page loaded very fast as only as 669ms, load is 7.72s.
+{{ :litespeed_wiki:cache:pageloadspeed6.png?800 |}}
+===== Why total "load" is still 7.72 second? Can LiteSpeed cache help further? =====
+As shown in the above example, although the initial page load is only 669ms, the total "load" is still 7.72s. Can LiteSpeed cache help a little further?
+When you look at the page, it contains 207 requests and many of them are static files or remote site request. You may use a very heavy theme on your CMS. LiteSpeed cache can help you to reduce the load time of dynamic contents, but it can not reduce the number of requests. You may need to consider some lightweight theme or at least reduce some unnecessary requests from your page design, which is out of the scope of LiteSpeed Cache.
+LiteSpeed cache doesn't cache static files as per design. You may want to consider some browser cache setup for these types of static files.  If you use CDN in the front, you can also enable static files cache on CDN.
+If it is a WordPress site and you are using LiteSpeed Cache plugin for WordPress, you can also try to optimize images to reduce the load time.
-https://developers.google.com/web/tools/chrome-devtools/network-performance/reference