Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision | |||
|
litespeed_wiki:cache:check-pageloadspeed-chrome-firefox [2018/10/25 19:57] Lisa Clarke Proofreading |
litespeed_wiki:cache:check-pageloadspeed-chrome-firefox [2020/09/24 20:16] (current) Lisa Clarke Redirect to new Documentation Site |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Check Page Load Speed Through Chrome or Firefox Developer Tools ====== | + | ~~REDIRECT>https://docs.litespeedtech.com/lscache/tips/~~ |
| - | + | ||
| - | 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 ===== | + | |
| - | 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 [[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. 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 |}} | + | |
| - | + | ||
| - | 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 [[https://developers.google.com/web/tools/chrome-devtools/network-performance/reference|Google's documentation]]. | + | |
| - | + | ||
| - | ===== Check Page Load Time ===== | + | |
| - | 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. | + | |
| - | + | ||
| - | {{ :litespeed_wiki:cache:pageloadspeed1.png?800 |}} | + | |
| - | + | ||
| - | 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 |}} | + | |
| - | + | ||
| - | ===== 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 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. [[litespeed_wiki:cache:lscwp|Learn more.]] | + | |