Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
litespeed_wiki:cache:check-pageloadspeed-chrome-firefox [2018/10/25 18:31] Jackson Zhang [Enable cache first and ensure to see "X-LiteSpeed-Cache: hit" header before any page load test] |
litespeed_wiki:cache:check-pageloadspeed-chrome-firefox [2020/09/24 20:16] (current) Lisa Clarke Redirect to new Documentation Site |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== How to 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 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. | + | |
| - | + | ||
| - | ===== Enable cache first and ensure to see "X-LiteSpeed-Cache: hit" header before any page load test ===== | + | |
| - | + | ||
| - | 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. You might see "X-LiteSpeed-Cache: miss" for first visit or "X-LiteSpeed-Cache: hit". If you can not see "X-LiteSpeed-Cache: hit" header, you can refresh the page a few times. If you still could not see "X-LiteSpeed-Cache: hit" header, 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.72. | + | |
| - | + | ||
| - | {{ :litespeed_wiki:cache:pageloadspeed6.png?800 |}} | + | |
| - | + | ||
| - | + | ||