Điều thứ hai tạo ra một câu chuyện có khả năng thú vị hơn — nhưng nó cũng là một trải nghiệm người dùng cực kỳ khó chịu. Người dùng sẽ không chỉ tránh quay lại trang web đó nếu có thể mà còn cảnh báo bạn bè của họ về điều đó.
Là nhà phát triển trang web, thách thức lớn nhất của bạn là đảm bảo rằng trang web của bạn hiển thị tất cả thông tin cần thiết để hiển thị cho người dùng của bạn ngay lập tức. Tối ưu hóa hình ảnh là một cách để cải thiện tốc độ tải trang, nhưng chỉ thế thôi là chưa đủ. Bạn cũng phải đào sâu vào mã của mình và tối ưu hóa JavaScript của mình. Trong hướng dẫn này, chúng tôi chỉ cho bạn cách
Tại sao bạn nên tối ưu hóa JavaScript của mình
Nhìn nó theo cách này. Theo mặc định, một trang web trống không có phần tử nào được thêm vào hoặc không có mã là trang web nhanh nhất với điểm hiệu suất 100/100. Nhưng nhiều người trong chúng ta không muốn có một trang web đơn giản. Chúng tôi muốn tạo các trang web phức tạp, không tầm thường và trải nghiệm tương tác phong phú cho người dùng của chúng tôi. Tất cả các nội dung được thêm vào này đều ảnh hưởng đến tài nguyên của người dùng, từ CPU và GPU đến bộ nhớ và mạng
Tuy nhiên, khi bạn bắt đầu thêm các yếu tố vào trang web của mình, bạn sẽ thấy tác động đến hiệu suất. Mọi tập lệnh của bên thứ ba, từ thử nghiệm A/B của bạn đến phân tích đến tiện ích con, cộng với mã bên thứ nhất của riêng bạn, sẽ có chi phí hiệu suất. (Nếu chúng ta đã sử dụng tiện ích chatbot trên Builder. io chính xác ở trạng thái mặc định, chúng tôi đã mất 50 điểm hiệu suất. )
Một điểm rút ra từ điều này là mã của bạn càng gọn và nhẹ thì chạy càng nhanh. Nhưng bạn càng thêm nhiều JavaScript không được tối ưu hóa thì hiệu suất sẽ càng giảm. Điều này có nghĩa là các trang web nặng nề, chậm chạp chiếm. Và đây là lý do tại sao điều này quan trọng. Nghiên cứu cho thấy rằng 10 giây là giới hạn để thu hút sự chú ý của người dùng.
Chi phí của JavaScript không được tối ưu hóa
Chúng tôi đưa một số trang web hàng đầu vào công cụ Thông tin chi tiết về hiệu suất của mình (dùng thử miễn phí. ) và phần lớn, việc tối ưu hóa JavaScript mang lại mức tăng điểm hiệu suất hơn 50 điểm. JavaScript là thủ phạm lớn nhất đằng sau các trang web chậm và việc tối ưu hóa JavaScript chắc chắn sẽ có tác động lớn nhất đến việc tăng tốc trang web của bạn
Đây là những gì bạn sẽ mất nếu mã của bạn không được tối ưu hóa để tải trang nhanh hơn.
Kinh nghiệm người dùng. Tối ưu hóa JavaScript là một bước bạn tuyệt đối không thể bỏ qua nếu muốn đảm bảo trải nghiệm người dùng tích cực. Trang web chậm dẫn đến trải nghiệm kém, khiến người dùng rời đi. Nếu bạn muốn người dùng ở lại trang web của mình lâu hơn, trang của bạn phải tải dưới 3 giây, theo Google. Nếu thời gian tải trang của bạn tăng từ 1 giây lên 3 giây, thì có 32% khả năng người dùng thoát trang
chuyển đổi. Hiệu suất trang web kém có tác động trực tiếp đến chuyển đổi. Đặc biệt với người dùng truy cập trang web trên thiết bị di động của họ, chưa bao giờ việc cải thiện hiệu suất trang web của bạn lại quan trọng hơn lúc này. Đối với mỗi giây chậm trễ trong thời gian tải của trang, chuyển đổi sẽ giảm 20%
Điều này thậm chí còn trở nên quan trọng hơn đối với các trang web bán lẻ và thương mại điện tử, nơi trải nghiệm của người dùng trên trang web dẫn đến thời gian sử dụng nhiều hơn, thậm chí có thể dẫn đến mua hàng và chi nhiều tiền hơn. Nói cách khác, việc tối ưu hóa trang web của bạn để tải nhanh hơn có ảnh hưởng trực tiếp đến doanh thu. Deloitte nói rằng chỉ là 0. Cải thiện tốc độ trang web trong 1 giây giúp tăng thêm 8% chuyển đổi và tăng 9% giá trị đơn hàng trung bình trong bán lẻ
SEO. Có nhiều yếu tố ảnh hưởng đến SEO và hiệu suất trang web là một trong những yếu tố chính. Hiệu suất trang web của bạn ảnh hưởng đến xếp hạng của nó trong kết quả tìm kiếm và do đó, lượng lưu lượng truy cập không phải trả tiền mà nó nhận được. 51% lưu lượng truy cập không phải trả tiền vào trang web của bạn đến từ các tìm kiếm trực tuyến. Và hơn thế nữa, trung bình, hơn 40% doanh thu đến từ tìm kiếm không phải trả tiền và 91. 5% người tìm kiếm kết thúc trên một trong những kết quả của trang đầu tiên.
Cách tối ưu hóa JavaScript
Một trang web được tối ưu hóa hoàn toàn sẽ tải nhanh và hoạt động tốt, bất kể thiết bị, chất lượng mạng hay khả năng của trình duyệt. Dưới đây là một vài thực tiễn tốt nhất được chấp nhận rộng rãi
Giảm JavaScript trong mã của bạn
Khi bạn gửi quá nhiều byte JavaScript, trang của bạn sẽ tải lâu hơn — và điều này trở nên tồi tệ hơn khi mạng của người dùng của bạn chậm hơn.
Để giảm thiểu các chi phí hiệu suất liên quan đến mạng này, các nhà phát triển có thể
- Chỉ gửi mã mà người dùng cần thông qua phân tách mã để phân tách những gì quan trọng và những gì không, cũng như các thành phần lười tải không quan trọng trong kết xuất
- Giảm thiểu JavaScript
- Nén JavaScript bằng gzip
- Xóa mã không sử dụng
- Bộ nhớ đệm HTTP, bộ nhớ đệm Service Worker và bộ nhớ đệm dài hạn để giảm các chuyến mạng
Điều này cũng liên quan đến việc trì hoãn tải các phần tử không cần thiết cho lần tải trang đầu tiên. Ví dụ: các thành phần trong màn hình đầu tiên có thể được tải trước và các thành phần dưới màn hình đầu tiên có thể bị hủy ưu tiên cho đến khi người dùng cuộn. Có thứ tự tải phù hợp là rất quan trọng để giảm thiểu số lượng thao tác và có tác động trực tiếp đến sự tập trung của người dùng
Giảm chi phí phân tích cú pháp/biên dịch và thực thi JavaScript
Như Tom Dale đã nói, JavaScript tốn kém hơn để trình duyệt xử lý so với hình ảnh hoặc Phông chữ web có kích thước tương đương. Mặc dù việc xử lý các hình ảnh lớn, không được tối ưu hóa vẫn đi kèm với nhiều chi phí liên quan, nhưng nó không cản trở luồng chính hoặc ngăn các giao diện tương tác. Tuy nhiên, JavaScript có thể tác động tiêu cực đến tính tương tác của trang
Như tôi đã nói trước đây, trung bình một trang web mất 14 giây để tương tác. 4 giây trong số đó dành cho việc phân tích cú pháp và biên dịch JavaScript đơn giản, điều này làm chậm đáng kể khả năng tương tác của người dùng với trang web của bạn. Không phải tất cả người dùng của bạn đều có tốc độ mạng tuyệt vời và thiết bị di động cao cấp, nhanh chóng. Và người dùng có kết nối mạng tốt chưa chắc đã có điện thoại nhanh và ngược lại. Một điện thoại trung bình mất 2-5 lần so với điện thoại nhanh nhất trên thị trường để phân tích và biên dịch mã. Việc tìm nạp và xử lý JavaScript cũng như các tài nguyên khác cũng cần có thời gian, điều đó có nghĩa là người dùng có thể phải đợi một lúc trước khi trang trở nên tương tác.
Để giải quyết các chi phí này, điều quan trọng là phải xóa mọi JavaScript không quan trọng khỏi các trang của bạn. Điều này có thể giúp giảm thời gian truyền, phân tích cú pháp/biên dịch sử dụng nhiều CPU và chi phí bộ nhớ tiềm năng. Điều này cũng giúp trang của bạn tương tác nhanh hơn. Một giải pháp tuyệt vời khác là sử dụng nhân viên web. Nhân viên web cho phép bạn thực hiện các tác vụ sử dụng nhiều bộ xử lý trong luồng nền, vì vậy luồng chính của bạn vẫn không bị chặn
Sau khi phân tích/biên dịch mã, đã đến lúc thực thi. Điều này xảy ra trong chuỗi chính và thêm một số thời gian quý báu trước khi người dùng của bạn có thể tương tác với trang web. Khi luồng chính bị chặn, trang web sẽ không phản hồi trong toàn bộ thời gian tải xuống, phân tích cú pháp/biên dịch và chạy mã. Một cách để giảm thời gian này là chia mã thành các phần nhỏ hơn để thực thi nhanh hơn. Một phương pháp khác được khuyến nghị là đặt nội tuyến JavaScript trong HTML, giúp tăng tốc độ tải trang một cách đáng kể. Tuy nhiên, quá nhiều JavaScript có thể làm cho các tệp HTML quá lớn.
Tại sao bạn nên xem xét các giải pháp tự động để tối ưu hóa JavaScript
Có một số phương pháp hay nhất truyền thống hơn những phương pháp được khám phá ở trên. Khi bạn tối ưu hóa mã, bạn phải đảm bảo rằng chỉ những phần quan trọng và có tác động lớn mới được tối ưu hóa để tránh lãng phí thời gian và tài nguyên vào việc tối ưu hóa các thành phần không quan trọng. Điều này có thể được đo lường thông qua tác động đến hiệu suất tổng thể. Làm thủ công rất phức tạp và tốn thời gian
Không chỉ vậy, JavaScript được tối ưu hóa khiến mã phức tạp hơn và giảm đáng kể khả năng đọc. Nói cách khác, việc duyệt, duy trì và gỡ lỗi mã được tối ưu hóa trở nên khó khăn hơn. Thách thức lớn nhất là duy trì sự cân bằng tinh tế giữa khả năng đọc và tối ưu hóa
Nhưng ngay cả với những nhược điểm này, việc tối ưu hóa JavaScript vẫn rất quan trọng. Đây là nơi các giải pháp tự động mới hơn tạo nên sự khác biệt.
Tối ưu hóa JavaScript của bên thứ nhất để có hiệu suất tối đa
Viết mã JavaScript tốt, rõ ràng bằng cách sử dụng các hàm nhỏ hơn và mã có thể tái sử dụng cuối cùng là giải pháp hiệu quả nhất, nhưng nói thì dễ hơn làm. Ngoài ra, một số khung JavaScript như React có thể đắt về hiệu suất
Cách tốt nhất để giảm các chi phí hiệu suất này là loại bỏ càng nhiều JavaScript càng tốt khỏi mã của bạn.
Các giải pháp
Theo thứ tự tác động tăng dần, các giải pháp này làm giảm JavaScript trong mã của bạn
⭐️ Hiệu quả. thiên văn
Astro là trình tạo trang web tĩnh mã nguồn mở, miễn phí cho phép bạn soạn trang web của mình bằng cách sử dụng các thành phần giao diện người dùng từ khung web JavaScript yêu thích của bạn (React, Svelte, Vue, v.v.). Astro kết xuất toàn bộ trang web của bạn thành HTML tĩnh trong quá trình xây dựng, dẫn đến một trang web hoàn toàn tĩnh với tất cả JavaScript đã bị xóa khỏi trang cuối cùng. Khi một thành phần cần một số JavaScript phía máy khách (e. g. , băng chuyền hình ảnh), Astro chỉ tải một thành phần đó (và bất kỳ phần phụ thuộc nào), phần còn lại của trang web ở dạng HTML tĩnh, nhẹ. Mặc dù Astro đơn giản và dễ di chuyển nhưng đây không phải là giải pháp tốt nhất cho các ứng dụng phức tạp hơn
⭐️ ⭐️ Hiệu quả hơn. Marko
Marko là một thư viện giao diện người dùng sử dụng các kỹ thuật biên dịch nâng cao để giảm lượng JavaScript bạn cần tải trên trang web của mình. Đó là ngôn ngữ khai báo, dựa trên HTML với khả năng kết xuất liên tục, hydrat hóa một phần, trình biên dịch tối ưu hóa và giảm thời gian thực hiện. Nó cho phép bạn viết mã sau khi được tối ưu hóa cho cả máy chủ và trình duyệt. Mặc dù nó hiệu quả hơn Astro, nhưng nó không loại bỏ hoàn toàn JavaScript khỏi mã của bạn
⭐️ ⭐️ ⭐️ Hiệu quả nhất. Qwik
Qwik loại bỏ tất cả JavaScript khỏi lần tải trang đầu tiên, chỉ tải chậm khi cần thiết. Rất giống với các khung web khác ở cấp độ cao, Qwik hiển thị một cây các thành phần dẫn đến một ứng dụng tương tác. Mục tiêu của Qwik là chỉ tải xuống và thực thi phần tối thiểu của ứng dụng. Các chiến lược chính của nó bao gồm trì hoãn thực thi và tải xuống Javascript càng lâu càng tốt và tuần tự hóa trạng thái thực thi của ứng dụng và khung trên máy chủ và tiếp tục nó trên máy khách. Đó là mã nguồn mở và được duy trì bởi Builder
Loại bỏ các vấn đề về hiệu suất khỏi tập lệnh của bên thứ ba
Tập lệnh của bên thứ ba như trình theo dõi pixel, thử nghiệm A/B, quảng cáo, tiện ích con, CDN, v.v. , là những nguyên nhân lớn nhất làm chậm thời gian tải trang. Tập lệnh của bên thứ ba, là mã được nhúng trong trang web của bạn, cạnh tranh với mã của chính bạn để giành lấy luồng chính của trình duyệt, làm chậm quá trình hiển thị nội dung.
Theo Nguyên tắc cơ bản về web của Google, tập lệnh của bên thứ ba có thể gây ra một số vấn đề bao gồm
- Quá nhiều yêu cầu mạng đến nhiều máy chủ
- Gửi quá nhiều JavaScript
- Phân tích cú pháp và thực thi tập lệnh sử dụng nhiều tài nguyên
- Bộ nhớ đệm HTTP không đủ
- Thiếu máy chủ nén đủ tài nguyên
- Chặn hiển thị nội dung cho đến khi chúng hoàn tất quá trình xử lý
- Sử dụng các API kế thừa (e. tài liệu g. write()) được biết là có hại cho trải nghiệm người dùng
- Quá nhiều phần tử DOM hoặc bộ chọn CSS đắt tiền
Điều này trở nên đặc biệt quan trọng đối với các trang web thương mại điện tử và thị trường trực tuyến cần các tập lệnh của bên thứ ba này để điều hành doanh nghiệp của họ
Giải pháp. phố tiệc tùng
Partytown là một giải pháp nguồn mở nhẹ giúp giảm độ trễ thực thi do JavaScript của bên thứ ba bằng cách giảm tải các tập lệnh của bên thứ ba cho nhân viên web chạy trong các luồng nền. Điều này giải phóng luồng chính của trình duyệt để chạy mã của riêng bạn. Nó được duy trì bởi Builder. io và hiện đang trong giai đoạn thử nghiệm.
Đơn giản hóa tối ưu hóa JavaScript cho cả nhà phát triển và người không phải là nhà phát triển
Bạn có thể bao quát nhiều lĩnh vực chỉ với các giải pháp như Qwik và Partytown. Tuy nhiên, các giải pháp như Partytown hoạt động tốt nhất với các tập lệnh phụ trợ và không được xây dựng cho các tập lệnh hiển thị quan trọng như cá nhân hóa, thử nghiệm A/B, tạo cửa sổ bật lên và trang đích, v.v. , trong khi vẫn giữ JavaScript ở mức tối thiểu. Một số tập lệnh hiển thị quan trọng, khi được thực hiện kém, được biết là sẽ phá vỡ các khung JavaScript và trở nên khó gỡ lỗi. Các tập lệnh này cần được cung cấp từ CDN ngay lập tức. Tuy nhiên, việc xếp lớp tất cả các công cụ nặng JavaScript này được cắm trực tiếp vào trình duyệt dẫn đến tốc độ trang web chậm chạp và người dùng phải chờ tải nhiều thứ trước khi họ có thể xem và tương tác với trang web
Với các giải pháp phát triển chuyên sâu dựa trên API, luôn có áp lực về sự phụ thuộc của nhà phát triển. Hãy tưởng tượng một công việc tồn đọng kéo dài hàng tháng trời, với mỗi bản cập nhật cho trang web đều yêu cầu các nhà phát triển viết mã cứng. Điều này có thể cực kỳ tốn thời gian và gây khó chịu cho cả nhà phát triển cũng như những người không phải là nhà phát triển muốn có thể thay đổi trang web chỉ bằng một vài cú nhấp chuột
Các công cụ dựa trên API có thể kết hợp được như Builder. io tự động hóa mã hóa bằng cách sử dụng các phương pháp hay nhất. Builder tạo ra các tiêu chuẩn cao về hiệu suất, tối ưu hóa JavaScript, v.v. , mặc định, trong khi vẫn giữ được tính đơn giản và dễ sử dụng, phục vụ tốt cho cả nhà phát triển và người không phải là nhà phát triển. Builder cũng tích cực phân tách mã và đảm bảo khi tải một trang hoặc thành phần chỉ bao gồm Javascript cần thiết tuyệt đối. Builder phục vụ Javascript được rút gọn, gzipped và deduped và tương tự như một số giải pháp khác được liệt kê ở trên, có thể phân phối nội dung dưới dạng HTML rất nhẹ và tải bất kỳ JavaScript bổ sung nào cho các phần tử tương tác được ngậm nước sau khi tải lần đầu.
Tối ưu hóa JavaScript là trọng tâm để duy trì thời gian tải trang nhanh, mang lại trải nghiệm tuyệt vời cho người dùng, tăng các cuộc trò chuyện và thúc đẩy SEO. Có một số giải pháp truyền thống, đã được thử và kiểm tra giúp nhà phát triển tối ưu hóa mã của họ, nhưng các giải pháp tự động mới hơn có thể thực hiện công việc nặng nhọc, giúp bạn tiết kiệm thời gian và tài nguyên để tập trung vào công việc quan trọng hơn. Để bắt đầu với việc tối ưu hóa JavaScript, cải thiện hiệu suất và nâng cao trải nghiệm người dùng trên trang web của bạn, hãy thử kết nối trang web của bạn với công cụ Thông tin chi tiết về hiệu suất của chúng tôi.
Xây dựng trực quan với các thành phần của bạn
Người xây dựng. io là một Visual CMS cho phép bạn kéo và thả để tạo nội dung trên trang web của mình một cách trực quan, sử dụng các thành phần của bạn