{"id":12651,"date":"2023-05-08T06:00:18","date_gmt":"2023-05-08T10:00:18","guid":{"rendered":"https:\/\/blog.litespeedtech.com\/?p=12651"},"modified":"2023-05-08T06:00:18","modified_gmt":"2023-05-08T10:00:18","slug":"serving-static-content-through-a-subdomain","status":"publish","type":"post","link":"https:\/\/lswp.store\/index.php\/2023\/05\/08\/serving-static-content-through-a-subdomain\/","title":{"rendered":"Serving Static Content Through a Subdomain"},"content":{"rendered":"<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-12653\" src=\"https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain.png\" alt=\"Serving Static Content Through a Subdomain\" width=\"1000\" height=\"500\" srcset=\"https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain.png 1000w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain-300x150.png 300w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain-768x384.png 768w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain-600x300.png 600w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Serving static content from a subdomain can provide multiple benefits, including better website performance and optimization. It can allow you to offload your images to a CDN, or allow you to serve a specific file extension through a different domain.<\/p>\n<p>But how does this work with the <a href=\"https:\/\/wordpress.org\/plugins\/litespeed-cache\/\">LiteSpeed Cache Plugin for WordPress<\/a> (LSCWP)? Let&#8217;s take a closer look.<\/p>\n<p>LSCWP allows you to offload static content such as images, JavaScript, and CSS files or any file extensions you define, so that they are served from a subdomain.<\/p>\n<p>This involves two main steps:<\/p>\n<ul>\n<li>Setting up the subdomain on your Hosting Server<\/li>\n<li>Configuring LSCWP to use the new subdomain<\/li>\n<\/ul>\n<h2>Step 1: Create a Subdomain<\/h2>\n<p>Setting up a subdomain to serve static content is a simple process that can be done with all hosting panels or even on custom servers if you\u2019re an experienced system admin.<\/p>\n<p>The goal here is to point the subdomain exactly to the same directory as the main website, so that it can access static files correctly.<\/p>\n<p>Here&#8217;s an example of how to set up your subdomain using cPanel:<\/p>\n<h3>1.1 Create a subdomain in cPanel<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-12661\" src=\"https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain01.png\" alt=\"Create a subdomain in cPanel\" width=\"645\" height=\"506\" srcset=\"https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain01.png 645w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain01-300x235.png 300w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain01-600x471.png 600w\" sizes=\"(max-width: 645px) 100vw, 645px\" \/><\/p>\n<ol>\n<li>Log into cPanel using the account where you wish to add the subdomain.<\/li>\n<li>Click <strong>Domains<\/strong> under the <strong>Domains<\/strong> section.<\/li>\n<li>Click the <strong>Create A New Domain<\/strong> button.<\/li>\n<li>Enter the subdomain name (<code>cdn.example.com<\/code>) in the <strong>Domain<\/strong> text box.<\/li>\n<li>Select the <code>Share document root (\/home\/username\/public_html) with \u201cexample.com\u201d<\/code> option. Using a shared document root for a subdomain can be useful when serving static content because it allows you to easily manage and update your static files without duplicating them across multiple directories.<\/li>\n<li>Click the <strong>Submit<\/strong> button.<\/li>\n<\/ol>\n<h3>1.2 Add CORS Headers<\/h3>\n<p>For your subdomain to be able to serve files that are originally meant for your domain, most common browsers will ask you to set up <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/CORS\">CORS headers<\/a> for your domain.<\/p>\n<p>Setting up a CORS header can be a bit complex depending on your stack. On Litespeed Enterprise, which has full <code>.htaccess<\/code> support, you can add this line to your <code>.htaccess<\/code>:<\/p>\n<pre>Header add Access-Control-Allow-Origin \"*\" \nHeader add Access-Control-Allow-Methods: \"GET,POST,OPTIONS,DELETE,PUT\"\n<\/pre>\n<p><strong>Note:<\/strong> These are only basic CORS instructions. You should consider consulting with your developer and\/or hosting provider before implementing CORS.<\/p>\n<h2>Step 2: Instruct Litespeed Cache to replace your URLs<\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-large wp-image-12663\" src=\"https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain02-1024x775.png\" alt=\"LiteSpeed Cache CDN Settings\" width=\"1024\" height=\"775\" srcset=\"https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain02-1024x775.png 1024w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain02-300x227.png 300w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain02-768x581.png 768w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain02-600x454.png 600w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain02.png 1172w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>From the WordPress Dashboard, navigate to <strong>LiteSpeed Cache &gt; CDN<\/strong>.<br \/>\nSet up CDN mapping to use the new subdomain, like so:<\/p>\n<ol>\n<li>Set <strong>Use CDN Mapping<\/strong> to <code>ON<\/code><\/li>\n<li>Set <strong>CDN URL<\/strong> to <code>cdn.example.com<\/code><\/li>\n<li>Put <code>\/\/example.com\/<\/code> in the <strong>Original URLs<\/strong> box.<\/li>\n<li>Save changes<\/li>\n<\/ol>\n<h2>Verify<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12665\" src=\"https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain03.png\" alt=\"\" width=\"981\" height=\"157\" srcset=\"https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain03.png 981w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain03-300x48.png 300w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain03-768x123.png 768w, https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain03-600x96.png 600w\" sizes=\"(max-width: 981px) 100vw, 981px\" \/><\/p>\n<p>Finally, you will need to test your website to ensure that everything is working correctly. Visit your website in a browser, view the site\u2019s page source, and verify that images and other static files are being served from <code>cdn.example.com<\/code>.<\/p>\n<h2>Troubleshooting<\/h2>\n<h3>URL\u2019s are replaced in the website source, but images don\u2019t load on the website.<\/h3>\n<p>Please check Step 1, and ensure that you have set up the subdomain correctly to serve your static files.<\/p>\n<h3>URL\u2019s are not replaced in the website source.<\/h3>\n<p>Please check the <strong>Original URLs<\/strong> setting in LSCWP. Ensure you have set it correctly and it is the same as your WordPress site.<\/p>\n<h3>Some resources are not replaced but some are.<\/h3>\n<p>Please check the <strong>Extensions<\/strong> list in the LSCWP <strong>CDN Mapping<\/strong> settings to verify the file extensions.<\/p>\n<h2>Conclusion<\/h2>\n<p>Routing your static content using CDN Mapping from your main domain using LiteSpeed Cache for WordPress is a great way to improve your website&#8217;s performance and reduce server load. By offloading your static content to a subdomain, a CDN or a different server, you can deliver your website&#8217;s images, stylesheets, and other assets to your visitors more quickly, while also reducing the bandwidth and server resources needed to serve these files.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Serving static content from a subdomain can provide multiple benefits, including better website performance and optimization.<\/p>\n","protected":false},"author":1,"featured_media":12653,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[316],"class_list":["post-12651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cache","tag-wordpress"],"jetpack_featured_media_url":"https:\/\/lswp.store\/wp-content\/uploads\/2023\/05\/subdomain.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/posts\/12651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/comments?post=12651"}],"version-history":[{"count":0,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/posts\/12651\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/media\/12653"}],"wp:attachment":[{"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/media?parent=12651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/categories?post=12651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lswp.store\/index.php\/wp-json\/wp\/v2\/tags?post=12651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}