Tải trước

Tìm hiểu preload, prefetch và preconnect, cũng như cách tích hợp chúng vào WordPress

Bởi

Vài lời của người dịch: bộ ba nguyên tử này sẽ giúp chúng ta cải thiện vấn đề tốc độ website nhiều khi đáng kinh ngạc mà không tốn đồng xu cắc bạc nào. Dù cho nó có vẻ “high tech” thì tất cả những điều bạn cần nắm bắt là ý tưởng cơ bản, sau đó có thể dùng các công cụ hoặc mã mẫu sẵn có để áp dụng vào, rồi so sánh kiểm tra lại, được việc là ổn. Giờ chúng ta vào việc ngay nhé! Hôm nay chúng ta sẽ cùng tìm hiểu các biện pháp …

Đọc thêm

Code mẫu dns-fetch, preconnect, preload mỳ ăn liền

Bởi

Tôi từng có các bài viết chi tiết giải thích ý nghĩa & cách dùng dns-fetch, preconnect, preload. Tuy chúng cũng hay khi muốn tìm hiểu sâu, nhưng đối với trường hợp áp dụng vào thực tế mà khi bạn đã hiểu ý nghĩa cơ bản rồi thì các mã mẫu chuẩn sẽ tiện cho các bạn sử dụng hơn. Mỳ ăn liền không tốt cho sức khỏe nếu ăn thường xuyên, cơ mà thi thoảng chúng ta dùng một bữa thì cũng không sao. Mẫu cho dns-prefetch Bạn không cần thêm kiểu kết nối http hay https. DNS-prefetch chỉ …

Đọc thêm

Preload các yêu cầu quan trọng

Bởi

Khu vực cơ hội của Lighthouse bật cờ cảnh báo cho các yêu cầu ở cấp độ thứ ba trong chuỗi yêu cầu quan trọng của bạn như là một ứng cử viên tiềm năng có khả năng preload: Làm thế nào cảnh báo Lighthouse phát hiện các ứng cử viên cần preload? Giả sử chuỗi yêu cầu quan trọng trên trang của bạn trông giống như thế này: Tệp index.html của bạn khai báo <script src=”app.js”>. Khi app.js chạy, nó gọi fetch() để tải về styles.css và ui.js. Trang không thể hiển thị hoàn chỉnh cho đến khi 2 …

Đọc thêm

Trải nghiệm thực tế với link rel=preconnect, sử dụng Script tùy chỉnh bơm vào WebPageTest

Bởi

Vài lời của người dịch: Bài viết này minh họa cho một thực tế là không phải bạn cứ preconnect đến tất cả các tài nguyên của bên thứ ba là sẽ giúp trang của bạn tải nhanh hơn hoặc/và hiển thị nhanh hơn cho người dùng. Điều này là một lời cảnh tỉnh cho chúng ta, và preconnect cũng giống như mọi thứ khác, lạm dụng nó không hề tốt (ưu tiên mọi thứ, nghĩa là không có ưu tiên nào hết). Cách phòng tránh điều này là trước hết bạn phải xác định rõ những gì quan trọng …

Đọc thêm

Đoạn mã nhỏ dùng preconnect để tăng tốc trang nhúng video YouTube

Bởi

Phần này tôi sẽ không giải thích vì sao preconnect giúp tăng tốc nữa, vì đã có mấy bài viết bàn đến rồi. Tôi sẽ đi thẳng vào việc giải thích đoạn mã. Khi bạn nhúng video, YouTube sẽ tải một số thành phần sau: JS từ server gốc của YouTube và dĩ nhiên cả video nữa; Ảnh xem trước của video từ tên miền i.ytimg.com; Ảnh đại diện của kênh từ tên miền yt3.ggpht.com; Font tùy chỉnh Roboto từ tên miền fonts.gstatic.com. Mã mẫu: Đoạn mã trên phải được cho vào phần <header> và plugin SOGO (WordPress) sẽ giúp …

Đọc thêm

Thành lập các kết nối mạng sớm (preconnect) để cải thiện tốc độ website

Bởi

Trong bài viết này chúng ta sẽ cùng học cách sử dụng các kiểu gợi ý tài nguyên rel=preconnect và rel=dns-prefetch. Trước khi trình duyệt có thể yêu cầu một tài nguyên từ máy chủ, nó phải thành lập kết nối. Thành lập một kết nối bảo mật (secure connection) liên quan đến ba bước: Tìm kiếm tên miền và phân giải nó thành địa chỉ IP; Thiết lập kết nối tới máy chủ; Mã hóa kết nối đó để nó bảo mật. Trong từng bước trên trình duyệt gửi một phần dữ liệu tới máy chủ, và máy chủ …

Đọc thêm

Preload các tài nguyên quan trọng để tăng tốc độ website

Bởi

Khi bạn mở một trang web, trình duyệt sẽ gửi các yêu cầu tài liệu HTML đến máy chủ (server), phân tích nội dung của nó, và gửi các yêu cầu riêng cho bất kỳ nguồn tài nguyên nào được tham chiếu đến (referenced resource). Là người lập trình, bạn cần biết về tất cả các nguồn tài nguyên mà trang của bạn cần và cái nào trong số đó là quan trọng nhất (most important). Bạn có thể sử dụng hiểu biết đó để yêu cầu các tài nguyên quan trọng (critical resources) trước và qua đó giúp tăng …

Đọc thêm

So sánh preconnect, preload và prefetch

Bởi

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

Dự đoán prefetch giúp điều hướng truy cập nhanh hơn

Bởi

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

Prefetch là gì? Tìm nạp trước tài nguyên để tăng tốc các truy cập kế tiếp của người dùng

Bởi

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