Cách tăng tốc trang web với tag <LINK>

Các trình duyệt cho thấy trước tương lai của việc lướt Internet tốc độ cao nhất, mang lại cho người dùng những tài nguyên thiết yếu, ngay cả trước khi họ biết mình thực sự cần. Ngày nay, các trình duyệt đôi khi cũng đưa ra một số dự đoán để tăng tốc độ tìm nạp và hiển thị tài liệu. Để thực hiện bước này, cần sự vào cuộc của các nhà phát triển web.

Các nhà phát triển có một ý tưởng khá hay về cách những trang web của họ được điều hướng và tài nguyên nào được yêu cầu thường xuyên nhất. Do đó, họ có thể dự đoán một số trình duyệt hoạt động trong tương lai, nên thực hiện cho các trang web. Tất cả những gì mà các nhà phát triển cần có bây giờ là tìm ra cách chuyển tiếp những dự đoán này đến trình duyệt và đưa chúng vào thực tiễn. Đây là nơi mà một số "liên kết HTML" đặc biệt xuất hiện.

Giới thiệu về các yêu cầu HTTP

Trước khi xem qua các liên kết này, đã đến lúc phải refresh bộ nhớ về cách hoạt động tìm nạp file điển hình được HTTP yêu cầu diễn ra như thế nào. Giả sử một người tên Joe muốn truy cập một trang web.

Đây là những gì xảy ra tiếp theo:

1. Joe nhập địa chỉ trang web vào thanh địa chỉ của trình duyệt và nhấn "Enter".

2. Khi nhận được địa chỉ đó, trình duyệt sẽ yêu cầu máy chủ DNS đưa ra địa chỉ IP, tương ứng với địa chỉ do Joe cung cấp.

3. Máy chủ DNS thực hiện yêu cầu.

4. Bây giờ, trình duyệt đã biết địa chỉ IP. Nó sẽ gửi một tin nhắn (theo phương ngữ TCP) đến máy chủ của trang web, yêu cầu kết nối.

5. Nếu máy chủ vẫn hoạt động tốt, nó sẽ gửi phản hồi xác nhận yêu cầu của trình duyệt, sau đó trình duyệt trả lời và xác nhận thông báo của máy chủ. (Lưu ý: Đây là phiên bản cực kỳ nhỏ của tiến trình bắt tay 3 bước TCP giữa máy khách và máy chủ).

6. Khi tiến trình bắt tay kết thúc, kết nối sẽ được thiết lập.

7. Bây giờ, trình duyệt thay đổi kiểu phương ngữ thành HTTP và yêu cầu máy chủ cho trang web.

8. Máy chủ, biết trang chủ của website, sẽ trả về thông tin, được trình duyệt nhận và hiển thị cho Joe.

Một yêu cầu HTTP thông thường đi qua tất cả các bước trên để tìm nạp tài liệu qua Internet. Vì vậy, nếu bất kỳ quy trình nào trong số này có thể được lược bỏ, thời gian chờ đợi để các tài nguyên mong muốn được phân phối sẽ rút ngắn đi.

Mối quan hệ liên kết HTML

W3C chỉ định 4 mối quan hệ liên kết HTML (rel là viết tắt của relationship - mối quan hệ), có tên là dns-prefetch, preconnectect, prefetch và prerender, hay được gọi chung là “Resource Hint” (gợi ý tài nguyên). Bây giờ, ta sẽ xem xét những gì các mối quan hệ liên kết này có thể làm và nơi chúng được sử dụng.

1. DNS prefetch

Trong DNS prefetch, việc phân giải tên miền (còn gọi là nhận địa chỉ IP phù hợp từ máy chủ DNS) được thực hiện trước.

