Hướng dẫn tối ưu tăng tốc độ website nâng cao – Phần 6 – Tối ưu hóa tài sản cục bộ: CSS, JS…

Tối ưu hóa tốc độ trang web là một yếu tố quan trọng trong việc cung cấp trải nghiệm người dùng xuất sắc và cải thiện hiệu suất trang web của bạn. Trong loạt bài viết “Hướng dẫn tối ưu tăng tốc độ website nâng cao,” chúng ta đã đi sâu vào những chi tiết quan trọng để đảm bảo trang web của bạn hoạt động nhanh chóng và mượt mà. Ở phần 5 này, chúng ta sẽ khám phá một khía cạnh quan trọng khác của tối ưu hóa: tối ưu hóa tài sản cục bộ.

Tài sản cục bộ, bao gồm hình ảnh, tệp CSS, và JavaScript, đóng một vai trò quan trọng trong tốc độ tải trang. Chúng có thể ảnh hưởng đáng kể đến thời gian tải trang của bạn và do đó ảnh hưởng đến trải nghiệm người dùng. Trong bài viết này, chúng ta sẽ tìm hiểu cách tối ưu hóa và quản lý tài sản cục bộ để đạt được hiệu suất tối ưu cho trang web của bạn. Hãy cùng bắt đầu bằng cách khám phá các chiến lược quan trọng để tạo ra trang web nhanh chóng và thú vị hơn cho người dùng của bạn.

Giảm yêu cầu tài sản

Yêu cầu nhanh nhất là yêu cầu không bao giờ được tạo ra! Và cách rõ ràng nhất để giảm yêu cầu tài sản (và tổng HTML) là không gọi chúng từ đầu. Rất nhiều người dành quá nhiều thời gian cố gắng nén và kết hợp những thứ không nên xuất hiện trên trang web từ đầu! Xin vui lòng xem xét lại mọi thứ bạn đặt trên trang web của mình.

• Loại bỏ những thứ bạn không cần thiết. (Các plugin, hình ảnh, phông chữ, vv.)
• Loại bỏ các hiệu ứng hình ảnh mà bạn không cần. (Hoạt ảnh, rê chuột, vv.)
• Tắt CSS/JS của plugin không cần thiết.
• Xem xét di chuyển các phần tử đến các trang khác. Đừng đặt toàn bộ trang web lên trang chủ.
• Càng ít thứ bạn tải lên, càng ít tài sản cần phải tải.

Loại bỏ các tệp JavaScript core của WordPress không sử dụng

WordPress mặc định bao gồm một vài tệp JavaScript có thể không được sử dụng. Bạn có thể tắt chúng bằng một số đoạn mã đơn giản trong tệp functions.php của bạn.

• wp-embed.js – tiện lợi để nhúng video Youtube hoặc hiển thị liên kết trong biên tập và nội dung. Nếu bạn thực sự không bao giờ nhúng video và toàn bộ nội dung của bạn chỉ là văn bản và hình ảnh, bạn có thể gỡ bỏ nó.
• wp-emoji-release.js – đoạn mã JavaScript nhỏ chuyển đổi dấu câu thành biểu tượng cảm xúc. Bạn có thể tắt nó bởi vì các trình duyệt hiện đại đã hỗ trợ biểu tượng cảm xúc mặc định.
• jquery-migrate.min.js – hỗ trợ cho các chủ đề và plugin WordPress cũ hơn vẫn chạy trên thư viện jquery cũ. Các trang web sử dụng các chủ đề/plugin đã cập nhật có thể an toàn tắt nó.
• jquery.js – thư viện JS lớn được sử dụng bởi nhiều chủ đề/plugin. Điều này rất tiện lợi vì chủ đề/plugin sẽ không tải thêm JS nếu họ có thể sử dụng jquery JS mặc định. Vấn đề là một số chủ đề/plugin KHÔNG sử dụng nó và họ vẫn tải JS riêng của họ. Tắt nó nếu chủ đề/plugin của bạn không sử dụng nó. Nếu bạn không biết, thì tắt và kiểm tra mọi thứ cẩn thận… hoặc tham khảo tài liệu hướng dẫn cho mọi chủ đề/plugin bạn đã cài đặt.

Tôi chắc rằng bạn đã thấy một số plugin tối ưu hiệu suất đề xuất tắt chúng này thay bạn. Tôi đề xuất không sử dụng chúng, vì đôi khi chúng tạo thêm tải trọng. Tôi thích tắt chúng bằng tay trong functions.php HOẶC sử dụng các chức năng tích hợp trong plugin lưu trữ của mình.

