JS Performance Tips
Minimize JavaScript bundle size, avoid long-running synchronous code on the main thread, and defer non-critical scripts to keep pages fast.
Use code splitting to load only the JavaScript needed for the current view.
HTML
Intermediate
5 min read
JavaScript Performance in HTML
Example
<!-- Defer non-critical scripts -->
<script defer src="main.js"></script>
<script async src="analytics.js"></script>
<!-- Preload critical scripts -->
<link rel="preload" href="critical.js" as="script">
<!-- Lazy load heavy libraries -->
<script>
button.addEventListener("click", async () => {
const { Chart } = await import("./chart.js");
new Chart(canvas, config);
});
</script> Pro Tip
Use browser DevTools Performance tab to identify JavaScript bottlenecks — look for long tasks over 50ms.