Categories Tối ưu CSS

Gọi CSS trước giúp tăng tốc độ website

gọi CSS trước

Tại sao bạn cần phải gọi CSS trước?

css chặn hiển thị

Bạn cần gọi CSS trước JavaScript (hoặc bất cứ thành phần nào khác)

Một vấn đề cơ bản gây trì hoãn CSS đơn giản là do trang web phải gọi tài nguyên khác trước khi nó gọi CSS.

Điều này đề cập đến thứ tự các tài nguyên được gọi xuất hiện trong file HTML.

Giả sử chúng ta có trang web bao gồm một ảnh, một file CSS, và một file JavaScript như hình bên dưới đây:

gọi css trước

Hình trên cho thấy file CSS được gọi trước vì vị trí của nó được đặt trước (cao hơn trên trang) so với file ảnh và file JavaScript.

Trong thực tế, trang của bạn có khả năng sẽ gọi một vài thứ nữa, thậm chí là cả tá các tài nguyên bên ngoài.

Đảm bảo gọi file CSS trước giúp trình duyệt có được dữ liệu này trước tiên.

Điều này tiết kiệm thời gian bằng cách giảm số lần gọi mạng và không để hoạt động JavaScript làm trình duyệt chậm trễ nhận CSS.


Các lời gọi (request) mạng

Như ví dụ được đơn giản hóa đi rất nhiều ở trên, giả dụ mỗi lời gọi mạng (để lấy mỗi file) tốn mất một giây.

  • Nếu chúng ta gọi CSS trước, trình duyệt sẽ nhận CSS trong vòng một giây;
  • Nếu chúng ta gọi JavaScript trước, trình duyệt sẽ nhận CSS trong vòng hai giây (một giây để lấy JavaScript + một giây để lấy CSS);
  • Nếu chúng ta gọi JavaScript và hình ảnh trước CSS, thì trình duyệt sẽ chỉ nhận được CSS vào giây thứ ba.

Chuyện này xảy ra là bởi vì trình duyệt không thể hiển thị bất cứ điều gì cho đến khi nó có được CSS.

Trong thí dụ của chúng ta ở trên (vâng, tôi biết nó đã được giản hóa quá mức), với cùng nguồn tài nguyên nhưng có cái sẽ tải trong vòng một giây, có cái trong vòng hai giây, cái chậm nhất là ba giây. Đơn giản ta chỉ cần thay đổi thứ tự của những thứ được gọi.

css thứ tự và thời gian tải trang

Mỗi thứ mà trang tải đều cần tốn một khoảng thời gian nào đó. Để trình duyệt tải được CSS trước tiên, chúng ta phải loại bỏ bất cứ thứ gì tải trước nó. Điều này thường đơn giản là chỉ cần thay đổi thứ tự những tài nguyên mà bạn gọi trong HTML.

Mặc dù bản thân trình duyệt có các phương pháp để cố gắng giải quyết vấn đề cơ bản này, thực hành tốt nhất vẫn đơn giản là để CSS được gọi trước tiên.


Tại sao hoạt động của JavaScript lại gây trì hoãn?

Bạn hãy tưởng tượng thế này, nếu trình duyệt phải tải file JavaScript trước CSS, điều đó chắc chắn gây tốn thời gian tải nhưng đó chưa hẳn đã là điều tệ hại nhất đâu.

Ví dụ khi chúng ta gọi một file JavaScript trước file CSS và JavaScript nói rằng “đợi một giây đã” hoặc file JavaScript đó lại đi gọi thêm một file JavaScript khác nữa!

Những hoạt động này của JavaScript sẽ chỉ làm trình duyệt bị trì hoãn thêm mà thôi, ngăn không cho nó nhận CSS, cái trình duyệt cần để hiển thị trang.

Vì những lý do này, chúng ta phải luôn luôn nhắc bản thân mình hãy gọi CSS trước khi gọi bất cứ thứ gì khác.

(Dịch từ bài viết: Why should CSS be called first? – Tác giả: Patrick Sexton – Website: Varvy)

Back to Top