Hôm ni bọn họ vẫn cùng mày mò các giải pháp hiện tại đang rất được dùng làm gợi ý và đưa ra chỉ thị mang đến tài nguyên (resource hints và directives)- trên đây hoàn toàn có thể là biện pháp công dụng khác nhằm nâng cao tốc độ website hoặc áp dụng website.

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

quý khách có thể đang nghe nói tới preload, prefetch preconnect rồi, mà lại chúng ta ao ước hiểu sâu hơn về việc khác biệt giữa chúng cũng tương tự Việc bạn cũng có thể tận dụng tối đa tác dụng từ bỏ bọn chúng như thế nào.

Một trong những lợi ích sẽ là bọn chúng cho phép bạn phát triển trang web tối ưu hóa phân phối những tài nguyên (optimize delivery of resource), bớt các vòng lặp khứ hồi (round trips), với search nạp các nguồn tài ngulặng nhằm phân pân hận câu chữ nkhô nóng rộng khi người dùng để mắt tới website.


Mục lục


PreloadPrefetchHướng dẫn tích đúng theo vào WordPress

Preload

Preload là một trong những tiêu chuẩn web mới giúp bạn bao gồm được không ít thẩm quyền rộng với một tài ngulặng cụ thể được tra cứu hấp thụ (fetched) trong phiên chú ý web bây giờ (current navigation). Đây là phiên bản update của phiên bản search hấp thụ trước nguồn phụ- mẫu không còn được sử dụng đến nữa hồi tháng Giêng năm năm 2016. Chỉ thị này có thể được có mang bằng thẻ , ví dụ như . Nhìn chung, tốt nhất có thể là bạn preload các tài nguyên quan trọng độc nhất vô nhị, ví dụ như hình họa, CSS, JavaScript, với các tệp tin sử dụng có tác dụng font. Như vậy tránh việc lầm lẫn cùng với preloading của trình thông qua trong các số ấy chỉ những tài nguyên ổn trong HTML là được tải trước. Chỉ thị preload đích thực khắc phục và hạn chế giới hạn này với được cho phép các nguồn tài nguyên được khởi chế tạo trải qua CSS cùng JavaScript được preload/mua trước cùng xác minh bao giờ từng tài nguim phải được vận dụng.

Preload khác với prefetch sinh hoạt kỹ lưỡng là preload triệu tập vào việc tìm kiếm hấp thụ tài nguyên ổn mang lại phiên thao tác làm việc ngày nay (current navigation). Prefetch triệu tập vào việc đào bới tìm kiếm hấp thụ tài nguyên ổn mang đến phiên chăm sóc website tiếp đến (next navigation). Một điều đặc biệt nữa buộc phải xem xét là preload không chặn/blochồng sự khiếu nại onload.

Lợi ích của preload

Một số lợi ích của chỉ thị preload bao gồm:

Cho phxay trình chăm nom cấu hình thiết lập cường độ ưu tiên tài nguyên (resource priority) chính vì thế được cho phép bên thiết kế web buổi tối ưu hóa phân phối các tài nguyên ổn ví dụ.Cung cung cấp mang lại trình chú tâm năng lực khẳng định kiểu dáng nhiều loại của tài nguyên, vì vậy nó rất có thể cho biết thêm cùng một giao diện tài ngulặng có được tái sử dụng về sau hay là không.Trình chú tâm hoàn toàn có thể xác định coi đề nghị gồm tuân thủ chế độ bảo mật thông tin về văn bản hay là không bằng phương pháp tmê man chiếu đến định nghĩa được xác định trong trực thuộc tính as.Trình để mắt tới hoàn toàn có thể gửi các tiêu nhằm accept tương xứng dựa trên hình dạng tài nguyên. (ví dụ như image/webp)

Ví dụ

Dưới đó là một ví dụ hết sức cơ bản về thiết lập trước/preloading hình hình ảnh.

Còn bên dưới đấy là ví dụ về preloading fonts. Lưu ý: Nếu các bạn preloading những liên kết cùng với Việc chất nhận được CORS bật trên tài ngulặng thì bạn cũng đề nghị bao hàm ở trong tính crossorigin.

