Differences

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

--- litespeed_wiki:cache:check-pageloadspeed-chrome-firefox [2018/10/25 18:46]
Jackson Zhang
+++ litespeed_wiki:cache:check-pageloadspeed-chrome-firefox [2018/10/25 19:57]
Lisa Clarke Proofreading
@@ Line 1: / Line 1: @@
-====== How to check page load speed through Chrome or Firefox developer tools? ======
+====== Check Page Load Speed Through Chrome or Firefox Developer Tools ======
-There are many ways to run a website speed test to do a full page performance check, including some online tools, but the easiest way is to use your Chrome or Firefox developer tools right there on your desktop.
+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.
-===== Enable cache first and ensure to see "X-LiteSpeed-Cache: hit" header before any page load test =====
+===== Enable Cache First =====
+Before any page load testing, enable caching and be sure you see the ''X-LiteSpeed-Cache: hit'' header.
-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.
+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 [[litespeed_wiki:cache:common_installation|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, 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.
+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.
 {{ :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.
+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.
-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]].
+If you are interested in learning more about the Chrome Developer tool's functions, please see [[https://developers.google.com/web/tools/chrome-devtools/network-performance/reference|Google's documentation]].
-===== How to check the page load speed through a browser developer tool? =====
+===== Check Page Load Time =====
-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 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 while the load event can be used to detect a fully-loaded page.
+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.
-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.
+After LSCache was enabled, the domain's initial page loaded very quickly: only 669ms! Full page load was 7.72s.
 {{ :litespeed_wiki:cache:pageloadspeed6.png?800 |}}
-===== Why total "load" is still 7.72 second? Can LiteSpeed cache help further? =====
+===== Can LiteSpeed Make it Even Faster? =====
-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.
+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?
-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.
+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.
-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.
+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. [[litespeed_wiki:cache:lscwp|Learn more.]]