Sử dụng các tùy chỉnh tối ưu hóa CSS/JS tự nhiên từ chủ đề và plugin của bạn

Nếu chủ đề hoặc plugin của bạn có tính năng tối ưu hóa CSS/JS tích hợp, hãy sử dụng chúng, vì chúng an toàn hơn và có khả năng không gây ra bất kỳ vấn đề nào.

• Chủ đề hoặc trình xây dựng trang cho phép kết hợp và tối giản hóa CSS/JS – hãy sử dụng nó.
• Các plugin cho phép lựa chọn khác nhau cho việc tạo CSS – luôn chọn “tệp CSS bên ngoài”, bởi vì nó nhanh hơn và an toàn hơn so với việc đặt chúng “trong dòng” hoặc “trong cơ sở dữ liệu”. Chỉ sử dụng trong dòng nếu CSS rất nhỏ (ví dụ: chỉ có 3 dòng).

Kết hợp CSS/JS chỉ dành cho các trang web nhỏ

Có một cuộc tranh luận lớn xem bạn có nên kết hợp và tối giản hóa CSS/JS của bạn hay không, còn gọi là “nối chuỗi”. Tôi tin rằng (nói chung) tốt hơn nếu bạn không kết hợp CSS/JS. Với điều đó nói, các trang web nhỏ có thể hưởng lợi từ việc kết hợp vì hầu hết thời gian tải của CSS/JS nhỏ sẽ đến từ việc tìm kiếm DNS thay vì xử lý mã.

Còn đối với các trang web lớn hoặc các tệp CSS lớn hơn, tôi chắc chắn không nên kết hợp chúng. Bạn có thể đọc liên kết ở trên để biết lý do tại sao. Đơn giản, đó là vì HTTP/2 khiến việc nối chuỗi trở nên không cần thiết và cũng không phải tất cả CSS/JS đều nên được tải trong một tệp duy nhất.

Nếu bạn có kế hoạch kết hợp CSS/JS, trong ý kiến của tôi, điều tốt nhất là chỉ làm điều này thông qua tùy chọn CSS của chủ đề của bạn. (Tất nhiên, nó chỉ kết hợp CSS liên quan đến chủ đề và không phải là plugin.)

Kết hợp CSS/JS cho các trang web lớn

Tôi đã nói vì sao không nên kết hợp CSS/JS, và tôi vẫn kiên định với quan điểm đó. Nhưng tôi biết có một số người sẽ cố gắng làm điều này dù bất kể vì họ quan tâm hơn đến điểm số trang hoặc những gì người khác trên Internet nói… được, làm như sau:

• DỄ DÀNG – sử dụng tùy chọn kết hợp CSS/JS trong plugin lưu trữ của bạn. Kiểm tra trang web của bạn. Nếu một số kiểu dáng hoặc chức năng bị lỗi, thì loại trừ những vấn đề gây ra lỗi đó.
• NÂNG CAO – sử dụng một plugin kết hợp CSS/JS chuyên biệt (Autoptimize là tốt nhất) cùng với một plugin lưu trữ. Phương pháp này đòi hỏi cấu hình nhiều hơn nhưng mang lại sự kiểm soát cụ thể hơn về tối ưu hóa và giúp giảm tải đối với cơ chế lưu trữ của bạn. Thực tế, nó có thể tốt vì thay đổi nội dung sẽ không xóa bỏ CSS/JS của bạn.
• LƯU Ý: đừng sử dụng tính năng kết hợp trong plugin lưu trữ nếu bạn đã thực hiện nó bằng một plugin khác.
• LƯU Ý #2: nếu chủ đề/trình xây dựng trang của bạn cũng có tùy chọn kết hợp… vâng, bạn có thể sử dụng chúng cùng nhau. Nhưng hãy kết hợp trình xây dựng trang và các plugin trước, sau đó thực hiện kết hợp tổng thể từ plugin lưu trữ của bạn.
  

Phải làm gì khi kiểu dáng hoặc chức năng bị lỗi (điều này sẽ xảy ra đối với 95% số bạn). Tắt tối ưu hóa và bật từng cái một – kiểm tra từng thay đổi. Thử với chỉ CSS, sau đó thử với chỉ JS. Đôi khi, chỉ có một CSS hoặc JS đang gây ra vấn đề.

Kết hợp CSS thủ công

Cách thông minh khác để giảm yêu cầu CSS không cần thiết là tắt tất cả CSS tùy chỉnh được nạp bởi các plugin và thêm chúng thủ công vào phần CSS tùy chỉnh của chủ đề của bạn. Vâng… nếu bạn đã kết hợp tất cả CSS vào phần CSS tùy chỉnh của chủ đề, có lẽ bạn sẽ không cần các plugin “Thêm CSS tùy chỉnh” nữa. Loại bỏ chúng đi.

Một số plugin có một tùy chọn dễ dàng để tắt kiểu dáng CSS của họ. Các plugin khác bạn chỉ có thể tắt CSS bằng đoạn mã nạp thông qua tệp functions.php. Đối với các plugin không cho phép cả hai cách này, bạn có thể chỉnh sửa thủ công CSS gọi từ plugin (nhưng bạn sẽ phải làm lại những thay đổi này nếu bạn cập nhật plugin).

Loại bỏ các kiểu CSS không sử dụng

Bạn có thể làm nhẹ CSS của bạn bằng cách loại bỏ tất cả các kiểu không sử dụng. Chỉ cần vào CSS của chủ đề hoặc plugin của bạn và xóa bất cứ điều gì không được sử dụng. Thường xuyên, các chủ đề và plugin có các kiểu trùng lặp hoặc không cần thiết cho các phần tử giống nhau. Có thể giúp nếu bạn tạo ảnh chụp màn hình của các mẫu trang web trước khi bạn chỉnh sửa.

• Các phần không sử dụng.
• Các khối hoặc phần tử không sử dụng.
• Các nút hoặc biểu tượng không sử dụng.
• Bảng không sử dụng.
• Kiểu chữ không sử dụng.

Một điều cần lưu ý là nếu bạn loại bỏ từ CSS mặc định của chủ đề hoặc plugin, chúng có thể quay lại nếu bạn cập nhật chủ đề/plugin sau này.

Loại bỏ mã JS không sử dụng

Chúc bạn may mắn khi cố gắng thực hiện điều này. Nó gần như là điều không thể, trừ khi mã JS này được viết theo yêu cầu riêng bởi bạn. Lý do tại sao nhiều trang web tải mã JS không sử dụng là vì nó đang tải JS cho tất cả các tính năng có sẵn trong chủ đề/plugin của bạn (đúng, thậm chí là những tính năng bạn không sử dụng).

Vì vậy, bạn có thể thử loại bỏ chúng bằng cách thủ công, nhưng điều đó có nghĩa là chủ đề hoặc plugin của bạn có thể bị lỗi nếu bạn thay đổi cài đặt hoặc tùy chọn của chúng sau này. Thực sự không có cách nào ngoại trừ việc thực hiện một việc chỉnh sửa mã và làm thế nào bạn có thể làm được điều đó? Đó là công việc của nhà phát triển chủ đề hoặc plugin.

Những gì chúng ta có thể làm có lẽ là chẩn đoán trang web của bạn và xem có bao nhiêu mã JS không sử dụng. Và từ đó, bạn có thể xác định được phần nào trong chủ đề và plugin của bạn đang tạo ra sự phình to béo và cái nào cần thay thế.

Làm thủ công CSS/JS

Nếu bạn có kỹ năng, bạn có thể tiến xa hơn bằng cách viết lại toàn bộ CSS/JS của bạn từ đầu. Tỉ mỉ làm sạch và sắp xếp lại các kiểu để làm cho mã dễ đọc hơn và nhẹ nhàng hơn khi phân tích. Trong những thời điểm như vậy, bạn thậm chí có thể xem xét lại thiết kế của mình để làm cho mọi thứ trở nên đơn giản hơn.

Javascript async và defer

Có rất nhiều thảo luận về các chiến thuật JS async/defer, nhưng chúng không luôn được sử dụng với lý do tốt. Và điều này càng không giúp ích khi các bài kiểm tra trang web phiền phức đưa ra các khuyến nghị tổng quát cho người dùng không biết cách JS hoạt động.

• Không phải tất cả các mã JavaScript đều nên được đặt làm async hoặc defer!
• Mọi mã JS được sử dụng cho các mục hiển thị đầu trang (ATF) nên để nguyên nguyên.
• Mọi mã JS không được sử dụng cho các phần quan trọng nên được đặt là defer nếu bạn không cần chức năng của chúng ngay lập tức.
• JS async có thể được sử dụng miễn là bạn thử nghiệm trước.

Vấn đề với các bài kiểm tra tốc độ là họ cố gắng cải thiện điểm số trang web bằng mọi giá. Họ không biết mã JS của bạn được sử dụng cụ thể để làm gì, vì vậy họ đưa ra những đề xuất tổng quát ngớ ngẩn có thể gây hại cho tải trang của bạn!

Đặt mã JS làm defer sẽ làm trễ hiệu ứng hoặc chức năng mà chúng phụ thuộc!

• Chức năng tìm kiếm AJAX (tự động điền) – đặt là defer là được.
• Theo dõi chuyển đổi – bạn muốn bắt đầu theo dõi sớm hay sau? (Tôi thích sau.)
• Hộp trò chuyện – dành cho mục bán hàng/hỗ trợ. Việc đặt là defer có lý.
• Hiển thị nội dung – bạn có trang hoặc nội dung đặc biệt phụ thuộc vào JS không? Nếu nội dung cụ thể đó quan trọng hoặc nằm gần đầu trang, thì không nên defer.
• Các plugin liên kết – bạn có JS cụ thể để hiển thị liên kết liên kết hội viên? Tôi nghĩ là defer là được.
• Cửa sổ pop-up – defer tốt hơn.
• Chức năng bảo mật – bất kỳ JS nào áp dụng captcha hoặc ngăn người dùng nhấp chuột phải, hoặc bất kỳ bảo mật nào khác. Tôi nghĩ là defer là được.
• Sliders hoặc hiệu ứng hình ảnh – ý tưởng tồi tệ nếu chúng nằm ở đầu trang của bạn! Chúng sẽ tải chậm hơn nếu được defer!
• (Chắc chắn nên tránh defer các phần tử hiển thị ở gần đầu trang của bạn.)

Điều hài hước hơn nữa là bạn có thể tự “defer” các thứ bằng cách đặt mã vào chân trang thay vì phần đầu. Những thứ như Google Analytics có thể được đặt sau và sẽ tải sau (sau khi tất cả HTML đã được phân tích). Vì vậy, nếu bạn nghĩ cẩn thận, lý do duy nhất mọi người sử dụng JS async/defer là để tối ưu hóa việc tải các mã JS mà mặc định nằm ở đầu trang. Và nếu chúng được đặt ở đó, liệu bạn có nghĩ rằng nó có nghĩa là chúng cần phải tải sớm hơn không???

Vì vậy, như tôi đã nói, hãy cẩn thận khi sử dụng async/defer! Nếu bạn muốn thử nghiệm, hãy kiểm tra một cách cẩn thận. Nhưng nói chung, tôi thích để chúng nguyên trạng để an toàn. Không có ý nghĩa trong việc có điểm số cao hơn trong kiểm tra trang web nhưng các phần tử hoặc chức năng cụ thể của trang web của bạn tải chậm hơn. JS ít ảnh hưởng đối với các trang web được lập trình tốt.

Cách để làm nhỏ gọn mã HTML, CSS, JS

Tối ưu hóa mã giúp giảm kích thước tệp bằng cách loại bỏ tất cả các dấu cách và các phần mã không cần thiết. Điều này dẫn đến việc gửi ít byte hơn qua internet mà không làm mất chức năng nào. Điều này có lợi cho cả hai bên!

• Các trang web nhỏ không có nhiều lợi ích từ việc làm nhỏ gọn mã.
• Các trang web lớn sẽ có lợi ích nhiều hơn (đặc biệt đối với khách hàng truy cập từ thiết bị di động chậm hơn), nhưng ngay cả khi làm nhỏ gọn, sau khi mã CSS/JS của bạn đã được lưu vào bộ nhớ cache trình duyệt, việc này không giúp đỡ nhiều!

Vấn đề duy nhất cần quan tâm ở đây là LÀM CÁCH NÀO để thu nhỏ mã.

• Thiết lập qua plugin bộ nhớ cache – ổn đối với các trang web nhỏ.
• Thiết lập thông qua plugin tối ưu hóa CSS/JS cụ thể (Autoptimize) – tùy chọn tốt hơn cho các trang web lớn.
• Thiết lập thông qua một mạng phân phối nội dung (CDN) – phương pháp tốt nhất và dễ nhất, theo ý kiến của tôi.

