Hướng dẫn reduce impact of third-party code wordpress - giảm tác động của mã bên thứ ba wordpress

Các kịch bản của bên thứ ba là một điều cần thiết trong web hiện đại. Họ cho phép chủ sở hữu trang web nhúng video và các nút chia sẻ xã hội, phân tích hiệu suất trang web của họ và nhiều hơn nữa.

Thông thường, các tập lệnh này rất quan trọng đối với chức năng trang web và dòng doanh thu của một trang web. Tuy nhiên, tài nguyên của bên thứ ba đi kèm với nhiều rủi ro ẩn có thể cản trở hiệu suất tổng thể của trang web của bạn.hinder your site’s overall performance.

#3: Bộ nhớ đệm HTTP không đủ

Có không đủ bộ nhớ đệm HTTP, các nguồn lực sẽ được tìm nạp từ mạng thường xuyên hơn. Và điều này là cả chậm và tốn kém (trong cả tài nguyên tốc độ và tài nguyên máy chủ), đặc biệt là khi các yêu cầu mạng đó được gửi đến nhiều máy chủ. & NBSP;

Kết quả là, trang của bạn sẽ tải chậm. & nbsp; thậm chí còn tệ hơn, khi khách truy cập truy cập trang web của bạn với gói dữ liệu di động hạn chế, mọi yêu cầu mạng không cần thiết là một sự lãng phí tiền của họ. & nbsp;
 

#4: Một số tập lệnh không cho phép tự mình tải không đồng bộ

Tải các kịch bản của bên thứ ba không đồng bộ là một trong những giải pháp khi nói đến việc tối ưu hóa công việc của họ. Tuy nhiên, một số tập lệnh không thể được tải không đồng bộ vì chúng sử dụng document.write (). & Nbsp;document.write(). 

Tuy nhiên, vấn đề lớn hơn là việc sử dụng tài liệu.write () bên trong các trang, cụ thể là những cách sử dụng đó tiêm các tập lệnh. Nếu tập lệnh tự động tiêm một tập lệnh khác, trình phân tích cú pháp buộc phải đợi lâu hơn nữa để tài nguyên tải xuống, có thể phải chịu một hoặc nhiều chuyến đi vòng mạng và trì hoãn thời gian kết xuất trang đầu tiên của trang:document.write() inside pages, specifically those uses that inject scripts. If the script dynamically injects another script, the parser is forced to wait even longer for the resource to download, which can incur one or more network round trips and delay the time to first render of the page:

Nó cho phép bạn ngay lập tức thấy các tập lệnh của bên thứ ba có ảnh hưởng như thế nào trên trang web của bạn. Trong ví dụ trên, bạn có thể thấy rằng họ đã chặn luồng chính trong 2.490 ms. & NBSP;

Bạn có thể đào sâu hơn bằng cách đi qua danh sách tất cả các mã của bên thứ ba được thực thi trên trang web của bạn. Điều tuyệt vời là PSI sắp xếp nó theo thời gian chặn chủ đề chính. Đánh giá này cho phép bạn tập trung vào những người có ảnh hưởng nhất và bắt đầu làm việc với chúng. & nbsp;

Nó hiển thị tất cả các tệp JavaScript được thực thi trên trang web của bạn, được sắp xếp theo kích thước của chúng:

Và bên cạnh cột byte tài nguyên, bạn có một byte chưa sử dụng, hiển thị số % JS vẫn chưa được sử dụng. & NBSP;

WebPagetest

Phân tích nội dung của WebPagetest theo tên miền là một công cụ có giá trị khác để gỡ lỗi các vấn đề của bên thứ ba. Chuyển đến phần miền, bạn sẽ thấy sự cố kỹ lưỡng theo số lượng yêu cầu và byte cho mỗi miền:

WebPagetest cũng có biểu đồ thác nước nơi bạn có thể thấy tất cả các tài nguyên chặn kết xuất và phân bổ tất cả các tập lệnh của bên thứ ba và thời gian thực hiện của chúng:

Một khi bạn tìm thấy các tài nguyên của bên thứ ba có thể gây ra vấn đề, đó là thời gian để kiểm tra xem chúng có thực sự là thủ phạm hay không. Quay lại trang chủ của WebPagetest, mở các cài đặt nâng cao và nhấp vào tính năng khối:

Sau đó, bạn có thể chỉ định các tên miền bạn muốn chặn bằng cách nhập chúng vào các biểu mẫu bên dưới. Kiểm tra lại và xem nếu có bất kỳ cải tiến nào. & NBSP;

Chrome từ Devtools

Một cách tuyệt vời khác để phân tích các vấn đề có thể còn sâu sắc hơn là sử dụng Chrome Devtools. Chỉ cần mở một trang web, nhấp chuột phải và chọn Kiểm tra. Sau đó, ghi lại tải trang và đi đến bảng điều khiển hiệu suất của người dùng.

Nhấp vào nút Ghi lại và tải lại trang của bạn cho bạn một thác nước (tương tự như trang trong WebPagetest):

Ở dưới cùng của bảng hiệu suất, bạn sẽ thấy tab từ dưới lên trên mạng:

Nhấp vào menu thả xuống và chọn nhóm nhóm theo tên miền. Trong ví dụ trên, chúng ta có thể thấy moatads.com đóng góp 22,7% công việc xảy ra khi tải trang. & NBSP;

Sử dụng kiến ​​thức này, bạn có thể xác định chính xác hơn các khu vực có vấn đề và bắt đầu điều tra với một số bằng chứng đằng sau bạn. Khi bạn đã hoàn thành việc xác định thủ phạm, bạn có thể chặn kịch bản của bên thứ ba cụ thể để xem nó thực sự có ảnh hưởng như thế nào.

Truy cập bảng điều khiển mạng của mạng, nhấp chuột phải vào tài nguyên và chọn URL yêu cầu khối khối URL:

Đây là một cách tuyệt vời để xem sự vắng mặt của một tài sản cụ thể sẽ có trên trang hiện tại.

Bây giờ, hãy để Lừa xem cách đối phó với các tài nguyên của bên thứ ba.

Tải các tập lệnh của bên thứ ba một cách hiệu quả

Có một số kỹ thuật tối ưu hóa mà bạn có thể muốn thử khi làm việc với các tập lệnh của bên thứ ba:

• Chỉ sử dụng tải trọng để tải các tài nguyên nhúng khi cần thiết;
• Thực hiện các thuộc tính async và trì hoãn;
• Tránh các tập lệnh của bên thứ ba sử dụng document.write ();document.write();
• Nguồn lực tự lưu trữ để có được quyền kiểm soát nhiều hơn đối với chúng;
• Thiết lập các kết nối sớm thông qua các gợi ý tài nguyên Preconnect và DNS-Prefetch;preconnect and dns-prefetch resource hints;
• Xem xét loại bỏ các tập lệnh mà don lồng thêm giá trị.

Hãy cùng xem xét kỹ hơn từng người trong số họ.

Tải tài nguyên của bên thứ ba & NBSP; 

Một trang web duy nhất được xây dựng từ các tài nguyên khác nhau. Tuy nhiên, không phải tất cả chúng đều rất quan trọng để cung cấp trải nghiệm người dùng tốt nhất ngay từ đầu.

Người dùng muốn thấy nội dung được vẽ nhanh chóng và trải nghiệm một trang web trở nên tương tác ngay lập tức. Đó là lý do tại sao nó rất tốt để theo dõi một số số liệu sau: & nbsp;

• Sơn đầu tiên đo lường bao lâu để trình duyệt hiển thị bất cứ thứ gì trên trang, không chỉ là nội dung của DOM. Đây có thể là một sự thay đổi nền tảng, ví dụ;
• Sơn nội dung đầu tiên là thời gian để trình duyệt trực quan hóa phần đầu tiên của nội dung DOM (ví dụ: hình ảnh, phần tử Canvas không trống) trên một trang;
• Sơn nội dung lớn nhất đo lường thời gian cần thiết cho yếu tố nội dung lớn nhất trên được tải;
• Độ trễ đầu vào đầu tiên (FID) đo độ trễ giữa tương tác đầu tiên của người dùng và thời điểm trình duyệt có thể phản hồi.

Nói ngắn gọn:

Để giữ lại khách truy cập của bạn lâu hơn, trang web của bạn cần phải nhanh chóng và tương tác. Hoặc ít nhất nó cần đưa ra ấn tượng đó. & NBSP;

Đây là nơi tải lười đi vào chơi. Thông thường được sử dụng trong bối cảnh của hình ảnh, bạn cũng có thể lười biếng (trì hoãn) các tài nguyên của bên thứ ba, làm cho chúng chỉ tải khi cần thiết. Bằng cách này, bạn có thể tập trung vào việc phục vụ nội dung quan trọng nhất (phía trên nếp gấp) trước tiên và tải mọi thứ khác sau khi khách truy cập cuộn xuống.

Quay trở lại ví dụ của chúng tôi về một người chạy blog của riêng họ, họ có thể đang phục vụ một quảng cáo trong trang web của họ. Nếu họ lười tải nó, nó sẽ chỉ được phục vụ khi một khách truy cập cuộn xuống nó.

Nitropack cung cấp tính năng tải lười biếng JavaScript hoạt động dựa trên tương tác của người dùng và nó được bật theo mặc định với chế độ lố bịch của chúng tôi. Nó ưu tiên các tệp HTML và CSS, trong khi trì hoãn các tệp JS, dẫn đến vẽ nội dung nhanh hơn và trải nghiệm người dùng tốt hơn. & NBSP;

Trên hết, bạn có thể tinh chỉnh tính năng JavaScript bằng cách liệt kê các tập lệnh mà bạn muốn loại trừ khỏi tối ưu hóa và tập lệnh phải bị trì hoãn: & nbsp;

Sử dụng các thuộc tính Async và trì hoãnasync and defer Attributes

Các tập lệnh được tải đồng bộ trễ xây dựng DOM và kết xuất khối. Đó là lý do tại sao bạn nên tải các tập lệnh của bên thứ ba không đồng bộ (trừ khi tập lệnh phải chạy trước khi trang được hiển thị).

Các thuộc tính không đồng bộ và trì hoãn cho phép trình duyệt phân tích HTML trong khi tải các tập lệnh chặn kết xuất trong nền. Bằng cách này, tải xuống tập lệnh không chặn xây dựng DOM và kết xuất trang, dẫn đến tải nhanh hơn và khách truy cập hạnh phúc hơn.async and defer attributes allow the browser to parse the HTML while loading the render-blocking scripts in the background. This way, script downloads don't block DOM construction and page rendering, resulting in faster loading and happier visitors.

Mặc dù cả hai thuộc tính làm cho các tập lệnh không chặn, chúng cũng có một số khác biệt:

• Các tập lệnh với thuộc tính trì hoãn giữ thứ tự tương đối của chúng. Hãy nói rằng chúng tôi có hai tập lệnh - Script 1 và Script 2 theo thứ tự đó. Nếu chúng tôi trì hoãn cả hai, trình duyệt sẽ luôn thực hiện Script 1 trước, ngay cả khi tập lệnh 2 được tải xuống trước. Các tập lệnh hoãn lại cũng được thực thi trước sự kiện DomContentLoaded. Nói cách khác, chúng chỉ chạy sau khi HTML được tải và phân tích cú pháp nhưng trước sự kiện tải cửa sổ. & nbsp;defer attribute keep their relative order. Let’s say we have two scripts - script 1 and script 2 in that order. If we defer both, the browser will always execute script 1 first, even if script 2 was downloaded first. Deferred scripts are also executed before the DOMContentLoaded event. In other words, they run only after the HTML has been loaded and parsed but before the window’s load event.
   
• Các tập lệnh với thuộc tính Async hoàn toàn độc lập. Bất cứ điều gì được tải xuống đầu tiên được thực hiện đầu tiên. Họ cũng chạy độc lập với sự kiện Domcontentaded, tức là, chúng có thể được thực thi ngay cả khi tài liệu đã được tải xuống đầy đủ. Điều này có nghĩa là họ có thể làm gián đoạn tòa nhà DOM nếu họ hoàn thành tải xuống trong khi trình phân tích cú pháp vẫn đang hoạt động.async attribute are completely independent. Whichever is downloaded first is executed first. They also run independently of the DOMContentLoaded event, i.e., they can be executed even if the document hasn’t been fully downloaded. This means they can interrupt DOM building if they finish downloading while the parser is still at work.

Nói một cách đơn giản, các tập lệnh cần DOM hoặc thứ tự của họ là quan trọng nên sử dụng thuộc tính trì hoãn. Ngược lại, AD, phân tích và các tập lệnh độc lập khác thường nên sử dụng Async.defer attribute. Conversely, ad, analytics, and other independent scripts should generally use async.

Tránh các tập lệnh của bên thứ ba sử dụng document.write ()document.write()

Nói về thuộc tính Async, một số tài nguyên của bên thứ ba có thể được tải không đồng bộ vì họ sử dụng Document.write ().async attribute, some third-party resources can’t be loaded asynchronously because they use document.write().

Document.write () đặc biệt được sử dụng cho các dịch vụ cũ mà thiên đường đã được cập nhật gần đây. Tuy nhiên, các tập lệnh của bên thứ ba sử dụng nó có thể trì hoãn việc kết xuất trang sau vài giây, điều này đặc biệt có vấn đề đối với người dùng trên các kết nối chậm (ví dụ: 2G). is particularly used for older services that haven’t been updated recently. However, third-party scripts using it can delay the page rendering by seconds, which is particularly problematic for users on slow connections (e.g., 2G).

Trên thực tế, nó có tác động tiêu cực đến hiệu suất mà & NBSP; Chrome đã quyết định can thiệp:

Sau đó, Chrome Chrome, bắt đầu với phiên bản 55, can thiệp thay mặt cho tất cả người dùng khi chúng tôi phát hiện mẫu BAD đã biết này bằng cách thay đổi cách xử lý Document.write () trong chrome.document.write() is handled in Chrome.”

Bản sửa lỗi cho Document.Write () chỉ đơn giản là không tiêm các tập lệnh bằng cách sử dụng nó. Kể từ Chrome 53, Chrome Devtools ghi nhật ký cảnh báo vào bảng điều khiển để sử dụng tài liệu có vấn đề.write ():document.write() is to simply not inject scripts using it. As of Chrome 53, Chrome DevTools logs warnings to the console for problematic use of document.write():

Tự lưu trữ tài nguyên của bên thứ ba

Chúng tôi bắt đầu bài viết này bằng cách nói rằng các kịch bản của bên thứ 3 là tài nguyên ngoài tầm kiểm soát của bạn, điều này khiến chúng khó quản lý hơn.

Chà, tự lưu trữ chúng là một tùy chọn sẽ cho bạn quyền kiểm soát nhiều hơn đối với quy trình tải tập lệnh. Hơn nữa, nó cũng cho phép bạn:

• Giảm tra cứu DNS và thời gian khứ hồi vì mọi thứ sẽ được lưu trữ trên máy chủ của bạn;
• Cải thiện tiêu đề bộ nhớ đệm HTTP;
• Tận dụng việc đẩy máy chủ HTTP/2 giúp giảm độ trễ bằng cách bật toàn bộ yêu cầu và ghép kênh đáp ứng và giảm thiểu chi phí giao thức.

Mặc dù có vẻ như nó, nhưng việc tự lưu trữ không phải là giải pháp hoàn hảo và có một số cảnh báo bạn cần xem xét:

• Tự lưu trữ một tập lệnh có nghĩa là bạn phải cập nhật thủ công nó để nó có tất cả các bản sửa lỗi bảo mật mới nhất;
• Các tập lệnh tự lưu trữ của bạn đã giành được tự động được cập nhật qua các thay đổi API. Điều này có thể dẫn đến một kịch bản bị trục trặc hoặc không hoạt động;
• Một số kịch bản don lồng thậm chí còn hoạt động khi chúng đang tự lưu trữ;
• Cũng có thể có ý nghĩa pháp lý đối với một số tài nguyên - chủ yếu là phông chữ.

Một giải pháp thay thế cho các tập lệnh tự lưu trữ, nơi bạn vẫn có nhiều quyền kiểm soát hơn sẽ sử dụng nhân viên dịch vụ. & nbsp; Chúng tôi đã giành được đào sâu hơn vào chủ đề này ngay bây giờ, nhưng nếu bạn quan tâm, hãy kiểm tra bài viết của Matt Gaunt về nhân viên dịch vụ.

Ngoài các tệp JavaScript nặng, bạn cũng có thể muốn tự lưu trữ phông chữ của bên thứ ba. Theo Ilya Grigorik:

Một webfont "đầy đủ" bao gồm tất cả các biến thể phong cách mà bạn có thể không cần, cộng với tất cả các glyphs, có thể không sử dụng, có thể dễ dàng dẫn đến việc tải xuống nhiều megabyte.

Trái ngược với nhiều tập lệnh của bên thứ ba, tài nguyên phông chữ thường tĩnh và không được cập nhật thường xuyên. Nói một cách đơn giản, họ cung cấp bảo trì dễ dàng hơn so với các kịch bản của bên thứ ba tự lưu trữ.

Tuy nhiên, bạn nên đảm bảo rằng giấy phép phông chữ cho phép tự lưu trữ. Nếu không, bạn có thể vi phạm pháp luật. Một dịch vụ phổ biến cho phép tự lưu trữ phông chữ của họ là phông chữ của Google.

Thiết lập các kết nối sớm

Các trình duyệt trải qua ba giai đoạn để thiết lập kết nối với máy chủ & nbsp;- biến tên miền thành địa chỉ IP, thiết lập kết nối với máy chủ, mã hóa kết nối để bảo mật tối đa. & NBSP;

Trong mỗi bước này, một phần dữ liệu được gửi bởi trình duyệt và máy chủ gửi lại phản hồi. Đây được gọi là một chuyến đi khứ hồi. & NBSP;

Tùy thuộc vào điều kiện mạng, một chuyến đi khứ hồi có thể mất một lượng thời gian đáng kể. Đó là lý do tại sao việc thực hiện các gợi ý tài nguyên như

và

Có thể tối ưu hóa công việc của trình duyệt, làm cho trang web/ứng dụng của bạn tải nhanh hơn.

• Thêm thông báo cho trình duyệt về ý định của bạn để thiết lập kết nối với một tên miền khác và bạn muốn quá trình bắt đầu càng sớm càng tốt. Tài nguyên sẽ tải nhanh hơn vì quy trình thiết lập đã được hoàn thành vào thời điểm trình duyệt yêu cầu chúng. Theo Google, bạn có thể tăng tốc thời gian tải lên 100 100500 ms bằng cách thiết lập các kết nối sớm với các tài nguyên của bên thứ ba quan trọng nhất. & nbsp;
   
• Các công việc tốt nhất cho tài nguyên quan trọng nhất. Đối với phần còn lại, hãy sử dụng để giảm thời gian tra cứu DNS, thường mất khoảng 20 trận120 ms.

Loại bỏ kịch bản bên thứ 3 chưa sử dụng & nbsp; 

Nó dễ dàng hơn nhiều để loại bỏ một tập lệnh hơn là tối ưu hóa nó. Hay là nó? & NBSP;

Bạn nên thường xuyên kiểm tra các tập lệnh của bên thứ ba chưa được sử dụng và xóa chúng hoàn toàn. & NBSP;

Bạn có thể kiểm tra xem bạn đã không sử dụng JavaScript trong Chrome, Devtools. Sử dụng tab Bảo hiểm trên mạng để tìm các đoạn mã này:

Đây là một thực tế tốt cho các trang web CMS, trong đó mã của bên thứ ba thường xuyên được chèn qua các plugin và có thể bị bỏ lại sau khi plugin không còn được sử dụng. Chạy một cuộc kiểm toán đơn giản như hình trên có thể dẫn đến việc tăng hiệu suất dễ dàng. & NBSP;

Tóm tắt & nbsp;

Chúng tôi đã đề cập rất nhiều nền tảng với bài viết này, vì vậy hãy để kết thúc với một bản tóm tắt nhanh chóng về những điểm quan trọng nhất:

• Các tập lệnh của bên thứ ba là cần thiết trong web hiện đại vì chúng cho phép bạn xây dựng một trang web tương tác và kết nối với nhau và mở rộng dòng doanh thu của bạn;
• Tuy nhiên, nhúng các tài nguyên của bên thứ ba có nghĩa là bạn dựa vào chúng để nhanh chóng để tránh làm chậm các trang của bạn;
• Bạn có thể xác định các tập lệnh của bên thứ ba và đo lường sự đóng góp của chúng cho hiệu suất trang web của bạn bằng cách sử dụng các công cụ miễn phí như PSI, Chrome, DevTools và WebPagetest;
• Lazy Loading là một kỹ thuật & nbsp; cho phép bạn chỉ tải mã của bên thứ ba khi cần thiết;
• Sử dụng các thuộc tính ASYNC và trì hoãn đảm bảo & NBSP; Tải xuống tập lệnh sẽ không chặn kết xuất trang và cấu trúc DOM;
• Tránh các tập lệnh sử dụng document.write () vì chúng không thể được tải không đồng bộ;document.write() because they cannot be loaded asynchronously;
• Bạn có thể tự lưu trữ một số tập lệnh của bên thứ ba mà bạn sử dụng, chỉ cần đảm bảo cập nhật chúng thường xuyên. Nếu không, họ có thể bị trục trặc, ngừng làm việc hoặc làm cho trang web của bạn dễ bị vi phạm bảo mật;
• Thiết lập các kết nối sớm bằng cách thực hiện các gợi ý tài nguyên như và. Sử dụng cái trước cho các tài nguyên quan trọng nhất và cái sau cho mọi thứ khác;
• Nếu một tập lệnh của bên thứ ba không thêm giá trị cho trang web của bạn, hãy xóa nó. Sau đó, kiểm tra xem bạn có hoàn toàn loại bỏ nó không, sử dụng Chrome Devtools.

Sau mỗi lần tối ưu hóa, đừng quên kiểm tra trang web của bạn trong thế giới thực. Tập trung vào các số liệu của người dùng thực (như các giá trị trường của Web Vitals cốt lõi) để đảm bảo công việc của bạn có tác động tích cực đến khách truy cập của bạn. & NBSP;

Làm thế nào có thể giảm thứ ba

Các kịch bản của bên thứ 3 là gì?