Kết hợp Subdomain và Cloudflare làm CDN ảnh miễn phí

"CDN" có lẽ không còn quá xa lạ với bạn nữa. CDN giúp cho website được giảm tải số lượng request rất nhiều, đồng thời giúp trang web load nhanh hơn. Việc này cũng ít nhiều ảnh hưởng đến điểm số trên các công cụ đo tốc độ như Google Speed Insights, GTmetrix,...

Tìm kiếm trên mạng, bạn sẽ thấy nhiều bài viết về cách thiết lập CDN. Ưu, nhược điểm của mỗi công cụ đều có cả. Ở bài viết này, tôi sẽ hướng dẫn cách sử dụng subdomain làm CDN hình ảnh miễn phí từ Cloudflare bằng plugin W3 Total Cache.

Để hiểu rõ cách hoạt động, tôi sẽ tóm tắt quy trình thực hiện như sau:

1. Tạo subdomain và thư mục để lưu trữ hình ảnh.
2. Thiết lập cấu hình CDN trong plugin W3 Total Cache.
3. Thay đổi url CDN trong sitemap của Rank Math.
4. Thiết lập thẻ Canonical để tốt cho SEO.

Tạo subdomain

Bạn vẫn có thể sử dụng hosting hiện tại cho web chính làm CDN cũng được. Còn tôi tận dụng những hosting miễn phí để lưu trữ hình ảnh. Bạn có thể tham khảo 123host hoặc Azdigi.

Bước trỏ bản ghi DNS từ subdomain đến hosting phụ các bạn có thể tự làm hoặc tham khảo trên mạng. Thao tác thì cũng giống như trỏ tên miền chính vậy. Tôi sẽ không hướng dẫn lại nhé.

Nếu bạn chỉ sử dụng CDN cho subdomain thì không cần thêm 2 bản ghi A và CNAME hoặc tắt luôn đám mây vàng (Proxy) cho tên miền chính.

Đừng quên bật chế độ Cache Everything trong Cloudflare.

Về cấu trúc thư mục để lưu hình ảnh trên subdomain. Bạn hãy thiết lập như ở web chính.

Ví dụ link hình ảnh ở web chính là:

• domain.com/wp-content/uploads/2023/10/abc.jpg

Thì link hình ảnh cho CDN là:

• cdn.domain.com/wp-content/uploads/2023/10/abc.jpg

Sau đó bạn cần tạo tài khoản FTP để điền vào plugin W3 Total Cache.

Cấu hình CDN trong plugin W3 Total Cache

1. Performance → General Settings → CDN.

• Tích vào ô Enable → CDN Type Chọn Self-hosted / File Transfer Protocol Upload.
• Sau đó nhấn Save Settings.

2. Di chuyển đến mục CDN để thiết lập chi tiết.

3. Vì tôi chỉ muốn tạo CDN cho hình ảnh mà không bao gồm css, js, ... nên sẽ tích vào Host custom files.

4. Kéo xuống phần Advanced tìm Custom file list. Tạo CDN cho hình ảnh nên mục này tôi sẽ điền như sau:

5. Phần Configuration: Objects bạn điền vào các thông tin cấu hình của FTP.

• Tại mục Replace site's hostname with bạn điền tên miền phụ mà sử dụng làm CDN.
• Nhấn nút Test FTP server để kiểm tra cấu hình FTP đã kết nối chưa.

6. Vì các tùy chọn này không cần thiết với tôi nên tôi để trống hết.

Từ bây giờ, mỗi khi bạn upload hình ảnh mới thì W3 Total Cache sẽ tự động đẩy hình ảnh đó lên hosting phụ.

Thay đổi url CDN trong sitemap

Để kiểm tra các url hình ảnh trong sitemap bạn truy cập vào link sitemap của post. Như của tôi là https://artru.net/post-sitemap.xml

Sau đó click chuột phải → chọn View page source (hoặc nhấn phím tắt Ctrl + U). Khi chưa cấu hình thì url của hình ảnh vẫn là url gốc.

Bạn cần chèn mã này vào tệp function.php của theme hoặc plugin Code Snippets. Đây là filter mà Rank Math cung cấp, nếu bạn sử dụng plugin SEO khác thì có thể tìm tài liệu tương tự.

Nguồn Rank Math: Filter to Add CDN Image URLs in the Sitemap.

Thay thế domain.com bằng tên miền của bạn.

/**
 * Filter to Add CDN Image URLs in the Sitemap
 *
 * @param string $src  Image URL.
 * @param object $post Post object.
 */
add_filter( 'rank_math/sitemap/xml_img_src', function( $src, $post ){
	$src = str_replace( 'http://domain.com', 'https://cdn.domain.com', $src );
	return $src;
}, 10, 2);

Để sitemap được tạo mới bạn cần vào Sitemap Settings của Rank Math → Tăng hoặc giảm số lượng Link Per Sitemap và nhấn Save Changes.

Thiết lập thẻ Canonical

Đây có lẽ là phần ít được mọi người quan tâm. Tuy nhiên, nếu không thiết lập đúng thì các hình ảnh CDN sẽ bị xem là nội dung trùng lặp, vì hình ảnh có url gốc vẫn đang được index.

Để hiểu rõ hơn về tác động của Canonical đến SEO bạn hãy tham khảo nội dung How to specify a canonical with rel="canonical" and other methods của Google.

Để thực hiện việc này bạn truy cập vào phần Transform Rules → Modify Response Header trong Cloudflare.

Bạn có thể tham khảo cấu hình Canonical của tôi.

(starts_with(http.request.full_uri, "https://cdn.artru.eu.org/wp-content/uploads/")) có nghĩa là những URL bắt đầu bằng https://cdn.artru.eu.org/wp-content/uploads/ sẽ được áp dụng cấu hình Canonical.

Tiếp theo chọn Set dynamic

• Header name điền chữ Link
• Value điền concat("<https://artru.net", http.request.uri.path, ">;", "rel='canonical'").
• Theo như thông số của tôi thì https://artru.net/wp-content/uploads/ được xem là URL gốc của https://cdn.artru.eu.org/wp-content/uploads/.

Để kiểm tra kỹ hơn bạn nên mở một tệp ảnh với url CDN. Nhấn F12 (Dev Tools).

Bonus: tăng thời gian của Cache

Vì toàn bộ là tệp tĩnh và ít thay đổi. Bạn nên chỉnh thời gian hết hạn cao nhất Cache Browser (Cache trình duyệt người dùng) thành 1 năm, Cache Edge (thời gian cache của Cloudflare đối với Hosting) thành 1 tháng.

Chính vì cache được lưu trong thời gian dài. Trong trường hợp bạn thay đổi hình ảnh mà vẫn giữ nguyên tên tệp thì phải xóa cache trong Cloudflare để mọi thay đổi được áp dụng.