Tối ưu hóa tài nguyên của bên thứ ba là một trong những thứ khó xử lý nhất trong WordPress. Một giải pháp rõ ràng đó là loại bỏ các script/plugin không cần thiết – cái tạo ra các yêu cầu tới bên thứ ba đó.
Nhưng nếu loại bỏ plugin không phải là giải pháp lúc nào cũng khả thi thì bạn nên đọc bài viết này!
Các yêu cầu từ bên thứ ba là gì?
Các yêu cầu đến từ bên thứ ba về cơ bản là các file như CSS, JS, ảnh, font được tải từ các website bên ngoài (không phải từ website, host của bạn). Giả dụ tên miền trang của bạn là example.com và trong website đó, nó tải các script từ facebook.com, thế thì hành vi đó được gọi là yêu cầu từ bên thứ ba (thirt-party).
Tìm và phân tích các yêu cầu từ bên thứ ba trong WordPress
Trước khi tối ưu hóa bất kỳ điều gì, bạn cần biết rõ trang WordPress của bạn tạo ra các yêu cầu từ bên thứ ba nào. Dưới đây là 2 công cụ trợ giúp.
Sử dụng Pingdom
Bạn vào trang này: https://tools.pingdom.com/ để phân tích website.
Hình trên là kết quả mẫu khi phân tích trang kiencang.net
Bất cứ yêu cầu nào khác kiencang.net hoặc CDN của nó nếu có (ví dụ cdn.kiencang.net) được xem là yêu cầu đến từ bên thứ ba hay các yêu cầu từ bên ngoài (external requests). Như bạn có thể thấy, trang trên có khoảng 10% các yêu cầu (tính theo dung lượng/size) là đến từ bên ngoài, tính theo số lượng yêu cầu là 21%.
Có những trang, lưu lượng đến từ bên thứ ba có thể lên đến 45%, ví dụ như trang này:
Các ứng dụng của bên thứ ba như YouTube, Vimeo, font, mạng xã hội có rất nhiều website sử dụng và nó là nguồn bên thứ ba phổ biến.
P/S: nếu bạn muốn tìm hiểu cách tối ưu tốc độ video của bên thứ ba thì có thể tham khảo hai bài viết sau:
Sử dụng Webpagetest.org
Bạn vào https://www.webpagetest.org/ để kiểm tra website.
Kiểm tra lại lần nữa website của bạn khi chặn hết các yêu cầu từ bên thứ ba và xem sự khác biệt.
Dưới phần Script, bạn paste đoạn mã sau vào và click “START TEST”.
blockDomainsExcept website-cua-ban.com
navigate https://website-cua-ban.com/
blockDomainsExcept là danh sách các tên miền được phép, vì thế chúng ta loại bỏ tài nguyên từ bên thứ ba. navigate là URL cần kiểm tra, chính là một trang cụ thể nằm trên web của bạn (không nhất thiết là trang chủ).
Lời khuyên là bạn không nên có quá nhiều yêu cầu từ bên thứ ba, phần dưới đây sẽ giải thích tại sao:
Tại sao các yêu cầu đến từ bên thứ ba làm chậm website?
Có nhiều lý do làm cho yêu cầu đến từ bên thứ ba khiến website WordPress bị chậm.
1. Bổ sung tìm kiếm DNS & độ trễ
hoặc
Với mỗi nguồn mới từ một tên miền mới, trình duyệt cần tra cứu DNS, kết nối SSL, vân vân. Trong 2 ví dụ trên, chỉ riêng việc kết nối với YouTube đã chiếm mất khoảng 300 mili giây. Nếu họ không hỗ trợ CDN (*), con số này thậm chí còn tệ hơn.
(*): Các dịch vụ của Google thường được hỗ trợ CDN để tăng tốc, ví dụ như Google fonts, YouTube, vân vân.
Giả sử bạn có 5 tên miền từ bên thứ ba như vậy. Trình duyệt của bạn cần 300ms x 5 = 1,5 giây.
2. Cache phía trình duyệt
Vì chúng đến từ các website bên ngoài, chúng ta sẽ không có bất kỳ quyền nào với chúng để điều chỉnh cache phía trình duyệt (browser cache). Khuyến nghị thường là để cache trình duyệt trong khoảng thời gian ít nhất 30 ngày. Nhưng nhiều yêu cầu từ bên thứ ba có khoảng thời gian cache ít hơn 2 giờ. Vì thế chúng ta sẽ không tận dụng được bộ nhớ đệm của trình duyệt.
Cách tăng tốc các yêu cầu đến từ bên thứ ba
Có nhiều cách để tăng tốc độ trang. Không giải pháp nào sẽ ổn thỏa trong mọi trường hợp cả, do vậy bạn cần tùy hoàn cảnh mà áp dụng.
1. Preconnect
Preconnect là cách bạn nói với trình duyệt rằng bạn chuẩn bị kết nối với một tên miền trong chốc lát nữa. Vì thế hãy thực hiện tìm kiếm DNS, thực hiện kết nối SSL, TCP, vân vân. Ví dụ:
<!-- E.g.: Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<!-- E.g.: Facebook SDK -->
<link rel="preconnect" href="https://connect.facebook.com" crossorigin>
Thêm đoạn mã trên vào trong phần <head> của website WordPress. Bạn có thể làm điều này thông qua việc chỉnh sửa header.php hoặc sử dụng plugin (bạn nên làm cách này, để tránh việc cập nhật giao diện ảnh hưởng đến mã của bạn, plugin khuyên dùng là Insert Headers and Footers).
Thêm tất cả tên miền bên ngoài mà bạn phát hiện được khi phân tích trang bằng công cụ: https://tools.pingdom.com
Bạn không cần nhập URL đầy đủ của file, chỉ phần tên miền là đủ. Đừng bỏ subdomain đi nếu nó có mặt.
2. Prefetch
Prefetch là kỹ thuật tương tự như preconnect. Trong khi preconnect là kết nối trước tới một tên miền thì prefetch là tải tài nguyên sẵn về trong thời gian mà trình duyệt rảnh rỗi.
Ví dụ trong trường hợp của Google Analytics, chúng ta chắc chắn rằng trình duyệt sẽ tải https://google-analytics.com/analytics.js . Trong trường hợp như vậy, bạn có thể nhập đầy đủ URL vào trong phần ‘prefetch’.
<!--- Google Analytics Script -->
<link rel="prefetch" href="https://google-analytics.com/analytics.js" crossorigin>
3. Tự host
Preconnect và Prefetch có thể giúp bạn tiết kiệm thời gian. Tuy nhiên cách tốt nhất luôn là giảm số lượng các yêu cầu HTTP. Bằng cách tự host (*) các yêu cầu đến từ bên thứ ba, chúng ta có thể tận dụng các cơ hội thu nhỏ, gộp và cache phía trình duyệt.
(*) tự host có nghĩa là bạn thay thế tài nguyên từ bên thứ ba bằng cách lưu trữ trực tiếp nó trên hosting của bạn.
Tải về tệp tương ứng và tải nó lên thư viện WordPress của bạn. Copy URL và thêm nó vào phần chân trang hoặc header với thuộc tính async / defer cho JS (thông thường tốt nhất là defer).
<script defer src="//ten-mien-cua-ban.com/xxx/xx/google-analytics.js"></script>
Chúng tôi có một bài viết nói về việc tối thiểu hóa Google Analytics và cho phép nội tuyến nó. Cũng có plugin cho Google Fonts, giúp tải font về và tự host.
4. Trì hoãn (defer) hoặc tải không đồng bộ (asynchronously)
“Này ông bạn trình duyệt, tôi cần file này, chỉ tải nó khi bạn rảnh rỗi nhé.”
Nếu yêu cầu đền từ bên thứ ba có ưu tiên thấp và không chặn các tài nguyên/hiển thị khác, bạn có thể tải chúng theo cách không đồng bộ (thí dụ các đoạn mã JS, CSS không giúp hiển thị nội dung thuộc màn hình đầu tiên như các mã quảng cáo, JS của YouTube, vân vân).
Dưới đây là cách bạn tải mã Google Ads theo cách không đồng bộ:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Thay vì sử dụng async (tải không đồng bộ), bạn cũng có thể dùng defer (trì hoãn tải).
Async và Defer
Khi không dùng Async / Defer – trang HTML sẽ bị chặn hiển thị cho đến khi script được tải và thực thi xong.
Async – Tải script sẽ không chặn hiển thị HTML. Nhưng khi phân tích, thực thi script sau khi tải sẽ chặn hiển thị HTML.
Defer (khuyến khích dùng) – Script sẽ được tải về mà không chặn hiển thị HTML. Phân tích sẽ được thực hiện sau khi HTML được render xong.
Bạn có thể tìm hiểu thêm về defer và async JavaScript trong bài viết này.
Chú thích:
- HTML parsing: phân tích HTML;;
- HTML parsing paused: phân tích HTML bị tạm dừng (là điều sẽ làm chậm hiển thị website);
- Script download: mã được tải về;
- Script execution: mã được thực thi;
5. Tải có điều kiện
Bạn có thể lazy load script của bên thứ ba, và nó sẽ chỉ được tải khi người dùng cuộn đến điểm nào đó.
Một ví dụ tốt là comments (bình luận) dùng Disqus. Với plugin Disqus Conditional Load, bạn sẽ chỉ tải script khi người dùng cuộn đến phần cuối của bài viết.
Tuy nhiên không phải plugin nào cũng có tùy chọn lazy load.
Kết luận
Như tôi nói ở phần trước, không có giải pháp nào sẽ phù hợp với tất cả mọi người. Bạn cần so sánh từng cái và kiểm tra xem liệu các yêu cầu từ bên thứ ba có thể tối ưu hóa được hay không.
Trong một số trường hợp đặc biệt, chẳng hạn trên các website chịu áp lực về truy cập, sử dụng tài nguyên của bên thứ ba một cách thông minh giúp giảm tải cho host rất nhiều.
(Dịch từ bài viết: How to Analyze & Speed Up Third-Party Requests in WordPress, tác giả: Gijo Varghese, website: WP Speed Matters)
