Update: 2010/07/20 – Maxcdn has since increased the price of their offer from $10 to $39.95 – 1000GB at $39.95 is still a steal, so I’d encourage you to utilize this offer.

In the previous post, I talked about how to make use of Google’s Ajax Libraries CDN to serve Jquery, Mootools and other Javascript frameworks to your visitors, but to speed up everything else, MaxCDN is offering an amazing special (02/22/10) of 1 Terabyte (1000 GB) of bandwidth for $10. This works out to 1 cent per GB – take that Amazon S3!

I’d encourage every webmaster that is serious about growth to consider this deal. As you all may know, load speed is one of the crucial factors that affects website conversions and overall enjoyment of a website or blog. By harnessing the powers of a Content Delivery Network, you can speed up the loading process of your blog and allow your users to access the content as fast as possible. Of course, other methods of optimization always help load speed as well.

Needless to say, I’m Impressed:

I’ve recently purchased this package and I don’t think I’ll ever go back to hosting static files on a single server. MaxCDN (formerly NetDNA) has made this experience as easy as possible to set up. They answered all my questions about CDN support for WordPress (using W3 Total Cache) as well as supporting other sites.

Not only do they have 10 Edge locations serving your content to your visitors (9 in the US and 1 in London), they also compress your static CSS and JS files “on-the-fly” to further increase load speed.

Take advantage of this Amazing Deal:

I’m not even being paid for this… I just think all of you should know about the deal thats currently going on!

Questions:

Do you currently use a CDN?

If so, does it match the current deal of this company?

Optimized Overshadowed Wordpress Theme

Thanks for subscribing to my RSS feed! Here is your direct download link for the Wordpress Theme: Download

The Blog Manual Ebook

Thanks for subscribing to my RSS feed! Here is your direct download link for the Ebook: Download

What if I told you that you could harness Google’s servers to load Jquery, Mootools, Scriptaculous or even Prototype on your blog? There are hundreds of servers spread throughout the world dedicated to loading your JavaScript that much faster. Google recently launched the “Google AJAX Libraries API” which allows you to use Google’s CDN to load popular JavaScript frameworks, many of which are in use by web developers today.

Every blog will use a JavaScript framework to “spice” up their blog with animation and usability (I happen to use Jquery). The only down side of using these libraries is the 50KB+ download that it takes up to deliver the framework to each visitor. Not only does loading a large JS file block parallel downloads, it won’t start loading other content until it is completely finished. However, Google’s free CDN eliminates this problem and allows you to use their cacheable libraries on your blog.

How to Harness Google’s AJAX Libraries API and CDN:

First, you need to call Google’s JSAPI file to allow Google to serve the right files on your blog:

<script src="http://www.google.com/jsapi"></script>

Now you are able to load any supported javascript library through Google:

<script> // Load jQuery google.load("jquery", "1.4.1");
</script>

You’re now serving the latest version of Jquery on your blog using Google’s Free CDN. Another benefit of using this CDN is the cacheable aspect of it – If a user has a cached version of Google’s Jquery, they won’t even have to re-download it when they visit your blog!

Save Money:

You save 50KB+ per visitor in bandwidth by outsourcing it to Google.

Save Time:

Well, technically it isn’t your time, but rather the visitors’. That just means they can read your articles quicker and convert into a fulltime reader!

Optimized Overshadowed Wordpress Theme

Thanks for subscribing to my RSS feed! Here is your direct download link for the Wordpress Theme: Download

The Blog Manual Ebook

Thanks for subscribing to my RSS feed! Here is your direct download link for the Ebook: Download

Today were going to take a look at how to optimize your background images in Photoshop. Most blogs use a repeated background image to provide a sense of individuality in their blog designs. In most cases, this sets blogs apart by appearance which is an excellent first step in attracting new readers.

Photoshop CS3 is an amazing tool that has years of experience built into its image algorithms. By utilizing the 4 pane view in Photoshop (when saving an image) you can reduce the size of your image to the smallest possible.

Using CSS’s repeat function, you can use beautiful gradients and background images without killing your web server.

Lets take a real look at what I’m talking about here:

The Correct Way To Optimize Background Images in Photoshop:

Step 1 – Find a vector image on the internet or custom design your own gradient with Photoshop, as such:

Step 2 – Depending on the image chosen, make the vector as small as possible so that you can “repeat” the property using CSS – Using a large image to repeat a pattern just wastes bandwidth. For gradients, reduce your picture to 1px by the height.

Step 3 – Click “File” and “Save for Web & Devices” (just using “Save As” doesn’t take advantage of the unique algorithms). Once you are in this menu, choose the “4-Up” option in the tabs which allows you to see four different previews in any format you choose.

Step 4 – In the first square is the original file. Click the second frame and choose a JPEG, set it to at least high quality. In the third frame choose the PNG-24 encoding and finally in the fourth frame choose the PNG-8 option. You can change the colours as you wish, but the best you can get with PNG-8 is 256 colours.

Step 5 – Now comes the easy part, after adjusting the settings on each of the proofs, you can now view which file is the smallest! For 1px width gradients, I’ve found that PNG-24 compresses it the best without a loss of quality.

Step 6 – Choose your save location and then start using it in your website! If you like the gradient used in the example, save this file to your computer and feel free to use it. If you want to use it via CSS, simply use the “background” property of an element. IE:

.elementexample {
background: url("WhereisTheGradientLocated.png") repeat-x;
}

Conclusion – Compressing Gradients For Faster Loading Websites

This is such an easy method to use if you have Photoshop to reduce website loading times. I utilize this technique on every website that I design and find it to be well worth the effort. This method can be used to save any image for a website, as it gives you four different formats to choose from.

Have you found a better way to compress gradients? What techniques do you use when saving a gradient for a website?

Part 1 of the “Reduce Your Blog’s Loading Speed” post series.

Optimized Overshadowed Wordpress Theme

Thanks for subscribing to my RSS feed! Here is your direct download link for the Wordpress Theme: Download

The Blog Manual Ebook

Thanks for subscribing to my RSS feed! Here is your direct download link for the Ebook: Download