1. Network optimization
Reduce HTTP requests
Merge resources: Reduce the number of requests by merging CSS and JavaScript files.
Inline resources: For small CSS and JavaScript, inline them directly into HTML.
Use HTTP/2
- HTTP/2 supports multiplexing, reduces request blocking, and increases loading speed.
Enable GZIP compression
Server-side configuration, compress text resources, and reduce transmission volume.
Cache strategy
Use HTTP cache headers, such as Cache-Control, to set appropriate cache strategies.
2. Resource loading optimization
Lazy loading
Only load resources when they are about to enter the viewport, suitable for images and videos, etc.
<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy" />
<script>
document.addEventListener('DOMContentLoaded', function() {
let lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(img => {
img.src = img.dataset.src;
});
});
</script>
Preloading and prefetching
Use <link rel="preload">
to load critical resources in advance.
Use <link rel="prefetch">
to prefetch non-critical resources.
3. Rendering optimization
Critical CSS
Inline the CSS required for the first screen rendering in the HTML head to avoid blocking rendering.
Reduce CSS and JavaScript blocking
- Use
<link rel="stylesheet" media="print" onload="this.media='all'">
to delay non-critical CSS loading. - Use
async
ordefer
attributes to asynchronously load JavaScript.
<script async src="script.js"></script>
Avoid forced synchronous layout
- Use requestAnimationFrame or CSS animation instead of complex JavaScript animation to reduce reflow and repaint.
Image optimization
- Choose the right image format (such as WebP) and use the right size and resolution.
4. Service Worker and offline storage
- Use Service Worker to implement offline caching and resource updates.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/sw.js')
.then(registration => console.log('SW registered:', registration))
.catch(error => console.error('SW registration failed:', error));
});
}
5. Performance Monitoring and Analysis
- Use tools such as Lighthouse, WebPageTest or Chrome DevTools for performance testing and analysis.
6. Code Splitting and Lazy Loading
Dynamic Import
Use dynamic import (import() expression) to load code blocks on demand and reduce initial loading time.
button.onclick = async () => {
const module = await import('./lazyModule.js');
module.default();
};
Route-level code splitting
In SPA applications, use the route-level code splitting function provided by the framework, such as Vue Router's lazy loading.
// Vue Router example
const Foo = () => import('./Foo.vue');
const routes = [
{ path: '/foo', component: Foo },
];
7. Image optimization
Responsive images
Use the <picture>
element or srcset attribute to provide images of different resolutions based on the device pixel ratio or viewport size.
<picture>
<source srcset="img/low-res.jpg" media="(max-width: 600px)">
<source srcset="img/high-res.jpg" media="(min-width: 600px)">
<img src="img/fallback.jpg" alt="Example">
</picture>
8. Web Workers
Move time-consuming computing tasks to Web Workers to avoid blocking the main thread and keep the UI responsive.
// main.js
const worker = new Worker('worker.js');
worker.postMessage([1024, 512]);
// worker.js
self.onmessage = function(e) {
const result = e.data[0] * e.data[1];
self.postMessage(result);
};
9. Avoid memory leaks
Regularly clean up unused timers, event listeners, and large data structures to prevent memory leaks.
window.addEventListener('resize', handleResize);
// Cleanup
window.removeEventListener('resize', handleResize);
// For setTimeout or setInterval
let timerId = setInterval(() => { /*...*/ }, 1000);
clearInterval(timerId);
10. Web Vitals Monitoring
Focus on Web Vitals metrics such as LCP (largest content paint), FID (first input delay) and CLS (cumulative layout shift), which are key indicators for measuring user experience.
// Use the Web Vitals library for monitoring
import { getCLS, getFID, getLCP } from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
Top comments (0)