Preload là gì

  -  

Khi chúng ta mở một trang web, trình chú ý sẽ gửi những yêu ước tài liệu HTML đến máy chủ (server), phân tích văn bản của nó, cùng gửi các yêu ước riêng cho ngẫu nhiên nguồn tài nguyên làm sao được tham chiếu cho (referenced resource).

Là fan lập trình, bạn cần phải biết về tất cả các mối cung cấp tài nguyên nhưng trang của công ty cần và mẫu nào trong các đó là đặc biệt nhất (most important). Chúng ta cũng có thể sử dụng hiểu biết đó nhằm yêu cầu các tài nguyên đặc biệt quan trọng (critical resources) trước và thông qua đó giúp tăng tốc quá trình tải. Nội dung bài viết này đã giải thích phương pháp để làm điều này với thẻ .

Bạn đang xem: Preload là gì


Mục lục


#1. Giải pháp preload làm việc

Preload phù hợp nhất với các kiểu tài nguyên đặc biệt nhưng lại hay được trình duyệt y phát hiện tại muộn.


*
Trong ví dụ như này, fonts Pacifico được định nghĩa trong CSS với quy tắc
font-face. Vì vậy, thường thì trình ưng chuẩn chỉ thiết lập được tệp tin font sau khi nó đã thiết lập và phân tích xong CSS

Bằng cách preload một tài nguyên tốt nhất định, bạn nói cùng với trình săn sóc rằng bạn muốn tìm nạp nó sớm hơn so với để trình phê duyệt tự phát hiện ra tài nguyên đấy theo khoác định thông thường, bởi vì bạn chắc chắn là rằng nó đặc biệt quan trọng cho trang hiện đang được duyệt.


*
Trong lấy ví dụ này, phông Pacifico được preload (tải trước), chính vì như vậy việc cài font ra mắt song tuy vậy (parallel) với sở hữu CSS (stylesheet). Font thiết lập được tải trước góp tránh hiện tượng FOIT, để đảm bảo an toàn văn bạn dạng vẫn hiển thị trong những lúc font cài về

Chuỗi yêu cầu đặc biệt quan trọng thể hiện vật dụng tự của các tài nguyên được trình phê duyệt ưu tiên với tìm nạp. Lighthouse xác minh các tài nguyên ở cấp độ thứ tía của chuỗi này là được phát hiện nay muộn. Bạn có thể sử dụng trình soát sổ Preload key requests để xác định tài nguyên nào bắt buộc preload.

*

Bạn rất có thể preload những tài nguyên bằng cách thêm thẻ đi kèm theo rel="preload" vào phần của tài liệu HTML, ví dụ:

Trình coi xét sẽ cache những tài nguyên đã làm được preload, chính vì vậy chúng có chức năng được cung ứng ngay nhanh chóng khi trình duyệt buộc phải đến (nói giải pháp khác, nó chỉ sở hữu xuống, với vẫn chưa tiến hành mã JS hoặc áp dụng CSS sau thời điểm tải xong, vấn đề đó rất đặc trưng để đảm bảo an toàn website vận động đúng như ước ao muốn).

Sau khi triển khai preload, nhiều trang, bao hàm Shopfy, Finacial Time cùng Treebo phân biệt trang của họ nâng cao 1s dưới khía cạnh những chỉ số vận tốc tập trung vào người dùng cuối, ví dụ điển hình như thời hạn tương tác (Time to Interactive) và thời hạn thấy nội dung trước tiên trên trang (First Contentful Paint).

Các gợi ý tài nguyên khác, ví dụ như preconnect với prefetch được thực thi khi trình để mắt tới thấy phù hợp. Trái lại preload là chỉ thị bắt buộc (mandatory) so với trình duyệt. Các trình duyệt tân tiến thực hiện khá xuất sắc nhiệm vụ ưu tiên các tài nguyên, đó là lý do vì sao các bạn phải thực hiện preload hết sức thận trọng, chỉ đề nghị preload những tài nguyên quan trọng nhất nhưng mà thôi.

Các khoáng sản được preload nhưng mà lại không được sử dụng sẽ giữ hộ đi chú ý trong Chrome, khoảng thời hạn để nó xét tài nguyên giành được dùng hay là không là khoảng tầm 3 giây sau khoản thời gian sự khiếu nại load được kích hoạt.

*
Thông báo sống trên nói rằng: tài nguyên 1tcvlsq đã có được gắn ở trong tính preload nhưng lại ko được thực hiện vài giây sau thời điểm nó được kích hoạt sở hữu xuống. Hãy bảo đảm là các bạn không preload những tài nguyên không được dùng.

Lưu ý: Preload được cung cấp trên toàn bộ các trình chú ý hiện đại, bên cạnh FireFox.

#2. Những ứng dụng thực tế

Preload những tài nguyên được định nghĩa bên phía trong CSS

Các phông được định nghĩa bằng quy tắc
font-face
hoặc các ảnh nền (background) được tư tưởng trong tệp tin CSS sẽ không được trình coi sóc biết tới cho tới khi trình duyệt cài và phân tích chấm dứt các tệp tin CSS. Preload những tài nguyên này bảo đảm an toàn chúng được tìm nạp trước khi các file CSS sở hữu xong.