Dưới đó là ví dụ về preloading một file CSS thông qua sử dụng mã đánh dấu/markup hoặc JavaScript.

Trình coi xét cung cấp preload

Preload được thêm vào từ phiên phiên bản Chrome 50 trong thời điểm tháng Sáu năm năm 2016, nó cũng được cung cấp trong Opera 37 cùng các phiên bạn dạng cao hơn nữa. Hiện nó vẫn chưa được Mozilla FireFox tích hợp, trong những lúc đó thì Microsoft Edge, Safari với iOS Safari rất nhiều sẽ thêm tác dụng này.

Xem thêm: Lương Minh Phương Là Ai ? Clip Nóng 32:52 Phút Không Che


*
*
*
*
*
*
*
*
*
*
*
*

quý khách để ý là đoạn mã dns-prefetch ở bên trên nên được đặt vào phần Header cùng trước các đoạn mã mà lại bạn có nhu cầu liên kết trước. Bên cạnh đó không cần thêm http hay https trước thương hiệu miền đề xuất search nạp DNS (bởi nó không có nhiệm vụ tùy chỉnh thiết lập kết nối bảo mật, ở đây nó chỉ thực hiện tìm tìm DNS nhưng thôi).

Vì dns-prefetch chỉ thực hiện tìm kiếm DNS nên nó sẽ không còn công dụng bằng preconnect, vị preconnect còn triển khai thao tác liên kết https nếu tài nguyên bên thiết bị cha có sử dụng kết nối bảo mật thông tin (với nói phổ biến tài nguyên bên thứ cha thường xuyên áp dụng kết nối bảo mật).

Vậy thì tại vì sao bạn ta vẫn áp dụng dns-prefetch?

Lý vì chưng rất có thể nguyên nhân là ngày xưa dns-prefetch được nhiều trình săn sóc cung ứng hơn preconnect (mặc dù hiện giờ cường độ cung ứng preconnect đã rất to lớn, tất cả các trình xem xét phổ biến nhất cùng nhiều phiên phiên bản bên trên di động cầm tay của chúng đã hỗ trợ preconnect rồi, đề nghị tính tương xứng của chính nó là vấn đề các bạn không cần lo lắng).

Ngoài nguyên do bên trên thì tôi vẫn ko rõ bởi sao nhiều lúc người ta vẫn mê thích sử dụng dns-prefetch hơn.

Sau khi ngừng cùng nhận lưu đông đảo thứ, chúng ta tiến hành bình chọn mã mối cung cấp của trang web (xem xét xóa cađậy hoặc/và cài đặt lại trang buộc phải đánh giá vài ba lần), nếu thấy các nằm trong tính ‘pre’ được áp dụng lên tài nguyên ổn như bạn mong muốn thì các bạn đang thành công rồi.

Sắp cho tới tôi sẽ đọc thêm tất cả plugin nào chuyên sâu có tác dụng những nhiệm vụ pre này hay không. Bởi bởi Autoptimize nó vẫn đang còn nhược điểm là không tùy phát triển thành được với từng nội dung bài viết cụ thể, ví dụ điển hình với các bài viết bao gồm video YouTube tôi sẽ ý muốn preconnect tới YouTube với một vài nguồn phụ không giống tương quan mang lại nó, trong khi các nội dung bài viết không giống không thực hiện đoạn phim thì hoàn toàn ko buộc phải. Hiện Autoptimize áp dụng lên tất cả những bài viết, cùng khiến lãng phí bên trên phần nhiều trang ko dùng.

P/S 1: tôi vừa phát hiện plugin Pre* Party Resource Hints siêng dùng làm thực hiện những kết nối trước này. Ưu điểm là nó gồm cả prefetch, preconnect, preload lẫn dns-prefetch cùng với không hề thiếu các tùy lựa chọn. Tuy nhiên thì nó hiện tại vẫn không có bản lĩnh tùy chỉnh cấu hình trên từng trang.

P/S 2: sau cuối tôi cũng tìm kiếm được plugin mang tên SOGO có khả năng tùy trở thành header, footer bên trên từng trang.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *