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.

  1. 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
  2. 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.
  3. 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. 
    For Example:/images/bg.jpg
    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.

Nicholas Cardot

About Nicholas Cardot

It's my personal quest to enable every person that I can to unlock that dormant potential concerning their online influence. Also, I'm a geek.

11 Comments

  • MKR says:

    I think W3 Total Cache will swap stuff like that out when you have it use a CDN.

    • I’m actually using W3 total cache and it was Frederick Townes, the creator of the W3 Total Cache plugin, who suggested using relative URL’s to maximize the effectiveness of its CDN feature. I was Google searching and found a thread of his on the WordPress forums.

  • Don’t feel bad about it Nicholas, it’s a mistake I committed many many times on the most various occasions.

    • I certainly don’t feel bad. Mistakes happen and it’s a terrific learning experience which is why I love sharing it on here. Hopefully others can learn from my work and make the transition even more skillfully than I did.

      • Swamykant says:

        You are right Nicole. I have learnt similar lessons while migrating from Shared Hosting to VPS hosting.

        If people like you share about your mistakes and how you corrected it, the blogosphere will improve much technically.

  • Slava says:

    Nicholas,

    you’ve mixed up names of 2 and 3.

    Second one is actually “relative to file”, since without slash it will start with current file’s location and third one is “relative to server” (it will start with your http server ‘root’ location).

  • claudia says:

    This becomes a real problem when a blog is growing and offering the content at a high speed is pretty important.

    These types of jobs are dirty jobs but think at them as a reward for your hard job you made to be where you are today with SiteSketch 101 !

  • Mandeep says:

    Interesting post, Nick. I was just talking about this at my internship the other day. We do web service programming using Ruby on Rails. In a relative url, you can also pass commands that can traverse the directory structure. Which makes me wonder if there are any security related problems here? Anyways, thanks for sharing. Hope everything works out fine. 🙂

  • Don Gilbert says:

    Well look at it this way Nick, at least you didn’t have to think long and hard about what in the world you were going to blog about today.

    On a side note – who in the world thought that using CSS3 text-shadow was a good idea. It just makes everything look blurry, especially on small text *cough* your comment form fields *cough*

  • As a lightweight developer-type, i.e. knowing enough to code bits but not enough to have though about this before, this is awesomely helpful. Thanks for explaining the differences in simple terms – I’ve always wondered why people coded like that, as in, without a fixed URL and merely cutting it out. I’ve been hard-coding it straight in before now. Much fix this!

  • I just transferred my CDN from MaxCDN to Amazon S3 and as you do I use W3 Total cache but I don’t know that there’s more to it to optimize the site. I will check my site for this. Thanks for the suggestion. By the way where can i find the timthumb.php solution?

Leave a Reply