Tối ưu tốc độ tải trang với Progressive rendering

Tối ưu tốc độ ứng dụng web luôn là một vấn đề hay và gây nhiều chú ý với các developer. Tốc độ tải trang web ảnh hưởng rất nhiều tới khách truy cập, website chậm đi sẽ làm giảm trải nghiệm người dùng và làm giảm hiệu quả của trang web. Có nhiều phương pháp để làm giảm tốc độ tải trang như:

• Tối ưu, giảm dung lượng truyền tải giữa serverside và browser
• Bật nén (Gzip)
• Sử dụng Browser caching
• Nén các tài nguyên cần thiết
• Nén ảnh trên web
• Sử dụng CDN

Các phương pháp trên tuy rất đơn giản nhưng mang lại hiệu quả rất lớn trong việc tối ưu tốc độ tải của trang web. Hôm nay mình sẽ giới thiệu một phương pháp "không mới" nhưng giường như đã bị lãng quên từ lâu, đó là sử dụng kỹ thuật Progressive rendering để làm giảm thời gian tải trang "thật", và thời gian tải trang "cảm nhận được". Trước khi bắt đầu thì mình có một số quy ước như sau:

• Thời gian tải trang thật(1): Là thời gian thật mà trình duyệt cần thiết để có thể tải và render toàn bộ nội dung, bao gồm html page, resource (js, css, fonts...)
• Thời gian tải trang cảm nhận được(2): Là thời gian mà người sử dụng website cảm nhận về việc tải trang, yếu tố này mang tính chủ quan của từng người truy cập và rất khó có thể đưa ra một cách chính xác để tính toán thời gian này.

"Thời gian tải trang cảm nhận được" có giá trị quan trọng không kém "Thời gian tải trang thật" bởi vì nó được phản ánh bởi nhận thức của người dùng. Nhận thức này thể hiện ở việc người dùng nhìn thấy toàn bộ hoặc một phần website hiển thị ra trong quá trình load.

Thử tưởng tượng bạn có một tác vụ cần xử lý trong một khoảng thời gian đủ dài, và người dùng phải chờ đợi để tác vụ của bạn hòan thành trước khi có thể thấy toàn bộ nội dung. Vấn đề đặt ra ở đây đó là đối với các website, phần lớn sẽ tồn tại những phần thành phần chung như Menu, Sidebar mà sẽ được cache hoặc có thời gian để lấy ra rất nhanh. Nếu có thể hiển thị trước các thành phần này thì sẽ giúp cung cấp cho người dùng tín hiệu rằng Chúng tôi vẫn đang tiếp tục xử lý công việc, đây là một số thứ chúng tôi đã xử lý xong, tuy nhiên vẫn còn nữa :D (loading indicator vẫn hiển thị), đồng thời sẽ tạo cho người dùng cảm giác rằng Nó vẫn load được; web hiển thị được một phần rồi, chắc sắp xong...

Ví dụ Không sử dụng Progressive rendering Sử dụng Progressive rendering Như demo trên hình thì rõ ràng là sử dụng Progressive rendering cho trải nghiệm tốt hơn nhỉ