5.2 Performance and Optimization
JavaScript performance affects user experience significantly, particularly on mobile devices. We minimize the amount of JavaScript that loads during initial page render, deferring non-critical scripts until after the page loads or until user interaction requires them.
Code splitting allows us to load only the JavaScript needed for each page, reducing initial bundle sizes. We use dynamic imports to load functionality on demand, improving perceived performance for users.
1
2
3
4
5
6
7
8
9
10
11
// Dynamic import for on-demand functionality
const loadContactForm = async () => {
const { ContactForm } = await import('./components/ContactForm.js');
return new ContactForm();
};
// Load form functionality only when needed
document.querySelector('.contact-trigger')?.addEventListener('click', async () => {
const form = await loadContactForm();
form.show();
});