Hướng dẫn tối ưu tốc độ website khi sử dụng tài nguyên bên thứ 3

Tài nguyên file bên thứ 3 là một trong những thứ ảnh hưởng rất nhiều nhất đến tốc độ load website.

Nếu tối ưu tốt được khâu này thì tốc độ website của bạn sẽ rất nhanh đáng kể.

Hôm nay mình sẽ chia sẻ những kỹ thuật tăng tốc tối ưu tài nguyên bên thứ 3 nhé.

Kể từ năm 2019 google chrome đã thay đổi chính sách cache tài nguyên bên thứ 3, giờ chúng ta sử dụng và tối ưu khi dùng tài nguyên bên thứ 3 tạo ra cuộc cách mạnh hoàn toàn mới.

Chính sách của cache của google chrome trước đó : ví dụ khi bạn dùng google font: dùng font roboto, khi người dùng truy cập vào website A dùng google font dùng font roboto người dùng sẽ load google font đó, sau đó người dùng đó truy cập tiếp vào website B mà website B cũng dùng google font: font roboto thì người dùng không phải load lại nữa vì được cache trước từ trang A rồi, nhưng bây giờ thì đã không còn mua xuân đó nữa rồi, phải load lại hết ( lý do google thay đổi chính sách này google bảo là vì lý do bảo mật).

Trước đó bản thân mình hay nhiều người rất thích dùng jquery của google vì gần như nhà nhà sử dụng, một chiến thuật tăng tốc cực kì tuyệt vời ở thời điểm năm 2019 trở về trước, nếu người dùng đã từng vào website trước có sử dụng jquery google cdn, khi người dùng truy cập vào website của bạn thì website không phải load jquery nữa, nên tốc độ bao ngon luôn.

Hôm nay mình sẽ hướng dẫn các bạn cách tối ưu file tài nguyên bên thứ 3 của năm 2020 nhé.

TẬP LỆNH CỦA BÊN THỨ BA LÀ GÌ

Tập lệnh bên thứ 3 hay tài nguyên bên thứ 3 hay file bên thứ 3 thì cũng là như nhau chỉ khác nhau là ở chỗ ai thích gọi như thế nào thì gọi.

Cái này được ám chỉ là bạn sử dụng tải một thứ gì đó khác không phải từ domain tên miền của bạn, thì sẽ được gọi là tài nguyên bên thứ 3. Các tài nguyên bên thứ 3 thông thường là các file javascript và font còn cách file như html, css , ảnh cũng được gọi là tài nguyên bên thứ 3 nhưng ở phạm trù CDN rồi, hay dùng api cũng là phạm trù khác. Mình viết này mình chỉ chia sẻ một góc nhỏ về tài nguyên bên thứ 3 thôi còn mấy cái cdn, api thì mình sẽ chia sẻ ở bài viết khác.

Các tập lệnh của bên thứ ba bổ sung một loạt các tính năng hay và hữu ích cho trang website của bạn, đơn giản bạn chỉ muốn giảm tải máy chủ webhost, đặc biệt là làm cho trang web trở liên kết đồng bộ với nhau hơn. Như các tính năng như analytics, quảng cáo, tracking, nút chia sẻ mạng xã hội, nhúng video … – tất cả chúng đều có thể thực hiện được nhờ các tập lệnh của bên thứ ba, đó là theo mình là những giá trị quan trọng nhất khi sử tài nguyên bên thứ 3 ở thời điểm hiện tại sự đồng bộ.

Báo cáo về tình trạng sử dụng tài nguyên bên thứ 3: https://httparchive.org/reports/state-of-javascript website năm 2020 trung bình sử dụng tài nguyên bên ngoài được các trang web yêu cầu là giao diện desktop là 21 và giao diện mobile là 20 và tổng kích thước của chúng là khoảng giao diện desktop là 458 KB và giao diện mobile là 424,4 KB

93,59% trang web sử dụng ít nhất một tài nguyên của bên thứ ba ( chắc bạn cũng đang dùng ??)

Theo thông kê toàn là những con số khủng lồ.

Những lợi ích tài nguyên bên thứ 3 đem lại cho website thì cũng rất nhiều nhưng hạn chế tác độ đến tốc độ load website thì cũng không ít.

Giờ chúng ta bắt đầu những phương pháp tối ưu tài nguyên bên thứ 3 nhé, để giải quyết những hạn chế của việc sử dụng tài nguyên bên thứ 3.

Còn cách kiểm tra tài nguyên bên thứ 3 bạn đang sử dụng thế nào và nó tác động ảnh hưởng đến tốc độ load website thì bạn có thể truy cập bất kỳ công cụ speed nào cũng được mình gợi là như gtmetrix (test tài nguyên bên thứ 3 mình thấy gtmetrix chọn sever hongkong là tốt nhất với mình), tool pingdom, chrome developer tools, webpagetest … rất nhiều công cụ, Chắc cái kiểm tra này quá dễ với mọi người nên mình sẽ bỏ qua.

Hạn chế sử dụng tài nguyên bên thứ 3

đây chắc là hơi đi ngược lại với nội dung chủ đề bài viết này, nhưng thực sự thì khi google chrome đã thay đổi chính sách cache chúng ta không nên cố gắng kiểu tăng tốc website áp dụng những chiến lược kiểu cũ như dùng jquery cdn để tăng tốc WordPress giờ chiến thuật đó không hề đúng, bây giờ thì nó lại tác dụng ngược lại.

Loại bỏ những tài nguyên bên thứ 3 chỉ là những tính năng chuyển nó về webhost để bạn tự tải, bây giờ như mình đã nói bên trên tài nguyên bên thứ 3 chỉ tốt nhất là mang tính chất đồng bộ kết nối với nhau, chứ không phải là thêm tính năng nếu bạn muốn thêm tính năng thì hãy lưu trữ tại webhost đặc biệt là những file javascript, file javascript chắc là file quốc dân sử dụng tài nguyên bên thứ 3.

Như google analytic có rất nhiều plugin WordPress hỗ trợ lưu trữ file google analytic tại webhost cho bạn sẽ cải thiên tốc độ website nên đáng kể đó, có rất nhiều chiến thuật khác mình chưa liệt kê tại đây mình chỉ ví dụ nhẹ nhàng về google analytics.

Hãy cố gắng hạn chế sử dụng tài nguyên bên thứ 3 tối đa nhất có thể.

chỉ nên sử dụng tài nguyên bên 3 có máy chủ chất lượng cao

Đây là một điều rất quan trọng, giống như bạn sử dụng gói hosting, có gói hosting chất lượng cao và có gói hosting chất lượng thấp, có nhà cung cấp webhost uy tín và cũng có nhà cung cấp webhost không uy tín.

Hãy lựa chọn những nhà phân phối tài nguyên bên thứ 3 hàng đầu có máy chủ mạnh như google, microsoft, amazon, cloudflare… ghi chú một chút không hiểu sao riêng thằng facebook không hiểu sao dùng tài nguyên của nó hơi chán, cũng có thể là do chưa đầu tư cơ sở hạ tầng ở khu vực đông nam á chăng, hay là chỉ toàn tâm với bên trong của facebook còn tài nguyên bên thứ 3 thì cũng bình thản, mong facebook cải tổ sớm vấn đề này.

Chắc tài nguyên bên thứ 3 thì mình ấn tượng nhất là google và cloudflare là dùng ở Việt Nam là rất ngon, cá nhân mình thích nhất là bên google về khoản này.

Bạn không nên sử dụng tài nguyên bên thứ 3 những máy chủ kém chất lượng và khoảng cách xa người dùng của bạn, tốc độ sẽ tác động tiêu cực rất lớn đến website của bạn.

Lazy load file tài nguyên bên thứ 3

Đây là một kỹ thuật rất hay, cũng mới nổi lên thôi cũng chưa có nhiều người biết và sử dụng.

Kỹ thuật này chỉ lên áp dụng khi sử dùng tài bên thứ 3 rất tốt, không nên sử dụng những file tại webhost của bạn rất dễ lỗi.

WordPress hiện tại mình thấy có 2 plugin đã làm khá tốt về vấn đề đấy tại thời điểm mình viết bài này thì chỉ có 2 plugin đó mình nghĩ chắc chắn trong tương lai sẽ có nhiều plugin về tính năng này.

Kỹ thuật này cũng rất hay mình rất là thích.

2 plugin hỗ trợ là wp rocket (trả phí) và flying scripts (miễn phí).

wp rocket lazy load javascript:

wp-rocket thì chỉ hỗ trợ javascript, tài nguyên bên thứ 3 là javascript là rất đủ rồi.

flying scripts:

Không chỉ mỗi javascript được hỗ trợ như css các file khác cũng được hỗ trợ nhé với plugin flying scripts, nó hiện tại là plugin đa năng nhất để áp dụng kỹ thuật lazy load tận chí nó áp dụng được cả file tại webhost (rất dễ gây lỗi nếu dùng lazy load file tại webhost chỉ thực sự ngon khi áp dụng tài nguyên bên thứ 3, tác giả của plugin là Gijo Varghese ( anh này là một cao thủ trong làng tăng tốc độ load website WordPress) hy vọng trong tương lai sẽ cải thiện được lazy load tài nguyên trong tự host.

Nhưng hiện thời điểm hiện tại thì flying scripts làm tài nguyên bên thứ 3 là rất ngon.

Mình sẽ sớm viết một bài viết và video hướng dẫn chi tiết về plugin flying scripts, mình rất ấn tượng và yêu thích plugin này.

Cách sử dụng flying scripts bạn chỉ cần nhập đường dẫn file đó hoặc chỉ cần nhập domain của file đó là nó sẽ tự động nhận hết nhà và việc còn lại là để nó tự làm flying scripts sử dụng rất dễ.

Điều chỉnh thứ tự tải tài nguyên bên thứ 3

Phần trước mình có giới thiệu kỹ thuật lazy load javascript nó cũng là một trong những chiến lược điều chỉnh thứ tự tải của trình duyệt.

Có những chiến lược tải này có thể áp dụng vào tài nguyên bên thứ 3 bạn có thể cân nhắc sử dụng:

Chiến lược mình vẫn hay dùng với tài nguyên bên thứ 3 là vừa cho xuống footer cộng thêm trì hoãn (defer).

Theo như nghiên cứu file javascript của google analytic cho xuống footer sẽ giúp website bạn load nhanh hơn 100ms so với để ở header.

Nó rất đáng để làm, mỗi tội là nó hơi sai thông số một chút thời gian online (chưa đầy 100ms ~~ 400ms tùy vào chất lượng hosting của bạn) trên trang thì bạn cộng bù trừ công thêm là xong, còn bảo không thể chấp nhập được sai số một chút google analytic thì thôi vậy. 100 ms load nhanh có thể giúp bạn tăng doanh thu còn phân tích số liệu google analytic bạn có tư duy thì bù trù bạn vẫn sử lý công việc được.

Mình có chia sẻ thủ thuật tăng tốc độ google analytic lên gấp 100 lần mình cũng chia sẻ bài viết lên một số nhóm facebook themes flatsome gì đó, trong bài viết mình khuyên là hãy để google analytic javascript xuống footer có một anh chàng vào ngay nói “sai số trả thấy hiểu quả gì trả thay đổi gì chỉ được tiêu đề”, mình nghĩ chắc anh chàng này còn chưa thử đã và test cứ phán như thánh cái đã, lúc đó mình không rảnh trả lời bình luận của bạn đấy, giờ tiện mình giải thích về chủ đề này hy vọng sẽ giá trị cho mọi người và bạn ấy chắc cũng không đọc bài viết này đâu: mình nghĩ mà sai số một chút không đáng kể thì có giúp bạn ra tiền được không? (nếu bạn là trùm phân tích dữ liệu analytic thì sàn nào bạn cũng nhảy được phần mềm đo lường dữ liệu nào bạn cũng đo được hết, bạn có thể tự đo lường khoảng cách delay bao nhiêu giây khi chuyển xuống footer để bạn tính thêm hoặc nếu trong trường hợp gọi là xem google analytic kiểu cho vui dạo này website nhiều người vào thế nhỉ chỉ đơn giản là vậy thì vẫn hãy để ở footer), người dùng load nhanh hơn 100ms thì giúp bạn ra tiền đấy.

Các cao thủ phân tích analytics mới để ý sai số ảnh hưởng đến quyết định của họ, còn blogger cơ bản như mình hay trang bán hàng cơ bản thì bận tâm làm gì).

Sai số một chút đánh đổi được với tốc độ load nhanh hơn cũng rất đáng.

load nhanh thêm 100ms đã nâng cao trải nghiệm người dùng hay thêm sự chính xác vài trăm ms analytic thì người dùng không trả tiền cho bạn (người dùng đâu có được xem tài khoản analytic của bạn đâu)

Quảng cáo một chút nhé, giờ mình có lập hội nhóm group facebook cộng đồng tăng tốc độ WordPress 2021, bạn có thể truy cập vào đây đặt câu hỏi mà bạn đang thắc mắc để mọi người và mình cùng nhau học hỏi về tăng tốc WordPress, nhóm này trên tiêu chí là học hỏi hỗ trợ nhau. Mình rảnh rỗi mình vẫn lên group đây trả lời câu hỏi của mọi người và học hỏi từ mọi người.

Quảng cáo thế thôi giờ quay lại về chủ đề nhé.

kinh nghiệm của mình thấy hãy luôn để tài nguyên bên thứ ở footer (chân trang) + defer ngoại trừ google font, hạn chế sử dụng dụng tài nguyên màn hình đầu mà tài nguyên bên thứ 3 nhé như cho vào header.

google font là nó là một phạm trù khác rồi, mình sẽ sớm hướng dẫn bạn tối ưu google font từ a đến z. (mình sẽ sớm chia sẻ về chủ đề này).

