Since I began designing and coding websites in the fall of 2003, much has changed on the Internet. Websites can now include more scripts, plugins, and images; websites are just simply BIGGER than before high-speed Internet and social media became more widespread. But I still monitor the file sizes for my layout graphics, post images, and Web pages, because I still like my pages to load quickly, and I still consider loading speed to be important.
Why I Concern Myself with Loading Speed
I suppose part of my design style got stuck in the pre-high-speed-Internet era, since it has only been since winter 2013 that I finally could get any kind of high-speed Internet at home. But if we designers and developers take the time to learn how to make our sites load quickly, even on slow connections, that makes it more likely that our content will be read, and hopefully that visitors will return–something we all want.
For instance, many people now take in Web content through mobile connections, which can be slow depending on individual data plans and signal strength in the area. Why choke that slower connection with unnecessary “junk” on our layouts, or in our files? Why not polish up our sites so that even on a weaker strength mobile connection, our content still loads quickly?
Ways To Optimize Loading Speeds
#1: Keep images to a minimum.
One of the main ways I streamline a page is to edit down my images as much as possible, including just enough visual detail without going overboard on file size and complexity. With mobile web usage on the rise and flat design theory currently in vogue, many other designers are moving toward this “less is more” concept. Many things which previously could only be achieved with images can now be accomplished with HTML special characters, CSS styling, or icon fonts, for instance. (And there are quite a few other CSS3 and HTML5 tricks, which can reduce or even eliminate the need for images altogether!)
#2: Divide up the content into smaller pages.
Another way I streamline is to divide long pages up into smaller pages and make a sub-section out of them. Yes, that means more links to click or tap, but it also means your users don’t have to load huge pages of material and waste time scrolling around trying to find what they want. Just make sure you provide clear navigation paths, like breadcrumb navigation, so that users can easily find their way around your site’s content!
#3: Compress images.
Compressing your images may seem like an unnecessary step, but when you’re trying to save kilobytes (or even megabytes) wherever possible, this can REALLY help! Choosing the right type of image compression, however, is key. (If you’ve ever tried to save something as a Web-Color-Restricted GIF file, you’ll know what I mean by a “grainy GIF.” Ugh, gives me nightmares.) See my post about JPG, GIF, or PNG file types to see more about which compression style is best for the type of image you’re making.
With just a few simple changes to the way we construct our pages, we can make our sites load super-quick on just about any connection speed and device. It’s worth the time we spend behind the scenes so that our users have a much better experience visiting the fruits of our efforts!