Faster Page Loads with Subdomains for Images & Uploads

[kendo451]

How to use fake subdomains to get blazing fast page load times.

Evidently most browsers will only download two files from a given domain at one time, but can download from up to four domains simultaneously. 

This means that if all of your files are hosted on the same domain, your page load time is delayed because only two files load at a time.

So if you want to have faster page load times, it is recommended to host your images, javascript and media files on different domains - however a subdomain counts.

So I'd like to create three subdomains using mode rewrite:

ul.mydomain.com redirects to /uploads
img.mydomain.com redirects to /uploads/images
js.mydomain.com redirects to /js

Three steps:

1. Use modrewrite to create the redirects above

2. Change the image and uploads paths in config.php to use the subdomain in the URL but NOT in the file path.

3. Modify your stylesheets and script tags to call files from the subdomains.

More details on #1 and #2 coming soon.

[JeremyBASS]

Well this has been already put up in the tips a few times... way back in there.. you may want to just add to one of the many back there as not to fragment this topic... In fact I've talked about this many times here, ySlow it up ay...
but yes this is the truth, and the major reason for the speed up is that there is no cookies added to it... I think it's stated in that link I gave you ...  ;)

Hope this help
Cheers
Jeremy

[kendo451]

I'm searching for the old ones but cannot find them.  Is there a certain jargon for doing this to speed up page loading?  What is the term I should be looking for?

Your post on multi-subdomains is extremely helpful, but it is too powerful for what I want to do.  I want to redirect to uploads and images without changing the file structure.  So I need a simpler Mod Rewrite than the auto rewrite you used.

Here's what I need from mod_rewrite:

1. Redirect ul.mydomain.com/foo.css to mydomain.com/uploads/foo.css

2. Redirect img.mydomain.com/bar.jpg to mydomain.com/uploads/images/bar.jpg

3. Redirect js.mydomain.com/jquery.js to mydomain.com/uploads/js/jquery.js

If I can get the .htaccess Mod Rewrite logic right, the rest is easy.

[JeremyBASS]

oh I think you read too much into it...

Code: Select all

# subdomain hanlding for both
RewriteCond %{HTTP_HOST} !^www\.example.tdl
RewriteCond %{REQUEST_URI} ^/$
RewriteCond %{HTTP_HOST} ([^.]+)\.example.tdl
RewriteRule ^(.*)$ %1

would just open it all up... so, you could run all like this...

for img  ul.domain.tdl/uploads/images...

but that is not very pointed for sure... but since you'll have to do an alias on the domain anyway you should be fine with it that general...

But as you can see from my first example for the link I provided there before it works as I described here...

http://blog.corbensproducts.com/uploads ... r_bird.png
http://www.corbensproducts.com/uploads/ ... r_bird.png

Same image, same place... Now I would like to state that there is a hit on speed for a rewrite thou so tiny it may not exist  something to keep in mind.

Hope this helps... I think may-be that main thread on subdomains shoud be updated so this example I showed is clearer right off the bat...

Cheers
Jeremy

[Nullig]

Have you tried a symlink?

Create the subdomain called "img"
Log in to your account via ssh
Find the folder called "img" which was created and delete it
Create a symbolic link to the directory you'd like to link "photos" to:

Code: Select all

ln -s /home/username/public_html/uploads/images img/

Make sure you use the proper paths.

Nullig

[smansman]

All this seems very interesting BUT where is the link to the original thread JeremyBASS talked about?

[kendo451]

I found that Nullig's suggestion of using a Symlink works best and fastest if you have the ability to create symlinks on your server.

Simple make a symlink to the relevant directories and then change the path for uploads and images in the config.php.

I did find that image manager generates links with an extra http://domain.com on the front, so until that is fixed you might NOT want to change the path for images in config.php.

[Gregor]

If you have a site with content, how can I use the suggested symlink idea without losing my existing photo's? They are now placed in subdirectories under
/uploads/images

Gregor

[kendo451]

These instructions will work for Plesk, I don't know how to do it for other control panels.

1. Create a subdomain for your site using your Plesk Control Panel, example img.yourdomain.com

2. SSH into your server as root and find the main folder for your site and the new subdomain at a path something like this:

/var/www/vhosts/yourdomain.com/subdomains/img/httpdocs

3. Delete httpdocs in your subdomain (NOT IN YOUR MAIN FOLDER)

4. Replace httpdocs with a symlink named httpdocs that points to:

/var/www/vhosts/yourdomain.com/httpdocs/uploads/images

If you did this correctly these will both be the same thing:

http://yourdomain.com/uploads/images

and

http://img.yourdomain.com/

You can test by seeing if you can open a certain image in your images folder using this url:

http://img.yourdomain.com/testimage.jpg

5. Now in your css and page templates, replace any calls to images in http://yourdomain.com/uploads/images/image.jpg with http://img.yourdomain.com/image.jpg

This solution lets you take advantage of the multiple connections, but doesn't require you to change anything in your config.php file.

The only downside to this is that you do not get automatic subdomain links to images that you upload with image manager and then insert into a page with TinyMCE.  I tried changing the upload and image paths in the config.php file, but TinyMCE adds an extra http://yourdomain.com/ before the new path.  I'm sure there's a way to fix this, but I haven't taken the time to figure it out yet.