Preload các file CSS

Nếu chúng ta đang vận dụng cách tiếp cận sử dụng critical CSS, có nghĩa là bạn phân tách CSS của trang thành nhị phần. Critical CSS được dùng làm render văn bản thuộc về màn hình hiển thị đầu tiên, nó được inline (nội tuyến) vào vào thẻ của tài liệu, còn non-critical CSS hay được lazy-load bằng JavaScript. Câu hỏi phải hóng JavaScript thực thi trước khi tải về CSS không đặc trưng (non-critical) hoàn toàn có thể là lý do gây trì hoãn việc render khi người dùng cuộn chuột, chính vì vậy ý tưởng tốt là thực hiện để sở hữu nó xuống mau chóng hơn.

Xem thêm: Cấu Hình Bom Tấn The Sims 4 Cấu Hình Tối Thiểu Và Cấu Hình Đề Xuất

*
Một tệp tin CSS trên loài kiến càng được preload

Preload những file JavaScript

Do các trình trông nom không thực thi các tệp được preload (nó chỉ mua trước về và chuyển vào vào cache), nên preload rất hữu ích trong việc tách search nạp thoát ra khỏi thực thi, điều này có thể nâng cấp các số liệu như Time lớn Interactive (Thời gian chất nhận được tương tác). Preload vận động tốt nhất khi chúng ta chia JavaScript thành những tệp, và chỉ còn preload các tệp quan liêu trọng.

#3. Cách triển khai rel=preload

Cách đơn giản nhất để triển khai preload là thêm thẻ vào phần của tài liệu:

Việc cung ứng thêm ở trong tính as giúp trình duyệt tùy chỉnh cấu hình ưu tiên mang đến tài nguyên được tìm nạp dựa vào kiểu của nó, thiết lập cấu hình đúng những header, và phát hiện liệu tài nguyên đó đã có sẵn vào cache xuất xắc là chưa? những giá trị được chấp nhận cho nằm trong tính này bao gồm: script, style, font, image, và một số cái khác.

Bạn hoàn toàn có thể tham khảo tư liệu về ưu tiên cùng lên lịch những nguồn tài nguyên trong Chrome để biết cách trình duyệt tùy chỉnh ưu tiên cho các kiểu tài nguyên khác biệt như cố gắng nào.

Lưu ý: việc bỏ qua trực thuộc tính as, hoặc có mức giá trị không hợp lệ tương tự với yêu cầu XHR, tạo cho trình duyệt băn khoăn nội dung gì được tìm nạp, chính vì thế nó ko thể xác minh mức độ ưu tiên đúng chuẩn được. Nó cũng rất có thể là nguyên nhân khiến một số tài nguyên, chẳng hạn như script bị kiếm tìm nạp cho hai lần.

Một số thứ hạng tài nguyên, chẳng hạn như font, được download trong chính sách anonymous (vô danh). Với hầu như kiểu tài nguyên như vậy, bạn phải tùy chỉnh thiết lập thuộc tính crossorigin đương nhiên preload:

Chú ý: Preload fonts nếu không tồn tại thuộc tính crossorigin sẽ buộc phải tìm nạp nhị lần!

Phần tử cũng đồng ý thuộc tính type, cái bao gồm MIME type của khoáng sản được liên kết. Các trình duyệt áp dụng giá trị của ở trong tính type để bảo đảm an toàn rằng các tài nguyên được preload chỉ khi hình trạng file của chúng được hỗ trợ. Nếu như trình chuẩn y không cung ứng một loại tài nguyên ví dụ nào đó, nó sẽ bỏ qua mất thẻ .

Bạn cũng rất có thể preload bất kể kiểu khoáng sản nào thông qua Link HTTP header:

Link: ; rel="preload"; as="style"Một ưu thế của bài toán chỉ định preload thông qua HTTP Header là trình duyệt không cần thiết phải phân tích tư liệu để tò mò ra nó, điều đó rất có thể giúp bạn giành được cải thiện nhỏ dại trong một số trong những trường hợp.

Preload module JavaScript bằng webpack

Nếu bạn sử dụng module bundler cho bài toán xây dựng các tệp của ứng dụng, bạn cần kiểm tra coi nó có cung ứng tính năng injection của thẻ preload giỏi không. Với webpack từ phiên bạn dạng 4.6.0 trở đi, preload được hỗ trợ thông qua sử dụng magic comments bên trong import():

import(_/* webpackPreload: true */_ "CriticalChunk")Nếu bạn áp dụng phiên bạn dạng webpack cũ hơn, bạn phải sử dụng plugin của bên thứ ba mang tên preload-webpack-plugin.

#4. Kết luận

Để nâng cấp tốc độ tải trang, chúng ta nên preload những tài nguyên quan trọng mà giả dụ theo cách thường thì nó sẽ ảnh hưởng phát hiện tại muộn trong trình chăm bẵm (có thể do nó ẩn trong số file CSS, hoặc nó bao gồm vị trí rẻ trong tệp tin HTML, vân vân). Preload các thứ đã phản tính năng do vậy bạn phải dùng preload một cách cảnh giác và đo đạc ảnh hưởng của nó trong quả đât thực (real-world).

