Tốc độ website là gì?

Bởi

Vâng, rõ ràng tốc độ website rất quan trọng, nhưng chính xác thì ý của chúng ta là gì? Có một trang web tải nhanh có nghĩa là như thế nào? Chúng ta hay nghe mọi người nói rằng website của họ được tải trong x,y, z giây hoặc tương tự, nhưng load-tải trang không phải là khoảnh khắc duy nhất trong chuỗi thời gian trải nghiệm; kinh nghiệm cho thấy không một chỉ số riêng lẻ nào có thể có được cái nhìn toàn cảnh về hiệu suất, tốc độ. Có nhiều khoảnh khắc trong suốt trải nghiệm có …

Đọc thêm

Time To Interactive (TTI) là gì?

Bởi

Time To Interactive (TTI) là một trong sáu chỉ số được theo dõi trong khu vực Performance của báo cáo Lighthouse. Mỗi chỉ số nắm bắt một số khía cạnh của tốc độ tải trang. Đo đạc chỉ số TTI (Thời điểm tương tác) là quan trọng bởi vì một số trang có khả năng tối ưu hiển thị nội dung tốt nhưng lại phải hy sinh khả năng tương tác. Điều này có thể gây bực bội cho trải nghiệm của người dùng, nó kiểu như thế này: Trang web đã hiện ra đây rồi, nhưng khi người dùng …

Đọc thêm

First Contentful Paint (FCP) là gì?

Bởi

First Contentful Paint (FCP / Hình ảnh có nội dung đầu tiên) là một trong sáu chỉ số được theo dõi, nằm trong khu vực Performance / hiệu suất của báo cáo Lighthouse. Mỗi chỉ số nắm bắt một số khía cạnh về tốc độ tải trang. Lighthouse trình bày FCP dưới dạng giây: Cách đo FCP FCP đo khoảng thời gian trình duyệt cần bỏ ra để render phần đầu tiên thuộc nội dung DOM sau khi người dùng điều hướng đến trang của bạn. Các ảnh, các phần tử <canvas> non-white, và SVG trên trang của bạn được …

Đọ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

Sử dụng preconnect để gửi yêu cầu trước cho server gốc bên ngoài

Bởi

Khu vực báo cáo opportunites (cơ hội) của Lighthouse liệt kê tất cả các yêu cầu (request) quan trọng nhất mà hiện vẫn chưa được ưu tiên tìm nạp với thẻ <link rel=preconnect>: Nguyên văn: Yêu cầu preconnect tới máy chủ bên ngoài (không phải tài nguyên thuộc hosting gốc của bạn). Xem xét thêm gợi ý tài nguyên kiểu ‘preconnect’ hoặc ‘dns-prefetch’ để sớm thiết lập các kết nối quan trọng với tài nguyên của bên thứ ba (third-party). URL: chỉ đến tài nguyên của bên thứ ba. Potentical Saving: chỉ đến lượng thời gian có khả năng tiết …

Đọc thêm

Giúp website tải nhanh hơn với preconnect (tăng tốc video, font, vân vân)

Bởi

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

Cải thiện tốc độ website bằng cách sử dụng preload, preconnect, prefetch

Bởi

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