Total Blocking Time (TBT) là gì?

Bởi

Total Blocking Time (TBT) là chỉ số quan trọng, lấy người dùng làm trung tâm, dùng để đo khả năng đáp ứng tải (load responsiveness), vì nó giúp định lượng mức độ nghiêm trọng của khoảng thời gian từ khi trang không có khả năng tương tác đến khi có khả năng tương tác ổn định (reliably interactive)- TBT thấp giúp đảm bảo trang nhanh chóng sử dụng được. 1. TBT là gì? Chỉ số Total Blocking Time đo tổng lượng thời gian giữa First Contentful Paint (FCP) và Time To Interactive (TTI) khi mà luồng chính (main thread) bị …

Đọc thêm

Tải JavaScript của bên thứ ba hiệu quả hơn

Bởi

Hàng ngoại thì thường chất lượng cao rồi, nhưng đôi khi thuế má vào cũng không ít. Bài viết này sẽ giúp bạn tránh được các cạm bẫy khi sử dụng JavaScript của bên thứ ba (third-party) để cải thiện thời gian tải (load time) và trải nghiệm người dùng (user experience). Nếu JavaScript từ bên thứ ba làm chậm tốc độ tải trang của bạn, bạn có hai lựa chọn để cải thiện tốc độ, hiệu suất: Loại bỏ nó, nếu nó không giúp tạo ra giá trị rõ ràng cho trang. hoặc Tối ưu hóa quá trình tải. …

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

Tăng tốc mua hàng trên eBay.com

Bởi

Vài lời của người dịch: Tối ưu hóa trang thương mại điện tử khó khăn hơn các trang báo điện tử thông thường. Nguyên nhân ở chỗ trang thương mại điện tử có thể có nhiều tính năng đa dạng, đòi hỏi cá nhân hóa, bảo mật, cũng như yêu cầu tính động cao hơn so với trang báo điện tử vốn có thể cache tĩnh phần lớn nội dung. Một nguyên nhân khác khiến người ta phải cẩn trọng hơn: sai lầm khi tiến hành tối ưu hóa trên trang thương mại điện tử có thể phải trả cái …

Đọc thêm

Cẩn thận với font tùy chỉnh: lợi thì có lợi nhưng…

Bởi

Vì yêu cầu thẩm mỹ, nhiều website sử dụng font tùy chỉnh, tức là file font tải từ bên thứ ba hoặc chính hosting của website để làm font chữ cho trang. Font tùy chỉnh thường sử dụng CSS có tên @font-face. Trong khi việc sử dụng thích hợp font tùy chỉnh chắc chắn đem đến hiệu quả thẩm mỹ ít nhiều, thì cái giá phải trả cho nó cũng không hề nhỏ: Các font tùy chỉnh thường có dung lượng khá lớn, 50 – 100 KB không phải là chuyện hiếm. Font tùy chỉnh làm gia tăng request, sẽ …

Đọc thêm

Giảm thời gian thực thi JavaScript

Bởi

Khi JavaScript mất nhiều thời gian thực thi, nó sẽ làm chậm hiệu suất, tốc độ của trang theo một số cách: Mạng: Nhiều byte hơn đồng nghĩa với thời gian tải dài hơn. Phân tích cú pháp và biên dịch: Phân tích cú pháp và biên dịch diễn ra trong luồng chính. Khi luồng chính bận rộn, trang không thể phản hồi đầu vào của người dùng. Thực thi: JavaScript cũng được thực thi trong luồng chính. Nếu trang của bạn chạy rất nhiều mã trước khi nó thực sự cần, điều đấy làm trì hoãn Time To Interactive, …

Đọc thêm

First Input Delay (FID) là gì?

Bởi

Vài lời của người dịch: FID là điều không thể tránh, khi người dùng thực hiện tương tác trong khi trình duyệt đang bận rộn tải trang về và thực hiện các hành động theo hướng dẫn (thường là JavaScript), buộc nó phải trì hoãn các yêu cầu tương tác khác. FID trở nên quan trọng vì nó là ấn tượng đầu tiên của người dùng về chuyện tương tác với trang. Trong khi FID không thế tránh, thì dĩ nhiên chúng ta nên tìm cách giảm giá trị này xuống càng nhỏ càng tốt. OK, giờ chúng ta bắt …

Đọc thêm

Tải thích ứng (Adaptive loading): cải thiện hiệu suất, tốc độ web trên các thiết bị chậm

Bởi

Vài lời của người dịch: Bài viết này chứa nhiều thông tin kỹ thuật, mà để thành thạo thì chúng ta phải thực hành đào sâu nhiều. Nhưng về ý tưởng căn bản thì rất dễ hiểu. Bạn phải nắm bắt được thông tin phần cứng của thiết bị (RAM, CPU) và tốc độ kết nối mạng của người dùng để đưa ra được phiên bản ứng dụng web phù hợp với các điều kiện đó, nhằm giúp trải nghiệm là tốt nhất trong khả năng có thể. Trong bài viết này bạn sẽ học cách đảm bảo rằng: mọi …

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

Largest Contentful Paint (LCP) là gì?

Bởi

Largest Contentful Paint (LCP) là một chỉ số quan trọng, đặt người dùng vào trung tâm (user-centric) để đo đạc tốc độ tải nhận thức (perceived load speed), bởi vì nó đánh dấu thời điểm trong timeline* tải trang khi mà nội dung chính (main content) của trang có khả năng đã tải xong- “LCP nhanh” giúp trấn an người dùng rằng trang là hữu ích (vì họ sớm biết nội dung lớn nhất trên trang là gì). (*): timeline là kiểu chuỗi quá trình diễn ra sự kiện, giống như lịch biểu. Lưu ý của người dịch: nội dung …

Đọc thêm