Bài 30.5: Bài tập thực hành tối ưu assets

Chào mừng bạn quay trở lại với chuỗi bài viết về lập trình Front-end! Sau khi đã xây dựng được giao diện đẹp mắt và chức năng hoàn chỉnh, một trong những yếu tố quan trọng nhất để biến trang web của bạn từ "tốt" thành "tuyệt vời" chính là hiệu suất. Một trang web tải nhanh không chỉ làm hài lòng người dùng, mà còn cải thiện thứ hạng SEO và giảm tải cho máy chủ.

Trong bài tập thực hành này, chúng ta sẽ đi sâu vào việc tối ưu hóa các tài nguyên (assets) mà trang web của bạn sử dụng. Assets bao gồm hình ảnh, tệp CSS, tệp JavaScript, phông chữ (fonts) và đôi khi cả video hoặc âm thanh. Đây thường là những thành phần chiếm dung lượng lớn nhất và có ảnh hưởng trực tiếp đến tốc độ tải trang.

Mục tiêu của bài tập này không chỉ là hiểu tại sao cần tối ưu, mà còn là thực hành cách làm điều đó trên các loại assets khác nhau.

Tại Sao Tối Ưu Assets Lại Quan Trọng Đến Vậy?

Tốc Độ Tải Trang (Page Load Speed): Assets chiếm phần lớn dữ liệu cần tải về. Tối ưu hóa chúng giúp giảm kích thước tổng thể của trang, từ đó giảm thời gian tải.
Trải Nghiệm Người Dùng (User Experience - UX): Người dùng hiện đại rất thiếu kiên nhẫn. Một trang web chậm có thể khiến họ rời đi ngay lập tức. Trang nhanh tạo cảm giác chuyên nghiệp và đáng tin cậy hơn.
SEO (Search Engine Optimization): Google và các công cụ tìm kiếm khác sử dụng tốc độ trang như một yếu tố xếp hạng. Trang nhanh có xu hướng được xếp hạng cao hơn.
Tiết Kiệm Băng Thông và Chi Phí: Đối với cả người dùng (đặc biệt trên di động với gói cước hạn chế) và chủ sở hữu trang web (chi phí hosting, CDN), việc truyền tải ít dữ liệu hơn sẽ giúp tiết kiệm đáng kể.

Các Kỹ Thuật Tối Ưu Assets Cho Từng Loại

Chúng ta sẽ đi qua các loại assets phổ biến và xem xét các kỹ thuật tối ưu cho từng loại.

1. Tối Ưu Hóa Hình Ảnh (Image Optimization)

Hình ảnh thường là "kẻ ngốn" dung lượng lớn nhất trên một trang web. Tối ưu hóa hình ảnh là bước đầu tiên và thường mang lại hiệu quả rõ rệt nhất.

Nén Hình Ảnh: Sử dụng các công cụ nén (lossy - giảm chất lượng nhưng nén mạnh, lossless - giữ nguyên chất lượng nhưng nén ít hơn) để giảm kích thước tệp mà vẫn giữ chất lượng chấp nhận được.
Chọn Đúng Định Dạng:
- JPEG: Tốt nhất cho ảnh chụp, có độ chi tiết cao.
- PNG: Dùng khi cần ảnh có nền trong suốt hoặc các hình ảnh đồ họa đơn giản, logo.
- SVG: Dùng cho đồ họa vector (biểu tượng, logo, đồ thị). Có thể thay đổi kích thước mà không vỡ, dung lượng nhỏ.
- WebP/AVIF: Các định dạng hiện đại, cung cấp khả năng nén vượt trội so với JPEG/PNG trong nhiều trường hợp. Nên sử dụng khi có thể (đảm bảo tương thích trình duyệt hoặc cung cấp fallback).
Sử Dụng Ảnh Phù Hợp Với Màn Hình (Responsive Images): Không nên tải một ảnh siêu lớn cho màn hình điện thoại nhỏ. Sử dụng thuộc tính srcset và sizes trong HTML để trình duyệt tự động chọn ảnh có kích thước phù hợp.
Lazy Loading (Tải Trì Hoãn): Chỉ tải hình ảnh khi người dùng cuộn đến gần vị trí của chúng trên màn hình.

Code Minh Họa (Lazy Loading):

<img src="duong-dan/den/hinh-anh.jpg" alt="Mô tả ảnh" loading="lazy">

Giải thích: Thuộc tính loading="lazy" là một cách đơn giản để triển khai lazy loading trực tiếp trong HTML, được hỗ trợ bởi hầu hết các trình duyệt hiện đại. Nó bảo trình duyệt chỉ tải ảnh khi nó gần hiển thị trên màn hình (trong một ngưỡng khoảng cách nhất định), giúp giảm thời gian tải ban đầu của trang.

Code Minh Họa (Responsive Images với srcset/sizes):

<img srcset="hinh-anh-nho.jpg 500w,
             hinh-anh-vua.jpg 800w,
             hinh-anh-lon.jpg 1200w"
     sizes="(max-width: 600px) 500px,
            (max-width: 900px) 800px,
            1200px"
     src="hinh-anh-lon.jpg"
     alt="Mô tả ảnh">

Giải thích:

srcset: Cung cấp danh sách các tệp ảnh thay thế cùng với chiều rộng tự nhiên của chúng (500w, 800w, 1200w).
sizes: Mô tả cách ảnh sẽ được hiển thị trên các kích thước màn hình khác nhau. Ví dụ: (max-width: 600px) 500px nghĩa là trên màn hình nhỏ hơn hoặc bằng 600px, ảnh sẽ rộng 500px trong layout. Trình duyệt sẽ dùng thông tin này và srcset để chọn ảnh tối ưu nhất.
src: Cung cấp ảnh fallback cho các trình duyệt không hỗ trợ srcset hoặc làm ảnh mặc định.

2. Tối Ưu Hóa CSS (CSS Optimization)

Các tệp CSS có thể trở nên rất lớn trong các dự án phức tạp. Chúng cũng là render-blocking resources (nguồn tài nguyên chặn render), nghĩa là trình duyệt phải tải và phân tích cú pháp toàn bộ CSS trước khi hiển thị trang.

Minification (Thu Gọn): Loại bỏ khoảng trắng, xuống dòng, comment và các ký tự không cần thiết khác.
Nén (Compression): Sử dụng các thuật toán nén như Gzip hoặc Brotli trên máy chủ.
Loại Bỏ CSS Không Sử Dụng (PurgeCSS): Trong các framework như Tailwind CSS hoặc Bootstrap, có thể có rất nhiều class bạn không dùng. Các công cụ như PurgeCSS sẽ quét mã HTML/template của bạn và loại bỏ các style CSS không được sử dụng.
Critical CSS: Tải inline phần CSS cần thiết để hiển thị nội dung "above-the-fold" (phần hiển thị ngay khi trang tải mà không cần cuộn), còn phần CSS còn lại tải bất đồng bộ.

Code Minh Họa (Minification - Concept):

CSS ban đầu:

/* Styles cho phần header */
.header {
  padding: 20px; /* Khoảng đệm bên trong */
  margin: 0; /* Loại bỏ margin mặc định */
  background-color: #f0f0f0;
}

CSS sau khi Minify:

