Xin chào tất cả mọi người. Hôm nay mình sẽ chia sẻ cho mọi người một chủ đề rất là thú vị liên quan đến tối ưu hoá về độ phức tạp của STYLE.
CSS là một ngôn ngữ lập trình quá quen thuộc với tất cả các lập trình viên web chúng ta, về cơ bản chúng ta đều có thể CSS thuần thục các layout không qua phức tạp. Tuy nhiên khi nói đến việc tối ưu hoá code giao diện, chúng ta lại thường bỏ qua CSS vì cho rằng chúng không ảnh hưởng nhiều đến hiệu năng.
Cho đến tuần làm việc vừa rồi khi ngồi fix bug trên giao diện dự án Thần Số Học của công ty mình, mình mới thấy có cái bug là lặp CSS. Lúc này mình mới chợt nhớ ra là, à lâu quá rồi mình không còn thói quen kiểm tra lại render CSS vì toàn code thư viện bundle ăn sẵn. Đến khi cần phải code thuần HTML và CSS cho các task cụ thể thì mình lại bỏ quên và lãng phí đi kiến thức, kinh nghiệm và trải nghiệm của bản thân về tối ưu hoá cơ bản.
Về cơ bản, nhiều anh em mới code sẽ chủ quan hoặc quên đi kiến thức về việc viết style. Chúng ta cần nhớ rằng có các trường hợp viết style làm ảnh hưởng đến hiệu năng như sau
1. Style Inline Quá Nhiều
Ảnh hưởng hiệu năng là do mỗi lần chuyển trang, trình duyệt không những phải render HTML mà còn phải render lại CSS. Thay vì thế, chúng ta nên để các style được load trong một file CSS duy nhất từ lần đầu để có thể tăng tốc độ load trang cho trình duyệt. Việc này vừa tối ưu hoá file HTML, vừa tận dụng được việc cache file tĩnh từ trình duyệt.
Hướng giải quyết: Mình khuyên các bạn nên viết ra một file CSS riêng và hạn chế sử dụng inline CSS, vì inline CSS vừa khó maintain, vừa khó fix bug.
2. CSS Không Tối Ưu và Quá Phức Tạp
Việc viết CSS với nhiều cấp selector cũng ảnh hưởng đến hiệu năng load trang.
Giải thích: Ví dụ khi viết CSS, có những người sẽ viết kiểu này:
div#container .row > p.someClass { ... }
Khi đó, trình duyệt sẽ phải load từ phải qua trái. Đầu tiên, nó sẽ tìm xem có bao nhiêu class tên là someClass, sau đó lại phải tìm xem trong đống đó có bao nhiêu thẻ p, rồi tiếp tục lại phải tìm xem số vừa tìm được có bao nhiêu thẻ có thẻ cha có class là row. Nghe hết sức mệt mỏi đúng không? Việc đi loằng ngoằng selector như vậy dễ làm cho trình duyệt phải mất thời gian tìm và tính toán, dẫn đến việc render CSS lâu hơn và ảnh hưởng đến hiệu suất tải trang.
Hướng giải quyết
Người ta đã sinh ra một quy chuẩn đặt tên class gọi là BEM (Block Element Modifier), thay vì phải chọc từ thằng cha tít tít ngoài vào, mục đích của BEM là giúp tránh bị trùng lặp CSS giữa các phần không mong muốn. Với quy tắc BEM, bạn có thể đặt tên class theo cách dễ hiểu và dễ quản lý mà không cần phải lo việc viết CSS phức tạp từ các thẻ ngoài vào.
Ví dụ: Giả sử bạn có hai list là card và phone, bên trong mỗi list lại có các item. Lúc này, bạn có thể đặt tên hai khối cha là .card và .phone, và các item bên trong mỗi khối sẽ được mang class riêng là .card__item và .phone__item.
Với cách đặt tên này, bạn có thể chọc thẳng vào tên class và viết CSS mà không cần phải lo việc đụng chạm giữa các item trong các list khác nhau nữa.
3. Font Import Quá Nhiều
Chúng ta đều biết rằng một tệp font TTF thường khá cồng kềnh. Nếu một trang web có quá nhiều font và các font này tải chậm thì liệu text có hiển thị kịp không? Câu trả lời là không, khi đó sẽ có một khoảng trắng trên trang web, điều này trông rất khó chịu và ảnh hưởng đến trải nghiệm người dùng.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: 'Roboto', sans-serif;
font-display: swap; /* Sử dụng swap cho font */
}
Kinh nghiệm xử lý
Cách mình xử lý vấn đề này là sử dụng thuộc tính font-display: swap. Thông thường, các framework hiện nay đã tích hợp kỹ thuật này vào trong framework của họ. Giải thích đơn giản, kỹ thuật này có nghĩa là khi bạn đang load một font cần để hiển thị, text sẽ hiển thị dưới dạng một font khác (font mặc định đã được load từ trước) cho đến khi font chính được tải xong.
Các vấn đề khác
Ngoài vấn đề về font, còn một số trường hợp khác cần lưu ý như:
- Không sử dụng file min (chưa tối ưu hoá CSS).
- Viết CSS bị lặp lại quá nhiều.
- Chồng chéo CSS do đặt trùng tên class.
Kết Luận
Như vậy, việc tối ưu hoá CSS không chỉ giúp cải thiện hiệu năng của trang web mà còn giúp bạn dễ dàng quản lý và bảo trì mã nguồn trong dự án. Dù là những thay đổi nhỏ, nhưng nếu được áp dụng đúng cách, chúng có thể mang lại những cải thiện đáng kể trong tốc độ tải trang và trải nghiệm người dùng.
Hy vọng qua bài viết này, các bạn sẽ có thêm những kiến thức bổ ích để tối ưu hoá mã CSS trong các dự án của mình. Đừng quên chia sẻ những mẹo hay của bạn về việc tối ưu hoá CSS nhé!
Chúc các bạn coding vui vẻ và hiệu quả! 😊
Top comments (0)