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

Các trình duyệt cho thấy trước tương lai của việc lướt Internet tốc chiều cao nhất, mang lại cho người sử dụng những tài nguyên thiết yếu, ngay cả trước lúc họ biết mình thực thụ cần. Ngày nay, các trình duyệt đôi khi cũng mang ra một số dự báo để tăng vận tốc tìm nạp và hiển thị tài liệu. Để thi hành 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 phối và tài nguyên nào được yêu cầu thường xuyên nhất. Do đó, họ có thể dự báo một số trình duyệt hoạt động trong tương lai, nên thực hành cho các trang web. Tất cả những gì mà các nhà phát triển cần phải có lúc này 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 nhìn 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 điểm của trình duyệt và nhấn “Enter”.

2. Khi thu được địa điểm đó, trình duyệt sẽ đòi hỏi máy server DNS đem ra địa điểm IP, tương ứng với địa chỉ do Joe cung cấp.

3. Máy chủ DNS thực hành 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, đòi hỏi 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 đòi hỏi 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 rất là nhỏ của tiến độ 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 server 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 đòi hỏi HTTP thường thì đi qua mọi thứ các bước trên để tìm nạp tư liệu qua Internet. Vì vậy, nếu bất kỳ quy trình nào trong các 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

<img src="/wp-content/uploads/2022/06/24/12/cach-tang-toc-trang-web-voi-tag-link-1.jpg" alt="Cách tăng tốc trang web với tag  ” title=”Cách tăng tốc trang web với tag  1″ />

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ẽ coi xét những gì các mối liên hệ liên kết này còn cũng 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 coi là nhận địa chỉ IP phù hợp từ máy chủ DNS) được thực hành trước.

“Các yêu cầu DNS chiếm lượng đường truyền rất nhỏ, nhưng độ trễ cũng có thể có thể khá cao, nhấ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ũng có thể 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ể hạ xuống 1 giây” – theo Mozilla Developer Network.

Giả sử có một trang trong website, chứa biết bao 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ũng có thể 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 phương pháp thêm code này vào trang tham chiếu.

Khi trình duyệt giải quyết 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à lúc 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 số liên kết đưa họ đến trang web liên quan, việc phân giải DNS của trang web đó cũng có thể đã được xong xuôi và trình duyệt cũng có thể 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 tất cả tất cả những 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 server 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 để 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à cho dù hàng ngà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 tình huống này, đòi hỏi kế đến 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ẽ làm trình duyệt kết nối với máy server xyzsite, khi nó đến trang trung gian đó.

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

3. Prefetch

<img src="/wp-content/uploads/2022/06/24/12/cach-tang-toc-trang-web-voi-tag-link-2.jpg" alt="Cách tăng tốc trang web với tag  ” title=”Cách tăng tốc trang web với tag  2″ />

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 hành 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ực kỳ 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 đích thực sẽ làm chậm thay vì bức tốc trang web của mình.

“Kỹ thuật này có khả năng bức tốc một số trang web tương tác, nhưng vẫn không phải khi nào cũng có tác dụng. Đối với nhiều trang web, quá khó để đoán người sử dụng có thể làm gì tiếp theo. Đối với những website khác, dữ liệu cũng đều có thể bị cũ nếu nó được tải quá sớm. Hãy cẩn trọng để 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 những nhà phát triển của Google.

Đối với những cuốn sách, bộ sưu tầm hoặc portfolio trực tuyến, nếu người sử 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 hành điều đó.

Prefetch được bổ trợ trong Chrome, Firefox và Opera.

4. Prerender

Prerender chỉ dành riêng cho những trang HTML cũng 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 đẩy lên màn hình khi người sử dụng thực sự cần). Việc kết xuất có kinh 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ũng 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 đòi hỏi hơn.

Vì vậy, prerender phải được dùng 1 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”.

“Prerender có thể được sử dụng bởi ứng dụng, để chỉ ra mục tiêu điều phối HTML có khả năng tiếp theo. Tác nhân người sử dụng sẽ tìm nạp và giải quyết 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 thích giải quyết trước HTML, ứng dụng cũng đều 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 đáp ứng việc thi hành và xong xuôi các thời kì đòi hỏi khác nhau, vì khi trình duyệt đang bận giải quyết những đòi hỏi càng phải có cho hoạt động của trang ngày nay mà người sử dụng đang sử dụng, việc thực hành các tối ưu hóa này còn cũng có thể cản trở những trọng trách ngày nay của người dùng.

Vì vậy, tất cả chỉ được bố trí 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ô sau bởi JavaScript và vẫn làm các công việc như bình thường.

(2) W3C chỉ định một tính chất liên kết HTML được xem 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 dùng để cung cấp xác suất đòi hỏi sẽ có thực hiện trong tương lai. Mặc dù vậy, tính chất này hiện không được thi hành bởi bất kỳ trình duyệt nào. Ví dụ, đoạn code sau đây cho thấy trang xyzsite có 80% cơ hội sẽ được đòi hỏi trong sau này và 30% cho trang giới thiệu.

Bạn cũng đều có thể thêm tính chất 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 đòi hỏi được liên kết.

tăng tốc trang web,cách tăng tốc trang web,tăng tốc trang web với tag LINK,DNS prefetch,preconnect,prefetch,prerender

Nội dung Cách tăng tốc trang web với tag được tổng hợp sưu tầm biên tập bởi: Tin Học Trường Tín. Mọi ý kiến vui lòng gửi Liên Hệ cho truongtin.top để điều chỉnh. truongtin.top tks.