Javascript: Tăng tốc độ tải trang như thế nào?

Có rất nhiều yếu tố làm chậm website của bạn, một trong số đó là site của bạn phải tải quá nhiều Javascript code. Sau đây là một số tip để chúng ta xem xét tối ưu trang thêm nhanh hơn, và SEO tốt hơn.

Để load trang nhanh thì hãy load những JS cần cho trang hiện tại

Ưu tiên load lên trang web những gì user cần, tránh load quá dư thừa JS. Ví dụ khi load trang home thì chỉ nên load JS thuộc về trang đó, không nên load thêm những trang khác như trang about, contact, … Với kỹ thuật code-spliting và chia code dựa trên route sẽ giúp tăng tốc thời gian tương tác giữa trang web và người dùng rất nhiều

Tối ưu bundle size cho cả mobile và desktop

Bạn nên hạn chế tối đa kích thước của các file js. Sử dụng library, các third party có mục đích rõ ràng, tránh quá lạm dụng công nghệ và làm những bundle file phình to.

• Ưu tiên cải thiện thời gian “Time-to-interactive”
• Nếu client-side rendering JS quá chậm và ảnh hưởng xấu tới trải nghiệm người dùng, liệu bạn có nên cân nhắc sử dụng server-rendering hay giảm bớt những thư viện đang dùng.

Trang web của bạn có đang bị load quá nhiều JS dư thừa?

Tôi nghĩ rằng việc load dư thừa JS là không thể tránh khỏi và mục tiêu của chúng ta là cản thiện nó qua từng ngày. Khi mà user truy cập vào trong web của bạn, sau khi trang index.html và JS được tải lên, browser cần một khoảng thời gian để compile, parse, thực thi JS vẽ nên trang web.

Javascript là một trong những thành phần chính làm chậm trang web của chúng ta. Bạn nên nhớ 1KB image không bao giờ bằng 1KB của Javascript. Vì đơn giản JS là code cần thời gian để đọc và thực thi, quá trình này do CPU đảm nhận. Đối với những thiết bị low-end như mobile thì việc compile và thực thi JS cũng khá xa xỉ!

Có một số JS mà đa số website ngày nay thường dùng là:

• Framework như Angular, Vuejs hay UI library như React
• State Management như Redux
• Pollyfill để hỗ trợ những trình duyệt cũ
• Thư viện bên thứ ba như moment, lodash, …
• Bootstrap, Material UI, …

Javascript thực sự làm tiêu tốn CPU và Bandwidth của network cho nên bạn hãy chọn lọc load những JS cần thiết, chọn những library nhẹ nhàng, tránh lạm dụng sử dụng những thứ không cần thiết.

Khi mà website của bạn load nhanh hơn(<= 3 s là tốt) thì bạn sẽ giữ chân được nhiều user hơn, tăng trải nghiệm của họ và tăng tốc độ tìm kiếm trên Google hơn(SEO).