Prohoster > Blog > quản lý > Tải trước, tìm nạp trước và các thẻ khác

Tải trước, tìm nạp trước và các thẻ khác

Có nhiều cách để cải thiện hiệu suất web. Một trong số đó là tải trước nội dung cần thiết sau này. Xử lý trước CSS, hiển thị trước toàn bộ trang hoặc phân giải tên miền. Chúng tôi làm mọi thứ trước và sau đó hiển thị kết quả ngay lập tức! Nghe hay đấy.

Điều thú vị hơn nữa là nó được triển khai rất đơn giản. Năm thẻ cung cấp cho trình duyệt một lệnh để thực hiện các hành động sơ bộ:

<link rel="prefetch" href="/vi/style.css" as="style" />
<link rel="preload" href="/vi/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />


Hãy giải thích ngắn gọn những gì họ làm và khi nào nên sử dụng chúng.

Chuyển đến: preload · prefetch · kết nối trước · dns-tìm nạp trước · người đặt trước

preload

<link rel= "preload"> yêu cầu trình duyệt tải và lưu trữ tài nguyên (chẳng hạn như tập lệnh hoặc biểu định kiểu) càng sớm càng tốt. Điều này hữu ích khi cần tài nguyên vài giây sau khi tải trang - và bạn muốn tăng tốc quá trình.

Trình duyệt không làm gì với tài nguyên sau khi tải. Tập lệnh không được thực thi, biểu định kiểu không được áp dụng. Tài nguyên chỉ được lưu vào bộ nhớ đệm và được cung cấp ngay lập tức theo yêu cầu.

cú pháp

<link rel="preload" href="/vi/style.css" as="style" />

href trỏ đến tài nguyên bạn muốn tải xuống.

as có thể là bất cứ thứ gì có thể tải xuống trong trình duyệt:

  • style cho các tờ định kiểu,
  • script cho các kịch bản,
  • font cho phông chữ,
  • fetch đối với các tài nguyên được tải bằng cách sử dụng fetch() hoặc XMLHttpRequest,
  • xem danh sách đầy đủ trên MDN.

Điều quan trọng là phải xác định thuộc tính as – điều này giúp trình duyệt ưu tiên và lên lịch tải xuống hợp lý.

Khi nào sử dụng

Sử dụng tải trước khi cần tài nguyên trong tương lai rất gần. Ví dụ:

  • Phông chữ không chuẩn từ tệp bên ngoài: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Theo mặc định comic-sans.woff2 sẽ chỉ bắt đầu tải sau khi tải xuống và phân tích cú pháp index.css. Để tránh phải chờ đợi lâu, bạn có thể tải font sớm hơn bằng cách sử dụng <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Nếu bạn tách phong cách của mình theo cách tiếp cận CSS quan trọng thành hai phần, quan trọng (để hiển thị ngay lập tức) và không quan trọng: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Với phương pháp này, các kiểu không quan trọng sẽ chỉ bắt đầu tải khi JavaScript chạy, điều này có thể xảy ra vài giây sau khi kết xuất. Thay vì chờ đợi hãy sử dụng JS <link rel= "preload">để bắt đầu tải xuống trước đó:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/vi/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Đừng lạm dụng tải trước. Nếu bạn tải mọi thứ liên tiếp, trang web sẽ không tăng tốc một cách kỳ diệu, ngược lại, nó sẽ ngăn trình duyệt lập kế hoạch hoạt động chính xác.

Đừng nhầm lẫn với việc tìm nạp trước. Không được dùng <link rel= "preload">, nếu bạn không cần tài nguyên ngay sau khi tải trang. Nếu bạn cần nó sau này, ví dụ như cho trang tiếp theo, thì hãy sử dụng <link rel= "prefetch">.

chi tiết

Đây là thẻ bắt buộc được trình duyệt thực thi (nếu nó hỗ trợ), không giống như tất cả các thẻ khác liên quan đến việc tải trước. Trình duyệt phải tải xuống tài nguyên được chỉ định trong <link rel="preload">. Trong các trường hợp khác, nó có thể bỏ qua việc tải trước, chẳng hạn như nếu nó đang chạy trên kết nối chậm.

Ưu tiên. Các trình duyệt thường chỉ định mức độ ưu tiên khác nhau cho các tài nguyên khác nhau (kiểu, tập lệnh, phông chữ, v.v.) để tải các tài nguyên quan trọng nhất trước. Trong trường hợp này, trình duyệt xác định mức độ ưu tiên theo thuộc tính as. Đối với trình duyệt Chrome bạn có thể xem bảng ưu tiên đầy đủ.

Tải trước, tìm nạp trước và các thẻ khác

prefetch

<link rel= "prefetch"> yêu cầu trình duyệt tải xuống và lưu vào bộ nhớ đệm một tài nguyên (chẳng hạn như tập lệnh hoặc biểu định kiểu) ở chế độ nền. Quá trình tải diễn ra ở mức độ ưu tiên thấp nên không ảnh hưởng đến các tài nguyên quan trọng hơn. Điều này rất hữu ích nếu tài nguyên cần thiết trên trang tiếp theo và bạn muốn lưu trữ trước tài nguyên đó.

Ở đây, trình duyệt cũng không làm gì với tài nguyên sau khi tải. Tập lệnh không được thực thi, biểu định kiểu không được áp dụng. Tài nguyên chỉ được lưu vào bộ nhớ đệm và được cung cấp ngay lập tức theo yêu cầu.

cú pháp

<link rel="prefetch" href="/vi/style.css" as="style" />

href trỏ đến tài nguyên bạn muốn tải xuống.

as có thể là bất cứ thứ gì có thể tải xuống trong trình duyệt:

  • style cho các tờ định kiểu,
  • script cho các kịch bản,
  • font cho phông chữ,
  • fetch đối với các tài nguyên được tải bằng cách sử dụng fetch() hoặc XMLHttpRequest,
  • xem danh sách đầy đủ trên MDN.

Điều quan trọng là phải xác định thuộc tính as - điều này giúp trình duyệt ưu tiên và lên lịch tải xuống một cách chính xác.

Khi nào sử dụng

Để tải tài nguyên từ các trang khác, nếu bạn cần tài nguyên từ một trang khác và bạn muốn tải trước tài nguyên đó để tăng tốc độ hiển thị của trang đó. Ví dụ:

  • Bạn có một cửa hàng trực tuyến và 40% người dùng rời khỏi trang chủ để đến trang sản phẩm. Sử dụng <link rel= "prefetch">, tải các tệp CSS và JS để hiển thị các trang sản phẩm.
  • Bạn có một ứng dụng một trang và các trang khác nhau tải các gói khác nhau. Khi người dùng truy cập một trang, các gói dành cho tất cả các trang mà nó liên kết đến có thể được tải trước.

Có khả năng thẻ này có thể được sử dụng an toàn ở bất kỳ mức độ nào.. Các trình duyệt thường lên lịch tìm nạp trước với mức ưu tiên thấp nhất nên không làm phiền ai. Chỉ cần lưu ý rằng nó tiêu tốn lưu lượng truy cập của người dùng, điều này có thể khiến bạn tốn tiền.

Không dành cho những yêu cầu khẩn cấp. Không được dùng <link rel= "prefetch">, khi cần tài nguyên trong vài giây. Trong trường hợp này, sử dụng <link rel= "preload">.

chi tiết

Thẻ tùy chọn. Trình duyệt không bắt buộc phải làm theo hướng dẫn này; nó có thể bỏ qua nó, chẳng hạn như khi kết nối chậm.

Ưu tiên trong Chrome. Trong Chrome <link rel= "prefetch"> thường được thực hiện với mức độ ưu tiên tối thiểu (xem bảng ưu tiên đầy đủ), tức là sau khi tải mọi thứ khác.

kết nối trước

<link rel= "preconnect"> yêu cầu trình duyệt kết nối trước với miền khi bạn muốn tăng tốc độ thiết lập kết nối trong tương lai.

Trình duyệt phải thiết lập kết nối nếu nó truy xuất bất kỳ tài nguyên nào từ miền mới của bên thứ ba. Ví dụ: nếu nó tải Google Fonts, phông chữ React từ CDN hoặc yêu cầu phản hồi JSON từ máy chủ API.

Việc thiết lập kết nối mới thường mất vài trăm mili giây. Việc này được thực hiện một lần nhưng vẫn mất thời gian. Nếu đã thiết lập kết nối trước, bạn sẽ tiết kiệm thời gian và tải tài nguyên từ miền này nhanh hơn.

cú pháp

<link rel= "preconnect" href="https://api.my-app.com" />

href cho biết tên miền mà bạn muốn xác định địa chỉ IP. Có thể được chỉ định bằng tiền tố (https://domain.com) hoặc không có nó (//domain.com).

Khi nào sử dụng

Sử dụng cho các miền sẽ sớm cần thiết để tải xuống một kiểu, tập lệnh hoặc hình ảnh quan trọng từ đó nhưng bạn chưa biết URL tài nguyên. Ví dụ:

  • Ứng dụng của bạn được lưu trữ trên my-app.com và thực hiện các yêu cầu AJAX tới api.my-app.com: Bạn không biết trước các truy vấn cụ thể vì chúng được tạo động từ JS. Ở đây khá thích hợp khi sử dụng thẻ để kết nối trước với miền.
  • Ứng dụng của bạn được lưu trữ trên my-app.com và sử dụng Phông chữ của Google. Chúng được tải xuống theo hai bước: đầu tiên, tệp CSS được tải xuống từ miền fonts.googleapis.com, thì tệp này yêu cầu phông chữ có fonts.gstatic.com. Bạn không thể biết tập tin phông chữ cụ thể đến từ đâu fonts.gstatic.com bạn sẽ cần cho đến khi tải tệp CSS, vì vậy chúng tôi chỉ có thể tạo kết nối sơ bộ trước.

Sử dụng thẻ này để tăng tốc một số tập lệnh hoặc kiểu của bên thứ ba một chút do kết nối được thiết lập trước.

Đừng lạm dụng. Thiết lập và duy trì kết nối là một hoạt động tốn kém cho cả máy khách và máy chủ. Sử dụng thẻ này cho tối đa 4-6 tên miền.

chi tiết

Thẻ tùy chọn. Trình duyệt không bắt buộc phải tuân theo hướng dẫn này và có thể bỏ qua hướng dẫn này, chẳng hạn như nếu nhiều kết nối đã được thiết lập hoặc trong một số trường hợp khác.

Quá trình kết nối bao gồm những gì?. Để kết nối với từng trang web, trình duyệt phải thực hiện như sau:

  • Độ phân giải DNS. Tìm địa chỉ IP máy chủ (216.58.215.78) cho tên miền được chỉ định (google.com).
  • Bắt tay TCP. Trao đổi các gói (máy khách → máy chủ → máy khách) để bắt đầu kết nối TCP với máy chủ.
  • Bắt tay TLS (chỉ các trang web HTTPS). Hai vòng trao đổi gói (máy khách → máy chủ → máy khách → máy chủ → máy khách) để bắt đầu phiên TLS an toàn.

Lưu ý: HTTP/3 sẽ cải thiện và tăng tốc cơ chế bắt tay, nhưng vẫn còn một chặng đường dài.

dns-tìm nạp trước

<link rel= "dns-prefetch"> yêu cầu trình duyệt thực hiện phân giải DNS cho miền trước nếu bạn sắp kết nối với miền đó và muốn tăng tốc kết nối ban đầu.

Trình duyệt phải xác định địa chỉ IP của miền nếu nó truy xuất bất kỳ tài nguyên nào từ miền mới của bên thứ ba. Ví dụ: tải Phông chữ Google, phông chữ React từ CDN hoặc yêu cầu phản hồi JSON từ máy chủ API.

Đối với mỗi miền mới, độ phân giải bản ghi DNS thường mất khoảng 20-120 mili giây. Điều này chỉ ảnh hưởng đến việc tải tài nguyên đầu tiên từ một miền nhất định nhưng vẫn gây ra độ trễ. Nếu thực hiện phân giải DNS trước, chúng ta sẽ tiết kiệm thời gian và tải tài nguyên nhanh hơn.

cú pháp

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href cho biết tên miền mà bạn muốn đặt địa chỉ IP. Có thể được chỉ định bằng tiền tố (https://domain.com) hoặc không có nó (//domain.com).

Khi nào sử dụng

Sử dụng cho các miền sẽ sớm cần thiết để tải xuống các tài nguyên từ đó mà trình duyệt không biết trước. Ví dụ:

  • Ứng dụng của bạn được lưu trữ trên my-app.com và thực hiện các yêu cầu AJAX tới api.my-app.com: Bạn không biết trước các truy vấn cụ thể vì chúng được tạo động từ JS. Ở đây khá thích hợp khi sử dụng thẻ để kết nối trước với miền.
  • Ứng dụng của bạn được lưu trữ trên my-app.comvà sử dụng Google Fonts. Chúng được tải xuống theo hai bước: đầu tiên, tệp CSS được tải xuống từ miền fonts.googleapis.com, thì tệp này yêu cầu phông chữ có fonts.gstatic.com. Bạn không thể biết tập tin phông chữ cụ thể đến từ đâu fonts.gstatic.com bạn sẽ cần nó cho đến khi tải tệp CSS, vì vậy chúng tôi chỉ có thể tạo kết nối sơ bộ trước.

Sử dụng thẻ này để tăng tốc một số tập lệnh hoặc kiểu của bên thứ ba một chút do kết nối được thiết lập trước.

Hãy lưu ý những đặc điểm tương tự như <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Thông thường sẽ không có ý nghĩa gì khi sử dụng chúng cùng nhau cho một tên miền: <link rel= "preconnect"> đã bao gồm <link rel= "dns-prefetch"/> và nhiều hơn nữa. Điều này có thể được biện minh trong hai trường hợp:

  • Bạn có muốn hỗ trợ các trình duyệt cũ hơn không?. <link rel= "dns-prefetch" /> được hỗ trợ bởi kể từ IE10 và Safari 5. <link rel= "preconnect"> đã được hỗ trợ một thời gian trong Chrome và Firefox, nhưng chỉ được thêm vào Safari trong phiên bản 11.1 và vẫn chưa được hỗ trợ trong IE/Edge. Nếu bạn cần hỗ trợ các trình duyệt này, hãy sử dụng <link rel= "dns-prefetch" /> như một lựa chọn dự phòng cho <link rel= "preconnect">.
  • Bạn muốn tăng tốc độ kết nối tới hơn 4-6 tên miền. Nhãn <link rel= "preconnect"> Không nên sử dụng với nhiều hơn 4-6 tên miền vì việc thiết lập và duy trì kết nối là một hoạt động tốn kém. <link rel= "dns-prefetch" /> tiêu tốn ít tài nguyên hơn, vì vậy hãy sử dụng nó nếu cần thiết.

chi tiết

Thẻ tùy chọn. Trình duyệt không bắt buộc phải tuân theo hướng dẫn này, do đó, trình duyệt có thể không thực hiện phân giải DNS, chẳng hạn như nếu có nhiều thẻ như vậy trên trang hoặc trong một số trường hợp khác.

DNS là gì. Mỗi máy chủ trên Internet có một địa chỉ IP duy nhất, trông giống như 216.58.215.78. Tên của trang web thường được nhập vào thanh địa chỉ của trình duyệt (ví dụ: google.com) và các máy chủ DNS (Hệ thống tên miền) khớp với địa chỉ IP của máy chủ (216.58.215.78).

Để xác định địa chỉ IP, trình duyệt phải truy vấn máy chủ DNS. Phải mất 20−120 ms khi kết nối với miền mới của bên thứ ba.

DNS được lưu vào bộ nhớ đệm, mặc dù không đáng tin cậy lắm. Một số hệ điều hành và trình duyệt lưu vào bộ nhớ đệm các truy vấn DNS: điều này sẽ tiết kiệm thời gian cho các truy vấn lặp lại nhưng không thể dựa vào bộ nhớ đệm. Trên Linux, nó thường không hoạt động. Chrome có bộ đệm DNS nhưng nó chỉ tồn tại trong một phút. Windows lưu trữ phản hồi DNS trong năm ngày.

người đặt trước

<link rel= "prerender"> yêu cầu trình duyệt tải xuống URL và hiển thị nó trong một tab ẩn. Khi người dùng nhấp vào liên kết, trang sẽ được hiển thị ngay lập tức. Điều này rất hữu ích nếu bạn chắc chắn rằng người dùng sẽ truy cập một trang nhất định và muốn tăng tốc độ hiển thị của trang đó.

Bất chấp (hoặc vì) tính hiệu quả đặc biệt của thẻ này, vào năm 2019 <link rel= "prerender"> được hỗ trợ kém trong các trình duyệt chính. Xem thêm chi tiết. dưới đây.

cú pháp

<link rel="prerender" href="https://my-app.com/pricing" />

href trỏ đến URL bạn muốn bắt đầu hiển thị ở chế độ nền.

Khi nào sử dụng

Khi bạn thực sự chắc chắn rằng người dùng sẽ đi đến một trang nhất định. Nếu bạn có một “đường hầm” qua đó 70% khách truy cập vào trang A sẽ chuyển đến trang B, thì <link rel= "prerender"> ở trang A sẽ giúp hiển thị trang B rất nhanh.

Đừng lạm dụng. Kết xuất trước cực kỳ tốn kém về mặt băng thông và bộ nhớ. Không được dùng <link rel= "prerender"> cho nhiều hơn một trang.

chi tiết

Thẻ tùy chọn. Trình duyệt không bắt buộc phải làm theo hướng dẫn này và có thể bỏ qua hướng dẫn này, chẳng hạn như khi kết nối chậm hoặc khi không đủ bộ nhớ trống.

Để tiết kiệm bộ nhớ Chrome không hiển thị đầy đủVà chỉ tải trước NoState. Điều này có nghĩa là Chrome tải trang và tất cả tài nguyên của trang nhưng không hiển thị hoặc thực thi JavaScript.

Firefox và Safari hoàn toàn không hỗ trợ thẻ này. Điều này không vi phạm đặc điểm kỹ thuật vì trình duyệt không bắt buộc phải tuân theo hướng dẫn này; nhưng vẫn buồn. Lỗi triển khai Firefox đã mở được bảy năm. Có báo cáo cho rằng Safari cũng không hỗ trợ thẻ này.

Tóm tắt thông tin

Sử dụng:

  • <link rel= "preload"> - khi bạn cần tài nguyên trong vài giây
  • <link rel= "prefetch"> - khi bạn cần tài nguyên trên trang tiếp theo
  • <link rel= "preconnect"> - khi bạn biết rằng bạn sẽ sớm cần một tài nguyên nhưng bạn chưa biết URL đầy đủ của nó
  • <link rel= "dns-prefetch"> - tương tự, khi bạn biết rằng bạn sẽ sớm cần một tài nguyên nhưng bạn chưa biết URL đầy đủ của nó (đối với các trình duyệt cũ hơn)
  • <link rel= "prerender"> — khi bạn chắc chắn rằng người dùng sẽ truy cập một trang nhất định và bạn muốn tăng tốc độ hiển thị của trang đó

Nguồn: www.habr.com

Thêm một lời nhận xét