“Các yêu cầu DNS chiếm lượng băng thông rất nhỏ, nhưng độ trễ có thể khá cao, đặc biệt là trên các mạng di động. Bằng cách tìm nạp trước kết quả DNS, độ trễ có thể giảm đáng kể tại một số thời điểm nhất định, chẳng hạn như khi người dùng nhấp vào liên kết. Trong một số trường hợp, độ trễ có thể giảm xuống 1 giây” - theo Mozilla Developer Network.

Giả sử có một trang trong website, chứa rất nhiều liên kết tham khảo đến trang web liên quan. Khi người dùng truy cập trang tham chiếu này, có khả năng rất cao rằng họ sẽ điều hướng đến trang web liên quan đó. Vì vậy, thực hiện một DNS lookup trước cho trang web liên quan có thể giảm thời gian mở trang web (từ đó cải thiện trải nghiệm người dùng).

Việc giảm độ trễ này thông qua tìm nạp trước DNS có thể được thực hiện bằng cách thêm code này vào trang tham chiếu.

<link rel="dns-prefetch" href="//mysistersite.org">

Khi trình duyệt xử lý code này trong trang tham chiếu, nó sẽ thêm DNS lookup của trang web liên quan vào hàng đợi tác vụ. Và khi không có nhiệm vụ ưu tiên cao nào khác trong hàng đợi, trình duyệt sẽ bắt đầu phân giải DNS của trang web liên quan.

Vì vậy, khi người dùng cuối cùng nhấp vào một trong các liên kết đưa họ đến trang web liên quan, việc phân giải DNS của trang web đó có thể đã được hoàn thành và trình duyệt có thể ngay lập tức bắt đầu thiết lập kết nối TCP client-server với máy chủ trang web liên quan, làm cho trang đó load nhanh hơn.

Tính năng này có sẵn trong hầu hết tất cả các trình duyệt hiện đại trừ Safari kể từ tháng 3 năm 2016.

2. Preconnect

Preconnect là một bước tiến xa hơn so với DNS prefetch. Nó thiết lập kết nối đến máy chủ mà có thể được yêu cầu trong tương lai.

“Preconnect là một công cụ quan trọng trong hộp công cụ tối ưu hóa. Nó có thể loại bỏ nhiều yếu tố lòng vòng gây mất thời gian khi bạn gửi yêu cầu. Trong một số trường hợp, Preconnect làm giảm độ trễ của yêu cầu tới hàng trăm và thậm chí hàng nghìn mili giây” - theo lya Grigorik.

W3C liệt kê một trường hợp sử dụng lý tưởng cho preconnect: chuyển hướng. Các nhà phát triển sử dụng tính năng chuyển hướng vì một số lý do.

Trong trường hợp này, yêu cầu tiếp theo của trình duyệt (trang web được chuyển hướng) có thể được dự đoán 100% và kết nối trước để giảm độ trễ khi điều hướng.

Hãy tưởng tượng có một trang trang trung gian chuyển hướng đến "xyzsite", liên kết HTML sau đây sẽ khiến trình duyệt kết nối với máy chủ xyzsite, khi nó đến trang trung gian đó.

<link rel="preconnect" href="//xyzsite.com">

Kể từ tháng 3 năm 2016, tính năng này đã có sẵn trong Chrome, Opera và Firefox.

3. Prefetch

Với prefetch, trình duyệt bắt đầu triển khai phân giải DNS cho tên miền của tài nguyên, sau đó thực hiện kết nối TCP với máy chủ, thực hiện yêu cầu HTTP, cuối cùng lấy và lưu trữ tài nguyên được tìm nạp trước trong cache của trình duyệt.

Nếu bạn chắc chắn về những tài nguyên nào sẽ cần sau đó, thì đó là tài nguyên để tìm nạp trước. Việc tìm nạp trước mang tính phỏng đoán và nếu đoán sai, bạn thực sự sẽ làm chậm thay vì tăng tốc trang web của mình.

“Kỹ thuật này có khả năng tăng tốc nhiều trang web tương tác, nhưng không phải lúc nào cũng có tác dụng. Đối với một số trang web, quá khó để đoán người dùng có thể làm gì tiếp theo. Đối với những website khác, dữ liệu có thể bị cũ nếu nó được tải quá sớm. Hãy cẩn thận để không tìm nạp trước các file quá sớm, nếu không bạn có thể làm chậm trang mà người dùng đang xem” - theo các nhà phát triển của Google.

Đối với các cuốn sách, bộ sưu tập hoặc portfolio trực tuyến, nếu người dùng có khả năng duyệt sang trang tiếp theo, việc tìm nạp trước các tài nguyên như hình ảnh, có thể giúp tăng tốc đáng kể. Đây là code để thực hiện điều đó.

<link rel="prefetch" href="//xyzsite.com/nextimage.jpg">

Prefetch được hỗ trợ trong Chrome, Firefox và Opera.

4. Prerender

Prerender chỉ dành cho các trang HTML có thể được hiển thị trước (trang HTML có khả năng hiển thị ngoại tuyến và nội dung được đưa lên màn hình khi người dùng thực sự cần). Việc kết xuất có chi phí tính toán và sử dụng tài nguyên bộ nhớ nhiều hơn. Cộng với việc, để hiển thị một trang, trình duyệt có thể cần thêm tài nguyên (như những hình ảnh được thêm vào trang). Điều này sẽ dẫn đến việc trình duyệt có nhiều yêu cầu hơn.

Vì vậy, prerender phải được sử dụng một cách thận trọng và không nên lạm dụng quá mức. Thêm code sau đây sẽ hiển thị trước trang "About".

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

“Prerender có thể được sử dụng bởi ứng dụng, để chỉ ra mục tiêu điều hướng HTML có khả năng tiếp theo. Tác nhân người dùng sẽ tìm nạp và xử lý tài nguyên đã chỉ định dưới dạng phản hồi HTML. Để tìm nạp các loại nội dung khác với tiêu đề yêu cầu phù hợp hoặc nếu không muốn xử lý trước HTML, ứng dụng có thể sử dụng prefetch” - theo W3C.

Prerender đã có sẵn trong Chrome, IE và Opera kể từ tháng 3 năm 2016.

Một vài điều cần lưu ý

(1) Không có resource hint nào nêu trên đảm bảo việc thực hiện và hoàn thành các giai đoạn yêu cầu khác nhau, vì khi trình duyệt đang bận xử lý những yêu cầu cần thiết cho hoạt động của trang hiện tại mà người dùng đang sử dụng, việc thực hiện các tối ưu hóa này có thể cản trở những nhiệm vụ hiện tại của người dùng.

Vì vậy, mọi thứ chỉ được sắp xếp theo thứ tự và thực thi khi trình duyệt cảm thấy đủ điều kiện để làm như vậy.

Những resource hint này không nhất thiết phải có trong trang trước khi load. Chúng có thể được thêm vào sau bởi JavaScript và vẫn thực hiện các công việc như bình thường.

(2) W3C chỉ định một thuộc tính liên kết HTML được gọi là hint probability (xác suất gợi ý), pr (có giá trị 0 đến 1) cho các resource hint này. Pr có thể được sử dụng để cung cấp xác suất yêu cầu sẽ được thực hiện trong tương lai. Mặc dù vậy, thuộc tính này hiện chưa được thực hiện bởi bất kỳ trình duyệt nào. Ví dụ, đoạn code sau đây cho biết trang xyzsite có 80% cơ hội sẽ được yêu cầu trong tương lai và 30% cho trang giới thiệu.

<link rel="preconnect" href="//xyzsite.com" pr="0.8">
<link rel="prerender" href="//example.com/about.html" pr="0.3">

Bạn cũng có thể thêm thuộc tính crossorigin vào các resource hint, để thông báo cho trình duyệt về thông tin xác thực CORS của yêu cầu được liên kết.