Hầu hết mọi người làm nhỏ gọn bằng cách sử dụng plugin, hoặc plugin bộ nhớ cache hoặc một trong những “plugin hiệu suất” (Autoptimize) đặc biệt chuyên về việc kết hợp và làm nhỏ gọn CSS/JS của bạn. Plugin bộ nhớ cache là phương pháp tiện lợi nhất và hoạt động tốt cho tất cả các trang web. Nhưng nếu trang web của bạn lớn với nhiều trang và/hoặc có nhiều lưu lượng truy cập…bạn sẽ có kết quả tốt hơn với một plugin tối ưu hóa CSS/JS riêng biệt. Chúng có nhiều tính năng hơn, kiểm soát nhiều hơn và quan trọng nhất…họ giúp tiết kiệm tải máy chủ khi bạn xoá bộ nhớ cache (vì plugin bộ nhớ cache của bạn không cần phải xây dựng lại CSS/JS khi bộ nhớ cache trang web được xây dựng lại).

• Tải trọng bổ sung khi xây dựng bộ nhớ cache không tốt nếu bạn có một trang web lớn (và làm nhỏ gọn với plugin bộ nhớ cache). Mỗi khi bộ nhớ cache bị xóa, nó hoàn toàn xây dựng lại tất cả các trang và CSS/JS. Điều này nhanh chóng trên một trang web có 10-20 trang nhưng kỳ quái nếu bạn có nhiều trang và bố cục trang khác nhau.
• Tải trọng bổ sung cũng có thể gây khó khăn nếu bạn có lưu lượng truy cập thấp (và không có xây dựng bộ nhớ cache). Vì các lượt truy cập chưa được cache sẽ mất thời gian lâu hơn để tải (do công việc làm nhỏ gọn thêm).

Cách dễ nhất để làm nhỏ gọn là bật nó từ CDN của bạn (vì vậy nó được xử lý trên máy chủ của họ) thay vì làm chậm máy chủ web của bạn.

• Tôi chỉ bật tính năng làm tối ưu từ Cloudflare. Tôi không sử dụng nó từ bất kỳ plugin nào.
• Việc bật tính năng này rất dễ dàng. Chỉ cần kiểm tra các hộp đánh dấu.

Tải lười biếng hình ảnh

Tôi không thích lazy load là một chiến thuật tổng quát. Nó khiến trang web của bạn trông nhanh hơn trong các bài kiểm tra trang web, nhưng lại làm cho hình ảnh tải chậm hơn đối với người truy cập thực sự. Điều này tạo ra trải nghiệm người dùng tồi tệ! Nếu bạn quyết định sử dụng nó, bạn cần biết những thứ nên được tải chậm và những thứ không nên.

• AN TOÀN để tải hình ảnh chậm ở phía dưới của trang nhưng KHÔNG NÊN làm như vậy nếu trang web của bạn có nhiều người dùng cuộn nhanh (như trang web mua sắm).
• KHÔNG NÊN khuyến nghị tải hình ảnh chậm ở đầu trang (đầu trang, banner) vì điều này khiến chúng trông chậm hơn đối với người truy cập.
• KHÔNG CẦN phải tải hình ảnh chậm nếu bạn không có nhiều hình ảnh hoặc chúng nhỏ.

Trong quá trình tối ưu hóa hàng tuần cho nhiều trang web, tôi có thể đảm bảo rằng 99% trong số chúng sẽ trông nhanh hơn nếu không sử dụng lazy load. Đáng tiếc rằng hầu hết các trang web không thể kiểm soát xem hình ảnh nào nên được tải chậm hay không. Hiện tại, đó chỉ là một cài đặt BẬT hoặc TẮT trong các plugin bộ nhớ cache. Không có quyền truy cập cụ thể. Lazy load nội bộ có sẵn trong các trình duyệt gần đây thông qua các thuộc tính để chỉ định “lazy” (bật) hoặc “eager” (tắt) hoặc “auto” (trình duyệt quyết định). Nhưng nếu bạn muốn dễ dàng hơn, tôi đề xuất không sử dụng lazy loading.

• Vậy lazy loading có làm tăng tốc tải trang không? – không! Nó trì hoãn nó. Trang web của bạn chỉ có điểm số cao hơn vì điều đó không kích hoạt hình ảnh để tải như thực tế sẽ xảy ra với người truy cập thực sự.
• Nhưng không phải lazy loading giảm sử dụng băng thông sao? – đúng, nhưng đó không phải là lợi ích lớn trừ khi hình ảnh của bạn lớn hoặc bạn có nhiều hình ảnh.
• Lazy loading có giúp tải ít thứ hơn không? – nó không tải ít thứ hơn. Nó tải cùng một thứ nhưng trì hoãn chúng. Nếu người dùng của bạn không cuộn, nó có ích. Nếu người dùng cuộn, nó gây hại.

