When we first put a pencil to a page at the very beginning of the development process, when the first spark of the brainstorm is fired off, there are a lot of things to take into account from the direction of the project, the client’s vision, to the end results we’re looking for. But there’s always that nagging fear, that horrible, terrible feeling that takes creativity by the throat and seeks to strangle it to death—page weight.
Page weight is the amount of data that a page has to load. Sure, a full screen video running as the background looks sharp, but it’s like dropping a nuclear bomb on people with slower connections, older computers, and not quite up to date browsers. The trend of using large splash images on homepages is definitely on the rise, and so far the technology has been able to keep up to keep load times low. But there’s always the fear that we’re making a top heavy design, and always coming up with ways to alleviate it.
Every time a visitor comes to your site, there’s a certain amount of patience they’ll have for it to load, and the longer that steaming hot plate of website isn’t delivered to their table, the sooner they might decide to get up and go somewhere else. Visitor abandonment makes me think of sad puppies left at a shelter. Please, think of the puppies!
How do you keep your designs hip, while keeping page weight low? Well, here are some tips that you might want to look into when you try to jam all that awesome into that tiny Ethernet port.
1. Content is king, and the kind of content I’m talking about is text. Because more of my time is spent copywriting than designing—mostly because I’m a ridiculously awesome copywriter, and a pretty mediocre designer—I’m a little biased. But remember that when it comes to text always put it on the page, and try to avoid ever making it an image. Also, don’t forget serving fonts with @font-face to add extra design elements to your products, without putting that heavy burden on your page weight.
2. Reduce the size of your images. Most images have all kinds of gobbledygook you don’t need, so cut out all that fat, and streamline your images. Go online and find image compression tools, and don’t be afraid to run the same image through it multiple times. Another trick is to keep the background image blurry, and essentially hide its low quality from the viewer.
You might find these tools useful:
