Mon Oct 30 2023
3. Code Splitting
Code splitting involves breaking your code into smaller, more manageable pieces. This allows you to load only the code necessary for the current page, reducing load times. Frameworks like React and Vue offer built-in support for code splitting.
4. Asynchronous Loading
<script src="your-script.js" async></script>
5. Defer Loading
Use the defer attribute in script tags for scripts that are not essential for the initial rendering of your page. This allows them to load after the HTML content has been parsed.
<script src="your-script.js" defer></script>
7. Files Compression with GZip
8. Use a Content Delivery Network (CDN)
10. Don't Use Unnecessary Nested Loops
11. Optimize Your Code
12. Browser Caching
13. Place JS at the bottom of the page
Placing the scripts as low as possible on the page will increase the rendering progress, and also increase download parallelization. The result is that the page will seem to load faster, and in some cases, it can also save on the total amount of code needed.
14. Evaluate local variables
Local variables are found based on the most to the least specific scope and can pass through multiple levels of scope, the lookups can result in generic queries. When defining the function scope, within a local variable without a preceding var declaration, it is important to precede each variable with var in order to define the current scope in order to prevent the look-up and to speed up the code.
15. Monitoring and Testing
Continuously monitor your site's performance using tools like Google PageSpeed Insights, Lighthouse, or webpagetest.org. Test your website on different browsers and devices to ensure consistent performance.