Be Yours có khả năng giúp tải trang ban đầu nhanh hơn nhiều.
Trên trang này
Cơ chế
Thông thường, trình duyệt hiển thị hầu hết tất cả các thành phần trên một trang. Ngay cả khi bạn ở trên cùng thì những phần ở cuối trang vẫn có liên quan.
Nhưng không còn nữa, có một thuộc tính CSS mới trong thị trấn được gọi là content-visibility . Bạn có thể muốn bỏ qua những thuật ngữ phức tạp này. Để trực quan hóa, kỹ thuật này bỏ qua việc hiển thị các thành phần của trang cho đến khi chúng sắp xuất hiện trong chế độ xem của bạn. Khả năng này hiện đã được tích hợp vào Be Yours. Chúng tôi có thể yêu cầu trình duyệt trì hoãn công việc hiển thị của một số phân đoạn trang nhất định, chẳng hạn như các phần có bố cục nặng và chỉ hiển thị chúng khi chúng sắp hiển thị.
Trong bản demo của chúng tôi, việc áp dụng content-visibility cho các phần của trang chủ giúp tăng hiệu suất hiển thị gấp 5 lần khi tải lần đầu.
Ưu và nhược điểm
Rõ ràng, điều này giúp giảm chi phí hiển thị của các trang dài mà không làm gián đoạn tìm kiếm hoặc SEO trong trang. Hãy tưởng tượng rằng bạn có một cửa hàng dropshipping và nhiều phần trên trang chủ đại diện cho các sản phẩm hoặc bộ sưu tập; hoặc một loại cửa hàng trưng bày có trang đích chứa nhiều hình ảnh và kỹ thuật này có lợi cho những trường hợp này.
Tuy nhiên, kỹ thuật này cũng có những hạn chế và lỗi. Nếu cuộn trang, bạn sẽ thấy thanh cuộn xuất hiện khá lởm chởm, đó là nội dung trang tự điều chỉnh theo nội dung mới được hiển thị. Và bởi vì các phần tử không được hiển thị sẽ mất chiều cao trong bố cục, đôi khi bạn có thể thấy nội dung xuất hiện hơi chậm khi cuộn chuột.
Điều quan trọng cần lưu ý là kỹ thuật này không tương thích hoàn toàn. Hiện tại nó không được hỗ trợ trên Firefox và Inter Explorer:
