Chúng tôi sẽ cho bạn thấy quá nhiều JavaScript ảnh hưởng đến hiệu suất trang của bạn như thế nào và cách giải quyết vấn đề này
Tổng quan
Như bạn có thể đã biết, ngày nay JavaScript là một phần không thể thiếu của mọi trang web
Hãy nghĩ về những điều sau đây
- Thanh trượt/băng chuyền chuyển đổi hình ảnh cứ sau vài giây
- Trình phát video phát video YouTube
- Quảng cáo nhúng
- Phân tích/trình theo dõi
- và nhiều hơn nữa…
Tất cả những điều trên đều sử dụng JavaScript để đạt được chức năng mong muốn
Mặc dù việc sử dụng JavaScript tiếp tục tăng, nhưng các hình phạt về hiệu suất của nó thường bị bỏ qua khi chủ sở hữu trang web cố gắng có nhiều chức năng trang web hơn và trang web đẹp hơn
Trong bài viết này, chúng tôi sẽ giải thích những cạm bẫy của việc sử dụng quá nhiều JavaScript trên trang web của bạn và cách cung cấp hiệu quả mã JavaScript cho khách truy cập của bạn.
Quá nhiều JavaScript gây ra nhiều công việc hơn cho trình duyệt của khách truy cập của bạn
JavaScript yêu cầu nhiều giai đoạn xử lý không giống như các tài nguyên khác [e. g. , hình ảnh, phông chữ, v.v. ]
Ví dụ: ảnh hưởng đến hiệu suất của một hình ảnh lớn chủ yếu là do thời gian dài cần thiết để chỉ tải xuống
Tuy nhiên, JavaScript có thể chịu nhiều tác động đến hiệu suất vì tập lệnh phải được tải xuống, phân tích cú pháp và thực thi bởi trình duyệt của khách truy cập của bạn
Điều này xảy ra tuần tự, theo mặc định [trừ khi được hướng dẫn rõ ràng] và mỗi giai đoạn này có thể ảnh hưởng đến hiệu suất trang của bạn
Chúng tôi phân tích các tác động này bên dưới.
Nhiều tập lệnh hơn thường có nghĩa là hiệu suất kém hơn
Trình duyệt của khách truy cập của bạn phải tải xuống từng tập lệnh được yêu cầu theo thứ tự chúng đã được khai báo trong trang HTML của bạn. Tùy thuộc vào độ lớn của mỗi tập lệnh, quá trình này có thể mất một lúc, đặc biệt là trên các kết nối chậm hơn
Theo Lưu trữ HTTP, trang trung bình
- Phục vụ 591. 2 KB JavaScript [564. 2 KB trên thiết bị di động]
- có 24 yêu cầu JavaScript [Máy tính để bàn và thiết bị di động]
Điều này có nghĩa là JavaScript là yếu tố đóng góp cao nhất cho trọng lượng trang sau hình ảnh [và video] và là yếu tố đóng góp cao thứ hai cho các yêu cầu trang sau hình ảnh
Nói chung, số lượng tập lệnh càng nhiều thì thời gian tải chúng càng lâu
Nếu trang của bạn có quá nhiều tập lệnh, nó sẽ ảnh hưởng mạnh mẽ đến hiệu suất của trang
Quá nhiều JavaScript. Các tệp JS chiếm 72% trọng lượng của trang này
Mặc dù đây có thể không phải là vấn đề quá nghiêm trọng trên máy tính để bàn có kết nối internet tốc độ cao, nhưng không phải tất cả khách truy cập trang của bạn đều nhất thiết phải có thiết bị và/hoặc kết nối nhanh.
Ví dụ: người dùng có thể truy cập trang của bạn trên điện thoại di động tầm trung từ điểm truy cập wi-fi công cộng, nơi tốc độ hiệu quả có thể chỉ tương đương với kết nối 2G/3G
Bạn càng có nhiều tập lệnh, thời gian tải trang của bạn càng lâu, đặc biệt là trên các kết nối chậm hơn
Khi điều này xảy ra, bạn không chỉ khiến người dùng phải đợi lâu hơn để xem trang của mình mà còn khiến họ sử dụng nhiều dữ liệu di động hơn trong quá trình này.
Khối thực thi và phân tích cú pháp JavaScript chặn luồng chính của bạn
Việc phân tích cú pháp và thực thi JavaScript, theo mặc định, là một tác vụ xảy ra trên luồng chính.
Các tác vụ dài do thực thi tập lệnh [A, B, E ở trên] có thể chặn luồng chính trong một thời gian dài, có khả năng làm chậm LCP và TTI
Nếu những tác vụ này mất quá nhiều thời gian, thì chúng được coi là "tác vụ dài" và có thể ngăn trang của bạn tải nội dung cũng như tương tác sớm hơn một cách đáng tin cậy, tạo ra trải nghiệm trang kém cho .
Vì luồng chính cũng là nơi trình duyệt xử lý hiển thị/vẽ nội dung, việc buộc nó bằng cách sử dụng quá nhiều JavaScript sẽ trì hoãn việc hiển thị nội dung cho khách truy cập của bạn
Nói chung…
…thời gian thực thi và phân tích cú pháp JavaScript càng lâu thì khách truy cập của bạn sẽ phải đợi để xem nội dung và tương tác với trang của bạn càng lâu
Khách truy cập sẽ thấy một màn hình trống trong khi các tài nguyên chặn hiển thị được xử lý
Nếu quá trình thực thi tập lệnh của bạn chặn luồng chính trong một thời gian dài, thì trình duyệt sẽ không thể xử lý các tác vụ cần thiết khác để tải trang của bạn.
Phương pháp hay nhất về hiệu suất web là tải dần dần nội dung thay vì hiển thị một trang trống mở rộng rồi tải tất cả nội dung cùng một lúc.
Các trang web tải dần dần được coi là nhanh hơn các trang web mà bạn không thấy gì lúc đầu, sau đó mọi thứ cùng một lúc
Điều này là để người dùng nhận thấy rằng trang của bạn đang làm điều gì đó, nếu không họ có thể mất hứng thú và thoát khỏi trang của bạn hoàn toàn.
Hiệu suất JavaScript có thể gây ra sự thay đổi
Chúng tôi thường thấy điều này với các trang sử dụng nhiều JavaScript và/hoặc sử dụng mã JavaScript dưới mức tối ưu
Theo Tom Dale [Nhân viên chính Kỹ sư phần mềm, LinkedIn]
Từng byte, JavaScript tốn kém hơn để trình duyệt xử lý so với một hình ảnh hoặc Phông chữ Web có kích thước tương đương
Chúng tôi giải thích một số nguyên nhân phổ biến nhất dẫn đến biến động hiệu suất bên dưới.
Biến thể mạng và tài nguyên phần cứng có thể gây ra biến động
Các biến thể về kết nối và mạng có thể dẫn đến thời gian tải xuống JavaScript lâu làm chậm quá trình Vẽ đầu tiên trên trang của bạn
Mặt khác, tài nguyên phần cứng có thể dẫn đến thời gian phân tích cú pháp/thực thi dài khác nhau tùy thuộc vào mức độ sức mạnh của CPU hoặc bộ nhớ, tất cả đều ảnh hưởng đến tính tương tác của trang web của bạn
Trong ví dụ này, băng chuyền dựa trên JavaScript mất nhiều thời gian để tải xuống [mạng], phân tích cú pháp và thực thi [phần cứng], làm chậm quá trình tải trang của bạn
Điều quan trọng cần nhớ là không phải mọi người dùng đều có thiết bị mạnh mẽ và/hoặc truy cập vào kết nối mạng nhanh
Vì cả hai yếu tố này đều nằm ngoài tầm kiểm soát của bạn, nên bạn nên ưu tiên tối ưu hóa việc phân phối và thực thi JavaScript cho người dùng có tốc độ kết nối mạng và phần cứng trung bình
Tối ưu hóa mã JavaScript của bạn có thể giúp mã thực thi nhanh hơn, dẫn đến hiệu suất tải trang tốt hơn
Chủ đề/Plugin phức tạp có thể thêm chi phí không cần thiết
Một kịch bản quá phổ biến liên quan đến một trang web WordPress [hoặc CMS khác] sử dụng các chủ đề và plugin cao cấp
Những điều này thường bổ sung thêm chi phí hoạt động thông qua việc sử dụng nhiều tập lệnh cần thiết cho chức năng plugin và chủ đề bổ sung.
Các chủ đề cao cấp thường có thể yêu cầu nhiều plugin để hoạt động bình thường. Chủ đề cao cấp này yêu cầu 7 plugin bổ sung
Một số chủ đề/plugin này có thể không được tối ưu hóa cho hiệu suất, dẫn đến không chỉ thời gian phản hồi của máy chủ tăng lên ở phần phụ trợ [đặc biệt là trên dịch vụ lưu trữ giá rẻ] mà còn .
Tập lệnh của bên thứ ba là thủ phạm chính cho hiệu suất thay đổi
Sử dụng tập lệnh của bên thứ ba trên trang của bạn liên quan đến các kết nối tốn kém đến các máy chủ bên ngoài không phải của riêng bạn. Ngoài ra, các tập lệnh này có thể không được tối ưu hóa cho hiệu suất và thường gây ra thời gian chặn luồng chính cao
Một số cách khác mà chúng ảnh hưởng đến hiệu suất trang của bạn, bao gồm
- Quá nhiều yêu cầu đến nhiều máy chủ của bên thứ ba
- Tra cứu DNS chậm [và thường là nhiều]
- Thời gian kết nối SSL dài
- Hiệu suất máy chủ bên thứ ba không thể đoán trước
- độ trễ thay đổi
Về cơ bản, tập lệnh của bên thứ ba có cùng chi phí hiệu suất như JavaScript tự lưu trữ – ngoại trừ, chúng có thể rõ ràng hơn và có thể ảnh hưởng nghiêm trọng đến trải nghiệm trang của bạn
Tệp JavaScript của bên thứ ba ở đây dẫn đến một tác vụ dài, chặn tải hình ảnh chính và trì hoãn tải phần còn lại của trang
Vì các tập lệnh của bên thứ ba nằm ngoài tầm kiểm soát của bạn nên bạn không thể làm gì nhiều ở đây, ngoài việc trì hoãn/tải không đồng bộ tập lệnh [nếu có thể]
Đề xuất của chúng tôi luôn là xem xét việc sử dụng tập lệnh bên thứ ba của bạn và xóa những tập lệnh không tạo thêm giá trị cho trang web hoặc hoạt động kinh doanh của bạn
Bạn cũng nên kiểm tra hiệu suất của các tập lệnh bên thứ ba khác nhau để tìm ra sự cân bằng tốt giữa chức năng và hiệu suất. Tìm hiểu thêm về điều này
Nếu bạn còn lại các tập lệnh của bên thứ ba cần thiết cho hoạt động trang web của mình, hãy xem xét tối ưu hóa chiến lược tải của họ để cải thiện hiệu suất
Sử dụng kiểm tra JavaScript để đo lường hiệu suất
Báo cáo GTmetrix của bạn cung cấp vô số kiểm tra liên quan đến JavaScript để đo lường hiệu suất tổng thể của JavaScript
Đây là toàn bộ danh sách kiểm tra GTmetrix trực tiếp theo dõi hiệu suất JavaScript
- Tránh các tác vụ luồng chính dài
- Tránh cung cấp JavaScript cũ cho các trình duyệt hiện đại
- Loại bỏ các tài nguyên chặn hiển thị
- Tải chậm tài nguyên của bên thứ ba với mặt tiền
- Giảm thiểu JavaScript
- Giảm thiểu công việc luồng chính
- Giảm thời gian thực thi JavaScript
- Giảm JavaScript không sử dụng
- Xóa các mô-đun trùng lặp trong gói JavaScript
Ngoài những điều trên, các kiểm tra sau đây cũng có thể được sử dụng để đánh giá phân phối JavaScript tối ưu.
- Tránh tải trọng mạng khổng lồ
- Kết nối trước với nguồn gốc bắt buộc
- Tải trước yêu cầu khóa
Để kiểm tra việc sử dụng JavaScript của bên thứ ba, hãy xem xét Giảm tác động của kiểm tra mã bên thứ ba.
Quá trình kiểm tra 'Giảm tác động của mã bên thứ ba' có thể giúp bạn xem xét việc sử dụng mã bên thứ ba của mình
Điểm hiệu suất của bạn trực tiếp dựa trên 6 chỉ số lấy người dùng làm trung tâm và bạn có thể sử dụng các chỉ số sau để đánh giá xem JavaScript ảnh hưởng như thế nào đến trải nghiệm trang của bạn
- Sơn nội dung đầu tiên [FCP]
- Sơn có nội dung lớn nhất [LCP]
- Thời gian tương tác [TTI]
- Tổng thời gian chặn [TBT]
Nếu bạn chứng kiến một số biến động về thời gian TTI và TBT của mình, chúng có thể liên quan đến JavaScript và thời gian thực thi tác vụ dài; .
Cách đảm bảo JavaScript của bạn hiệu quả và cần thiết
Dựa vào mức độ tác động của JavaScript đối với hiệu suất trang của bạn, chúng tôi thực sự khuyên bạn nên làm cho JavaScript của mình hiệu quả nhất có thể
Dưới đây là hướng dẫn nhanh để thực hiện việc này.
1] Đánh giá xem trang của bạn có cần tập lệnh không
Hãy suy nghĩ về những gì kịch bản làm. Ví dụ,
- Thanh trượt/băng chuyền
- Đồ họa/hoạt hình
- Nhúng video của bên thứ ba
- Phân tích/theo dõi
- vân vân
Xem xét khả năng thực thi chức năng tương tự bằng cách sử dụng các phương pháp thay thế với chi phí thực hiện tiềm năng ít hơn. Ví dụ,
- Hình ảnh anh hùng tĩnh thay vì thanh trượt
- Hoạt ảnh CSS thay vì hoạt ảnh dựa trên JS
- Video tự lưu trữ hoặc mặt tiền lười tải thay vì nhúng video của bên thứ ba
2] Nếu tập lệnh không cần thiết, hãy cân nhắc xóa tập lệnh đó
Nếu chức năng của tập lệnh cụ thể đó không cần thiết hoặc có thể đạt được thông qua các phương tiện thay thế, thì nên xóa tập lệnh đó
Nếu tập lệnh không cần thiết trên một trang cụ thể nhưng vẫn có thể được sử dụng ở nơi khác trên trang web, hãy đảm bảo rằng tập lệnh chỉ được phân phát cho các trang cần tập lệnh đó
Đối với WordPress, các plugin như Dọn dẹp nội dung có thể giúp bạn loại trừ các tập lệnh không cần thiết trên cơ sở từng trang
3] Nếu cần tập lệnh, thì tập lệnh được lưu trữ ở đâu?
Nếu tập lệnh được lưu trữ trên máy chủ của riêng bạn, thì có thể áp dụng các tối ưu hóa sau
- Nén và thu nhỏ tập lệnh để giảm tải trọng
- Trì hoãn hoặc tải tập lệnh không đồng bộ để loại bỏ hành vi chặn hiển thị
- Tải trước các tập lệnh chính để trình duyệt nhận thức sớm về các tập lệnh chặn tiềm năng
- Giảm mã JavaScript không sử dụng [e. g. , thông qua chia tách mã, v.v. ] để tăng tốc độ tải và thực thi tập lệnh
- Bộ nhớ đệm mã JavaScript của bạn bằng mẫu PRPL [Tải trước, Kết xuất, Lưu trước bộ đệm và Tải chậm] để tải JavaScript hiệu quả hơn
Nếu tập lệnh này không được lưu trữ trên máy chủ của riêng bạn [tôi. e. , đó là tập lệnh của bên thứ ba], hãy áp dụng các tối ưu hóa sau nếu có thể
- Kết nối trước với nguồn gốc bên thứ ba được yêu cầu
- Trì hoãn hoặc tải tập lệnh không đồng bộ để loại bỏ hành vi chặn hiển thị
- Tập lệnh tải chậm với mặt tiền, nếu có thể
Lưu đồ tối ưu hóa JavaScript
Một lần nữa, bất kể tập lệnh của bạn được lưu trữ ở đâu, hãy đảm bảo rằng bạn chỉ phân phối tập lệnh đó trên các trang thực sự cần tập lệnh đó
Tóm lược
JavaScript được sử dụng bởi hầu hết các trang web ngày nay và việc sử dụng nó tiếp tục tăng. Tuy nhiên, nó có chi phí hiệu suất cao nhất trong số các tài nguyên trang vì nó cần được tải xuống, phân tích cú pháp và thực thi
Quá nhiều JavaScript khiến trình duyệt của khách truy cập phải làm việc nhiều hơn và có thể khiến hiệu suất trang web của bạn dao động
Đánh giá mức độ sử dụng JavaScript của bạn và cân nhắc xóa các tập lệnh không cần thiết hoặc không mang lại giá trị cho trang web hoặc hoạt động kinh doanh của bạn. Đảm bảo rằng việc phân phối và thực thi tập lệnh của bạn được tối ưu hóa cho hiệu suất web
Đọc thêm
Chúng tôi đã đề cập rộng rãi về những cạm bẫy của việc sử dụng quá nhiều JavaScript trên trang của bạn. Để biết thêm thông tin chi tiết về điều này và cách bạn có thể tối ưu hóa tập lệnh của mình, hãy xem các tài nguyên sau
- Tối ưu hóa khởi động JavaScript
- Hiệu suất khởi động JavaScript
- Tải hiệu quả JavaScript của bên thứ ba
- Kiểm soát tập lệnh của bên thứ ba
- Xác định JavaScript bên thứ ba chậm
Giữ hiệu suất trang web của bạn ở đầu tâm trí của bạn
PRO Giám sát Splash
Nhận thêm Thử nghiệm theo yêu cầu, Vị trí được giám sát và Vị trí thử nghiệm cao cấp cùng với thử nghiệm Hàng giờ với gói GTmetrix PRO
Các tính năng khác bao gồm. Truy cập hàng đợi ưu tiên, Thử nghiệm trên thiết bị di động, Giám sát vị trí từ xa [bao gồm cả Vị trí cao cấp], v.v.