Hướng dẫn này hướng dẫn bạn một loạt công cụ và mẹo để tối ưu hóa cách bạn tải CSS và JavaScript để giúp trang web của bạn tải nhanh hơn
Giảm thiểu JavaScript và CSS của bạn
Lý do hầu hết CSS và JavaScript không được rút gọn là vì nó cho phép con người đọc và viết mã. Tuy nhiên, thiết bị của bạn không quan tâm đến khả năng đọc của con người. Từ góc độ của máy, CSS và JavaScript không được thu nhỏ sẽ khiến các tệp lớn hơn mức cần thiết
Tối ưu hóa CSS và JavaScript cho trình duyệt không chỉ bao gồm việc xóa ký tự dòng mới, khoảng trắng, rút ngắn tên biến, kết hợp CSS trùng lặp, v.v. Tất cả đều khá đơn giản và liên quan đến một mục tiêu. ít ký tự hơn và kết quả là kích thước tệp nhỏ hơn và trang web tải nhanh hơn
Vì vậy, “thu nhỏ” JavaScript và CSS cuối cùng dẫn đến tốc độ tải trang nhanh hơn. Điều đó có nghĩa là chúng ta phải xem qua tất cả mã của mình và tự rút gọn nó?
Dưới đây là danh sách các công cụ CSS và JS phổ biến giúp bạn "thu nhỏ"
- Để thu nhỏ HTML, hãy thử HTML Minifier
- Để thu nhỏ CSS, hãy thử cssnano và csso
- Để thu nhỏ JavaScript, hãy thử UglifyJS. Trình biên dịch đóng cửa cũng là. Bạn có thể tạo quy trình xây dựng sử dụng các công cụ này để thu nhỏ và đổi tên các tệp phát triển và lưu chúng vào thư mục sản xuất
Ngoài ra, Mô-đun PageSpeed, tích hợp với máy chủ web Apache hoặc Nginx để tự động tối ưu hóa trang web của bạn, bao gồm cả việc thu nhỏ tài nguyên
CSS
Trình duyệt của bạn đợi tất cả CSS được tải trước khi có thể bắt đầu hiển thị trang web. Bạn càng có nhiều CSS, trang web của bạn sẽ mất nhiều thời gian hơn để tạo kiểu. Hãy thảo luận về một số cách giải quyết để giúp tải CSS của bạn nhanh hơn [ngoài việc “thu nhỏ”]
Loại phương tiện và truy vấn
Khi bao gồm các kiểu của bạn, thuộc tính phương tiện có thể rất hữu ích. Bằng cách đánh dấu nó là "in", trình duyệt sẽ không phải đợi cho đến khi nó được tải
Truy vấn phương tiện cho phép bạn tải CSS tùy thuộc vào kích thước của chế độ xem và trong thời đại ngày càng di động, bạn nên sử dụng chúng. Dựa trên truy vấn của bạn, trình duyệt của bạn sẽ quyết định xem nó có tải CSS hay không
Cung cấp và bao gồm CSS càng sớm càng tốt
Vì trình duyệt phải đợi tất cả CSS được tải, điều quan trọng là phải cung cấp nó càng nhanh càng tốt. Một cách rất đơn giản để đảm bảo trình duyệt nhận CSS sớm nhất có thể là đưa nó vào phần HEAD của tài liệu HTML của bạn. Bằng cách này, trình duyệt sẽ bắt đầu tải CSS ngay khi có thể
JavaScript
Giống như CSS, một trình duyệt sẽ ngừng xây dựng một trang cho đến khi nó tải và phân tích cú pháp JavaScript mà nó gặp phải. Khi được tải và phân tích cú pháp, trình duyệt của bạn sẽ tiếp tục hiển thị trang web
Tải JavaScript ở dưới cùng
Luôn bao gồm các tài nguyên JavaScript ở cuối tài liệu HTML của bạn trước thẻ đóng nội dung
Bao gồm Tập lệnh với ´async´
Sử dụng thuộc tính “async” để trình duyệt biết JavaScript nào không nên chặn quá trình hiển thị
Một trong những điều có tác động lớn nhất mà chúng tôi có thể làm để cải thiện hiệu suất và khả năng phục hồi của trang là tải CSS theo cách không làm chậm quá trình hiển thị trang. Đó là bởi vì theo mặc định, các trình duyệt sẽ tải CSS bên ngoài một cách đồng bộ—ngừng hiển thị tất cả trang trong khi CSS được tải xuống và phân tích cú pháp—cả hai điều này đều có thể gây ra sự chậm trễ. Tất nhiên, ít nhất một phần CSS của trang web phải được tải trước khi trang được phép bắt đầu hiển thị và để đưa CSS ban đầu đó vào trình duyệt ngay lập tức, chúng tôi khuyên bạn nên nội tuyến [hoặc đẩy máy chủ HTTP2] CSS. Đối với các trang web có dung lượng tổng thể nhỏ, chỉ điều đó thôi có thể là đủ, nhưng nếu CSS lớn [giả sử lớn hơn 15 đến 20kb], thì nó có thể giúp phân chia hiệu suất theo mức độ ưu tiên. Sau khi phân tách, CSS ít quan trọng hơn sẽ được tải trong nền—AKA không đồng bộ. Trong bài đăng này, tôi nhằm mục đích mô tả cách ưa thích của chúng tôi để làm điều đó ngày nay, cách này thực sự đã tồn tại trong nhiều năm
Có một số cách để làm cho CSS tải không đồng bộ, nhưng không có cách nào trực quan như bạn mong đợi. Không giống như các phần tử script, không có thuộc tính async hoặc defer để áp dụng đơn giản cho phần tử link, vì vậy, trong nhiều năm nay, chúng tôi đã duy trì dự án loadCSS để giúp quá trình tải CSS không đồng bộ dễ dàng hơn một chút. Tuy nhiên, gần đây, các trình duyệt đã chuẩn hóa hành vi tải CSS của họ, do đó, một tập lệnh chuyên dụng như loadCSS để xử lý những khác biệt nhỏ của chúng có thể không còn cần thiết nữa
Mật mã
Ngày nay, được trang bị một ít kiến thức về cách trình duyệt xử lý các thuộc tính phần tử link khác nhau, chúng ta có thể đạt được hiệu quả tải CSS không đồng bộ bằng một dòng HTML ngắn. Đây là cách đơn giản nhất để tải biểu định kiểu không đồng bộ
Chia nhỏ điều đó…
Dòng HTML này ngắn gọn, nhưng nó không trực quan lắm, vì vậy hãy chia nhỏ những gì đang diễn ra ở đây
Để bắt đầu, thuộc tính media của link được đặt thành print. “Print” là phương tiện truyền thông
link thành
Không thể rel=preload cũng làm điều này?
Vâng, tương tự. Trong một hoặc hai năm qua, chúng tôi đã sử dụng
media]. Sử dụng phương pháp đó vẫn hoạt động tốt, tuy nhiên, có một số nhược điểm cần xem xét khi sử dụng
May mắn thay, nếu bạn muốn tìm nạp ưu tiên cao mà script0 cung cấp [trong các trình duyệt hỗ trợ tính năng này], bạn có thể kết hợp nó với mẫu trên, như sau
Do tính chất đơn giản và khai báo của mã ở trên, chúng tôi sẽ chọn mã đó thay vì polyfill, vì vậy phương pháp chuyển đổi phương tiện in lại là ưu tiên của chúng tôi bây giờ
Tại sao không sử dụng thuộc tính phương tiện giả?
Bất kỳ ai đã theo dõi bài viết của chúng tôi về vấn đề này trong vài năm qua đều có thể nhớ lại rằng chúng tôi đã sử dụng các giá trị thuộc tính phương tiện như “chỉ x” để đạt được hiệu quả tương tự như “in” bằng cách cung cấp một giá trị không khớp với bất kỳ môi trường nào, như . Khi các trình duyệt gặp phải các loại phương tiện không khớp, chúng hiện xử lý chúng như nhau - chúng vẫn tải tệp. Điều đó nói rằng, một số nhóm trình duyệt đang bắt đầu xem xét việc phân biệt giữa các loại phương tiện không phù hợp và những loại không hợp lệ [hoặc hoàn toàn không được trình duyệt nhận dạng] và có khả năng không yêu cầu các tệp được liên kết bằng các loại phương tiện không hợp lệ. Điều này sẽ phá vỡ nhiều triển khai tải CSS hiện có, vì vậy khả năng là không, nhưng vì lý do an toàn, chúng tôi khuyên bạn nên sử dụng loại hợp lệ, không khớp như print
Bạn có thể không cần loadCSS…
Chúng tôi tiếp tục duy trì loadCSS và thấy nó hữu ích trong một số trường hợp, đặc biệt đối với việc tìm nạp tệp CSS từ JavaScript theo chương trình, như thế này. script3. Nếu bạn đã sử dụng loadCSS hoặc mẫu polyfill script0 của nó, thì bạn không nhất thiết phải thay đổi bất cứ điều gì. Bên trong, nó sử dụng cùng một cơ chế được mô tả trong bài viết này
Tuy nhiên, ngày càng nhiều, chúng tôi thấy rằng cách tiếp cận HTML đơn giản có thể là tất cả những gì bạn cần. Và đơn giản thường là tốt nhất