Công cụ tối ưu hóa tài sản

Có một số plugin (thường được gọi là “công cụ tối ưu hóa tài sản”, “công cụ sắp xếp tài sản” hoặc “công cụ sắp xếp plugin”) có thể quyết định trang nào sẽ cho phép tải CSS/JS nào. Một số tổ chức theo plugin, vô hiệu hóa PLUGIN trên các trang bạn chọn. Một số khác tổ chức theo CSS/JS, vô hiệu hóa tải CSS/JS trên các trang bạn chọn.

Chúng đòi hỏi nhiều công việc để cấu hình và gây ra vấn đề cho trang web của bạn nếu bạn không cẩn thận. Bạn cũng phải cẩn thận khi chọn loại plugin. Một số viết rất tốt. Một số khác kém vì plugin của họ thêm tải lên riêng, điều này phá vỡ mục đích của họ! Nếu bạn vẫn muốn thử nghiệm với chúng, tìm hiểu kỹ về chúng và chúc bạn may mắn.

Đừng cố gắng loại bỏ mọi thứ trên mọi trang. Tập trung vào các plugin và CSS/JS nặng hơn. Tập trung vào các trang chậm và trang quan trọng hơn (như Trang chủ hoặc Giỏ hàng/Thanh toán). Tôi thích WP Gonzalez và Asset CleanUp. Nói chung, tôi khuyên bạn không nên sử dụng bất kỳ plugin này và chỉ chọn các plugin nhẹ từ đầu. Tôi không sử dụng chúng vì tôi thích tối ưu hóa bằng cách thủ công.

Triển khai một CDN, còn gọi là “mạng phân phối nội dung”

• Bạn có cần sử dụng một CDN không? Nếu lưu lượng của bạn tập trung ở địa phương – KHÔNG!
• Hãy thử Cloudflare để có CDN miễn phí dễ nhất. (Tốt cho người mới bắt đầu và nhiều trang web.)
• Muốn hiệu suất tốt hơn so với Cloudflare? Hãy thử BunnyCDN (vẫn giá thấp).
• Cần CDN cho các tệp lớn? Hãy thử S3 và Cloudfront!
• Muốn có một “CDN đẩy mạnh hơn”? Tìm hiểu về nó!
• Một số CDN phủ sóng các khu vực địa lý cụ thể tốt hơn các khu vực khác.

Thời gian trễ mạng là một vùng chung của sự chậm trễ trong việc gửi tài sản tĩnh (hình ảnh, CSS, JS). Khách hàng ở xa phải chờ lâu hơn 1-3 giây để nhận được tài sản mà họ yêu cầu. Nhưng nếu bạn sử dụng dịch vụ CDN, các tệp sẽ tải nhanh hơn vì chúng sẽ đến từ một máy chủ gương gần hơn với khách hàng. Đó thực sự chỉ là một dịch vụ CDN, một công ty với nhiều máy chủ gương trên toàn thế giới. Sự khác biệt giữa chúng nằm ở giá cả, tính năng và hiệu suất trên toàn thế giới.

Nếu bạn không biết bạn đang làm gì, hãy chỉ cần sử dụng Cloudflare và kết thúc nó. Nó miễn phí và hoạt động đủ tốt. Nếu bạn muốn khám phá thêm về CDN. Chỉ cần biết rằng có 2 loại CDN:

• CDN Kéo – phương pháp chi phối vì nó ít phiền toái cho người dùng. Người truy cập đầu tiên tải CDN (trải qua việc tải trang bị trễ) nhưng tất cả người truy cập sau đó đều nhận được tốc độ nhanh hơn. Các trang web có lưu lượng thấp có thể cảm thấy rằng nó không đáng để thực hiện, vì bộ nhớ cache của CDN hết hạn trước khi người truy cập tiếp theo đến.
• CDN Đẩy – hiệu suất cao hơn vì tệp được “đẩy” thủ công đến máy chủ gương của CDN bởi bạn hoặc plugin quản lý CDN của bạn. Với CDN đẩy, không có người truy cập nào sẽ trải qua việc “kéo CDN chậm”. Nhược điểm là việc đẩy tệp và các vấn đề có thể gặp phải hoặc trông không chính xác nếu người truy cập truy cập một CDN trang web thiếu tệp đã cập nhật.

CDN truyền thống so với Cloudflare

