Một số lời của người dịch: Ba tính năng preload, prefetch và preconnect sẽ giúp chúng ta cải thiện tốc độ trang web một cách đáng kinh ngạc mà không tốn bất kỳ chi phí nào. Dù tưởng chừng như một công nghệ cao cấp, nhưng thực tế chỉ cần hiểu cơ bản và áp dụng vào, sau đó kiểm tra lại nếu cần thiết. Bây giờ, chúng ta cùng bắt đầu nào!
Trong bài viết này, chúng ta sẽ tìm hiểu về các biện pháp được sử dụng để gợi ý và chỉ thị các tài nguyên, cũng như cách chúng có thể cải thiện tốc độ trang web hoặc ứng dụng web.
Bạn đang xem: Tìm hiểu preload, prefetch và preconnect, cũng như cách tích hợp chúng vào WordPress
Bạn có thể đã nghe nói về preload, prefetch và preconnect, nhưng chúng ta sẽ đi sâu hơn vào sự khác biệt giữa chúng và làm thế nào bạn có thể tận dụng lợi ích từ chúng như thế nào?
Một trong những lợi ích quan trọng nhất của chúng là giúp người phát triển tối ưu hóa phân phối tài nguyên, giảm thiểu thời gian chờ và tải nhanh hơn khi người dùng truy cập trang web.
Preload
Preload là một tiêu chuẩn web mới cho phép bạn tải trước các tài nguyên cụ thể trong phiên duyệt hiện tại. Đây là cách cải tiến phiên bản tải trước nguồn phụ mà được sử dụng trước đây. Preload chỉ định được xác định bằng thẻ <link> như ví dụ sau: <link rel='preload'>.
Thông thường, bạn nên preload các tài nguyên quan trọng như ảnh, CSS, JavaScript và các file font. Điều này không nên nhầm lẫn với preload của trình duyệt, trong đó chỉ các tài nguyên trong HTML được tải trước. Preload giải quyết vấn đề này và cho phép preload các tài nguyên được khởi tạo từ CSS và JavaScript và xác định khi nào mỗi tài nguyên cần được áp dụng.
Preload khác với prefetch trong việc tìm nạp tài nguyên cho phiên hiện tại, trong khi prefetch tập trung vào tìm nạp tài nguyên cho phiên duyệt web kế tiếp. Ngoài ra, preload không chặn sự kiện onload.
1. Lợi ích của preload
Một số lợi ích của preload bao gồm:
- Cho phép trình duyệt thiết lập mức độ ưu tiên tài nguyên, giúp nhà phát triển tối ưu hóa tải trước các tài nguyên cụ thể.
- Cung cấp cho trình duyệt khả năng xác định kiểu loại của tài nguyên, giúp xác định xem cùng một kiểu tài nguyên có thể được sử dụng lại trong tương lai hay không.
- Trình duyệt có thể xác định xem yêu cầu có tuân thủ chính sách bảo mật về nội dung hay không thông qua thuộc tính as.
- Trình duyệt có thể gửi các tiêu đề accept phù hợp dựa trên kiểu tài nguyên.
2. Ví dụ
Dưới đây là một ví dụ về tải trước hình ảnh:
<link rel="preload" href="image.png">
Dưới đây là ví dụ tải trước các font:
Xem thêm : Hủ Tiếu Bò Kho Tiếng Anh Là Gì 2023
<link rel="preload" href="https://kiencang.net/fonts/font.woff" as="font">
Và đây là ví dụ về tải trước một file CSS thông qua markup hoặc JavaScript:
<!- Sử dụng markup ->
<link rel="preload" href="/css/mystyles.css" as="style">
<!- Sử dụng JavaScript ->
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "css/mystyles.css";
document.head.appendChild(res);
</script>
3. Trình duyệt hỗ trợ preload
Preload được hỗ trợ trong Chrome, Opera, Microsoft Edge, Safari và iOS Safari. Bạn có thể kiểm tra trình duyệt mình đang sử dụng để biết xem nó có hỗ trợ preload không.
Prefetch
Prefetch là các gợi ý tải trước tài nguyên có mức độ ưu tiên thấp, cho phép trình duyệt tải trước các tài nguyên trong chế độ nền trong thời gian rảnh rỗi, mà có thể người dùng sẽ sử dụng sau này. Tài nguyên được tải trước sẽ được lưu trong bộ nhớ cache của trình duyệt. Khi một trang hoàn tất tải, nó sẽ bắt đầu tải thêm các tài nguyên và nếu người dùng nhấp vào một liên kết đã được tải trước (prefetched link), nội dung sẽ được tải ngay lập tức. Prefetch có ba kiểu tìm nạp, bao gồm link, DNS và prerendering.
1. Link prefetching
Liên kết prefetching cho phép trình duyệt tải trước các tài nguyên và lưu trữ chúng trong cache, với giả định là người dùng sẽ yêu cầu chúng sau khi xem trang hiện tại. Trình duyệt tìm kiếm các liên kết prefetch trong HTML hoặc HTTP header link, ví dụ:
- HTML:
<link rel="prefetch" href="/uploads/images/pic.png"> - HTTP Header: Link:
</uploads/images/pic.png>; rel=prefetch
Tuy nhiên, prefetching không phải lúc nào cũng hiệu quả, đặc biệt đối với các trang không biết chính xác người dùng sẽ thực hiện thao tác tiếp theo. Nó cũng có thể gây lãng phí băng thông và mất dữ liệu nếu việc tìm nạp diễn ra quá sớm. Tuy nhiên, đôi khi nó có thể cải thiện tốc độ trang web, nhất là đối với các trang tương tác có nhiều yêu cầu phụ thuộc như quảng cáo và trình chuyển đổi giao diện người dùng.
2. DNS prefetching
DNS prefetching cho phép trình duyệt tìm kiếm trước DNS trong quá trình duyệt web, giúp giảm thiểu độ trễ khi người dùng nhấp vào liên kết. DNS prefetching có thể được thực hiện bằng cách thêm thuộc tính rel='dns-prefetch' vào thẻ liên kết. Ví dụ:
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//cdn.domain.com">
Việc tìm kiếm trước DNS giúp giảm thiểu thời gian truy cập cho các tài nguyên ngoại hạng như các dịch vụ phân tích nền, quảng cáo và mạng phân phối nội dung (CDN).
3. Prerendering
Prerendering giúp tải và hiển thị trước các trang web mà người dùng có thể tiếp tục xem sau này. Squoosh là một ví dụ về dự án sử dụng prerendering để nạp trước các tệp ảnh quan trọng trong quá trình duyệt.
<link rel="prerender" href="https://kiencang.net">
Prerendering giúp giảm thiểu thời gian tải trang web và tăng trải nghiệm người dùng bằng cách tạo sẵn trang web trước khi người dùng truy cập. Tuy nhiên, prerendering có thể tốn kém về tài nguyên và dẫn đến việc tăng băng thông mạng.
Preconnect
Preconnect cho phép trình duyệt thiết lập kết nối trước khi gửi yêu cầu HTTP thực tế đến máy chủ. Việc này bao gồm tìm kiếm DNS, đàm phán TLS và TCP handshakes. Preconnect giúp giảm thiểu thời gian chờ và tăng trải nghiệm người dùng.
<link href="https://cdn.domain.com" rel="preconnect" crossorigin>
Xem thêm : Chồng Của Cô Gọi Là Gì Tại Miền Bắc, Trung, Nam Của Việt Nam
Preconnect là công cụ quan trọng trong tối ưu hóa website, giúp loại bỏ nhiều chi phí vòng lặp khỏi đường dẫn yêu cầu, giảm độ trễ hàng trăm và hàng ngàn mili giây.
Tổng kết
Hy vọng rằng bạn đã hiểu một cách cơ bản về preload, prefetch và preconnect là gì và làm thế nào bạn có thể sử dụng chúng để tăng tốc độ phân phối nội dung và các thành phần quan trọng trên trang web của bạn một cách hiệu quả. Hãy chú ý không ưu tiên tất cả các tài nguyên, mà nên tập trung vào những tài nguyên quan trọng nhất. Chúng tôi mong muốn thấy sự phổ biến của chỉ thị preload tăng lên trong tương lai để các nhà phát triển web có thể tận dụng nó nhiều hơn.
Bạn nghĩ gì về những gợi ý tải trước này? Bạn đã thử áp dụng chúng chưa? Nếu có, chúng tôi muốn nghe ý kiến của bạn trong phần bình luận.
(Bài viết dịch từ bài viết “Resource Hints – What is Preload, Prefetch, and Preconnect?” của Brian Jackson, KeyCDN)
Hướng dẫn tích hợp vào WordPress
Phần này sẽ hướng dẫn các bạn tích hợp các thuộc tính preconnect, prefetch và preload vào WordPress – hệ quản trị nội dung phổ biến nhất hiện nay.
Để thực hiện điều này, bạn chỉ cần 3 công cụ cơ bản:
- Trang web Tools.pingdom.com để phát hiện các tài nguyên của bên thứ ba và các tài nguyên xây dựng trên trang web.
- Plugin Autoptimize để tích hợp preload và preconnect vào trang web của bạn.
- Plugin Insert headers and footers để chèn dns-prefetch khi cần thiết.
Bước 1: Phân tích tài nguyên
Đầu tiên, truy cập vào công cụ pingdom và kiểm tra một bài viết phổ biến trên trang web của bạn. Sau đó, kéo xuống để xem dung lượng và số lượng kết nối của các tài nguyên được tải từ bên trong và bên ngoài trang web.
Sử dụng thông tin này, bạn có thể quyết định sử dụng preconnect và prefetch cho các tài nguyên bên ngoài quan trọng như các file CSS, JavaScript, và hình ảnh, và sử dụng dns-prefetch cho các tài nguyên bên thứ ba như Google Analytics hoặc CDN của bạn.
Bước 2: Sử dụng plugin Autoptimize để thêm preconnect và preload
Với plugin Autoptimize, bạn có thể thêm các thuộc tính preconnect và preload trực tiếp vào trang web của bạn. Điều này giúp tối ưu hóa việc tải các tài nguyên quan trọng và giảm thiểu thời gian chờ của trang web.
Bước 3: Sử dụng plugin Insert Headers and Footers để thêm dns-prefetch
Plugin Insert Headers and Footers cho phép bạn thêm mã dns-prefetch vào trang web của bạn. Điều này giúp tìm kiếm trước DNS của các dịch vụ bên thứ ba như Google Analytics hoặc CDN.
Sau khi hoàn thành các bước trên, kiểm tra mã nguồn của trang web để xem xem các thuộc tính pre, dns-prefetch và link preload đã được áp dụng chính xác hay không.
Đó là các bước để tích hợp các tính năng preload, prefetch và preconnect vào trang web WordPress của bạn. Chúc bạn thành công và tận dụng tối đa lợi ích từ những tính năng này!
Nguồn: https://stamboom-boden.com
Danh mục: Là Gì
