How to Serve Images from a SubDomain In WordPress

How to Serve Images from a SubDomain In WordPress

One of the important factors that contribute to a WordPress website’s success is page speed.

If your website’s pages load fast without errors, your audience’s engagement will also improve.

However, if your pages load slowly because of static content, your audience will likely abandon your site.

That’s why many adept website owners on WordPress apply a simple trick to solve speed problems.

Instead of serving static content from their domains, they serve them from sub-domains right within their existing WordPress sites.

If you know what to do, you won’t need to buy another domain for the purpose of improving page speed.

This guide will provide what you need to know about static content, sub-domains, and page speed.

Plus, the practical guide will help you create your own sub-domains and serve images from there to improve site speed.

What You Need to Know About Images, Static Content, and Sub-Domains

What is a Static Content?

Static content is the kind of website content that doesn’t change across the pages. These are elements that are presented the same way to everyone who uses your website.

Dynamic content, on the other hand, is content that is modified or changed based on the user’s options. This commonly comes in the form of product name, unit quantity, list price, and even descriptions.

This kind of content is subject to change whenever a user browses for different products and calculates different unit prices and quantities.

Unlike dynamic content, static content doesn’t need to be changed when users request access to it from the database.

There are several reasons why site owners opt to use static content over dynamic content:

  1. It doesn’t change unless you change the file itself, so it doesn’t work up your server from different user commands.
  2. It consumes less power and because it doesn’t need to be modified using layers of programming applications whenever the users execute commands.
  3. It is cached more easily than dynamic content because it remains throughout the caching process.

Static content include the following:

  • Images
  • Videos
  • JavaScript files
  • Flash files
  • CSS files

How Static Content Affect Site Speed in WordPress

Although, static content is more resource-efficient than dynamic content, it can still affect your website’s speed and performance.

Static content works in the following process:

  • Request is sent by the user to view the file.
  • File is retrieved by the server from the database.
  • File is sent by the server to the user.

This process of request, retrieve, and send can slow down your site if multiple users are requesting for the same file from the same domain or page.

To prevent this kind of problem in WordPress, sub-domains are created and images and other static content are served from there.

Other website owners even buy new domains for this purpose, but it isn’t necessary when you know exactly what to do.

What is a Sub-Domain?

A sub-domain is like another website under your website’s main domain. Its main purpose is to organize different sections of the website more efficiently.

For example, if you need a store for your business website, you don’t have to add more load to your main domain by adding another page(s) in it.

Instead, you can create a sub-domain that is dedicated entirely for the website’s store. Likewise, if you need a blog for your main site, you can also create a sub-domain just for that.

Why Serve Static Content (Images) from a WordPress Sub-Domain

The main reason why you should serve images from sub-domain is because it can help double your site’s performance.

Your WordPress site’s server is capable of retrieving data or files from two domains at a time.

So, if you serve half of your site’s static content from your domain and half from your sub-domain, users can access double the number files at a time.

There are various uses for sub-domains, namely:

  1. Creation of divisions or sections within a main site.
  2. Creation of an e-commerce store for a main site.
  3. Creation of custom websites or pages for registered users.
  4. Creation of a testing site for new plugins and apps.
  5. Creation of location-specific sites.
  6. Creation of a mobile-version site of a main site.

In this guide, the focus is on the creation of divisions or sections from where you can serve images or static content to improve site speed.

The following are the steps in creating a sub-domain and serving images from there.

Guide on How to Serve Images from a Sub-Domain

Before you proceed to creating a sub-domain, you should first test your website’s speed. Then after you create your sub-domain and save images from there, you should test the speed again.

That way, you can compare your site’s working speed and performance from before and after using a sub-domain to serve static content from.

Testing Your WordPress Site’s Speed

There are four different kinds of speed your site can be measured for:

 

  1. Loading time – this is the measure of how fast your site loads a page upon access.
  2. Traffic capacity – this is the measure of how much traffic your site can handle concurrently.
  3. Set-up performance – this is the measure of how efficient your WordPress set-up in terms of over-all performance.
  4. Plugin performance – this is the measure of how efficient your installed plugins work on your site.

For testing loading time, you can use the online tool Pingdom. There, you can run a full page test by entering the page URL you want to test and the server location from where you want it to be tested.

After starting the test, you’ll receive results in a matter of seconds. The most important information you’ll need to look at are those in the summary.

There you’ll see your site’s performance grade, load time, page size, and number of requests. It’ll also show how fast your site is compared to other websites tested from that server location.

For testing traffic capacity, a tool like Load Impact is best used. Just enter your target page URL to run a free test.

The program will send multiple bot users to access the page simultaneously to measure how it performs under a heavy traffic load.

