CrazyLeaf Editorial
Web design is a complex balance of conversion, SEO and speed on the one hand and beautiful entrancing human friendly designs on the other. Luckily there are some tricks that you can employ that will keep your website uploads speedy and beautiful.
To begin with, a new website cannot ignore SEO. SEO and load time must be considered on every level. This starts with the choice of hosting service, language, and site architecture. SEO and load speed must be taken into consideration from day one on any design.
Reduce the Number of HTTP Requests
Rich web pages are a complex mixture of style sheets, images scripts, text, flash and videos. It’s important to reduce the number of component requests to maintain a fast load speed while also having a drop dead gorgeous design. This can be done by using a limited number of scripts and CSS style sheets whenever possible. Use different style sheets and scripts sparingly and for dramatic emphasis. In addition, put the style sheets in the header to give viewers with slow connections something to look at while they are waiting.
Images
Ah, the glory of images. We all love them but these little devils certainly can turn a webpage into molasses. CSS sprites are a great to keep the image requests to a minimum. Whenever possible also combine images into one image rather than using multiples. This is particularly useful for background images that can then become a CSS background-image. An example from Tizag follows.
Image maps are another way of combining images into a single image and speeding up load time. Image maps can be error prone so if you’re not familiar with them you might want to steer clear.
Inline images imbedded into your style sheets in another way to speed up upload. This tutorial from Stanford will show you how.
It is also possible to rotate images each time the page loads. If you decide to use rotation at load make sure to heat map each page to verify that you are not confusing repeat visitors. Another way to keep images loading quickly is to attach an Expires header or ExpiresDefault directive (with Apache) that will tell browsers and proxies to cache the image. This doesn’t help with initial site upload speeds but for all return users the bulk of the material is already there and waiting.
Upload speed is also dramatically impacted by what type of images you use. JPG, GIF and PNG are the three most common images types. A good rule of thumb to keep upload speeds quick is to avoid JPG unless you are using a photograph or a complexly toned image. Look closely at your visual material and determine if the bitmap JPG is really necessary. JPGs are excellent for rendering photographs but for all other graphics GIF or PNG8 produce better results with smaller files. PNG8 and GIF are vector-based programs and they use far fewer colors (256 max). In addition, GIF and PNG8 files can be made even smaller by pulling unused colors out of the color pallet. GIF is great for transparencies, buttons, lettering and animation. PNG8 is similar to GIF with the advantage that PNG compresses well and tends to be a bit crisper. PNG also comes in PNG24 and PNG32 but with similar sizes to JPGs. Looking constantly at your images and their sizes will ensure that your upload speeds remain fast.
Adobe Photoshop is excellent for photo manipulation but the program still isn’t optimal for web design. All of the extraneous photo file data needs to be removed to obtain optimal upload speeds. One way to do this by sending your files to Fireworks or Gimp and use their export settings rather than using the “save for web” option in Adobe Photoshop.
Compress your images to keep the high quality of your images and a fast upload speed. ImageOptim for Mac will let you compress JPG, PNG and GIF images. Crush tools can be downloaded from the web that will let you crush JPG for both Mac and PC. Yahoo’s Smush.it is a useful online tool and Pngcrush delivers command-line compression.
If all of the above still leaves you with slow upload you may want to revert to multiple domains or a CDN. CDNs are seriously expensive but for much less you can divide your data onto another domain (or more, sub-domains won’t work here) relatively cheaply. The second domain then points at your web server. This allows you to download twice as much at the same speed.
Conclusion
Using the above suggestions can produce a website that is both beautiful and speedy. Luckily some of the tools that are excellent for improving upload speeds often lead to a better, more cohesive user experience. Focusing on limiting HTTP requests and keeping your images in check are the two best ways to speed up a website. However, new ways to capture the speed demon are being found every day. Share your tricks of the trade and we can all avoid the dreaded 15-second page load!
Loading…