Đo đạc hiệu suất, tốc độ website bằng mô hình RAIL

Bởi

RAIL là mô hình hiệu suất, tốc độ trang lấy người dùng làm trung tâm (user-centric), mô hình này chia nhỏ trải nghiệm người dùng thành các hành động quan trọng (key action). Mục tiêu cũng như hướng dẫn của RAIL hướng đến là: giúp đỡ các nhà lập trình và người thiết kế đảm bảo được trải nghiệm của người dùng tốt nhất có thể cho từng hành động của họ (người dùng). Bằng cách xây dựng cấu trúc dựa trên tính toán kỹ lưỡng về hiệu suất, RAIL cho phép các nhà thiết kế và lập trình viên …

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

Sử dụng lazysizes để lazy load ảnh

Bởi

Lazy load là chiến lược trong đó người ta chỉ tải các tài nguyên mà người dùng cần, chứ không tải tất cả trước trong lượt tải đầu tiên. Cách tiếp cận này giải phóng cho các tài nguyên chưa cần thiết trong lần tải đầu tiên (initial page load) và tránh phải tải một số tài nguyên mà có thể người dùng sẽ không bao giờ sử dụng đến. Các ảnh ở dưới màn hình đầu tiên (offscreen*) trong lần tải đầu tiên là ứng cử viên lý tưởng để áp dụng kỹ thuật này. Thư viện có chất …

Đọc thêm

Giới thiệu thư viện lazysizes.js để lazy load ảnh (phần 2)

Bởi

Bạn đọc có thể tham khảo phần 1 về thư viện lazysizes ở đây. JS API lazysizes tự động nhận diện các phần tử mới với class lazyload, vì thế bạn không cần thực hiện lời gọi hoặc cấu hình bất cứ điều gì trong phần lớn trường hợp. JS API – các tùy chọn Các tùy chọn có thể được thiết lập bằng cách sử dụng tùy chọn cấu hình toàn cục qua khai báo bằng đối tượng có tên lazySizesConfig. Đối tượng này phải được định nghĩa trước đoạn mã của lazysizes. Dưới đây là ví dụ căn …

Đọc thêm

Giữ số lượng yêu cầu thấp và kích cỡ tải về nhỏ

Bởi

Lighthouse lập báo cáo cung cấp thông tin có bao nhiêu yêu cầu mạng (network requests) được tạo ra và bao nhiêu dữ liệu được lưu chuyển (data was transferred) trong khi trang của bạn tải về: Số lượng yêu cầu (Request) và Kích cỡ lưu chuyển (Transfer Size) cho hàng Total (tổng số) được tính toán bằng cách cộng giá trị của các hàng Ảnh (Image), JavaScript (Script), Font (chữ), Stylesheet (CSS), Các cái khác (Other), Tài liệu (Document), và Tài nguyên đa phương tiện (Media). Cột Third-party không được tính giá trị vào hàng Total. Mục đích là …

Đọc thêm

Ảnh JPEG progressive là gì? Nó giúp gì trong việc cải thiện trải nghiệm người dùng?

Bởi

Định dạng ảnh JPEG là một trong các định dạng ảnh phổ biến nhất trên thế giới web (các định dạng còn lại gồm PNG, GIF, SVG). Định dạng JPEG thường được sử dụng cho các ảnh phức tạp, nhiều màu sắc, thí dụ như ảnh chụp thiên nhiên, con người. Đặc tả của JPEG bao gồm một loạt các phần mở rộng hợp lệ, tuy nhiên phổ biến nhất vẫn là .jpg và .jpeg Không thành vấn đề đuôi mở rộng là gì, tất cả các ảnh JPEG sẽ được đối xử ít nhiều giống nhau, mặc dù không …

Đọc thêm

Giới thiệu LQIP – Ảnh giữ chỗ chất lượng thấp

Bởi

Với lời của người dịch (1): LQIP giống cầu thủ dự bị, ảnh chất lượng cao giống như cầu thủ chính. Khi bạn sử dụng lazy load ảnh, nếu ảnh chất lượng cao chưa kịp tải, LQIP là cách xoa dịu người dùng, giống như cầu thủ dự bị là giải pháp tình thế khi cầu thủ chính bị chấn thương, tuy chơi không hay bằng nhưng còn hơn là thi đấu thiếu người. LQIP kết hợp với tải trước ảnh khi nó đi vào khung nhìn trình duyệt (viewport) là bộ đôi hoàn hảo khi bạn muốn triển khai …

Đọc thêm

Giới thiệu thư viện lazysizes.js để lazy load ảnh (phần 1)

Bởi

Vài lời của người dịch: Nhờ bài viết về cách lazy load ảnh và video (có nội dung rất căn bản) tôi biết đến công cụ lazysizes.js (của tác giả có nickname aFarkas), nó được khen ngợi nhiều (rất hay được nhắc tên trong các tài liệu hướng dẫn tăng tốc của Google), do đó tôi quyết định đầu tư thời gian tìm hiểu. Vì bài khá dài nên được chia làm ba phần. Một lần nữa thì bài viết dạng này chỉ dành cho những ai muốn đào sâu về lazy load và có ý muốn triển khai trên …

Đọc thêm

Giới thiệu thư viện lazysizes.js để lazy load ảnh (phần 3)

Bởi

Bạn có thể xem phần 1 về lazySizes ở đây: kiencang.net/lazysizes-js-lazy-load-anh-p1/ Còn đây là phần 2: kiencang.net/lazysizes-js-lazy-load-anh-p2/ Trình duyệt hỗ trợ lazysizes hỗ trợ tất cả các trình duyệt mà có hỗ trợ document.getElementsByClassName (= tất cả trình duyệt ngoại trừ IE8). Trong trường hợp bạn cần hỗ trợ IE8, hãy xem tiện ích mở rộng noscript (hoặc sử dụng một mẫu điều chỉnh cho noscript hoặc mẫu LQIP). Các plugin hỗ trợ Bạn nên kết hợp (concat) tất cả plugin cùng với lazySizes. Trong trường hợp bạn không concat thì lời khuyên là hãy để các đoạn mã của …

Đọc thêm