In the chart result, the most important part you need to look at is the load time (represented by a green line). If the load time remains flat, your site is performing well. If it’s spiky, you need some improvements done.

For testing set-up performance, GTmetrix is one of the most popular tools to use. It performs an analysis of your site’s different working elements such as redirections, HTTP requests, Image optimization, etc.

To run the test, just enter your page URL and click the “Analyze” button. The result uses a familiar grading system so its easy to understand.

Good performances are graded C and above, and performances that need to improve are graded D and below.

For testing plugin performance, you can simply use a plugin profiler like P3 (Plugin Performance Profiler), which is another plugin you can easily install.

To test your plugins, just activate the P3 plugin and start a scan. When the scan is done, a chart result will show you how much runtime is used by each plugin.

Now, after testing out your site’s performance and taking notes of the results, you can proceed with the next step.

Creating a Sub-Domain in Your WordPress Site

To create a sub-domain, you need to log in your WordPress website’s cPanel. Then follow these steps:

  1. Go to Domains menu and click on the “Subdomains” icon. A “Create a Subdomain” page will appear.
  2. Enter a name for your sub-domain in the “Subdomain” field. The name should be anything that relates to the type of static content you want to serve from there. For example, you can use “images” if you plan to serve only images from it. You can also use “videos” if you will serve videos; or “media” if you will serve both images and videos from it.
  3. Select your target domain from the domain field. If you have multiple domains, select the right one form the drop-down list. Otherwise, it should only show you one domain choice.
  4. Change the Document Root to public_html/wp-content/uploads if you are using the default upload path. If you changed the upload path before, then use that path in place of wp-content/uploads. For example, if the upload path was changed to content-media/uploads, then you should use public_html/content-media/uploads as the document root. This step is crucial, so make sure you enter the correct document root. If you use the wrong upload path, your new sub-domain will not work as you want it to.
  5. Click the “Create” button. The new sub-domain will be created shortly.

Now that you have a new sub-domain, you can now set it up to work. The next step is to serve all your images from that sub-domain.

Serving Static Content (Images) from the Created Sub-Domain

This step involves several processes. If you plan to serve all existing images from the new sub-domain. By the end of this process, you should be able to:

  • Upload new images to the new path.
  • Update the old paths in old posts to the new path.
  • And redirect the old paths to the new path.

Uploading images to the new path:

To upload new images to the new path, you need to change the media upload path in your WordPress site. Follow these steps:

  1. Log in to your dashboard and go to your Media Settings.
  2. In the “Full URL path to files” field, enter your new sub-domain’s full URL. Just don’t add a trailing / at the end.
  3. After making sure the URL is correct and free of typos, click “Save Changes”.

If done correctly, all future uploads should be directed to the new path, which is the new sub-domain.

Updating the old paths to the new path:

Now, all your new image uploads will be served from the sub-domain. But, if you want all images to be served from the new domain, you also need to update the paths for the old images.

To apply this update without editing old posts one by one, simply follow this:

  1. Log in to your cPanel and open phpMyAdmin.
  2. Find your blog’s database from the left panel. Click on it.
  3. Click on the SQL tab on the top.
  4. Paste the following query into the white text area:

UPDATE wp_posts SET post_content = REPLACE (post_content,’http://yoursite.com/wp-content/uploads/’,’http://subdomain.yoursite.com/’);

Remember to change the “yoursite.com” and “subdomain” into your corresponding website and sub-domain names.

  1. Click on “Go” and it will show the rows that were updated.

Your old image paths have now been updated to the new path. Next is to redirect the old paths.

Redirecting the old paths to the new sub-domain:

Now that your old image paths are updated, you need to redirect the old paths to your new sub-domain so the images can be served from there.

If you don’t redirect them, the images will be uploaded to both the old path and the new path. That’s why you need to make sure all image paths should lead to the new sub-domain. Just follow these steps:

  1. Go to your WordPress installation directory in the cPanel. By default, you should be able to access it through cpanelusername/pulic_html.
  2. Open the “File Manager”.
  3. Check the “Show hidden files” box and click on “Go”.
  4. Look for the .htaccess file in the pop-out screen. Right click on it and select “Edit”.
  5. Enter the following in the file:

RedirectMatch 301 ^/wp-content/uploads/(.*)$ http://subdomain.yoursite.com/$1

Again, change the “subdomain” and “yoursite” to your corresponding website and subdomain names.

  1. Save the file.

Now, if it all works, every image on your website should be served from the new sub-domain. If you’re still having problem with the redirection or the path update, just trace back your steps and re-do them.

To make this work, you need to be careful in executing the process.

After succeeding, you should now be able to enjoy improvements in your WordPress site’s performance.

To verify it, run the speed test again and compare the new results with the old ones.