We don’t really WANT plain-Jane sites. We feel there are decorative elements that can be leveraged and balanced with speed and still produce branding and variety. But it requires compromise and design restraint. We see three hurdles to web satisfaction and they are not equally weighted. Our opinion is speed – or performance – is most important.
If a viewer won’t wait for the page load, they will bail on the site. So it doesn’t matter how beautiful a site is or how good the content. Speed is the first deal killer.
First sign of web credibility is page load time.
Good designers used to work hard to keep their page weights low, but over the years many have become careless and complacent, resulting in today’s average page weight of 1.3mb. That’s huge. That’s page bloat. It’s sloppy, and it’s rude. And it turns people off more than it turns them on.
If you have too many beautiful things on your page (lots of large photos, for example) – and your pages take longer than a few seconds to load – things may actually become less beautiful, as your site grinds to a halt, and site visitors hit the Back button to go elsewhere.
Considering that the average site visitor expects a two-second load time, the result of your page bloat is that no one sees the beauty of your site. Bloat wins. You lose.
JPEG and GIF files are the most common formats for web images, although PNG files are gaining in popularity. PNG files don’t necessarily give any advantage in file size, but many designers prefer PNGs over GIFs when it comes to creating transparent files.
Optimize your images. You have to do this. Regardless of file format. Optimize every image. It’s so important.
Optimizing means compressing, and here’s how to do it: Use Photoshop’s Save for Web feature (or comparable feature in some other image-editing software) to reduce the file size of your graphics. This feature’s live visual feedback lets you get huge reductions in file size while retaining great image quality.
How do you know how much to compress? Use your eyes. The live visual feedback mentioned above lets you choose a compression value (Quality setting) on a slider, and you can instantly see what effect this has on the quality of your image. In just a few seconds, you can easily determine the correct amount of compression – usually a compromise resulting in a slight loss of visual quality and a large improvement in file size.
There’s no magic setting for compression, but you’ll find that some images can stand up to more compression than others. Experiment with the settings to see what works best. And keep in mind that for images with large areas of uniform color, GIF files are usually better than JPEGs.
As the creative talent behind the website, it’s natural that you care a lot about the quality of the images. But the typical site visitor doesn’t care that much, and will be happy as long as the images look good and not horrible. Unless you’re working on a portfolio for a high-end photographer, where visual quality trumps everything else, the images don’t have to be perfect. So think in terms of smaller and lighter when it comes to your graphics. Pages that load slowly irritate site visitors more than you might imagine – in fact, many people actually list slow websites as the most frustrating part of their Internet experience.
What happens when your site loads too slowly?
No matter how fast something is, the laws of physics still apply. Even with websites, the farther away the visitor is from the web server, the longer the page will take to load.
To speed things up, many websites now employ a CDN (Content Delivery Network), resulting in improved page-load times. This network, with servers located in various places around the world, downloads the site’s graphics from the server that is closest to the website visitor.
As you might imagine, a page that’s loading graphics from geographically closer servers will load faster than graphics coming from just one server that might be very far away.