Giúp trình duyệt 'thấy trước' qua thẻ <link> là một giải pháp giúp tăng tốc website cao nhất, trình duyệt kéo tài nguyên cho chúng ta muốn ngay cả trước khi chúng ta biết chúng ta muốn chúng.
Ngày nay, các trình duyệt đã đưa ra một số dự đoán và sau đó tăng tốc độ tìm nạp và hiển thị.
Để thực hiện bước này, chúng ta hoàn toàn có thể tự thực hiện đơn giản. Chỉ với thẻ <link>
Các lập trình viên có một ý tưởng khá hay về cách 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.
Và do đó, họ có thể dự đoán cách trình duyệt hoạt động với trang web trong tương lai.
Tất cả những gì mà bạn có thể làm bây giờ là giúp trình duyệt hiểu các dự đoán này.
Tăng tốc độ tải trang với thẻ LINK
Giới thiệu một chút về HTTP Requests
Trước khi nói về thẻ LINK, chúng ta cần làm mới hiểu biết về cách hoạt động tìm nạp tệp HTTP-requests xảy ra.
Ví dụ bạn muốn truy cập một website nào đó:
Nó sẽ xảy ra như sau:
-
Bạn gõ trang web vào thanh địa chỉ của trình duyệt và nhấn 'Enter'.
-
Sau khi nhận được địa chỉ đó, trình duyệt yêu cầu máy chủ DNS cho địa chỉ IP của địa chỉ do bạn.
-
Bây giờ trình duyệt đã biết địa chỉ IP, nó sẽ gửi một tin nhắn đến máy chủ của trang web, yêu cầu kết nối.
-
Nếu Server 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 và trình duyệt trả lời và xác nhận thông báo của máy chủ.
-
Khi xong, kết nối được thiết lập giữa hai bên.
-
Bây giờ, trình duyệt thay đổi kiểu phương ngữ thành HTTP và yêu cầu server cho trang web.
-
Server, biết trang chủ của trang web sẽ trả về, nó được trình duyệt nhận được và hiển thị cho bạn.
Một yêu cầu HTTP thông thường hoạt động như thế (và có thể hơn thế nữa) để 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 khởi động khi có thể, chúng ta có thể giảm thời gian chúng ta phải chờ để phân phối các tài nguyên mà chúng ta muốn.
Vậy thẻ LINK có liên quan gì đến tốc độ tải trang?
W3C chỉ định 4 thuộc tính rel trong thẻ <link> có tên dns-prefetch, preconnectect, prefetch và prerender.
Chúng được W3C gọi là là 'Gợi ý tài nguyên'. Bây giờ, chúng ta sẽ thấy những gì chúng có thể làm và nơi chúng có thể được sử dụng.
1. DNS prefetch: Tìm nạp trước DNS
DNS prefetch là tìm nạp trước DNS (còn gọi là nhận địa chỉ IP phù hợp từ máy chủ DNS) trước khi được gọi.
Các DNS request yêu cầu rất nhỏ về băng thông, nhưng độ trễ có thể khá cao, đặc biệt là trên mạng di động. Bằng cách tìm nạp trước 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 đến một giây. - Mozilla Developer Network
Ví dụ, Ở đây bạn đang có 1 trang web với rất nhiều liên kết tham khảo đến trang khác của nó.
Khi người dùng truy cập trang nào đó, có một xác suất cao rằng người dùng sẽ điều hướng đến trang khác qua các liên kết.
Vì vậy, việc tìm nạp DNS sớm cho trang khác 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 đoạn code này vào trang hiện tại đang xem.
<link rel="dns-prefetch" href="//mysistersite.org">
Khi trình duyệt xử lý đoạn code này trong trang tham chiếu, nó sẽ thêm hành động tra cứu DNS của trang khác vào các nhiệm vụ tiếp theo của nó...
... và khi nó không có các tác vụ ưu tiên nào khác cao hơn, nó sẽ bắt đầu phân giải DNS của trang đang đợi.
Vì vậy, khi người dùng nhấp vào một trong các liên kết đưa họ đến trang khác qua link, phân giải DNS của trang web đó có thể đã được hoàn thành.
Khi đó trình duyệt có thể thiết lập kết nối ngay lập tức, điều này làm cho trang đó tải 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: Thực hiện kết nối trước
Preconnect là một bước xa hơn của DNS prefetch, nó thiết lập kết nối đến máy chủ mà có thể có một yêu cầu được gửi sau này trong tương lai.
Preconnect là một giải pháp quan trọng trong tối ưu tốc độ. Nó có thể rút ngắn nhiều quy trình load - trong một số trường hợp nó cải thiện đến hàng trăm và thậm chí hàng nghìn mili giây. - lya Grigorik
W3C liệt kê một trường hợp sử dụng lý tưởng để sử dụng Preconnect như: Redirect.
Trong trường hợp này, một yêu cầu tiếp theo của trình duyệt (trang web được chuyển hướng) có thể dự đoán được 100% và có thể được 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: Tìm nạp trước tài nguyên cần thiết
Với tính năng Prefetch, khi trình duyệt bắt đầu triển khai phân giải DNS của các tài nguyên, sau đó thực hiện kết nối TCP với server tài nguyên, thực hiện HTTP request và cuối cùng tìm nạp và lưu trữ tài nguyên đã tìm nạp trong bộ đệm 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 này (hoặc ưu tiên), thì đó là tài nguyên cần được tìm nạp trước.
Lưu ý: Tìm nạp trước là phương pháp dự đoán và nếu bạn đoán sai, thay vì tăng tốc, bạn lại có thể làm chậm trang web của mình đấy.
Kỹ thuật Prefetch có khả năng tăng tốc nhiều trang web tương tác, nhưng không phải giải pháp cho tất cả. Đố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 một số trường hợp khác, dữ liệu có thể bị cũ nếu nó tải xuống quá sớm. Hãy cẩn thận, không tìm nạp trước các tệp quá sớm vì bạn có thể làm chậm trang mà người dùng đang xem. - Google Developer
Đối với các trang đọc truyện tranh, thư viện hoặc bất kỳ trang nào người dùng có khả năng cao sẽ duyệt sang trang tiếp theo, việc tìm nạp trước tăng tốc độ khá cao.
Đây là đoạn code để tìm nạp trước:
<link rel="prefetch" href="//xyzsite.com/nextimage.jpg">
Prefetch được hỗ trợ trong Chrome, Firefox và Opera.
4. Prerender: Xử lý trước tài nguyên cần thiết
Prerender chỉ dành cho các trang HTML có thể được thực hiện trước.
Có nghĩa là: Một trang sử dụng Prerender sẽ được xử lý HTML trước và chỉ thực sự hiển thị lên màn hình khi có yêu cầu của người dùng.
Prerender sẽ yêu cầu cao về tài nguyên và bộ nhớ, việc này tác động ra 2 mặt.
Vì vậy, prerender phải được sử dụng một cách thận trọng, và không được sử dụng quá mức. Thêm code sau đây sẽ render trước trang 'About'.
<link rel="prerender" href="//example.com/about.html">
Lưu ý: Trong nhiều trường hợp, bạn có thể sử dụng prefetch thay vì prerender
Prerender đã có sẵn trong Chrome, IE và Opera kể từ tháng 3 năm 2016.
Một vài lưu ý khi sử dụng thẻ Link để tăng tốc độ Load
Không có giải pháp nào nêu trên được đả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ý các yêu cầu cần thiết cho hoạt động của trang hiện tại, việc thực hiện các tối ưu hóa này có thể cản trở nhiệm vụ ở trang hiện tại.
Vì vậy, cần phải sắp xếp thứ tự thực thi để trình duyệt cảm thấy đủ tự do để thực hiện việc tối ưu.
Có những tài nguyên không nhất thiết phải có trong trang ngay cả trước khi tải trang.
Chúng có thể được thêm vào sau bởi JavaScript.
W3C chỉ định một thuộc tính liên kết HTML được gọi là xác suất gợi ý, pr (có giá trị 0 đến 1).
Nó có thể được sử dụng để cung cấp xác suất của các yêu cầu này sẽ được thực hiện như thế nào trong tương lai.
Ví dụ, đoạn code sau đây nói rằng trong tương lai khả năng người dùng chuyển đến trang xyzsite là 80% và khả năng đến trang About là 30%.
<link rel="preconnect" href="//xyzsite.com" pr="0.8">
<link rel="prerender" href="//example.com/about.html" pr="0.3">
Tổng kết
Như vậy, chỉ với thẻ <link>, chúng ta đã có thể có 4 phương án để tăng tốc website là:
-
DNS prefetch
-
Preconnect
-
Prefetch
-
Prerender
Cách sử dụng chúng cũng khá đơn giản, tuy nhiên cần phải dự đoán cẩn thận để sử dụng các phương án phù hợp nhất nhé.
>>> Nếu muốn tìm hiểu tất cả các phương pháp tăng tốc độ tải trang web. Hãy đăng ký ngay khóa học Lập trình Java Web 4.0 tại NIIT - ICT Hà Nội để không chỉ biết cách xây dựng trang web với hiệu suất cao mà còn có khả năng mở rộng lớn.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Dạy học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543 - 0353655150
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp