Using a Subdomain for Images in WordPress to Increase Page Speed
How can the use of a subdomain for images increase your page speed? The time it takes to load a webpage is not only determined by the web server and network speed but also the browser being used. Why? Because all browsers have a limit to the number of connections that can be made simultaneously to the same domain. This limit varies from browser to browser and may be as low as 2 or even as high as 13. You can view a list of browsers and their respective limits here.
Some, if not most browsers do allow for this limit to be adjusted, but it would be safe to say that the majority of visitors to any website would not have made any change to the limit.
Every image that is loaded uses one of the available browser connections. Once the limit of connections has been reached, additional requests are queued until a connection becomes available. On a site that requires multiple connections (ie contains many images) this can really slow down the load time of the page.
Using a subdomain to host you images will help to speed up your page load speed as a subdomain is seen as a different domain to the main domain. Therefor, you will have the same number of available connections for your main domain as your subdomain.
The first step to configuring WordPress to use a subdomain to host images is to configure the subdomain. The below steps are for a cPanel hosted configuration. For other hosting configurations please refer to the server documentation.
Creating a Subdomain in cPanel
The first step to configure your subdomain for images is to log in to your cPanel Control Panel.
Once logged in, look for the Domains section and click on Subdomains
Under Create a Subdomain complete the fields as shown (Note: you can change images to anything you wish except mail, www, ftp, cpanel, whm, webmail, webdisk)
Change the Image Upload Location in WordPress
As of WordPress 3.5 the setting for changing the default media storage location has been removed so in order for us to make this change we will first need to install a plugin which will restore this functionality. The plugin is WP Original Media Path
First, log in to your WordPress Dashboard. Hover over Plugins and select Add New. Search for WP Original Media Path and then choose Install Now from the results screen. Once installed click on Activate Plugin.
Once the WP Original Media Path plugin has been installed and activated hover over Settings and select Media.
Enter the following details:
Store uploads in this folder: images
Full URL path to files: https://images.domain.com (this is your subdomain for images)
(Optional) Select/Deselect Organice my uploads into month- and year-based folders
Click Save Changes
New WordPress Installation vs Existing WordPress Installation
If this is a new WordPress installation then that is all there is to it. Your WordPress will now upload your media to the images folder and images will be served from the images.domain.com subdomain for images.
For existing WordPress installations there is still a bit of maintenance to perform.
Move Existing Images to New Images Folder
Now that we have created our Subdomain and have updated the WordPress media location settings we now need to move the existing files to their new location. For a standard install this means moving all files found in /public_html/wp-content/uploads/ to /public_html/images/. Be sure to maintain the directory structure during the move. This task can easily be achieved by using a FTP program of which we recommend FileZilla.
Backup Your WordPress Database
DO NOT SKIP THIS STEP
The next step is to update the WordPress database to change the path of existing images to the new subdomain. Before making any changes to the WordPress database it is highly recommended that you first create a backup.
The easiest way to backup your WordPress database is via a plugin WP Database Backup
First, log in to your WordPress Dashboard. Hover over Plugins and select Add New. Search for WP Database Backup and then choose Install Now from the results screen. Once installed click on Activate Plugin.
Once the WP Database Backup plugin has been installed and activated hover over Tools and select WP-DB Backup.
Click on Create New Database Backup. This will begin the creation of the database backup file and may take a while depending on the size of your database. Once the backup file has been created you will see the backup listed. Click on Download to save a copy to your local hard drive.
Update Image Path in WordPress After Changing Upload Location
Now that we have a backup of our database we need to be able to execute a sql query to update the path to images stored within the database. The easiest way is to again install another plugin, SQL Executioner.
First, log in to your WordPress Dashboard. Hover over Plugins and select Add New. Search for SQL Executioner and then choose Install Now from the results screen. Once installed click on Activate Plugin.
Once the WP Database Backup plugin has been installed and activated hover over Tools and select SQL Executioner.
In the SQL field enter the following, replacing yourdomain.com with your domain (eg cloughit.com.au):
UPDATE $posts SET guid = REPLACE(guid,'https://www.yourdomain.com/wp-content/uploads/','https://images.yourdomain.com/')
Click on Execute SQL
Use 301 Redirect to Redirect Old URL’s to New URL’s
Since Google and other search engines already have your site indexed, including your images, we need to redirect any requests to the old image URL’s to the new. To do this we need to make a modification to the .htaccess file. Again we can use a plugin to do this, WP Htaccess Editor.
First, log in to your WordPress Dashboard. Hover over Plugins and select Add New. Search for WP Htaccess Editor and then choose Install Now from the results screen. Once installed click on Activate Plugin.
Before making any changes to the .htaccess file it is important to take a backup. Any error in the .htaccess file may cause your site to not load.
Once the WP Htaccess Editor plugin has been installed and activated hover over Htaccess and select Backup. Click on Create New to generate a new backup.
Now that we have backed up our .htaccess file, hover over Htaccess and select Htaccess Editor. Add the following line replacing yourdomain.com with your domain (eg: cloughit.com.au):
RedirectMatch 301 ^/wp-content/uploads/(.*)$ https://images.yourdomain.com/$1
Click on Save File
That’s All Folks!
That’s it! Your images will now be served from your subdomain and this will increase the speed that pages are opened on your website, especially those with multiple images. Using a subdomain for images will provide an immediate speed boost for your WordPress website.
I would love to hear your comments and other suggestions that may improve the above.