Trong quá trình liên tục theo đuổi tốc độ trang, chúng ta thường thấy mình quay lại điểm cũ. Bất chấp nỗ lực của các nhóm sản phẩm, tiếp thị và tăng trưởng nhằm thúc đẩy các nhóm công nghệ, các nhiệm vụ có thể cải thiện hiệu suất trang web thường bị trì hoãn do nhu cầu tái cấu trúc và ngay cả khi hoàn thành, chúng không phải lúc nào cũng mang lại kết quả hoàn chỉnh. Trong chu trình này, sẽ rất hữu ích khi xem xét một số quan điểm sâu sắc về việc đạt được hiệu suất thực tế. Ví dụ: chúng ta có thể học được bài học gì từ tốc độ của React.js và Vue.js hoặc các tiện ích mở rộng SSR (kết xuất phía máy chủ) của chúng như Next.js và Nuxt.js so với các nền tảng khác? Đã đến lúc tối ưu hóa MB của tệp jQuery và CSS phải không? Khi nào các công ty lớn đang hy sinh hiệu suất web của họ cho các nhà phát triển front-end thiếu hiểu biết sẽ thức tỉnh? Hãy giải quyết từng câu hỏi một.
Tại sao các trang web dựa trên Next.js và Nuxt.js lại nhanh?
Nền tảng Next và Nuxt, là những cấu trúc thân thiện với SEO được xây dựng trên React và Vue, nổi bật về hiệu suất tốc độ. Nhưng tại sao những nền tảng này lại nhanh như vậy?
React.js và Vue.js là các khung dựa trên thành phần chia mỗi trang thành các thành phần phụ, như hiển thị bên dưới.
Hãy lấy một ví dụ thực tế để minh họa điểm này: một trang danh sách thương mại điện tử. Trang danh sách này có thể được coi là có các thành phần phụ sau:
- Tiêu đề
- Liệt kê
- Liệt kê thông tin nhập
- Tiêu đề trang
- Mẩu bánh mì
- Số lượng sản phẩm
- Lọc
- Thể loại lọc
- Bộ lọc giá
- ...
- Phân loại
- Thẻ sản phẩm
- Ảnh sản phẩm
- Chi tiết sản phẩm
- Tên sản phẩm
- Giá sản phẩm
- Giá gạch ngang
- Giá bán
- Tỷ lệ chiết khấu
- Thông tin chiến dịch
- Sự đánh số trang
- Nội dung danh mục
- Liệt kê thông tin nhập
- Footer
Khi tạo một ứng dụng dựa trên thành phần bằng Nuxt.js, mỗi thành phần này được mã hóa riêng biệt và được đưa vào trang chính. Ví dụ: hãy xem xét một tệp có tên ProductPhoto.js. Bất kỳ chức năng nào cần thiết cho ảnh sản phẩm (băng chuyền, hiển thị hình ảnh phản hồi, v.v.), mã JS đều được viết trong thành phần này. Tương tự, chỉ các tệp CSS được thành phần này sử dụng mới được đưa vào nó. Điều này có nghĩa là chỉ các tệp được yêu cầu bởi mỗi thành phần mới được thực thi nếu thành phần đó được sử dụng.
Quá trình này hiện được xử lý như thế nào trên hầu hết các nền tảng web?
Tệp script.js bao gồm mã cho mọi thứ từ thành viên, bộ lọc và trang giỏ hàng cho đến menu chạy trên tất cả các trang. Kết quả?
Các trang web có Tệp JS 3 MB và CSS 1.5 MB tài liệu. Vấn đề chính không chỉ là kích thước tệp mà thực tế là bạn không thể mong đợi CPU của thiết bị di động Android trung bình có thể thực thi hàng nghìn dòng mã trong vòng một phần nghìn giây. Bằng cách chỉ chạy mã bạn cần, bạn có thể đạt được hiệu suất tăng.
Làm cách nào để loại bỏ tài nguyên chặn kết xuất?
Ngày nay, 32% trong số 1 triệu trang web hàng đầu sử dụng thư viện phông chữ Font Awesome, trung bình khoảng 250 KB. Xem xét việc tải không đồng bộ không được ưu tiên do hiệu ứng nhấp nháy, hãy nghĩ xem có bao nhiêu phông chữ hiển thị trên màn hình đầu tiên của trang khi nó mở trên thiết bị di động hoặc máy tính để bàn. Một nghiên cứu ngắn trên 50 nền tảng khác nhau cho thấy trung bình có 3.4 biểu tượng được sử dụng (phổ biến nhất: giỏ hàng, người dùng, menu, thông báo). Do đó, để chỉ tải bốn biểu tượng mà không gặp vấn đề gì, chúng tôi tải toàn bộ thư viện.
Các khung JS nâng cao quản lý việc này như thế nào? Bằng cách chỉ nhập định dạng SVG của các biểu tượng được sử dụng trong thành phần có liên quan, loại bỏ nhu cầu tải toàn bộ thư viện phông chữ hoặc CSS.
Việc sử dụng Bootstrap so với React JS cho chúng tôi biết điều gì?
Thư viện Bootstrap JS có thị phần 26% trên tất cả các trang web trên toàn thế giới, trong khi mức sử dụng React là khoảng 4%. Bootstrap phổ biến vì tính linh hoạt và dễ sử dụng, cho phép phát triển nhanh chóng. Tuy nhiên, tính linh hoạt này phải trả giá: các hàm JS chung, phạm vi mã mở rộng và các hàm dành cho các tính năng mà bạn có thể không bao giờ sử dụng đều được đưa vào dự án của bạn.
Vì vậy, hãy hỏi: Mức sử dụng tăng hơn 100% từ 10,000 đến 1,000 trang web hàng đầu cho biết? Nó cho thấy rằng những người giỏi nhất đang biến các chi tiết thành lợi thế của mình để thậm chí còn tốt hơn.
Tóm lại, Thay vì viết lại trang web của chúng tôi bằng các công nghệ như Tiếp theo, Nuxt, Angular, React, Vue, v.v., chúng ta nên hiểu những công nghệ này giúp ích gì cho tốc độ và áp dụng những phương pháp hay nhất này cho các ứng dụng web của chúng ta.