.header{padding:20px;margin:0;background-color:#f0f0f0}

Giải thích: Minification giảm đáng kể kích thước tệp bằng cách loại bỏ các ký tự không ảnh hưởng đến việc hiển thị nhưng chiếm không gian lưu trữ.

3. Tối Ưu Hóa JavaScript (JavaScript Optimization)

JavaScript là trái tim của các trang web tương tác, nhưng nó cũng là nguồn gây chậm trễ lớn nhất nếu không được tối ưu. JavaScript cũng là parser-blocking, nghĩa là khi trình duyệt gặp thẻ <script>, nó dừng lại việc parse HTML để tải, phân tích cú pháp và thực thi script đó.

Minification & Compression: Tương tự CSS, JS cũng cần được minification và nén.
Code Splitting (Chia Mã): Chia mã JavaScript thành các phần nhỏ hơn. Chỉ tải các phần cần thiết cho trang hoặc component hiện tại, và tải các phần khác khi chúng được yêu cầu (ví dụ: khi người dùng click vào một nút mở modal).
Async và Defer Attributes: Sử dụng async hoặc defer trên thẻ <script> để tránh chặn parse HTML.
Lazy Loading Modules/Components: Tương tự code splitting, nhưng thường áp dụng ở cấp độ module hoặc component trong các framework như React (với React.lazy và Suspense).

Code Minh Họa (Async/Defer):

<script src="script-phan-tich.js" async></script>
<script src="script-phu-thuoc-dom.js" defer></script>

Giải thích:

async: Script được tải song song với việc parse HTML. Khi script tải xong, việc parse HTML tạm dừng để script được thực thi ngay lập tức. Phù hợp với các script không phụ thuộc vào DOM hoặc các script khác.
defer: Script được tải song song với việc parse HTML. Việc thực thi script bị trì hoãn cho đến khi toàn bộ HTML đã được parse xong. Phù hợp với các script phụ thuộc vào DOM hoặc các script khác.

Code Minh Họa (Dynamic Import - Concept trong JS):

// Giả sử bạn có một module chứa hàm rất lớn hoặc ít dùng
// Thay vì import nó ngay từ đầu file:
// import { complexFunction } from './complex-module.js';

// Sử dụng dynamic import để chỉ tải khi cần:
document.getElementById('myButton').addEventListener('click', () => {
  import('./complex-module.js') // Tải module này chỉ khi button được click
    .then(module => {
      module.complexFunction();
    })
    .catch(error => {
      console.error('Không thể tải module:', error);
    });
});

Giải thích: Cú pháp import() trả về một Promise, cho phép bạn tải động một module JavaScript. Các build tool hiện đại như Webpack, Parcel, Vite sẽ tự động biến code này thành các tệp JS riêng biệt và chỉ tải chúng khi câu lệnh import() được gọi, thay vì đóng gói tất cả vào một tệp duy nhất.

4. Tối Ưu Hóa Fonts (Phông Chữ)

Việc sử dụng phông chữ tùy chỉnh (web fonts) làm cho trang web của bạn đẹp hơn, nhưng tệp font cũng có thể khá nặng và gây ra các vấn đề hiển thị như FOUT (Flash of Unstyled Text - hiển thị phông chữ mặc định trước khi phông tùy chỉnh tải) hoặc FOIT (Flash of Invisible Text - hiển thị khoảng trống trước khi phông tùy chỉnh tải).

Sử Dụng Định Dạng Hiện Đại: WOFF2 là định dạng nén tốt nhất cho web fonts hiện nay. Nên ưu tiên sử dụng WOFF2 và cung cấp fallback sang WOFF cho trình duyệt cũ hơn.
Subsetting Fonts: Nếu bạn chỉ dùng một vài ký tự đặc biệt hoặc chỉ dùng một ngôn ngữ nhất định (ví dụ: chỉ tiếng Việt không dấu), bạn có thể tạo bản subset của font chỉ chứa các ký tự cần thiết. Điều này giúp giảm đáng kể kích thước tệp font.
Sử Dụng font-display: Thuộc tính CSS này giúp kiểm soát cách font hiển thị trong quá trình tải.
- swap: Hiển thị văn bản ngay lập tức bằng font dự phòng, sau đó hoán đổi sang font tùy chỉnh khi nó tải xong. Thường là lựa chọn tốt nhất cho UX.
- fallback: Sử dụng font dự phòng trong một khoảng thời gian ngắn, sau đó nếu font tùy chỉnh chưa tải xong, nó sẽ tiếp tục hiển thị bằng font dự phòng cho đến khi hết thời gian timeout, lúc đó mới hoán đổi sang font tùy chỉnh.
- optional: Tải font tùy chỉnh nhưng không bắt buộc. Nếu nó không tải kịp, trình duyệt sẽ tiếp tục dùng font dự phòng và không bao giờ hoán đổi. Phù hợp với các font ít quan trọng.
- block: Chặn hiển thị văn bản cho đến khi font tùy chỉnh tải xong (gây ra FOIT). Không nên dùng trừ khi có lý do đặc biệt.

Code Minh Họa (font-display):

@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Sử dụng font dự phòng trong khi tải */
}

