Hey there fellow bloggers! If you are serious about speeding up your blog, then you must have used tools like Pingdom and GTmetrix to test its speed. These tests usually show recommendations like serve images from subdomain, serve static content from a subdomain or from a cookieless domain or parallelize downloads across hostnames etc.
If you want to get rid of these flags in speed tests and want to speed up your blog, you should consider serving images from a subdomain. This is the easiest and completely free approach which helps in improving site load times.
In this article, I want to show you how to serve images from subdomain and improve page load time of your blog by reducing http requests from a single domain.
But, Why Serve Images From Subdomain?
Good question. In simple words, the number of connection a web-browser can make to a single domain is limited. Most modern browsers can make up to 6 connections per hostname at the same time.
Besides images, there are many things that loads from your domain. This includes scripts, CSS, JS, HTML, simple text files etc. A browser can’t load rest of the files from the same hostname until other files are loaded first. You can think of this as a queue.
This is why, you often read recommendations to use CDN services and other ways of improving site speed. Of course CDN services aren’t free. In such case, serving images from a subdomain is an effortless way of improving speed of your blog by some extent. This method can also be referred to as sharding.
Does Serving Images From A Subdomain Really Help?
Yes, it does. Images are one of the heaviest parts of any site. But they’re also one of the most crucial ones. For better SEO and to provide better understanding of your content, images are must-have.
A subdomain is considered as a separate website. By serving images from subdomain, it will take less time for a browser to load content from your server because the browser can simultaneously load content from different domains.
This significantly reduces the time a browser has to wait before it can serve all the content from your domain, dramatically improving load time of your blog.
If you are ready to learn how to serve images from subdomain, then keep reading.
- Some knowledge of cPanel and phpMyAdmin.
- Patience, a lot of patience.
- Ability to keep calm if things don’t go out as intended.
Services Demonstrated in This Article
- Hosting by SiteGround.
- WordPress v4.5.3
Note: Replace http:// with https:// everywhere in this guide if your blog has https certificate (like mine).
How to Serve Images from Subdomain?
Step 1: Creating A New Subdomain
To begin with, we will need a subdomain. To create a subdomain, log in to your cPanel and find Subdomains option. Click it to enter.
Under Create a Subdomain, enter the name of your subdomain. You can choose any name that makes sense. For example, you can use img, images, media or anything of your choice. I’m choosing media.
Choose your domain from the drop-down list (of you have more than one) on which you need to create this subdomain. I will choose techstuffer.com.
Change the Document Root to your WP Content folder. By default, it’s public_html/wp-content/uploads if you never changed it.
Attention: If you changed the upload path in past for any reason, enter that path here. For example, you could have changed the wp-content/uploads folder to content/files. In this case, enter public_html/content/files under Document Root.
If you’re unsure whether you changed this path or kept default, then open an image from your blog and see the path. If it looks like yourblog.com/wp-content/uploads/image.jpg, then you have the default path.
Now click Create and a subdomain will be created.
You now have a working subdomain. Great! So lets move ahead and tell WordPress to upload new images in the new location. Keep cPanel open. We will be coming back here.
Step 2: Changing Media Upload Path in WordPress
Log in to your WordPress dashboard and go to Settings > Media.
Under Full URL path to files, enter your complete subdomain including http://. I will enter https://media.techstuffer.com. Remember NOT to add any trailing slash (/) here.
Save the settings.
If you can’t find the Full URL path to files option under Media settings, you can do this by entering a hidden WordPress options area. Enter your blog’s address in the following manner to access the options panel: http://yourblog.com/wp-admin/options.php.
Once the options area is open, search for upload_url_path. Enter the subdomain here including http:// and without a slash at the end. I can enter https://media.techstuffer.com here.
Scroll down and save these changes.
Okay, so from now on, any new image uploaded to your blog will carry the new URL. If you upload image2.jpg, it will be available at http://subdomain.yourblog.com/image2.jpg.
You’ve told WordPress about the new media upload path. Very well done. Now the next step is to change URLs of images in old blog posts to new ones. Keep reading on next page.
Step 3: Update Image Paths In Old Blog Posts
Your new images will now be uploaded to new address but what about old images? Your old articles still carry the old URLs to your images. This is why, you should change the references to images in old blog posts.
Of course you will not be editing your articles one by one manually. You just need to run a simple SQL query to make changes in all old blog posts.
For this, go back to cPanel and find phpMyAdmin and open it.
From the left panel, find and click the database of your blog. If you only have one site hosted under your hosting account, you don’t need to worry about this.
Find the SQL tab on top and click it. You will be presented with a white text area where SQL queries can be entered. Copy the following text, and paste it in the SQL area.
Replace subdomain with your subdomain and yourblog.com with the domain of your blog. I will change it to media and techstuffer.com respectively.
Click Go to run the SQL query. It should show the number of rows updated.
If you face trouble running the query, you can also use find and replace option instead.
Select wp_posts table from the left pane, click Search, click Find and Replace. Now enter http://yourblog.com/wp-content/uploads/ in Find and http://subdomain.yourblog.com/ in Replace with. Select post_content in Column.
Now click Go to run the query.
After completing this step, you have updated image paths in old posts with new path. If your old post has an image say image3.png under yourblog.com/wp-content/uploads/image3.png, the URL to this image should be updated to reflect the new path. It should now show the new path as subdomain.yourblog.com/image3.png.
Now there’s just one step to follow. We will now redirect old image paths to your new subdomain. Keep reading for this.
Step 4: Redirecting Old Image Paths to Subdomain
By following all steps above, you’ve not actually changed the directory in which your images are uploaded. You just changed the address where your images are served from. So your images are still being uploaded to wp-content/uploads directory and they can be accessed from there too. You can access image2.jpg from both subdomain.yourblog.com/image2.jpg AND yourblog.com/wp-content/uploads.
But if we keep serving the image from old URLs, then our purpose of serving images from subdomain is not fulfilled. Search engines like Google also has old locations of your images. This is why, we will be redirecting old image locations to their new location on subdomain.
For this, you will need to access .htaccess file in the directory of your WordPress installation. This is cpanelusername/pulic_html by default.
So go back to cPanel, find File Manager and click it to open. Check Show hidden files option and click Go. Now look for .htaccess file in the screen that just opened.
If you can’t find .htaccess file, you will need to create one. Click New File from the top panel and type .htaccess under file name. Click create and the new file will be created.
Now right click on the .htaccess file and click Edit. Copy and paste the following text in the file and save it.
Make required changes to your subdomain and domain and save the file.
Now if you (or anyone else) try to access images using old path (yourblog.com/wp-content/uploads/image.jpg, for example), it will be redirected to its new location (subdomain.yourblog.com/image.jpg) automatically.
This will also help search engines recognize the new path to images of your blog.
Okay, every step needed to serve images from subdomain has been complete. Good work! It’s time to clear any cache you might be serving. Also go ahead and check your page speed score on Pingdom and GTmetrix. They should no longer show flags like Parallelize downloads across hostnames.
Serve Images from Subdomain: Summing Up
You pretty little enthusiastic thing! See what you did there? You just created a new subdomain and started serving images from it. By doing this, you dramatically improved your page speed score as well as load time. You should no longer see the recommendations to serve images from subdomain or from a cookieless domain.
Besides serving images from a subdomain, there are other steps you should take in order to improve your blog’s performance. You might want to read my article How I Supercharged My Blog to Score 90+ in Google PageSpeed for more information.
That’s it folks. This was Parvez on techstuffer.com and you were reading How to Serve Images from Subdomain. I hope you found this article useful. If you have any question or if you get stuck somewhere, feel free to ask for guidance in comments. Also let me know if I missed something or if this article can be improved.
Until we meet next, happy blogging!