Bạn quăng <div> vào mọi chỗ, load Google Fonts từ CDN, và import cả bộ Font Awesome chỉ để dùng 15 icon. Trang web chậm, điểm Lighthouse đỏ lòm, nhưng bạn không hiểu tại sao. 11 thứ trong bài này — mỗi cái đều fix được một vấn đề bạn đang gặp mà không nhận ra.
Đây không phải list tổng hợp recycled. Đây là những thứ tác giả thực sự thấy developer bỏ qua — và nó hiện rõ trong sản phẩm của họ.
Đừng ném <div> vào mọi chỗ. Semantic HTML không chỉ cho SEO — mà còn cho accessibility, readability, và long-term maintainability.
Dùng đúng tag cho đúng việc: <header>, <main>, <footer>, <nav>, <aside>, <article>. Screen reader và search engine đều phụ thuộc vào structure này để hiểu trang của bạn.
Heading tag có ý nghĩa cấu trúc, không phải styling. Lỗi phổ biến: thấy CTA lớn kiểu “Ready to get started?” là quăng <h2> vào — sai. Đó là text presentational, dùng <span> rồi style cho to.
<h1><h2> trở xuống dùng có chủ đích cho content thực sự cấu trúc trangKhông ảnh nào trên website được vượt quá 100kb. Đây là quy tắc, không phải gợi ý.
srcset để serve kích thước phù hợp theo deviceKhông phải mọi thứ cần load cùng lúc — loading="lazy" trên ảnh và iframe below the fold là win dễ nhất bạn có thể lấy.
Nhưng phần người ta hay bỏ qua: Hero image không bao giờ được lazy load. Nó above the fold, user thấy đầu tiên — dùng fetchpriority="high".
Hai attribute này cùng nhau tác động đo được đến LCP score.
Google Fonts CDN = extra DNS lookup + extra connection + extra request mỗi page load. Bạn đang thêm latency không cần thiết.
Fix đơn giản: Download font về, tự serve.
font-display: swap để text vẫn hiển thị khi font đang loadwoff2 — mọi browser hiện đại support và đây là format nhỏ nhấtFont Awesome CDN load hàng trăm kilobyte icon. Bạn dùng khoảng 15 cái. Đây là trade-off tệ hại.
Thay vào đó: dùng inline SVG. AI generate SVG icon rất tốt — hỏi đúng cái bạn cần, paste vào. Scale perfect mọi screen, support currentColor để theming dễ, zero HTTP request thêm.
Spacing, sizing, màu sắc, font phải theo hệ thống — không phải cảm tính. Khi mỗi dev tự bịa margin value, codebase trở thành mớ hỗn độn không gì align.
:root {
--space-xs: 4px; --space-sm: 8px;
--space-md: 16px; --space-lg: 32px;
--text-sm: 0.875rem; --text-base: 1rem;
}
Define token một lần, dùng ở khắp nơi. Bạn ngừng debate “14px hay 15px?” — chỉ cần --text-sm.
Tailwind, Bootstrap không phải ác — nhưng lean vào chúng cho mọi thứ sẽ bloat project và cản việc hiểu CSS thực sự.
Hãy dùng native CSS hiện đại:
clamp() cho fluid typography thay vì hardcode breakpointgrid và flex native — không cần library cho layout@container (min-width: 400px) {
.card { flex-direction: row; }
}
Semantic HTML mới được một nửa. Nếu user không navigate được bằng keyboard — website của bạn bị broken. Đơn giản vậy thôi.
Checklist cơ bản:
aria-label trên icon button không có visible textKhông phải vì Google bảo — mà vì chúng đo những thứ thực sự quan trọng với user thật.
| Metric | Đo gì | Cách tối ưu |
|---|---|---|
| LCP | Main content xuất hiện nhanh không | Optimize hero image, server response |
| CLS | Page có nhảy loạn không khi load | Luôn set image dimensions |
| INP | Page respond input nhanh không | Tránh long task trên main thread |
Mở Chrome DevTools, chạy Lighthouse audit, thực sự đọc kết quả.
Khi AI ngày càng giỏi viết code, thứ phân biệt frontend developer giỏi với số còn lại là design judgment.
Bạn không cần trở thành designer. Bạn cần:
Chỉ có một kỹ năng sẽ không đưa bạn đi xa. Frontend developer nổi bật là người vừa nghĩ về code, vừa nghĩ về thứ hiện ra trên màn hình.
| # | Kỹ năng | Mức độ bị bỏ qua |
|---|---|---|
| 1-2 | Semantic HTML & Headings | 🔴 Rất thường xuyên |
| 3-4 | Image opt & Lazy loading | 🔴 Rất thường xuyên |
| 5-6 | Self-host fonts & SVG icons | 🟡 Thường xuyên |
| 7-8 | Design system & Custom CSS | 🟡 Thường xuyên |
| 9 | Accessibility | 🔴 Rất thường xuyên |
| 10 | Core Web Vitals | 🟡 Thường xuyên |
| 11 | Design eye | 🟠 Ít ai chủ động học |