body {
  font-family: 'MyCustomFont', sans-serif; /* Khai báo font dự phòng */
}

Giải thích: Khai báo @font-face định nghĩa font tùy chỉnh. Thuộc tính font-display: swap; thông báo cho trình duyệt rằng ngay khi gặp văn bản cần dùng font này, hãy hiển thị nó bằng font dự phòng (sans-serif trong ví dụ body) trong khi chờ MyCustomFont tải về.

Công Cụ Hỗ Trợ và Thực Hành Tổng Thể

Việc tối ưu hóa thủ công từng tệp có thể rất mất thời gian. May mắn thay, có rất nhiều công cụ tự động hóa quy trình này:

Build Tools (Webpack, Parcel, Vite): Các công cụ đóng gói này thường có các plugin hoặc tích hợp sẵn để tự động minification, nén, code splitting, và thậm chí cả tối ưu hóa hình ảnh trong quá trình build dự án.
Performance Auditing Tools:
- Lighthouse (trong Chrome DevTools): Cung cấp báo cáo chi tiết về hiệu suất, accessbility, SEO, và best practices. Nó sẽ chỉ ra những assets nào cần tối ưu và đưa ra gợi ý cụ thể.
- WebPageTest: Một công cụ trực tuyến phân tích tốc độ tải trang từ nhiều địa điểm và trình duyệt khác nhau.
CDN (Content Delivery Network): Phân phối assets của bạn trên mạng lưới máy chủ toàn cầu, giúp người dùng tải về assets từ máy chủ gần họ nhất, giảm độ trễ.
Browser Caching: Cấu hình HTTP header trên máy chủ (Cache-Control, Expires) để trình duyệt lưu trữ assets và không cần tải lại chúng trong các lần truy cập sau.

Bài Tập Thực Hành Của Bạn

Bây giờ là lúc áp dụng những kiến thức này vào thực tế.

Chọn một dự án: Lấy một dự án web bạn đang làm, hoặc tạo một dự án mẫu đơn giản có chứa hình ảnh, CSS, và JavaScript.
Đo lường hiệu suất ban đầu: Sử dụng Lighthouse (nhấn F12 trong Chrome, chọn tab Lighthouse) để chạy một bài kiểm tra hiệu suất trên trang của bạn. Ghi lại các điểm số (Performance Score, FCP, LCP, TBT...) và danh sách các "Opportunities" (cơ hội cải thiện), đặc biệt là các mục liên quan đến assets.
Xác định "kẻ thù": Dựa vào báo cáo của Lighthouse hoặc tab Network trong DevTools, xác định những assets nào có dung lượng lớn nhất hoặc gây chậm trễ nhiều nhất.
Áp dụng kỹ thuật tối ưu:
- Nén hình ảnh.
- Sử dụng loading="lazy" cho các ảnh không hiển thị ngay.
- Minify tệp CSS và JS (nếu chưa được build tool xử lý).
- Kiểm tra xem bạn có thể sử dụng async hoặc defer cho các thẻ <script> không.
- Nếu dùng web fonts, kiểm tra lại cách bạn tải và thuộc tính font-display.
- (Nâng cao) Thử nghiệm code splitting hoặc loại bỏ CSS không dùng.
Đo lường lại hiệu suất: Sau khi áp dụng các thay đổi, chạy lại Lighthouse và so sánh kết quả. Bạn sẽ thấy sự khác biệt đáng kể!
Lặp lại: Tối ưu hiệu suất là một quá trình liên tục. Hãy biến việc kiểm tra và tối ưu assets thành một phần thói quen phát triển của bạn.

Comments

There are no comments at the moment.