Categories Tối ưu JavaScript

Lợi và hại của việc sử dụng mã phổ biến miễn phí từ bên thứ ba trong website WordPress

Có một số mã phổ biến được nhiều website sử dụng, ví dụ:

Có nhiều thư viện dùng chung cho phép tải các mã này từ server của họ thay vì phải tải từ máy chủ của bạn (local host), ví dụ:

Như để nâng cấp thêm nhằm đem lại lợi ích tối đa, có một số CDN miễn phí như JetPack, jsDelivr, Statically.io còn bổ sung các CSS và JS từ những giao diện, plugin nằm trên WordPress.org nhằm giúp bạn đỡ phải host những file này.

Câu hỏi cho chúng ta là: lợi cũng như hại của biện pháp đẩy các file tĩnh lên CDN miễn phí là gì? Từ đó rút ra lựa chọn thích hợp.

top 10 file trên jsDelivr
Top 10 file được tải nhiều nhất trên jsDelivr

A. Lợi ích

  • Giảm tải cho máy chủ: điều hiển nhiên vì dữ liệu được tải từ máy chủ bên ngoài. Thao tác này trở nên có ý nghĩa hơn khi các CDN miễn phí ngoài host các file cực phổ biến như jQuery còn bổ sung hàng loạt các file CSS và JS trên WordPress.org, hệ quả là, hầu hết các file tĩnh (ở đây là CSS và JS) trên trang của bạn sẽ được host bên ngoài;
  • Các file phổ biến đã được cache sẵn: điều thậm chí còn có ích hơn, đó là nhờ việc nhiều website sử dụng nên các file này có khả năng được cache sẵn trên trình duyệt của người dùng trước khi họ vào website của bạn. Hệ quả có lợi: tạo ra cơ hội trang web của bạn tiết kiệm được thời gian tải trang.

Trong khi việc giảm tải cho máy chủ là chắc chắn, thì việc các file phổ biến được cache chỉ là tiềm năng, và yếu tố này phụ thuộc vào nhiều thứ khác (chủ yếu là độ phổ biến của file đó, và độ phổ biến của CDN mà bạn dùng, hai cái này càng cao, khả năng nó đã được cache càng lớn).

File như jQuery hay font phổ thông dĩ nhiên có khả năng được cache sẵn nhiều nhất, còn các file khác, cơ hội này sẽ nhỏ hơn nhiều. Nhưng dù sao thì vẫn có tiềm năng được cache sẵn hơn đáng kể so với việc bạn chỉ sử dụng localhost (tải file từ host của bạn).

Cập nhật: lợi ích này sắp không còn nữa vì lý do bảo mật, trình duyệt Chrome (có lượng người dùng lớn nhất thế giới) sẽ bắt người dùng tải lại tài nguyên của bên thứ ba ngay cả khi nó đã được tải trước đó ở tên miền khác.

B. Thiệt hại có thể là gì?

  • Không thể gộp được: các file JS lẫn CSS không được áp dụng biện pháp gộp nén, nếu không nó sẽ không sử dụng được CDN miễn phí. Đây có thể là điều bất lợi, vì trên nhiều website, việc áp dụng gộp JS rồi sử dụng defer/async JavaScript và việc gộp CSS rồi sử dụng critical CSS đóng góp đáng kể vào cải thiện tốc độ website;
  • Tăng nguy cơ downtime: việc sử dụng CDN miễn phí về lý thuyết có thể làm tăng nguy cơ website gián đoạn. Tuy nhiên lo lắng đó hầu như không có căn cứ, vì các máy chủ CDN dù miễn phí nhưng đều dựa trên các mạng lưới CDN lớn và có chất lượng tốt. Thời gian downtime của CDN trong phần lớn trường hợp sẽ nhỏ hơn downtime hosting của riêng bạn. Nói cách khác nó không làm tăng nguy cơ downtime, thậm chí còn giúp tăng uptime cho website nhờ giảm nguy cơ quá tải;
  • Làm tăng thời gian tải trang: vì nó gia tăng tìm kiếm DNS và kết nối bảo mật https (nếu có) so với sử dụng tài nguyên từ host gốc. Nếu bạn có càng nhiều kết nối tới bên thứ ba, thời gian này càng gia tăng, và có thể lên đến cả ngàn mili giây (=1s). Rất may chúng ta vẫn có cách khắc phục phần nào thông qua áp dụng preconnect hoặc prefetch– một cách đơn giản nhưng hiệu quả để giảm ảnh hưởng tiêu cực đến tốc độ của các tài nguyên bên thứ ba.

C. Kết luận

  • Nếu yếu tố tốc độ là ưu tiên hàng đầu của bạn thì việc sử dụng các file phổ biến được sử dụng từ CDN miễn phí có thể không phải là biện pháp có lợi nhất. Riêng cái này, thử trong thực tế sẽ cho quyết định chính xác có nên dùng hay không;
  • Nếu website của bạn không chịu áp lực về truy cập (*), việc sử dụng CDN không đóng góp ích lợi về giảm tải, lợi ích duy nhất còn lại là được cache sẵn;
  • Các website chịu áp lực về lưu lượng truy cập sẽ nhận được nhiều lợi ích nhất khi sử dụng CDN miễn phí cho các file tĩnh.

(*): Website chịu áp lực về lưu lượng truy cập có nghĩa là các trang web sẽ nhanh hơn hoặc/và ít gián đoạn đáng kể nếu lưu lượng truy cập trên trang giảm đi. Dĩ nhiên chẳng ai muốn web nhanh hơn bằng cách giảm lưu lượng truy cập…Các website chịu áp lực truy cập gặp giới hạn về đầu tư, họ không thể bỏ thêm tiền tăng chất lượng hosting để website không bị chậm. Cách duy nhất là sử dụng giải pháp miễn phí, và CDN miễn phí là một trong các lựa chọn hàng đầu.

D. Làm thế nào đưa ra được quyết định đúng?

Có chịu áp lực lưu lượng truy cập Không chịu áp lực truy cập
Gộp file không làm tăng tốc độ Nên sử dụng, giúp giảm ảnh hưởng đến host gốc trong khi không ảnh hưởng đến tốc độ Sử dụng hoặc không sử dụng không đem lại ảnh hưởng đặc biệt gì đến tốc độ hoặc khả năng giảm tải cho host. Trong trường hợp này, tiết kiệm năng lượng nhất đó là không sử dụng.
Gộp file làm tăng tốc độ đáng kể Tùy mức độ ảnh hưởng đến đâu, thường CSS ảnh hưởng hơn đến tốc độ, nên có thể gộp CSS trong khi vẫn để JS là các CDN bên ngoài giúp giảm áp lực Không nên sử dụng CDN miễn phí để host các file phổ biến, vì sẽ ảnh hưởng đến tốc độ, trong khi host bạn dư sức để tự xử lý

Cuối cùng, nhưng có thể là cú xoay quan trọng nhất, có thể bản thân mã CSS hoặc JS nào đó (kể cả jQuery) là hoàn toàn không cần thiết! Tôi không hề đùa cợt chút nào. Do vậy trước khi có ý định đẩy các file tĩnh lên CDN miễn phí, bạn cần làm một thao tác quan trọng đó là loại bỏ các plugin dư thừa và chọn được giao diện nhẹ nhàng (nhưng vẫn phải đảm bảo chức năng muốn có).

Khi các file tĩnh đã gọn gàng rồi, hãy làm một phân tích tiếp để biết được: hiện tại thì các file tĩnh nào đang thuộc về tài nguyên của bên thứ ba và bật mã nguồn lên sử dụng tìm kiếm (Ctrl + F) .css và .js để biết tên các file cụ thể. Với các host đủ khỏe, đủ gần người dùng, và website có lượng truy cập lớn, việc lôi tài nguyên của bên thứ ba về để local host, thậm chí còn giúp website tải nhanh hơn và cache tốt hơn (quyết định thời gian cache theo ý của bạn).

E. Vẫn còn

Tôi cứ tưởng đã đến phần cuối, nhưng hóa ra vẫn còn điều này nữa: Đôi khi việc sử dụng file của bên thứ ba là điều không thể tránh, ví dụ trong trường hợp bạn muốn sử dụng dịch vụ backup website, dịch vụ này có thể gọi đến các file bên ngoài host của bạn, vì dịch vụ backup đạt chất lượng và khả năng phòng ngừa rủi ro cao nhất khi nó lưu trữ dữ liệu bên ngoài host bạn đang sử dụng, nghĩa là lời gọi đến các yếu tố bên ngoài là điều chắc chắn phải có.

Một ví dụ khác là khi các dịch vụ của bên thứ ba có chất lượng vượt trội so với dịch vụ mặc định của WordPress, chẳng hạn dịch vụ tìm kiếm Algolia, dịch vụ comment Disqus.

Back to Top