Preload là gì

Hôm nay họ đang cùng tò mò các phương án hiện nay đang được dùng để nhắc nhở cùng chỉ dẫn chỉ thị mang đến tài nguyên ổn (resource hints và directives)- trên đây có thể là bí quyết hiệu quả khác nhằm nâng cấp vận tốc trang web hoặc áp dụng website.

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

quý khách rất có thể đã nghe nói đến preload, prefetch preconnect rồi, dẫu vậy chúng ta mong phát âm sâu rộng về sự biệt lập thân bọn chúng cũng tương tự câu hỏi bạn cũng có thể tận dụng tối đa lợi ích từ bỏ bọn chúng ra sao.

Một trong số ích lợi đó là chúng cho phép bạn cách tân và phát triển website tối ưu hóa phân phối những tài nguyên (optimize delivery of resource), sút những vòng lặp khứ đọng hồi (round trips), với tìm nạp những mối cung cấp tài nguim để phân phối hận câu chữ nkhô hanh hơn Khi người tiêu dùng để mắt website.


Mục lục


PreloadPrefetchHướng dẫn tích hòa hợp vào WordPress

Preload

Preload là một trong những tiêu chuẩn website new giúp đỡ bạn tất cả được rất nhiều thẩm quyền hơn với 1 tài nguyên ổn cụ thể được tìm kiếm nạp (fetched) trong phiên thông qua website hiện nay (current navigation). Đây là bản cập nhật của phiên bản tìm kiếm hấp thụ trước mối cung cấp phụ- chiếc không còn được sử dụng đến nữa hồi tháng Giêng năm 2016. Chỉ thị này rất có thể được khái niệm bằng thẻ , ví như . Nhìn bình thường, tốt nhất có thể là chúng ta preload những tài nguim quan trọng đặc biệt nhất, ví dụ như hình họa, CSS, JavaScript, với những tệp tin cần sử dụng có tác dụng phông. Điều này tránh việc nhầm lẫn cùng với preloading của trình để mắt tới trong số ấy chỉ những tài ngulặng trong HTML là được cài đặt trước. Chỉ thị preload thực thụ hạn chế và khắc phục số lượng giới hạn này và được cho phép các nguồn tài ngulặng được khởi chế tác trải qua CSS và JavaScript được preload/download trước cùng xác minh bao giờ từng tài ngulặng bắt buộc được áp dụng.

Preload không giống cùng với prefetch nghỉ ngơi kỹ lưỡng là preload triệu tập vào việc tìm hấp thụ tài nguyên ổn mang lại phiên thao tác hiện tại (current navigation). Prefetch triệu tập vào việc đào bới tìm kiếm nạp tài nguyên mang lại phiên chu đáo web tiếp nối (next navigation). Một điều quan trọng nữa buộc phải xem xét là preload không chặn/bloông chồng sự kiện onload.

Lợi ích của preload

Một số tiện ích của thông tư preload bao gồm:

Cho phxay trình chu đáo cấu hình thiết lập mức độ ưu tiên tài nguyên (resource priority) chính vì thế được cho phép đơn vị lập trình sẵn website buổi tối ưu hóa phân phối hận những tài nguyên cụ thể.Cung cung cấp đến trình coi xét năng lực xác định mẫu mã một số loại của tài nguyên, vì thế nó có thể cho biết cùng một vẻ bên ngoài tài nguyên ổn dành được tái sử dụng sau này hay là không.Trình trông nom có thể xác định coi trải đời có tuân thủ chế độ bảo mật thông tin về câu chữ hay không bằng cách tđam mê chiếu đến tư tưởng được xác minh vào ở trong tính as.Trình coi xét rất có thể gửi những tiêu nhằm accept phù hợp dựa vào kiểu dáng tài nguyên. (ví dụ như image/webp)

Ví dụ

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

Còn dưới đấy là ví dụ về preloading fonts. Lưu ý: Nếu chúng ta preloading những links cùng với bài toán cho phép CORS bật bên trên tài nguyên thì các bạn cũng đề nghị bao hàm thuộc tính crossorigin.

Dưới đó là ví dụ về preloading một tệp tin CSS trải qua thực hiện mã tấn công dấu/markup hoặc JavaScript.

Trình chăm chú hỗ trợ preload

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

Xem thêm: Tại Sao Màn Hình Điện Thoại Bị Tối Đen Cực Hiệu Quả, Khắc Phục Nhanh Chóng Màn Hình J7 Bị Tối


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

quý khách hàng xem xét là đoạn mã dns-prefetch ngơi nghỉ trên cần được đặt trong phần Header cùng trước những đoạn mã mà lại bạn có nhu cầu liên kết trước. Bên cạnh đó ko cần thêm http hay https trước thương hiệu miền nên tìm kiếm nạp DNS (bởi nó không có trọng trách tùy chỉnh liên kết bảo mật thông tin, tại chỗ này nó chỉ triển khai search tìm DNS mà lại thôi).

Vì dns-prefetch chỉ thực hiện search tìm DNS cho nên nó sẽ không còn công dụng bởi preconnect, bởi preconnect còn tiến hành thao tác làm việc kết nối https ví như tài ngulặng bên vật dụng cha bao gồm áp dụng kết nối bảo mật thông tin (với nói thông thường tài nguyên bên sản phẩm cha hay áp dụng kết nối bảo mật).

Vậy thì tại sao fan ta vẫn sử dụng dns-prefetch?

Lý vì có thể nguyên nhân là thời trước dns-prefetch được không ít trình duyệt y hỗ trợ rộng preconnect (tuy nhiên bây chừ mức độ cung ứng preconnect đã không hề nhỏ, toàn bộ các trình chăm bẵm phổ biến nhất cùng rất nhiều phiên bạn dạng bên trên di động của chúng đã hỗ trợ preconnect rồi, yêu cầu tính tương hợp của chính nó là vấn đề các bạn không cần bận tâm lắng).

Ngoài nguyên nhân trên thì tôi vẫn ko rõ do sao thỉnh thoảng fan ta vẫn thích cần sử dụng dns-prefetch hơn.

Sau Khi kết thúc cùng nhận giữ rất nhiều máy, bạn triển khai đánh giá mã nguồn của website (lưu ý xóa cache hoặc/và thiết lập lại trang bắt buộc khám nghiệm vài lần), giả dụ thấy những trực thuộc tính ‘pre’ được áp dụng lên tài ngulặng nlỗi bạn muốn thì bạn sẽ thành công rồi.

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

P/S 1: tôi vừa phạt hiện plugin Pre* Party Resource Hints siêng dùng để 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 đầy đủ những tùy lựa chọn. Tuy nhiên thì nó hiện vẫn không có hào kiệt thiết lập cấu hình bên trên từng trang.

Xem thêm: Chỉnh Sửa Tên Facebook Như Thế Nào, 4 Cách Thay Đổi Tên Nick Facebook Trên Máy Tính

P/S 2: ở đầu cuối tôi cũng tìm được plugin có tên SOGO có chức năng tùy thay đổi header, footer trên từng trang.


Chuyên mục: Hỏi Đáp