Sử dụng preconnect

preconnect là kỹ thuật kết nối sớm với tài nguyên bên thứ 3.

Hiểu đơn giản là ngày nào bạn cũng ăn cơm, khi bạn nấu cơm đi, trưa bạn đi nấu xong để chiều bạn ăn cũng. Không nhất thiết là cứ phải là chiều chiều đói bụng mới đi nấu cơm.

Ngắn ngọn là : kiểu gì cũng dùng lên mình làm trước. Kiểu con người thì kiểu gì cũng cần tiền mình đi kiếm tiền trước khi cần, không nhất thiết là cứ phải đang cần thì mới đi kiếm tiền.

preconnect khái niệm giải thích ngắn ngọn là như vậy đấy.

Đây là kỹ thuật mình rất thích sử dụng và rất khoái sử dụng gần như tài nguyên bên thứ 3 nào mình cũng sử dụng kỹ thuật này, mình sẽ hướng dẫn cách sử dụng kỹ thuật này.

Ghi chú: mình vẽ hình hơi lệnh một tí các bạn thông cảm, nhưng quan trọng các bạn hiểu nguyên lý hoạt động và lợi ích của preconnect là được

Nếu bạn sử dụng tài nguyên bên thứ 3 nếu dùng preconnect thì tốc độ tải trang sẽ tăng lên rất nhiều, đặc biệt đã sử dụng cdn là phải dùng preconnect.

Giờ mình sẽ hướng dẫn sử dụng preconnect nhé.

Đoạn code này hãy cho vào file functions.php

function wptangtoc_preconnect_file_quan_trong() {
?>
<link href='//wptangtoc.com' crossorigin rel='preconnect' />
<?php
}
add_action('wp_head', 'wptangtoc_preconnect_file_quan_trong',6);

bạn hãy thay wptangtoc.com bằng domain mà bạn sử dụng tài nguyên bên thứ 3 vào nhé.

preconnect nếu bạn thêm crossorigin, crossorigin hiểu đơn giản là báo với trình duyệt là nó rất quan trọng, những tài nguyên bên thứ 3 mà liên quan đến hiển thị màn hình đầu bạn cần phải cho thêm crossorigin nhé ví dụ như google font, adobe font, cdn truyền thống …

Giờ mình sẽ hướng dẫn cách preconnect thông thường, bạn chỉ cần xóa crossorigin là xong, là những file mà bạn cho vào footer hay những file bạn cảm thấy nó không liên quan đến tuyến hiển thị màn hình đầu, ví dụ như google analytic, chatbox, fanpage facebook, bình luận facebook, subiz chat …

đoạn code này hãy cho vào file functions.php

function wptangtoc_preconnect_thong_thuong() {
?>
<link href='//wptangtoc.com' rel='preconnect' />
<?php
}
add_action('wp_head', 'wptangtoc_preconnect_thong_thuong',8);

bạn hãy thay wptangtoc.com bằng domain mà bạn sử dụng tài nguyên bên thứ 3 vào nhé. nếu bạn muốn thêm bạn dùng 2 thêm vài nguồn tài nguyên bên thứ 3 thì hãy như thế này. <link href='//wptangtoc.com' rel='preconnect' /> bạn cứ nhân bản đoạn này rồi thay bằng url mình muốn.

Mình sẽ ví dụ một đoạn code thế này nhé.

đoạn code này hãy cho vào file functions.php

function wptangtoc_preconnect_full() {
?>
<link href='//fonts.gstatic.com' crossorigin rel='preconnect' />
<link href='//www.googletagmanager.com/' rel='preconnect' />
<link href='//googleads.g.doubleclick.net/'  rel='preconnect' />
<link href='//embed.tawk.to/' rel='preconnect' />
<link href='//www.googleadservices.com/'  rel='preconnect' />
<link href='//google-analytics.com/' rel='preconnect' />
<?php
}
add_action('wp_head', 'wptangtoc_preconnect_full',7);

Bạn thay những domain bạn mà bạn sử dụng và xóa những link bạn không sử dụng ra nhé.

Ghi chú: nếu bạn đã lazy load javascript sử dụng chiến lược ở bên trên rồi thì không cần thiết phải dùng thêm preconnect để trình duyệt tập trung làm những công việc khác.

Tóm tắt:

Đây là những kỹ thuật tăng tốc độ tài nguyên bên thứ 3 rất hay, hy vọng bài viết này sẽ giúp tăng tốc độ website của bạn.

Nếu có vấn đề thắc mắc gì thì cứ bình luận ở phía bên dưới nếu mình rảnh sẽ giải đáp thắc mắc cho bạn.