🔄 Tóm tắt bài học: Trong bài học trước, bạn đã học về khả năng Trợ năng — các nguyên tắc WCAG, điều hướng bằng bàn phím, ARIA và các yêu cầu về độ tương phản. Bây giờ, hãy cùng nhau làm cho các trang web của bạn dễ truy cập và đáp ứng tốt trên mọi thiết bị, đồng thời load nhanh trên mọi kết nối.
Core Web Vitals là các chỉ số của Google về trải nghiệm người dùng và chúng ảnh hưởng trực tiếp đến thứ hạng tìm kiếm. Một trang web đẹp và dễ truy cập nhưng mất 5 giây để load trên thiết bị di động sẽ có thứ hạng thấp hơn và mất người dùng. Tối ưu hóa hiệu suất là yếu tố quan trọng cuối cùng của code frontend chất lượng sản xuất.
Core Web Vitals
Số liệu
Đo lường
Tốt
Cần sửa chữa
Tệ
LCP (Largest Contentful Paint)
Tốc độ load
< 2.5s
2.5-4s
> 4s
CLS (Cumulative Layout Shift)
Sự ổn định thị giác
< 0.1
0.1-0.25
> 0.25
INP (Interaction to Next Paint)
Khả năng đáp ứng
< 200ms
200-500ms
> 500ms
Tối ưu hóa LCP (Tốc độ load)
Thành phần LCP thường là hình ảnh chính, tiêu đề hoặc khối văn bản lớn.
Các chiến lược tối ưu hóa theo tác động:
Chiến lược
Tác động
Triển khai
Load trước hình ảnh LCP
Cao
<link rel="preload" as="image" href="hero.webp">
CSS nội tuyến
Cao
Các kiểu trang trên <style> trong <head>
fetchpriority
Trung bình
<img fetchpriority="high"> trên phần tử LCP
Hình ảnh đáp ứng
Cao
srcset + Định dạng WebP (được đề cập trong Bài học 5)
Tối ưu hóa phông chữ
Trung bình
font-display: swap + Load trước các file phông chữ
Loại bỏ JavaScript gây chặn hiển thị
Cao
defer hoặc async trên tag script
Prompt AI cho phân tích LCP:
LCP của trang tôi là 4,2 giây. Thành phần gây ra LCP là [MÔ TẢ — hình ảnh chính, tiêu đề, v.v.]. Đây là phần <head> của tôi: [DÁN]. Hãy đề xuất các tối ưu hóa cụ thể để giảm LCP xuống dưới 2,5 giây, theo thứ tự mức độ ảnh hưởng. Hiển thị chính xác các thay đổi code.
Ngăn ngừa CLS (Dịch chuyển bố cục)
Dịch chuyển bố cục xảy ra khi các phần tử thay đổi kích thước hoặc vị trí sau khi hiển thị ban đầu.
Các nguyên nhân và cách khắc phục CLS phổ biến:
Nguyên nhân
Cách khắc phục
Hình ảnh không có kích thước
Luôn luôn thiết lập thuộc tính width và height
Load phông chữ web
font-display: swap + size-adjust
Chèn nội dung động
Phân bổ trước không gian bằng CSS min-height
Quảng cáo không có không gian dành riêng
Container quảng cáo có kích thước cố định
CSS load muộn
Chèn CSS quan trọng trực tiếp vào <head>
CSS để ngăn chặn CLS hình ảnh:
📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.
📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.
img {
max-width: 100%;
height: auto;
/* Browser reserves space from width/height attributes */
}
✏️ Cách điền thông tin chi tiết của bạn: Thay thế mỗi [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào mơ hồ sẽ tạo ra kết quả mơ hồ — hãy cụ thể.
👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.
📌 Cách xử lý kết quả: Lưu phản hồi vào file Notes. Chọn đề xuất có tác động cao nhất và thực hiện ngay trong tuần này — đừng cố gắng làm tất cả cùng một lúc.
⚠️ Nếu kết quả không ổn: Nếu các đề xuất có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ qua những lời khuyên chung chung." Nếu bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với điều đó làm ràng buộc chính."
Prompt AI để gỡ lỗi CLS:
Trang của tôi có điểm CLS là 0,28. Tôi đã xác định được các phần tử bị dịch chuyển sau: [DANH SÁCH]. Đối với mỗi phần tử, hãy đề xuất cách phân bổ trước không gian hoặc ngăn chặn sự dịch chuyển. Hiển thị các thay đổi CSS và HTML.
Tối ưu hóa INP (Khả năng phản hồi)
INP đo lường tốc độ phản hồi của trang đối với các tương tác của người dùng (nhấp chuột, chạm, nhấn phím).
Chiến lược:
Chiến lược
Triển khai
Nghỉ giải lao giữa các nhiệm vụ dài
Sử dụng requestIdleCallback hoặc setTimeout(fn, 0) để nhường quyền điều khiển cho trình duyệt
Bộ xử lý đầu vào khử nhiễu
Đừng thực hiện các thao tác tốn kém mỗi khi gõ phím
Sử dụng CSS cho hoạt ảnh
Các hiệu ứng chuyển tiếp/hoạt ảnh CSS chạy trên luồng trình biên dịch (không chặn luồng chính)
Web Workers
Di chuyển các tác vụ tính toán nặng ra khỏi luồng chính
Ảo hóa các danh sách dài
Chỉ hiển thị các mục có thể nhìn thấy, chứ không phải 10.000 node DOM
Chiến lược load JavaScript
Phương pháp load
Thời điểm sử dụng
Cú pháp
Mặc định (chặn)
Hầu như không bao giờ
<script src="app.js">
defer
Hầu hết mọi script
<script defer src="app.js">
async
Các script độc lập (phân tích)
<script async src="analytics.js">
Nhập động
Các tính năng bên dưới trang
const mod = await import('./gallery.js')
Lazy (IntersectionObserver)
Nội dung/hình ảnh bên dưới trang
Load khi phần tử vào vùng hiển thị
✅ Kiểm tra nhanh: Bạn thêm `loading="lazy"` vào ảnh chính để cải thiện hiệu suất. Sau khi triển khai, LCP của bạn lại TỆ HƠN. Tại sao?
Câu trả lời: `loading="lazy"` yêu cầu trình duyệt trì hoãn việc load cho đến khi phần tử nằm gần viewport. Đối với ảnh chính (chính là viewport khi load), điều này thực sự làm chậm quá trình load bằng cách thêm kiểm tra giao điểm. Chỉ sử dụng `loading="lazy"` cho các ảnh nằm dưới màn hình. Các ảnh nằm trên màn hình nên sử dụng `fetchpriority="high"` và `<link rel="preload">` để load nhanh nhất có thể.
Công cụ kiểm tra hiệu suất
Công cụ
Nó đo lường điều gì?
Thời điểm sự dụng
Lighthouse (Chrome DevTools)
LCP, CLS, INP, khả năng tiếp cận
Trong quá trình phát triển
PageSpeed Insights
Số liệu thực tế + số liệu thí nghiệm
Trước và sau khi triển khai
WebPageTest
Phân tích kiểu thác nước chi tiết
Chẩn đoán các vấn đề cụ thể
Chrome DevTools Performance
Thời gian thực thi JavaScript
Gỡ lỗi INP
Những điểm chính cần ghi nhớ
Tối ưu hóa LCP không chỉ dừng lại ở việc nén ảnh: Load trước ảnh LCP, nhúng CSS quan trọng, sử dụng fetchpriority="high" và trì hoãn JavaScript không quan trọng có thể giúp giảm 2-3 giây thời gian load bằng cách loại bỏ độ trễ trong chuỗi loading của trình duyệt.
Mọi phần tử thay đổi kích thước hoặc vị trí sau khi hiển thị ban đầu đều gây ra CLS: luôn đặt width và height cho hình ảnh, phân bổ trước không gian cho nội dung động và quảng cáo bằng CSS min-height và sử dụng font-display: swap cho phông chữ web — những điều này ngăn chặn sự thay đổi bố cục mà người dùng thấy khó chịu nhất.
Chỉ sử dụng loading="lazy" cho nội dung bên dưới màn hình, không bao giờ sử dụng cho phần tử hero/LCP: lazy loading thêm độ trễ quan sát giao điểm khiến nội dung phía trên màn hình load chậm hơn, trong khi fetchpriority="high" và <link rel="preload"> giúp load nhanh hơn.
Câu 1:
Trang của bạn load 12 file JavaScript với tổng dung lượng 800KB. Thời gian load trang ban đầu là 5 giây. Hầu hết code JS dành cho các tính năng bên dưới phần hiển thị đầu tiên (accordion, thư viện ảnh, phân tích). Làm thế nào để cải thiện điều này?
GIẢI THÍCH:
Tối ưu hóa hiệu suất hiện đại là về THỜI ĐIỂM code được load, không chỉ là SỐ LƯỢNG code hiện có. JS đường dẫn quan trọng (cần thiết cho tương tác ban đầu) được load đồng bộ. Mọi thứ khác được load bằng `defer`, `async` hoặc `import()` động. Bằng cách này, trang sẽ nhanh chóng trở nên tương tác trong khi các tính năng bổ sung được load trong nền. Việc kết hợp mọi thứ vào một gói lớn thực sự làm cho mọi thứ tồi tệ hơn - hoặc là tất cả hoặc không có gì.
Câu 2:
Bạn thêm widget chat của bên thứ ba chèn một nút nổi trên mỗi trang. Sau khi thêm widget này, điểm Cumulative Layout Shift (CLS) của bạn tăng từ 0,02 lên 0,35 (Google khuyến nghị dưới 0,1). Người dùng không thấy nút chat cho đến khi họ cuộn xuống. Chuyện gì đang xảy ra vậy?
GIẢI THÍCH:
Sự dịch chuyển bố cục xảy ra khi các phần tử được thêm vào hoặc thay đổi kích thước trong DOM sau khi hiển thị ban đầu. Các widget của bên thứ ba là nguyên nhân phổ biến gây ra hiện tượng dịch chuyển bố cục vì chúng chèn nội dung không đồng bộ. Phân bổ trước không gian (CSS min-height), sử dụng định vị cố định và lazy load là các biện pháp giảm thiểu tiêu chuẩn. Bạn không cần phải chấp nhận hiện tượng dịch chuyển bố cục kém từ các script của bên thứ ba.
Câu 3:
Trang của bạn có LCP (Largest Contentful Paint) là 4,8 giây. Google khuyến nghị dưới 2,5 giây. Phần tử LCP là hình ảnh chính. Ngoài nén hình ảnh, bạn còn có thể làm gì nữa?
GIẢI THÍCH:
Tối ưu hóa LCP không chỉ dừng lại ở việc nén hình ảnh. Chuỗi loading rất quan trọng: Trình duyệt phải tải xuống HTML → tìm thấy hình ảnh → tải xuống hình ảnh → hiển thị nó. Load trước loại bỏ độ trễ tìm thấy. Nội tuyến CSS quan trọng loại bỏ độ trễ chặn CSS. fetchpriority báo hiệu tầm quan trọng. Kết hợp lại, những điều này giảm chuỗi từ 4-5 bước xuống mức tối thiểu có thể.
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:
AI
Hướng dẫn AI
Claude
ChatGPT
Gemini
Thư viện Prompt
Công nghệ
Học IT
Tiện ích
AI
Copilot
Grok
n8n
Thư viện Prompt
Hướng dẫn AI
Công nghệ
Ứng dụng
Hệ thống
Game - Trò chơi
iPhone
Android
Làng Công nghệ
Học CNTT
Hàm Excel
Học Python
Download
Video
Cuộc sống
Khoa học
