Hướng dẫn dành cho người mới bắt đầu về việc sửa các vấn đề ẩn trên web bằng Lighthouse (với React trong tâm trí). Hãy xem chi tiết trong bài viết này ngay sau đây!
Lighthouse là gì?
Lighthouse là một công cụ trong Chrome DevTools giúp kiểm tra trang web của bạn qua bốn lĩnh vực chính:
- ⚡ Hiệu suất
- ♿ Khả năng truy cập
- 🧠 Thực hành tốt nhất
- 🔍 SEO
Ngay cả khi trang web React của bạn trông đẹp, Lighthouse có thể chỉ ra những vấn đề nghiêm trọng ảnh hưởng đến hiệu suất, khả năng sử dụng và SEO — những vấn đề mà nhiều người mới bắt đầu dễ bỏ qua.
⚡ Hiệu suất — Tốc độ = Giữ người dùng + Xếp hạng
Một trang web chậm sẽ khiến người dùng rời đi và ảnh hưởng đến thứ hạng trên Google. Các ứng dụng React dễ trở nên nặng nề nhanh chóng — Lighthouse giúp bạn giảm bớt sự thừa thãi.
Lazy-load hình ảnh:
<img src="about.jpg" loading="lazy" alt="About Us" />
Tại sao? Tải hình ảnh chỉ khi cần thiết, giúp cải thiện tốc độ tải trang ban đầu.
Nén và chuyển đổi hình ảnh sang WebP
- Bạn nên sử dụng Squoosh
- Tại sao WebP? Đây là định dạng hình ảnh hiện đại giúp giảm kích thước tệp từ 30-80% mà không làm mất chất lượng nhìn thấy. Hình ảnh nhỏ hơn = tải nhanh hơn.
Định nghĩa chiều rộng và chiều cao
<img src="banner.webp" width="1200" height="600" />
Tại sao? Ngăn ngừa các sự thay đổi bố cục (CLS), giúp trang tải mượt mà và ổn định hơn.
Xóa bỏ CSS và JS không sử dụng
npm run analyze
Tại sao? Giảm trọng lượng trang. Mã chết = băng thông lãng phí.
Chia nhỏ mã (Code-split components)
const Home = React.lazy(() => import('./Home'));
Tại sao? Chỉ tải những gì cần thiết cho mỗi trang. Tăng tốc việc render ban đầu.
Các tăng tốc nên làm ngay lập tức
- Kích hoạt nén Brotli hoặc gzip
- Tại sao? Nén tệp trước khi gửi tới trình duyệt = chuyển tải nhanh hơn.
<link rel="preconnect" href="https://fonts.googleapis.com" />
Khả năng truy cập — Thiết kế cho mọi người
Khả năng truy cập không chỉ dành cho người đọc màn hình — đó là về tính sử dụng chung cho tất cả mọi người.
Sử dụng HTML có nghĩa (semantic HTML)
<main> <section> <nav> <footer>
Tại sao? Giúp người đọc màn hình và cải thiện ngữ cảnh SEO.
Đặt nhãn cho các trường biểu mẫu
<label for="email">Email</label>
<input type="email" id="email" />
Khắc phục độ tương phản màu sắc
- Sử dụng WebAIM Contrast Checker
Tại sao? Độ tương phản kém khiến văn bản không thể đọc được đối với nhiều người dùng, đặc biệt là những người gặp khó khăn về thị lực.
Sử dụng ARIA một cách tiết kiệm
<div role="alert" aria-live="assertive">Error submitting form</div>
Tại sao? Cung cấp ngữ cảnh quan trọng cho người đọc màn hình khi HTML gốc không làm được.
Best Practices - Mã an toàn, sạch sẽ, có thể mở rộng
Lighthouse đánh dấu các rủi ro bảo mật và thói quen xấu có thể gây hại cho người dùng hoặc làm cho ứng dụng của bạn khó duy trì.
Sử dụng HTTPS
- Tại sao? Đảm bảo kết nối an toàn. Trình duyệt sẽ chặn một số tính năng trên HTTP.
Đặt biến môi trường
NODE_ENV=production
Tại sao? Đảm bảo các bản dựng được tối ưu hóa bởi các công cụ như React và Webpack.
Chỉ nhập những gì bạn sử dụng
// Bad
import _ from 'lodash';
// Good
import debounce from 'lodash/debounce';
Tại sao? Kích thước gói nhỏ hơn = tải nhanh hơn.
Tránh sử dụng các script và style inline
- Tại sao? Gây chặn render và rủi ro bảo mật (ví dụ, XSS).
SEO — Để bị tìm thấy. Để được click
Ngay cả khi nội dung của bạn rất tuyệt vời, nếu Google không thể đọc trang web của bạn, nó sẽ không xếp hạng.
Sử dụng thẻ title và meta
<title>My React App</title>
<meta name="description" content="The best place to learn code" />
Tại sao? Giúp công cụ tìm kiếm hiểu trang của bạn và hiển thị bản xem trước tốt hơn.
Sử dụng duy nhất một thẻ <h1> trên mỗi trang
- Tại sao? Công cụ tìm kiếm sử dụng nó để hiểu chủ đề chính của trang của bạn.
Văn bản thay thế cho hình ảnh
<img src="hero.webp" alt="Welcome banner" />
Tại sao? Hỗ trợ người đọc màn hình và cải thiện SEO hình ảnh.
Sử dụng URL sạch, dễ đọc
/product/shoes > /product?id=123abc
Tại sao? Dễ dàng được lập chỉ mục và thân thiện với người dùng.
Tại sao hiệu suất thực sự quan trọng
- 40% người dùng thoát nếu trang web của bạn mất hơn 3 giây để tải.
- Google xếp hạng các trang web nhanh hơn lên đầu.
- Các trang web chậm gây khó chịu cho người dùng và làm giảm tỷ lệ chuyển đổi.
- Trên thiết bị di động, tốc độ còn quan trọng hơn.
Kết luận
Mở DevTools → Lighthouse → Phân tích tốc độ tải trang.
Sau đó làm theo blog này để dọn dẹp và triển khai thông minh hơn.
Bạn sẽ xây dựng các ứng dụng nhanh hơn, bao gồm hơn và sẵn sàng SEO — mà không cần đoán mò.