{"id":2769,"date":"2023-10-29T16:40:26","date_gmt":"2023-10-29T09:40:26","guid":{"rendered":"https:\/\/dev.artru.net\/?p=2769"},"modified":"2023-10-30T21:54:43","modified_gmt":"2023-10-30T14:54:43","slug":"subdomain-va-cloudflare-lam-cdn-anh-mien-phi","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/subdomain-va-cloudflare-lam-cdn-anh-mien-phi\/","title":{"rendered":"Combine Subdomain and Cloudflare as a free image CDN"},"content":{"rendered":"<p>&quot;CDN&quot; is probably not too strange to you anymore. CDN helps the website greatly reduce the number of requests, while also helping the website load faster. This also more or less affects scores on speed measuring tools such as Google Speed Insights, GTmetrix,...<\/p>\n\n\n\n<p>Search online and you&#039;ll find many articles on how to set up a CDN. There are advantages and disadvantages of each tool. In this article, I will show you how to use a subdomain as a free image CDN from Cloudflare using the W3 Total Cache plugin.<\/p>\n\n\n\n<p>To clearly understand how it works, I will summarize the implementation process as follows:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create subdomains and folders to store images.<\/li>\n\n\n\n<li>Set up CDN configuration in the W3 Total Cache plugin.<\/li>\n\n\n\n<li>Change CDN url in Rank Math sitemap.<\/li>\n\n\n\n<li>Set up Canonical tags for good SEO.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Create subdomains<\/h2>\n\n\n\n<p>You can still use your current hosting for your main website as a CDN. And I take advantage of free hosting to store images. You can consult <a href=\"\/en\/hosting-mien-phi-123host\/\" target=\"_blank\" rel=\"noreferrer noopener\">123host<\/a> or <a href=\"\/en\/hosting-free-azdigi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Azdigi<\/a>.<\/p>\n\n\n\n<p>The step of pointing the DNS record from the subdomain to the secondary hosting you can do yourself or refer to online. The operation is the same as pointing the main domain name. I won&#039;t instruct you again.<\/p>\n\n\n\n<p>If you only use CDN for subdomains, you do not need to add 2 A and CNAME records or turn it off altogether <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">golden cloud<\/mark> (Proxy) for the main domain.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"163\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Tao-Record-A-cho-subdomain-CDN.png\" alt=\"Create Record A for CDN subdomain\" class=\"wp-image-2804\"\/><figcaption class=\"wp-element-caption\">Create Record A for CDN subdomain<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Don&#039;t forget to turn on the mode <strong>Cache Everything<\/strong> in Cloudflare.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"260\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Cache-Everything-Cloudflare.png\" alt=\"Cache Everything Cloudflare\" class=\"wp-image-2844\"\/><figcaption class=\"wp-element-caption\">Cache Everything Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p>About the folder structure to save images on subdomains. Please set it up as on the main website.<\/p>\n\n\n\n<p>For example, the image link on the main website is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">domain.com\/wp-content\/uploads\/2023\/10\/abc.jpg<\/code><\/li>\n<\/ul>\n\n\n\n<p>Then the image link for CDN is:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">cdn.domain.com\/wp-content\/uploads\/2023\/10\/abc.jpg<\/code><\/li>\n<\/ul>\n\n\n\n<p>Then you need to create an account <strong>FTP <\/strong>to populate the W3 Total Cache plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configure CDN in W3 Total Cache plugin<\/h2>\n\n\n\n<p><strong>1.<\/strong> <strong>Performance<\/strong> \u2192 <strong>General Settings<\/strong> \u2192 <strong>CDN<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Check the box <strong>Enable<\/strong> \u2192 <strong>CDN Type<\/strong> Select <strong>Self-hosted \/ File Transfer Protocol Upload<\/strong>.<\/li>\n\n\n\n<li>Then press <strong>Save Settings<\/strong>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"181\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Bat-tuy-chon-CDN-trong-W3-Total-Cache.png\" alt=\"Enable CDN option in W3 Total Cache\" class=\"wp-image-2808\"\/><figcaption class=\"wp-element-caption\">Enable CDN option in W3 Total Cache<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>2.<\/strong> Move to item <strong>CDN<\/strong> to set details.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"108\" height=\"400\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/CDN-W3-Total-Cache.png\" alt=\"CDN W3 Total Cache\" class=\"wp-image-2817\"\/><figcaption class=\"wp-element-caption\">CDN W3 Total Cache<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>3.<\/strong> Because I only want to create a CDN for images without including css, js, ... so I will check it <strong>Host custom files<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"547\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Host-custom-files-CDN-W3-Total-Cache.png\" alt=\"Host custom files CDN W3 Total Cache\" class=\"wp-image-2813\"\/><figcaption class=\"wp-element-caption\">Host custom files CDN W3 Total Cache<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>4.<\/strong> Scroll down to the section <strong>Advanced <\/strong>find <strong>Custom files list<\/strong>. Create CDN for images so I will fill this section as follows:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"119\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Custom-file-list-CDN-W3-Total-Cache.png\" alt=\"Custom file list CDN W3 Total Cache\" class=\"wp-image-2820\"\/><figcaption class=\"wp-element-caption\">Custom file list CDN W3 Total Cache<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>5.<\/strong> Part <strong>Configuration: Objects<\/strong> You fill in the FTP configuration information.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Section <strong>Replace site&#039;s hostname with<\/strong> You enter the subdomain name to use as CDN.<\/li>\n\n\n\n<li>Press the button <strong>Test FTP server<\/strong> to check if the FTP configuration is connected.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"671\" height=\"806\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Configuration-Objects-FTP-W3-Total-Cache.png\" alt=\"Configuration Objects FTP W3 Total Cache\" class=\"wp-image-2827\"\/><figcaption class=\"wp-element-caption\">Configuration Objects FTP W3 Total Cache<\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>6.<\/strong> Because these options are not necessary for me, I left them all blank.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"472\" height=\"600\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Advanced-W3-Total-Cache.png\" alt=\"Advanced W3 Total Cache\" class=\"wp-image-2829\"\/><figcaption class=\"wp-element-caption\">Advanced W3 Total Cache<\/figcaption><\/figure>\n<\/div>\n\n\n<p>From now on, every time you upload a new image, W3 Total Cache will automatically push that image to secondary hosting.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Change CDN url in sitemap<\/h2>\n\n\n\n<p>To check the image urls in the sitemap, access the post&#039;s sitemap link. As mine is <code data-no-translation=\"\" data-no-auto-translation=\"\">https:\/\/artru.net\/post-sitemap.xml<\/code><\/p>\n\n\n\n<p>Then right click \u2192 select <strong>View page source<\/strong> (or press the shortcut Ctrl + U). When not configured, the image url is still the original url.<\/p>\n\n\n\n<p>You need to insert this code into the file <strong>functions.php<\/strong> of the theme or the Code Snippets plugin. This is the filter that Rank Math provides. If you use another SEO plugin, you can find similar documents.<\/p>\n\n\n\n<p>Rank Math source: <a href=\"https:\/\/rankmath.com\/kb\/filters-hooks-api-developer\/#sitemap-cdn-urls\" data-type=\"link\" data-id=\"https:\/\/rankmath.com\/kb\/filters-hooks-api-developer\/#sitemap-cdn-urls\" target=\"_blank\" rel=\"noreferrer noopener\">Filter to Add CDN Image URLs in the Sitemap<\/a>.<\/p>\n\n\n\n<p>Replace <code data-no-translation=\"\" data-no-auto-translation=\"\">domain.com<\/code> with your domain name.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">\/**\n * Filter to Add CDN Image URLs in the Sitemap\n *\n * @param string $src  Image URL.\n * @param object $post Post object.\n *\/\nadd_filter( 'rank_math\/sitemap\/xml_img_src', function( $src, $post ){\n\t$src = str_replace( 'http:\/\/domain.com', 'https:\/\/cdn.domain.com', $src );\n\treturn $src;\n}, 10, 2);<\/code><\/pre>\n\n\n\n<p>For a new sitemap to be created, you need to go in <strong>Sitemap Settings<\/strong> of Rank Math \u2192 Increase or decrease the number <strong>Link Per Sitemap<\/strong> and press <strong>Save Changes<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1255\" height=\"632\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/url-CDN-images-Sitemap-Rank-Math.png\" alt=\"url CDN images Sitemap Rank Math\" class=\"wp-image-2837\"\/><figcaption class=\"wp-element-caption\">url CDN images Sitemap Rank Math<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Set up Canonical tags<\/h2>\n\n\n\n<p>This is probably the part that people pay little attention to. However, if not set up correctly, CDN images will be considered duplicate content, because the image with the original url is still being indexed.<\/p>\n\n\n\n<p>To better understand the impact of Canonical on SEO, please refer to the content <a href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/consolidate-duplicate-urls\" target=\"_blank\" rel=\"noreferrer noopener\">How to specify a canonical with rel=&quot;canonical&quot; and other methods<\/a> by Google.<\/p>\n\n\n\n<p>To do this, access the section <strong>Transform Rules<\/strong> \u2192 <strong>Modify Response Header<\/strong> in Cloudflare.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"885\" height=\"383\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Modify-Response-Header-Cloudflare.png\" alt=\"Modify Response Header Cloudflare\" class=\"wp-image-2848\"\/><figcaption class=\"wp-element-caption\">Modify Response Header Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p>You can refer to my Canonical configuration.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"793\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Response-Header-Modification-Rule-Canonical-Cloudflare.png\" alt=\"Response Header Modification Rule Canonical Cloudflare\" class=\"wp-image-2851\"\/><figcaption class=\"wp-element-caption\">Response Header Modification Rule Canonical Cloudflare<\/figcaption><\/figure>\n<\/div>\n\n\n<p><code data-no-translation=\"\" data-no-auto-translation=\"\">(starts_with(http.request.full_uri, \"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/\"))<\/code> means URLs that start with <code data-no-translation=\"\" data-no-auto-translation=\"\">https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/<\/code> Canonical configuration will be applied.<\/p>\n\n\n\n<p>Next choose <strong>Set dynamic<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Header name fill in text<strong> <\/strong><code data-no-translation=\"\" data-no-auto-translation=\"\"><strong>Link<\/strong><\/code><\/li>\n\n\n\n<li>Value filled in <code data-no-translation=\"\" data-no-auto-translation=\"\">concat(\"&lt;https:\/\/artru.net\", http.request.uri.path, \"&gt;;\", \"rel='canonical'\")<\/code>.<\/li>\n\n\n\n<li>According to my parameters <code data-no-translation=\"\" data-no-auto-translation=\"\">https:\/\/artru.net\/wp-content\/uploads\/<\/code> is considered the root URL of <code data-no-translation=\"\" data-no-auto-translation=\"\">https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>To check further you should open an image file with a CDN url. Press F12 (Dev Tools).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"650\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Kiem-tra-Link-canonical-CDN-trong-Dev-Tools.png\" alt=\"Check the CDN canonical link in Dev Tools\" class=\"wp-image-2858\"\/><figcaption class=\"wp-element-caption\">Check the CDN canonical link in Dev Tools<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Bonus: increase Cache time<\/h2>\n\n\n\n<p>Because the entire file is static and changes little. You should set the highest expiration time for Cache Browser (User browser cache) to 1 year, Cache Edge (Cloudflare&#039;s cache time for Hosting) to 1 month.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"547\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/10\/Tuy-chinh-thoi-gian-cache-trong-Page-Rules-Cloudflare.png\" alt=\"Customize cache time in Cloudflare Page Rules\" class=\"wp-image-2861\"\/><figcaption class=\"wp-element-caption\">Customize cache time in Cloudflare Page Rules<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Because the cache is stored for a long time. In case you change the image but keep the file name the same, you must clear the cache in Cloudflare for all changes to be applied.<\/p>","protected":false},"excerpt":{"rendered":"<p>\"CDN\" c\u00f3 l\u1ebd kh\u00f4ng c\u00f2n qu\u00e1 xa l\u1ea1 v\u1edbi b\u1ea1n n\u1eefa. CDN gi\u00fap cho website \u0111\u01b0\u1ee3c gi\u1ea3m t\u1ea3i s\u1ed1 l\u01b0\u1ee3ng request r\u1ea5t nhi\u1ec1u, \u0111\u1ed3ng th\u1eddi gi\u00fap trang web load nhanh [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2868,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[117],"class_list":["post-2769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","tag-cloudflare"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=2769"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2769\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/2868"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=2769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=2769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=2769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}