• Cloudflare không phải là một CDN nhưng có các tính năng giống CDN. Thực chất, đó là một dịch vụ DNS. Bạn kích hoạt nó bằng cách chỉ định tên miền của bạn (từ đăng ký của bạn) đến các máy chủ tên miền của Cloudflare. Sau đó quản lý các chức năng DNS của bạn từ Cloudflare, chỉ định nó trở lại máy chủ web của bạn và kích hoạt các tính năng hiệu suất/bảo mật của Cloudflare.
• CDN truyền thống hoạt động bằng cách cung cấp cho bạn một vùng miền tên miền (như “123yourdomain.maxcdn.com) nơi tài sản của bạn được sao chép. Sau đó, bạn cấu hình trang web của bạn để tải tất cả các tài sản tĩnh từ vùng này. Bạn cũng có thể che giấu tên miền CDN đó sau tên miền của bạn (như “cdn.yourdomain.com”).
• Cả CDN truyền thống và Cloudflare đều có thể được quản lý bằng một plugin CDN trên trang web của bạn. Bạn cũng có thể quản lý chúng từ plugin bộ nhớ đệm của bạn (tiện lợi nhất). Như vậy, plugin bộ nhớ đệm của bạn loại bỏ cả bộ nhớ đệm máy chủ và bộ nhớ đệm CDN cùng một lúc.

Tối ưu hóa Cloudflare

Ngoài việc kích hoạt CDN, bạn còn có thể thực hiện nhiều tối ưu hóa nhỏ khác với Cloudflare. Tuy nhiên, cũng có một số cài đặt bạn không nên thay đổi (vì chúng có thể gây hỏng trang web hoặc làm giảm hiệu suất).

Đúng vậy, tôi nghĩ bạn nên sử dụng Cloudflare ngay cả khi bạn không muốn sử dụng các tính năng hiệu suất/bảo mật của họ. Bạn có thể sử dụng chúng chỉ cho các chức năng DNS. Chức năng proxy của họ có thể dễ dàng bị tắt từ tab DNS; chỉ cần chuyển tất cả các biểu tượng mây màu cam thành màu xám.

Lưu trữ video trên máy chủ cục bộ so với ngoài máy chủ

• Không nên lưu trữ video trên máy chủ của bạn (đặc biệt nếu bạn cần chúng tải nhanh) HOẶC bạn có lưu lượng cao hoặc video lớn.
• CDN có thể giúp phục vụ video được tải từ máy chủ cục bộ.
• Các trang web lưu trữ video (Youtube, Vimeo) có thể làm cho việc lưu trữ bên ngoài trở nên rẻ hơn.
• S3 hoặc Vimeo rất tốt cho việc lưu trữ video riêng tư.

Nếu video của bạn tự động phát khi tải trang, bạn cần tải nhanh nhất có thể. Tôi không đề xuất tải chúng từ máy chủ của bạn vì điều này có thể nhanh chóng tiêu tốn giới hạn băng thông và làm chậm máy chủ của bạn.

• CDN – ít công việc kỹ thuật hơn vì video của bạn vẫn nằm trên máy chủ. CDN sẽ phục vụ video nhanh chóng trên toàn thế giới, nhưng có thể trở nên đắt đỏ nếu bạn có video lớn và/hoặc nhiều lưu lượng truy cập.
• Lưu trữ video miễn phí (Youtube, Vimeo) – giá thấp, tích hợp với cộng đồng video, nhưng tải tệ hơn các tệp kịch bản bên ngoài. Bạn có thể tránh được các tệp kịch bản bên ngoài bằng cách sử dụng iframe-lazyload nhưng điều này không giúp đỡ với video tự động phát.
• Lưu trữ bên ngoài trả phí (S3+Cloudfront, Vimeo business) – tốn tiền nhưng mang lại nhiều quyền kiểm soát hơn về cách video của bạn trông như thế nào và cũng cho phép bạn làm cho chúng riêng tư, chỉ có thể xem từ trang web của bạn. (Tốt cho nội dung dành cho thành viên.) Một số dịch vụ như Wistia, có giá rất đắt nhưng đi kèm với tính năng theo dõi chuyển đổi và các tính năng khác.

Lưu trữ video ở nơi khác luôn là một ý tưởng tuyệt vời. Vấn đề duy nhất là đảm bảo rằng chúng tải nhanh đủ và không làm tăng hóa đơn của bạn. Lưu trữ chúng trong S3 rất thuận tiện nếu bạn muốn kiểm soát và linh hoạt hơn về video.

