Tối ưu hóa Frontend Phần 2 - Kỹ thuật tối ưu tài nguyên

Tối ưu hóa tài nguyên là một khía cạnh quan trọng của hiệu suất frontend, ảnh hưởng trực tiếp đến thời gian tải, trải nghiệm người dùng và thứ hạng trên công cụ tìm kiếm. Bài viết này khám phá các kỹ thuật toàn diện để tối ưu hóa các tài nguyên frontend, từ hình ảnh và video đến CSS và JavaScript.

1. Tối ưu hóa hình ảnh

Hình ảnh thường chiếm phần lớn kích thước của một trang web. Tối ưu hóa chúng là yếu tố quan trọng để tăng tốc thời gian tải và cải thiện trải nghiệm người dùng.

Các kỹ thuật tối ưu hóa hình ảnh chính:

• Chọn định dạng phù hợp: Sử dụng WebP cho hình ảnh thông thường, SVG cho đồ họa vector, JPEG cho ảnh chụp, và PNG cho hình ảnh cần độ trong suốt.
• Triển khai hình ảnh đáp ứng: Sử dụng thuộc tính srcset và sizes để cung cấp hình ảnh có kích thước khác nhau dựa trên đặc điểm thiết bị.
• Nén hình ảnh hiệu quả: Sử dụng các công cụ như ImageOptim, TinyPNG hoặc Squoosh để giảm kích thước file mà không làm giảm chất lượng đáng kể.
• Triển khai lazy loading: Chỉ tải hình ảnh khi chúng sắp xuất hiện trong viewport.
• Xem xét sử dụng CDN hình ảnh: Dịch vụ như Cloudinary hoặc Imgix có thể tự động tối ưu hóa và phân phối hình ảnh ở định dạng tốt nhất.

<!-- Hình ảnh đáp ứng với lazy loading -->
<img 
  src="small.jpg" 
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" 
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  loading="lazy" 
  alt="Mô tả hình ảnh"
/>

2. Tối ưu hóa video và media

Video và các media khác có thể ảnh hưởng đáng kể đến hiệu suất trang nếu không được tối ưu hóa đúng cách.

Chiến lược tối ưu hóa video:

• Chọn định dạng phù hợp: Sử dụng MP4 với codec H.264 để tương thích rộng rãi hoặc WebM để nén tốt hơn.
• Nén video: Giảm bitrate và độ phân giải xuống mức phù hợp cho việc phân phối web.
• Xem xét streaming: Sử dụng adaptive bitrate streaming cho video dài.
• Triển khai lazy loading: Chỉ tải video khi cần thiết, đặc biệt là đối với nội dung dưới màn hình.
• Sử dụng thumbnail phù hợp: Tạo thumbnail đã được nén và tối ưu hóa cho video.

<!-- Video với preload none và lazy loading -->
<video 
  controls 
  preload="none" 
  poster="video-thumbnail.jpg" 
  width="640" 
  height="360"
  loading="lazy">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

3. Tối ưu hóa font chữ web

Font chữ web nâng cao thiết kế nhưng có thể ảnh hưởng đáng kể đến hiệu suất nếu không được tối ưu hóa đúng cách.

Kỹ thuật tối ưu hóa font chữ:

• Giới hạn sử dụng font: Sử dụng ít font family và weight để giảm kích thước tải xuống.
• Sử dụng định dạng hiện đại: Ưu tiên WOFF2 cho trình duyệt hiện đại với WOFF làm phương án dự phòng.
• Triển khai font subsetting: Chỉ bao gồm các ký tự bạn cần, đặc biệt là đối với bộ ký tự lớn.
• Kiểm soát hành vi tải font: Sử dụng thuộc tính font-display để kiểm soát cách font được hiển thị trong quá trình tải.
• Tự lưu trữ font khi có thể: Xem xét tự lưu trữ thay vì sử dụng dịch vụ của bên thứ ba để kiểm soát tốt hơn.

/* Tối ưu tải font với font-display */
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap; /* Hiển thị văn bản ngay lập tức với font dự phòng */
  font-weight: normal;
  font-style: normal;
}

/* Preload font quan trọng */
<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>

4. Chiến lược tối ưu hóa CSS

Tối ưu hóa CSS là điều cần thiết để giảm tài nguyên chặn render và cải thiện tốc độ hiển thị trang.

Kỹ thuật tối ưu hóa CSS:

• Tối thiểu hóa CSS: Loại bỏ các style không cần thiết, khoảng trắng và comment.
• Chia nhỏ file CSS: Tách CSS quan trọng khỏi các style không quan trọng.
• Inline CSS quan trọng: Đặt style quan trọng trực tiếp trong HTML để tránh chặn render.
• Tải CSS không quan trọng không đồng bộ: Tải các style không quan trọng một cách không đồng bộ.
• Tối ưu hóa selectors: Sử dụng selector đơn giản, ít cụ thể hơn để hiệu suất tốt hơn.
• Giảm sự dư thừa: Hợp nhất các style trùng lặp và sử dụng thuộc tính CSS viết tắt.

<!-- Inline CSS quan trọng -->
<style>
  /* Style quan trọng cần thiết cho nội dung trên màn hình */
  .header, .hero { /* styles */ }
</style>

<!-- Tải CSS không quan trọng không đồng bộ -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

5. Kỹ thuật tối ưu hóa JavaScript

JavaScript có thể ảnh hưởng đáng kể đến hiệu suất trình duyệt và cần được tối ưu hóa cẩn thận.

Chiến lược tối ưu hóa JavaScript:

• Tối thiểu hóa và nén: Giảm kích thước file bằng cách loại bỏ khoảng trắng, comment và rút ngắn tên biến.
• Triển khai code splitting: Chia JavaScript thành các phần nhỏ hơn để chỉ tải những gì cần thiết.
• Sử dụng tree shaking: Loại bỏ code không sử dụng trong quá trình build.
• Trì hoãn phân tích và thực thi: Sử dụng thuộc tính async và defer để ngăn chặn luồng chính.
• Tối ưu hóa script của bên thứ ba: Kiểm tra và giới hạn script của bên thứ ba, tải chúng hiệu quả.
• Triển khai lazy loading cho components: Chỉ tải các thành phần JavaScript khi cần thiết.

<!-- Trì hoãn JavaScript không quan trọng -->
<script defer src="non-critical.js"></script>

<!-- Async cho script độc lập -->
<script async src="analytics.js"></script>

<!-- Ví dụ dynamic import -->
<script>
  // Chỉ tải component khi cần thiết
  const loadComponent = async () => {
    const module = await import('./component.js');
    module.initComponent();
  };
  
  document.querySelector('.load-button').addEventListener('click', loadComponent);
</script>

Kết luận

Tối ưu hóa tài nguyên là một khía cạnh quan trọng của hiệu suất frontend có thể cải thiện đáng kể thời gian tải và trải nghiệm người dùng. Bằng cách triển khai các kỹ thuật này cho hình ảnh, video, font chữ, CSS và JavaScript, bạn có thể tạo ra các trang web nhanh hơn, hiệu quả hơn, mang lại trải nghiệm người dùng tốt hơn và đạt thứ hạng cao hơn trên công cụ tìm kiếm.

Trong phần tiếp theo của loạt bài này, chúng ta sẽ khám phá các chiến lược tải hiện đại, bao gồm lazy loading, code splitting và resource hints, để nâng cao hơn nữa hiệu suất trang web của bạn.