Tối ưu CSS là một quá trình quan trọng để cải thiện hiệu suất và tốc độ tải trang của website. Vậy bạn đã biết cách để tối ưu CSS cho website hay chưa? Theo dõi bài viết dưới đây của Amai Agency để khám phá 9 cách tối ưu CSS hiệu quả nhé!
1.Tổng hợp 9 Cách tối ưu CSS cho website để tăng tốc độ tải trang
Google cho biết 53% người dùng sẽ chỉ đợi 3 giây để điện thoại của họ tải trang web, nếu như trang đó không đáp ứng được thời gian này thì họ sẽ thoát trang và truy cập vào một trang mới. Trong trường hợp trang web tải chậm hơn bạn có thể áp dụng một trong số 9 cách tối ưu CSS cho website dưới đây:
1.1 Code các mã hóa đơn giản
CSS cung cấp một loạt các tùy chọn mã hóa rộng và linh hoạt bạn có thể sử dụng nhắm mục tiêu các phần tử HTML để tạo kiểu. Trong nhiều năm qua, các chuyên gia đã khuyên các nhà phát triển website nên viết các bộ chọn đơn giản hơn để giảm tải cho trình duyệt, giữ cho mã gọn gàng, đơn giản, giúp tối ưu CSS cho website tốt hơn.
Ví dụ, .hero-section {background-color: red;}
.main-section { background-color: blue;}
Trong ví dụ này, sử dụng bộ chọn lớp .hero-section để nhắm mục tiêu phần tử div có lớp hero-section. Và bộ chọn lớp .main-section cũng được sử dụng để nhắm mục tiêu phần tử div có lớp main-section.
Bằng cách sử dụng các bộ chọn lớp, chúng ta có thể tạo kiểu cho các phần tử của trang web của mình một cách dễ dàng, hiệu quả.
1.2 Tối ưu kích thước tệp CSS
Trong thiết kế và phát triển web, việc quản lý kích thước các thành phần trang là rất quan trọng, nó đảm bảo mang đến trải nghiệm tốt cho người dùng. Khi tải một trang web, kích thước của các tệp như hình ảnh, tệp CSS, JavaScript có thể ảnh hưởng đáng kể đến thời gian tải trang, gây khó khăn trong việc tối ưu CSS cho website .
Để giảm kích thước tệp CSS, có một cách được nhiều người sử dụng là thu nhỏ tệp bằng cách loại bỏ không gian trống, các dòng trắng không cần thiết, các mã không sử dụng. Có thể sử dụng các công cụ trực tuyến hoặc các trình biên tập mã để tự động làm điều này. Giảm kích thước tệp CSS, có thể giảm thời gian tải trang, cải thiện hiệu suất của trang web.
1.3 Cache file CSS
Tệp cache CSS là một vị trí lưu trữ tạm thời cho các tệp CSS mà trình duyệt web đã tải xuống. Tệp cache này được sử dụng để cải thiện hiệu suất của các trang web bằng cách cho phép trình duyệt sử dụng lại các tệp CSS đã được tải xuống trước đó, thay vì phải tải xuống lại mỗi khi trang được tải.
Có hai lợi ích chính khi sử dụng tệp cache để tối ưu CSS cho website như:
- Thời gian tải trang website nhanh hơn
- Giảm sử dụng băng thông
Có nhiều cách khác nhau để kiểm soát cách các tệp CSS được lưu trong bộ nhớ cache bởi trình duyệt web. Một phương pháp phổ biến là sử dụng tiêu đề Cache-Control trong phản hồi HTTP cho các tệp CSS. Tiêu đề này có thể được sử dụng để chỉ định thời gian trình duyệt nên lưu trong bộ nhớ cache một tệp CSS.
Ví dụ: tiêu đề Cache-Control sau sẽ cho trình duyệt lưu trong bộ nhớ cache một tệp CSS trong một tuần: Cache-Control: max-age=604800
1.4 Nén tệp CSS
Các tệp CSS được nén thường có thời gian tải nhanh hơn gấp đôi so với tệp CSS không nén. Vì thế mà đây là một trong những cách tối ưu CSS cho website được sử dụng nhiều trong việc cải thiện tốc độ tải trang.
Quá trình nén CSS hoạt động bằng cách loại bỏ các khoảng trắng, ngắt dòng, dấu phân cách khối, bỏ các thành phần không cần thiết khác để giảm kích thước của tệp CSS. Ngoài ra, các công cụ nén CSS cũng tìm kiếm, sửa các thuộc tính trùng lặp, tìm cơ hội để sử dụng các tốc ký CSS, giúp tối ưu CSS cho website.
Tuy việc nén tệp CSS làm cho trang tải nhanh hơn trên trình duyệt, nhưng tuy nhiên mã CSS nén thường khó hiểu hơn so với phiên bản không nén. Gây khó khăn trong việc duy trì, chỉnh sửa mã CSS trong tương lai.
1.5 Sử dụng sprites tối ưu CSS cho website
CSS sprites là một kỹ thuật kết hợp nhiều hình ảnh nhỏ thành một tệp hình ảnh duy nhất. Điều này có thể cải thiện hiệu suất của trang web của bạn bằng cách giảm số lượng yêu cầu HTTP mà trình duyệt cần thực hiện.
Khi trình duyệt tải xuống tệp sprite CSS, nó có thể lưu trữ tệp cho lần sử dụng trong tương lai. Điều này có thể cải thiện thêm thời gian tải của trang web của bạn.
Đặc biệt, CSS sprites thường có thể giảm kích thước tệp tổng thể của trang web của bạn. Điều này là do trình duyệt có thể nén tệp duy nhất hiệu quả hơn so với nén nhiều tệp nhỏ hơn.
1.6 Chạy thử CSS trên CDN khác
File CSS là một phần quan trọng trong trang web, nó có thể được tận dụng tốt bằng cách phân phối trên một mạng lưới CDN (Content Delivery Network). CDN không chỉ giúp tổ chức, cung cấp file CSS một cách hiệu quả mà còn giảm tải cho máy chủ.
Một CDN là một hệ thống phân phối nội dung đa điểm trên khắp thế giới. Khi sử dụng CDN để phân phối file CSS, các bản sao của file CSS sẽ được lưu trữ trên nhiều máy chủ phân tán trên toàn cầu. Nếu người dùng truy cập vào website file CSS sẽ được phục vụ từ máy chủ CDN gần nhất với người dùng, như vậy có thể giúp giảm thời gian tải trang.
1.7 Tránh để hình ảnh base64
Hình ảnh Base64 là một trong những phương pháp nhúng hình ảnh trực tiếp vào tệp CSS hoặc HTML bằng cách mã hóa dữ liệu hình ảnh thành chuỗi Base64. Mặc dù có thể hữu ích trong một số trường hợp, nhưng hình ảnh Base64 cũng có nhược điểm về hiệu suất được Harry Roberts chỉ ra như sau:
- Tăng kích thước tổng thể của tệp CSS
- Trình duyệt sẽ tải xuống hình ảnh dù có dùng hay không
- Kích thước tệp hình ảnh tăng lên so với phiên bản gốc
- Phân tích chuỗi Base64 trước khi sử dụng, làm mất thời gian và tài nguyên giải mã
Cùng xem qua ví dụ minh họa dưới đây để hiểu rõ hơn:
/** * Mã Base64 bị cắt ngắn.*/
@media screen and (min–width: 20em) { html { background-image: url(‘data:image/png;base64,iVBO …’) }
footer { background-image: url(‘data:image/png;base64,iVBO …’); }
.non-existence-class { background-image: url(‘data:image/png;base64,iVBO …’); }}
Đoạn code trên đang sử dụng hình ảnh base64 nên kích thước hình ảnh sau khi tải xuống sẽ tăng lên 500KB, như hình dưới đây.
Đây là một kích thước khá lớn và sẽ làm cho tốc độ tải trang chậm hơn rất nhiều so với việc sử dụng dạng hình ảnh khác . Vì thế nếu như không cần thiết thì bạn không nên áp dụng dạng base64 cho website.
1.8 Hạn chế sử dụng @import
Trong CSS, chúng ta có thể sử dụng hàm @import để nhập một tệp CSS bên ngoài trực tiếp vào một tệp CSS hiện tại. Tuy nhiên, sử dụng quy tắc này có thể ảnh hưởng đến tốc độ tải trang, do hàm @import sẽ tải các tệp đã được nhập một cách riêng biệt thay vì tải đồng bộ với các tệp khác cần thiết để hiển thị trang.
Một vấn đề phát sinh từ cách tối ưu CSS cho website này là quá trình tải sẽ tạo ra nhiều yêu cầu HTTP bổ sung. Mỗi lần sử dụng hàm @import, trình duyệt sẽ gửi một yêu cầu HTTP riêng để tải tệp CSS đã được nhập. Dẫn đến phải tăng số lượng yêu cầu HTTP trên trang web, như vậy thì sẽ ảnh hưởng đến tốc độ tải trang chung.
Để khắc phục vấn đề này, chúng ta có thể áp dụng phương pháp tải xuống tệp CSS song song bằng cách sử dụng thẻ `<link>` thay vì hàm @import. Khi sử dụng thẻ `<link>`, trình duyệt sẽ tải xuống các tệp CSS cần thiết đồng thời, không cần tạo ra nhiều yêu cầu HTTP riêng biệt.
1.9 Tải từng phần CSS – tối ưu CSS cho website
Tải từng phần là một cách hữu ích được sử dụng để tối ưu CSS cho website, giảm thời gian hiển thị trang bằng cách tách CSS và chỉ tải những phần mã cần thiết.
Cách đơn giản nhất để áp dụng cách này là thêm thuộc tính loading vào các phần tử <img> và <iframe> sau đó đặt giá trị của nó thành “lazy”. Nhưng bạn cần đảm bảo rằng hình ảnh, video chỉ được tải khi chúng nằm trong khung nhìn của người dùng.
Khi trang web được tải, các hình ảnh, video sẽ không được tải ngay lập tức. Thay vào đó, chúng sẽ được tải chỉ khi người dùng cuộn trang, đến gần vùng chứa chúng. Qua đó giúp giảm tải trang ban đầu, cải thiện trải nghiệm người dùng, vì người dùng chỉ thấy các tài nguyên đó khi thực sự cần thiết.
2.Một số các tips khác có thể áp dụng để tăng tốc độ tải trang
2.1 Tránh sử dụng quá nhiều hình ảnh động
Hình ảnh động có thể có kích thước lớn và yêu cầu nhiều tài nguyên để tải xuống, vì thế có sẽ làm giảm tốc độ tải trang, gây khó chịu cho người đọc.
Thay vì sử dụng quá nhiều hình ảnh động, hãy cân nhắc sử dụng các hiệu ứng CSS hoặc các phương pháp khác để thay thế. Như chuyển động, chuyển đổi, hiệu ứng trực tiếp trong trình duyệt có thể giúp tạo ra các hiệu ứng tương tự mà không cần sử dụng hình ảnh động.
Ví dụ: nếu muốn sử dụng hình ảnh động để tạo hiệu ứng menu bật lên, hãy sử dụng hình ảnh động có kích thước tối thiểu 100 x 100 pixel, chỉ sử dụng chúng ở một số điểm nhất định trên trang web.
2.2 Giảm thiểu HTML, CSS và JavaScript
Để cải thiện hiệu suất, bạn có thể giảm bớt HTML, CSS không cần thiết nếu như nó không ảnh hưởng quá nhiều đến trang.
Đối với WordPress, có thể sử dụng các plugin như WP Rocket, WP-Minify hoặc W3 Total Cache để loại bỏ hoặc thu nhỏ mã. Còn đối với các hệ quản trị nội dung (CMS), các quản trị viên web nâng cao khác, cần thực hiện việc xóa bỏ mã thủ công.
Ví dụ: nếu bạn có một trang web có một số trang con, bạn có thể xóa thẻ header và footer khỏi các trang con nếu chúng giống với thẻ header và footer trên trang chủ.
2.3 Tối ưu hình ảnh tải lên trang
Một trong những nguyên nhân phổ biến khiến tốc độ tải trang chậm là do hình ảnh. Có một số nguyên tắc tối ưu hình ảnh bạn cần tuân thủ như sau:
- Kích thước tệp dưới 100KB.
- Kích thước phù hợp với từng trang hiển thị
- Lưu hình ảnh dưới định dạng JPG
- Tránh quá mức nén hình ảnh để không làm giảm chất lượng.
Trước khi tải lên, có thể sử dụng phần mềm chỉnh sửa ảnh để tối ưu. Nếu sử dụng CMS như WordPress, có các plugin như Smush.it và EWWW Image Optimizer có thể hỗ trợ tối ưu hóa hình ảnh. Một số plugin cũng cho phép kích hoạt tính năng Lazy Load để tải hình ảnh chỉ khi người dùng cuộn trang, giảm tải cho máy chủ.
2.4 Kích hoạt tính năng nén Gzip
Gzip là một phương thức nén phổ biến, có thể giảm kích thước của các tệp HTML, CSS, JavaScript lên đến 70%.
Đối với WordPress hoặc các CMS khác, phần lớn các plugin hiệu suất đã tích hợp tính năng nén tự động. Nếu bạn muốn thực hiện theo cách thủ công hoặc sử dụng CMS khác, bạn có thể kích hoạt tính năng nén bằng cách thêm mã vào tệp .htaccess.
3. Lời kết
Tóm lại, trong bài viết này chúng tôi đã cung cấp cho bạn 9 cách tối ưu CSS cho website và một số tips tối ưu khác. Hy vọng thông tin chia sẻ ở trên sẽ hữu ích đối với bạn. Bên cạnh đó, bạn cũng có thể ghé qua amaiagency.com để đọc thêm nhiều bài viết thú vị khác.
