Use Rules Reasonably, Avoid Over-Optimization
Use Rules Reasonably, Avoid Over-Optimization 관련
Performance optimization is mainly divided into two categories:
- Load-time optimization
- Runtime optimization
Of the 23 suggestions above, the first 10 belong to load-time optimization, and the last 13 belong to runtime optimization. Usually, there's no need to apply all 23 performance optimization rules. It's best to make targeted adjustments based on the website's user group, saving effort and time.
Before solving a problem, you need to identify the problem first, otherwise you won't know where to start. So before doing performance optimization, it's best to investigate the website's loading and running performance.
Check Loading Performance
A website's loading performance mainly depends on white screen time and first screen time.
- White screen time: The time from entering the URL to when the page starts displaying content.
- First screen time: The time from entering the URL to when the page is completely rendered.
You can get the white screen time by placing the following script before </head>.
<script>
new Date() - performance.timing.navigationStart
// You can also use domLoading and navigationStart
performance.timing.domLoading - performance.timing.navigationStart
</script>
You can get the first screen time by executing new Date() - performance.timing.navigationStart in the window.onload event.
Check Runtime Performance
With Chrome's developer tools, we can check the website's performance during runtime.
Open the website, press F12 and select performance, click the gray dot in the upper left corner, it turns red to indicate it has started recording. At this point, you can simulate users using the website, and after you're done, click stop, then you'll see the website's performance report during the runtime.
If there are red blocks, it means there are frame drops. If it's green, it means the FPS is good. For detailed usage of performance, you can search using a search engine, as the scope is limited.
By checking the loading and runtime performance, I believe you already have a general understanding of the website's performance. So what you need to do now is to use the 23 suggestions above to optimize your website. Go for it!
References: