Trong bài viết ngắn này tôi sẽ so sánh 3 công cụ ‘pre / tải trước’ cơ bản giúp tối ưu tốc độ, hiệu suất website: preconnect preload prefetch Mục đích Kết nối sớm với các máy chủ bên ngoài Tải trước các tài nguyên quan trọng cho phiên duyệt web hiện tại Tải trước các tài nguyên cho phiên duyệt web kế tiếp trong tương lai gần Cơ chế Thực hiện tải song song tìm kiếm DNS, kết nối bảo mật qua đó giảm được độ trễ mạng do phải thực hiện lần lượt Nhờ việc tải trước các …

Đọc thêm

Trong bài viết này bạn sẽ học cách dự đoán tìm nạp trước / prefetch hiệu quả hơn và cách sử dụng Guess.js để triển khai nó. Trong video mà tôi nói về việc điều hướng truy cập web nhanh hơn thông qua dự đoán chính xác prefetch tại Google I/O 2019, tôi bắt đầu với việc đề cập đến tối ưu hóa ứng dụng web bằng biện pháp phân tách mã (code splitting) và ý nghĩa của việc cải thiện hiệu suất/tốc độ tiềm năng cho các truy cập (điều hướng) kế tiếp của người dùng (subsequent page navigation), …

Đọc thêm

Trong bài viết này chúng ta sẽ cùng tìm hiểu về thẻ rel=prefetch dùng trong việc gợi ý tài nguyên (resource hints) và cách sử dụng nó. Nghiên cứu chỉ ra rằng tốc độ tải trang nhanh hơn đem đến hệ quả có lợi là tỷ lệ chuyển đổi cao hơn và tất nhiên: các trải nghiệm người dùng tốt hơn. Nếu bạn nhìn sâu vào chuỗi truy cập của người dùng trên website và biết được các trang họ có khả năng sẽ truy cập tiếp, bạn có thể cải thiện thời gian tải trang của truy cập trong …

Đọc thêm

Với gợi ý tài nguyên của preconnect, bạn có thể giảm độ trễ yêu cầu và làm website tải nhanh hơn. Jeremy Frank Yêu cầu một tài nguyên bên ngoài website hoặc ứng dụng làm phát sinh một số vòng lặp khứ hồi (round-trips) trước khi trình duyệt có thể thực sự tải tài nguyên đó về. Các vòng lặp khứ hồi này bao gồm tìm kiếm DNS, TCP handshake, và đàm phán TLS (nếu SSL- tức liên kết bảo mật được dùng). Phụ thuộc vào tình huống cụ thể của trang và điều kiện mạng, các vòng lặp khứ …

Đọc thêm

Ngày hôm nay tôi sẽ trình bày một vài kỹ thuật đơn giản để giúp website của bạn tải nhanh hơn. Đầu tiên, chúng ta cần biết preload, preconnect và prefetch là gì đã. Preload – Khi chúng ta sử dụng preload trong tag link, trình duyệt sẽ tiến hành tìm nạp sớm yêu cầu để có được tài nguyên mà website cần. Cái này được áp dụng chủ yếu vào các tài nguyên có mức độ ưu tiên cao trong phiên làm việc hiện tại, bất kể nó là tài nguyên thuộc hosting gốc hay của bên thứ ba …

Đọc thêm