Two days ago, I posted on Site Sketch 101 bragging to the world that I had moved the bulk of my files from my local server onto the Amazon Cloudfront servers. Shortly after I hit the publish button, the very person to whom I directed that post began making fun of me (We’re friends so that’s certainly allowed.) for how much of my site was still being hosted on my local server. There was only about 10% or so of the images that had actually been transferred to the new cloud servers.
I knew for a fact that I had transfered all of my theme files and all of my media library to the Amazon server so I was at a loss for what to do. To make matters worse, I was now at the airport and didn’t have access to my excellent home workstation. So I quickly tethered my internet from my Sprint powered Samsung Moment over to my laptop and began to assess the situation.
Although I had moved all of my theme’s files onto the new servers, all of the CSS files were still pointing to files on my server because of the URL structure that I had used.
There are basically three types of URL structures: absolute, relative to the server, and relative to the file.
- Absolute: Absolute URL’s are preceded by the actual domain name that the item is located on. No matter where you place this url, it will always point to the same item.
For example: https://www.sitesketch101.com/wp-content/woo_uploads/6-logo.png
- Relative to the Server: URL’s that are relative to the server will always point to a file that is located somewhere on the same server that it is being called from. So if you have the URL listed as a background image in a CSS file, then the browser is going to call that background image from somewhere on that same server by automatically assuming the URL starts at the root folder of the server. You can have a relative URL on your site that looks exactly like one on my site but yours will call an item on your server and mine will call one on my server.
For example: wp-content/woo_uploads/6-logo.png
Note: This URL structure is NOT preceded by a slash.
- Relative to the File: The final method of writing URL’s revolves around identifying the location of your file based on the location of the file that is referencing it. If you have two files (theme/style.css & theme/images/bg.jpg) you could use this form of URL in the CSS file to call the background image file.
Note: This URL structure is preceded by a slash.
When I first moved my files over to the Amazon S3, I noticed that all of the images that were being called from the CSS were using absolute URL’s. So even though I had all of those images backed up onto the S3 server, I was still telling the user’s browsers to use the copies stored on my local server. As a result, I decided to switch to URL’s that are relative to the server and now the site is running much faster as it is now calling these files from the Amazon Cloudfront rather than from my shared hosting environment.
Next on my agenda is to create a cloud server solution for my images that are generated via the timthumb.php script.