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 …
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ẽ …
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, …
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 …
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 …
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ủ …
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 …
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ó …
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 …
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 …