I’m a big fan of site loading fast, for me when i visited a site, it took only 2-4 second only to stay on before leaving if the site loading were slow. Doing some testing on Dezzain.com for speed and load time and found out the site speed and load time are at average. so i begin to research and read articles about ‘how to make you site load faster’, ‘using CDN as content storage’ and ‘how to reduce your bandwidth usage’
[pthumb][/pthumb]
As tempting as a Free CDN Service to me, i would like to try on hosting my WordPress uploads folder in my own sub-domain. I want to know how much bandwidth and server load can be reduce in comparison before moving on to Paid or Premium CDN Services.
You might found that there’s already a tons of tutorial on how to host your images in sub-domain in Google search so here’s another step by step tutorial that teach you how to properly move WordPress Uploads Folder and Path to your sub-domain.
1. Backup First is the Safest Way
Don’t be a hero, you need to backup all necessary file first. If anything goes wrong, you’ll definitely wish you have a time machine to go back in time 🙂 First, go to your web-hosting control panel, under database tab, there’s should be a phpMyAdmin button. Click it and this will take you to phpMyAdmin control panel. Click the export tab and this will appeared on screen. Now export the database using a SQL Format -> Select All and only edit/checked [highlight color=”#222″ bgcolor=”#ddd”]Add DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT statement[/highlight] and leave other options as default.
Save the SQL file to your desktop. For a larger database, it may take longer time to download so be patient. While you at it, after saving the SQL file, copy another one to other location just for safe keeping. you’ll never know!
2. Creating a Sub-domain
If you do not know what sub-domain is? Sub-domain is a domain within a domain. Unlike sub-directory, sub-domain had its own domain for socket HTTP/HTTPS requests. That’s why using sub-domain to host content and images will reduce your bandwidth and HTTP/HTTPS request time.
Example
[highlight color=”#222″ bgcolor=”#ddd”]http://www.domain.com – this is a main domain[/highlight]
[highlight color=”#222″ bgcolor=”#ddd”]http://subdomain.domain.com – this is a sub-domain[/highlight]
as for sub-directory
[highlight color=”#222″ bgcolor=”#d9d9d9″]http://www.domain.com/sub-diretory/ – this is a sub-directory[/highlight]
Log into cPanel and click on the “Subdomains” icon under the “Domains” section. Next, fill in the subdomain name you want to create and click “Create”. Assign user access privilege if necessary.
Here we will be using ‘img1’ as our subdomain so the later sub-domain will be like
[highlight color=”#222″ bgcolor=”#ddd”]http://img1.domain.com[/highlight]
Login to your FTP and you’ll see a newly created ‘img1’ folder. Now copy and paste your WordPress uploads folder into the ‘img1’ folder. The new uploads path would look like this
[highlight color=”#222″ bgcolor=”#d9d9d9″]http://img1.domain.com/uploads/[/highlight]
3. Editing the MySQL for the new uploads path
Now there is 2 way to edit the saved MySQL database file in step one. one is using the phpMyAdmin SQL panel and second using any text editor to edit and replace. I find that the second is better. Anyhow i will show you both method.
Method 1 – via phpMyAdmin SQL
Login into your phpMyAdmin go to tab SQL and copy paste this into the textarea.
UPDATE wp_posts SET post_content = REPLACE(post_content,'http://www.domain.com/wp-content/uploads','http://img1.domain.com/uploads')
and after than another mysql to update the attachment path
UPDATE wp_posts SET guid = REPLACE(guid,'http://www.domain.com/wp-content/uploads','http://img1.domain.com/uploads')
Method 1 – via text editor
in this case, i use notepad++. Open the SQL file with notepad++ and click on Search->Replace All on top and enter setup as follow.
sometime you have a url path without www, try search domain.com/wp-content/uploads and if found one, repeat the step and replace with img1.domain.com/uploads
[notice type=”alert”]Method 2 – you will need to drop you current wp mysql table and import the newly edit SQL file through phpMyAdmin -> import[/notice]
Do not worry, if anything goes wrong, we still have the second backups of the SQL file so you can re-import the previous database table.
4. Change the WordPress Admin Options Upload Path
Again go into your phpMyAdmin and click on table wp_options and browse to Search tab. In the search tab enter a search query like below and click go.
Now edit upload_path and upload_url_path to
upload path to /home/ftpserver_root/public_html/img1
upload _url_path to http://img1.domain.com
you can find out what’s your ftpserver_root by adding this to any WordPress template.
[php]<?php echo $_SERVER["DOCUMENT_ROOT"]; ?>[/php]
please note: the upload_path might be varies from other hosting.
5. Using .HTACCESS to redirect old path to new path
To avoid crawling error and bad request 404 for the images and attachments, add this to your WordPress main root .htaccess file.
RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.domain\.com$
RewriteRule ^wp\-content\/uploads\/?(.*)$ "http\:\/\/img1\.domain\.com\/uploads\/$1" [R=301,L]
credit to chanmyayaung for the root domain htaccess only
Final Note
If everything went to according to plan, you should be able to see all your images and attachment properly link to your new upload path. New upload file in media or posts will automatically upload into img1.domain.com/uploads/
As you can see the current site also using subdomain – cdn.dezzain.com/1/ for all images and attachments uploads. Hope you find the tutorial benefit to your WordPress development. If you found error and bug in the step, feel free to let me know here.