#5. Lấy một ví dụ demo

Phần này tôi (người dịch) phân phối để chúng ta dễ hiểu, với dễ bình chọn hơn. Tôi chế tác 2 trang có nội dung tương đồng nhau, chỉ khác là một trong những trang bao gồm preload, còn một trang thì không.

Mô hình cầm này: tôi chế tạo ra trang với hai font tùy chỉnh và một ảnh nền làm cho background, trong số đó cả hai tài nguyên này đều bên trong CSS. Điều đó tất cả nghĩa là, theo mang định, trình phê duyệt sẽ nên tải CSS cùng phân tích cú pháp ngừng thì bắt đầu tải font tùy chỉnh cấu hình và ảnh background được. Trang thông thường sẽ giữ lại được nguyên cấu tạo như vừa mô tả, còn cùng với trang bao gồm preload, tôi chủ động preload cả ba tài nguyên (gồm hai font và một ảnh) để thấy sự khác biệt giữa chúng như vậy nào.

Trang tải theo mặc định: https://static.vhpi.vn/2020/normal-font-bg.html

Trang preload trước tài nguyên: https://static.vhpi.vn/2020/preload-font-bg.html

Đoạn mã mẫu preload (khi xúc tiến bạn nên xem xét tất cả những thuộc tính là rel, href, as, typecrossorigin):

Kết quả đánh giá với DevTools (Lighthouse) bên trên Chrome:

*
Trên trang mua thông thường, chúng ta cũng có thể thấy tệp tin CSS đề xuất tải với phân tích dứt thì hai fonts và ảnh nền new tải về
*
Trên trang bao gồm preload, các bạn thấy cả 4 khoáng sản là nhì font, css và hình ảnh nền cùng cài về cùng một lúc

Vì 2 trang tương đương y nhau (ngoại trừ khác biệt về preload) nên con số request (6), dung lượng tải về (180/240) phần lớn giống nhau. Điểm khác biệt dễ thấy là thời hạn tải về (Finish) của trang bao gồm preload ít hơn (nghĩa là giỏi hơn, chỉ 1,80s so với 2,24s, các lần kiểm tra số lượng này sẽ biến đổi do nó còn dựa vào vào điều kiện kết nối mạng, nhưng nhìn tổng thể trang gồm preload sẽ tải nhanh hơn).

Xem thêm: So Sánh " Rule Of Law Là Gì ? Định Nghĩa Và Giải Thích Ý Nghĩa

Tại sao trang tất cả preload download nhanh hơn: Hãy tưởng tượng phương pháp tải website hệt như xây một căn nhà, CSS chính bạn dạng thiết kế chúng ta thuê kiến trúc sư vẽ. Còn ảnh, font hệt như nguyên vật liệu xây cần căn nhà. Rất hợp lý và phải chăng khi bọn họ cần có bản thiết kế trong tay thì mới có thể biết phải mua nguyên vật liệu nào, con số bao nhiêu, cơ mà thường chúng ta đã nắm rõ những vật liệu căn phiên bản cần xây căn nhà rồi. Do đó sẽ nhanh hơn ví như đồng thời, vào khoảng thời gian chờ đợi bạn dạng thiết kế được đưa từ thành phố sài thành về thành phố hà nội (hỏa tốc thì cũng đề xuất mất 1 ngày), thì khi đó bạn cũng nhập luôn luôn vật liệu cần thiết như xi măng, đá, mạt, cát, fe thép. Thời hạn tiết kiệm được là nhờ bạn chưa phải chờ đợi phiên bản thiết kế về rồi mới sắm vật liệu (mất thêm tối thiểu một ngày). Khi vật tư có sẵn, và phiên bản thiết kế về, các bạn bắt tay vào xây nhà luôn.

Có thể có một sai lầm nhỏ tuổi trong vật dụng tự preload, thuở đầu nó vậy này:

*
file CSS được tôi để tại dưới cùng

Theo kiến thiết của trang thì font thu-phap.ttf và hình ảnh background ở trong màn hình hiển thị đầu tiên, trong những khi font tap-viet.ttf dùng trong màn hình hiển thị thứ hai, đề nghị đáng ra tap-viet.ttf sẽ nên ở bên dưới cùng. Xung quanh ra, tôi thử để file CSS lên trên thuộc xem thiết bị tự tải có biến hóa gì không, mã biến đổi như sau:

Trang demo: https://static.vhpi.vn/2020/thu-tu-preload1.html

Kết trái là vật dụng tự thiết lập về khoáng sản đã thay đổi theo chỉ dẫn, cơ mà file CSS vẫn tải về cuối cùng (điều này làm chúng ta nhớ lại rằng thông tư preload là chỉ thị bắt buộc, và trình duyệt tuân hành điều này bằng phương pháp tải các tài nguyên preload trước trong cả khi CSS được đặt tại trên thuộc trong tài liệu HTML):