• S3 tốt để tích hợp với phần mềm khác, như thương mại điện tử hoặc quản lý tải về, nhưng đòi hỏi nhiều công việc kỹ thuật hơn và có thể tốn tiền.
• S3 tốt cho việc tải về và phát trực tuyến video, nhưng có thể chậm đối với người dùng ở nước ngoài. Do đó, bạn nên luôn tích hợp S3 với Cloudfront CDN!
• S3 và Cloudfront đều thuộc Amazon AWS, giúp tích hợp dễ dàng hơn.

Các kế hoạch trả phí của Vimeo thật tuyệt vời; tôi thích chúng. Dễ dàng tạo hình ảnh nổi bật (bằng cách sử dụng plugin), dễ dàng đưa vào nội dung của bạn (nó chỉ nhúng). Có thể kiểm soát trang web nào nó hiển thị. Đi kèm với báo cáo video tốt, đếm lượt xem và theo dõi người dùng khác.

Lưu ý cuối cùng của tôi là nếu video này nằm trên trang chủ của bạn ngay phía trên… có lẽ đáng thử nghiệm các phương pháp khác nhau để xem phương pháp nào tải nhanh nhất. Có thể từ máy chủ của bạn, có thể S3 + Cloudfront, có thể Youtube/Vimeo! Tất cả các video không cần thiết khác, tình trạng chậm lại xuất phát từ trình phát video hơn là video thực tế. Và đối với những video như vậy, tôi có nhiều chiến lược hơn.

Lưu trữ những file có dung lượng lớn

Giống như với video, bạn không nên lưu trữ các tệp lớn trên máy chủ của bạn. Ngay cả khi chúng ít được truy cập hoặc tải xuống. Chỉ cần một người tải xuống một tệp 1GB từ máy chủ của bạn đủ để làm chậm lưu lượng truy cập web thông thường của bạn. Ngoài ra, nó không hợp lý khi có các tệp khổng lồ trên máy chủ khi thực hiện sao lưu trang web (lãng phí không gian).

• Sử dụng S3 để lưu trữ các tệp.
• Kết hợp nó với tính năng CDN Cloudfront của Amazon nếu bạn cần tốc độ tải xuống nhanh hơn cho khách truy cập trên toàn thế giới.
• Với tôi, các tệp lớn là bất kỳ tệp nào trên 50MB. Nếu bạn chỉ có một tệp 200MB mà ít khi được tải xuống thì cũng được. Nếu bạn có một tệp 1GB hoặc nhiều tệp 200MB… có lẽ không nên.

Quản lý thư viện Media lớn

Một số trang web có một thư viện phương tiện cỡ lớn đến nỗi nó không còn vừa trong máy chủ web nữa (với hàng tấn hình ảnh). Điều này là một vấn đề về hiệu suất vì ổ đĩa của máy chủ web thường là nơi nhanh nhất và thuận tiện nhất để lấy các tệp trang web. Đặt hình ảnh của bạn ở bất kỳ đâu khác có khả năng truy xuất chậm hơn.

Bạn có một số lựa chọn trong những thời điểm như vậy, mỗi lựa chọn đều có điểm mạnh và điểm yếu:

• Nâng cấp gói máy chủ – cách dễ dàng để có thêm không gian và hiệu suất tốt hơn mà không cần thay đổi trang web của bạn nhiều. Nhưng có chi phí hơn và vẫn có thể không đủ không gian.
• Chuyển tải lên S3 – sử dụng plugin WP Offload Media tuyệt vời. Nó cho phép tích hợp CDN Cloudfront nữa! Tôi thích phương pháp này nhưng có người có thể không thích chi phí.
• Thêm ổ đĩa khối – lý thuyết là đủ nhanh cho việc sử dụng ứng dụng và cũng giá cả phải chăng (1 đô la/tháng cho mỗi 10GB) nhưng tôi cảm thấy nó lộn xộn và không thực sự linh hoạt. Tất nhiên, bạn có thể gắn nó vào chỉ một số thư mục hoặc thậm chí toàn bộ thư mục wp-uploads.
• HOẶC bạn có thể xóa các kích thước phương tiện chưa sử dụng nếu bạn muốn nhanh chóng thu nhỏ thư viện của mình. Tôi đã thấy các trang web giảm từ 100k xuống còn 10k hình ảnh mà không cần thay đổi thiết kế nào!

Đúng, có các plugin thay thế có chức năng tương tự như WP Offload Media, nhưng không có plugin nào được công nhận một cách tương tự như đội ngũ phát triển của nó (Delicious Brains).