[JeremyBASS]

Hmm that still seems way more complicated then a .htaccess rule...

Code: Select all

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^media\. [NC]
RewriteCond %{HTTP_HOST} ^w{0,3}\.?(.+) [NC]
RewriteRule .* http://media.%1%{REQUEST_URI} [R=301,L]

or to force www...

Code: Select all

RewriteCond %{REQUEST_URI} !\.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] 

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^media\.domain\.com [NC]
RewriteRule .* http://media.domain.com%{REQUEST_URI} [R=301,L]

then you don't need to do anything funky... just a normal install, and the dns setting you already should be doing to do with any one of these and the list media types end up on the media subdomain, simple and will pull from /images or where ever an image comes out of... but I'm lazy and do tons of site so I like it easy

Cheers
Jeremy

[Gregor]

Thanks for the info!
Do I have to move my current folder holding the pictures?

Gregor

[Gregor]

Hmm that still seems way more complicated then a .htaccess rule...

Code: Select all

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^media\. [NC]
RewriteCond %{HTTP_HOST} ^w{0,3}\.?(.+) [NC]
RewriteRule .* http://media.%1%{REQUEST_URI} [R=301,L]

or to force www...

Code: Select all

RewriteCond %{REQUEST_URI} !\.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] 

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^media\.domain\.com [NC]
RewriteRule .* http://media.domain.com%{REQUEST_URI} [R=301,L]

then you don't need to do anything funky... just a normal install, and the dns setting you already should be doing to do with any one of these and the list media types end up on the media subdomain, simple and will pull from /images or where ever an image comes out of... but I'm lazy and do tons of site so I like it easy

Cheers
Jeremy

Hi Jeremy,

I did the above thing and put my domain into it.

Code: Select all

# AddHandler application/x-httpd-php5 .php

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^image\. [NC]
RewriteCond %{HTTP_HOST} ^w{0,3}\.?(.+) [NC]
RewriteRule .* http://image.%1%{REQUEST_URI} [R=301,L]

RewriteCond %{REQUEST_URI} !\.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] 

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^image\.domain\.com [NC]
RewriteRule .* http://image.uisge-beatha.eu%{REQUEST_URI} [R=301,L]

http://www.image.uisge-beatha.eu/

There you see one image. However, inside he file editor, I don't see that specific folder. Maybe a lack of Unix knowledge on my site... Any help is more than welcome.

Thnkx,
Gregor

[Gregor]

Hmm that still seems way more complicated then a .htaccess rule...

Code: Select all

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^media\. [NC]
RewriteCond %{HTTP_HOST} ^w{0,3}\.?(.+) [NC]
RewriteRule .* http://media.%1%{REQUEST_URI} [R=301,L]

or to force www...

Code: Select all

RewriteCond %{REQUEST_URI} !\.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] 

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^media\.domain\.com [NC]
RewriteRule .* http://media.domain.com%{REQUEST_URI} [R=301,L]

then you don't need to do anything funky... just a normal install, and the dns setting you already should be doing to do with any one of these and the list media types end up on the media subdomain, simple and will pull from /images or where ever an image comes out of... but I'm lazy and do tons of site so I like it easy

Cheers
Jeremy

Hi Jeremy,

I did the above thing and put my domain into it.

Code: Select all

# AddHandler application/x-httpd-php5 .php

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^image\. [NC]
RewriteCond %{HTTP_HOST} ^w{0,3}\.?(.+) [NC]
RewriteRule .* http://image.%1%{REQUEST_URI} [R=301,L]

RewriteCond %{REQUEST_URI} !\.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] 

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^image\.uisge-beatha\.eu [NC]
RewriteRule .* http://image.uisge-beatha.eu%{REQUEST_URI} [R=301,L]

http://www.image.uisge-beatha.eu/

There you see one image. However, inside he file editor, I don't see that specific folder. Maybe a lack of Unix knowledge on my site... Any help is more than welcome.

Thnkx,
Gregor

[JeremyBASS]

oh... sorry it's "or".. you can't use them both... try just

Code: Select all

RewriteCond %{REQUEST_URI} \.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml)$
RewriteCond %{HTTP_HOST} !^image\. [NC]
RewriteCond %{HTTP_HOST} ^w{0,3}\.?(.+) [NC]
RewriteRule .* http://image.%1%{REQUEST_URI} [R=301,L]

Cheers

[Gregor]

Thanks Jeremy. I changed .htaccess based on your suggestion, however....

If I try:
http://www.image.uisge-beatha.eu/
It shows a directory of the subdomain.

The file MD2020.jpg is found in
http://www.uisge-beatha.eu/uploads/images/MD2020.jpg

If I try
http://www.image.uisge-beatha.eu/MD2020.jpg

I get:

Not Found

The requested URL /MD2020.jpg was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/2.0.63 (Unix) mod_ssl/2.0.63 OpenSSL/0.9.8e-fips-rhel5 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at image.uisge-beatha.eu Port 80

Do you have a clue?

Gregor