Anyone who is interested in speeding up their website’s load time has probably run their site through a tool like Pingdom’s Website Speed Test, GTmetrix, or YSlow. While testing your site, you likely have received some sort of message indicating that you should serve static content from sub-domain or a domain that doesn’t serve cookies. This doesn’t mean that you have to go out and purchase another domain name to serve images and other static content. Instead, you can use your existing website to serve images from sub-domain. This tutorial will show you how.
Why Serve Static Content From a Sub-Domain?
Serving static content like images from a sub-domain has a few benefits.
- If the sub-domain doesn’t set cookies, a cookie won’t get sent to the browser for each request made to the files on the sub-domain. Cookies are typically very small, so they don’t add a lot of “weight” to your page. They are still unnecessary for static content, and getting rid of all the excess “bulk” to your site is important if you are interested in a fast loading site (you should be).
- Modern web browsers can only download a certain number of resources from a domain at once. By creating a sub-domain to serve resources from, you are effectively doubling the number of resources that a visitor’s browser can download at once – or in parallel. For argument’s sake, this means that a web browser that can download two resources at a time will visit a page with 10 resources (images, CSS, HTML, etc.) and have to wait to download the first two before it can start to download the second two. The same goes for the third, fourth, and fifth set of resources. If the site is set up to serve static content from a sub-domain, the browser can download four resources at once by downloading two from the main domain, and two from the sub-domain.
How to Set WordPress to Serve Images From Sub-Domain
Important: Before continuing with this tutorial, please make a complete backup of your website and database. You will be instructed to run updates on your database and if something should go wrong you will need the backup to fall back on. You have been warned!
Setting up WordPress to serve images from sub-domain requires that you
- Create a sub-domain
- Tell WordPress where to upload images to
- Update existing images in posts to point to the sub-domain for images
- [Optional] Redirect old image references to the sub-domain
Creating a Sub-Domain
Log in to your website’s cPanel and scroll down to the Domains menu. Find Subdomains and click the link.
Next enter a name for the sub-domain you are creating. This can be whatever you want it to be. I’m choosing img but other sites use static, images, content, etc. It really doesn’t matter though.
What does matter is what you enter into the Document Root box. By default, this will grab the sub-domain you entered and add it to public_html like this: public_html/img. This is not what you want.
Instead, delete the img part (or whatever you used for your sub-domain) and replace it with wp-content/uploads. Then click Create.
So far all we have done is created a sub-domain that uses your wp-content/uploads folder as a document root. This basically means that a URL pointing to http://yoursite.com/wp-content/uploads/2014/06/image.png is pointing to the same place on your server as http://img.yoursite.com/2014/06/image.png now points to.
Tell WordPress Where To Upload Images
If we don’t tell WordPress that your sub-domain is the new URL to upload images to, all your images will continue to upload to http://yoursite.com/wp-content/uploads/. Actually, even if we tell WordPress to upload images to your sub-domain, your images will still end up in the /wp-content/uploads folder.
The reason why we need to tell WordPress to use the sub-domain URL is so that when you insert an image into a page or post you won’t continue to use the http://yoursite.com/wp-content/uploads/ URL. Remember, we’re trying to get the visitor’s browser to use the sub-domain to access static content, so we need to make sure each image uses the sub-domain URL to display images.
In earlier versions of WordPress, there was an option in the Media Settings, which later was moved to Miscellaneous Settings that allowed you to set the full URL path to files. In an effort to clean up the user interface this option has been “hidden”, but it is still available.
There is a Hidden Admin Options screen that you can access by going to http://yoursite.com/wp-admin/options.php. Once there, search for the option labeled upload_url_path. Enter your full sub-domain without the trailing slash. Scroll to the bottom of the page and click on the Save Changes button.
If this is a new site with no images uploaded to the site yet, pat yourself on the back – you’re done!
If you are adding a sub-domain to an existing site, then you will likely want to update the images that already are in your pages and posts so that they use the sub-domain URL path as well.
Update Existing Images to Point to Sub-Domain
Log back in to your website’s cPanel and scroll down to the Databases section, and click on phpMyAdmin.
Navigate to your WordPress site’s database if you have more than one database set up. Click on the SQL tab in the navigation bar towards the top of the screen.
Enter the following code in the query box:
UPDATE wp_posts SET post_content = REPLACE (post_content,'http://yoursite.com/wp-content/uploads/','http://img.yoursite.com/');
Click the Go button below that box. Once it is done, you should receive a success message at the top of the screen with a green background indicating XX number of rows affected.
Important: Change http://yoursite.com to the location of your WordPress site!
What this does is takes the source URLs from all the images in your existing posts, and it changes them so that they point to the new sub-domain.
Now go back to your site and check to see that all the images are loading correctly. If not, you may need to revert to the backup of your site that you made before you started. (You did make a backup, right?)
Optional – Redirect Image URLs to Sub-Domain
Technically none of your images have moved on your server. You should still be able to access all your images using either http://yoursite.com/wp-content/uploads/2014/06/image.png or http://img.yoursite.com/2014/06/image.png. That means that any other websites or search engines that were linking to the old URL will still show the image, but won’t be showing it from your sub-domain. It’s not a big deal, but if you care about making sure all requests for those images are pointing to the sub-domain, you should use a redirect.
Open up your .htaccess file, which should be located under http://yoursite.com/.htaccess.
Add the following code to the .htaccess file and save it back on your server:
RedirectMatch 301 ^/wp-content/uploads/(.*)$ http://img.yoursite.com/$1
Again, make sure to change http://img.yoursite.com to your actual sub-domain.
Content Delivery Network Issues
If you use a content delivery network (CDN) like Cloudflare or MaxCDN, you may run into a DNS error. Fixing this is relatively simple.
Log in to your CDN account, and navigate to your DNS settings. Each CDN will have this in a different location, so check with them if you don’t know where to find these settings.
Add an A name record that points http://img.yoursite.com to the IP address of your site. In your DNS settings, there will probably already be an A name record for your main domain that has the correct IP address listed. You can probably copy that IP to get the new A name record set up.