To kick off another Redo Week, I went back and reworked my old post about fast loading times, including more explanations in fewer words as well as quite a few explanatory links. All in all, a MUCH better article which is quicker and easier to read!
In this day of widespread fast Internet coverage, I’ve noticed that many webdesigners have built much more complicated pages, with larger images, more feeds, and multi-step scripts. For most users, who have access to higher-speed connections, this is not a problem.
However, just because most desktop users have faster access doesn’t mean that all our visitors have fast access. As more and more people use the Internet via smartphones and tablets (which often have slower data connections), we now have a new challenge: to design good-looking sites for desktop users which still load quickly and look good on mobile, too. (Not to mention that there are still places where fast internet is not offered; my household could not get anything but dialup until the winter of 2013!)
So, how do we go about designing these beautiful but quick-loading sites? Here are some tips from my experience on slow connections:
#1: Slice Up and Compress Images
I can’t count the number of times a page wouldn’t load on dialup simply because the designer used a background image the size of a small soccer field. (And on mobile, it’s a lost cause. TRUST ME.) If you want a big background image (or any big image on your page), please, PLEASE, for the love of Internet, use a graphics program to slice it up into smaller pieces and compress each piece (see Tip #5) so that all connections can load the page much faster.
You might complain, “But then I’ll have to align all the image pieces in a table or bunch of divided layers!” True, it might be a little more backend work for you, but it will likely result in a faster-loading page for your users, and that’s what you ultimately want: a page that loads quickly so that your users can get the information they came for. (Free graphics tools and programs that slice: GIMP> and PicSlice.com.)
#2: Don’t Use Images Where Well-Formatted Text Would Suffice
Pages full of images are very frustrating for both mobile and slow-connection users, especially when the images are just text. Each big image can take up to 15 minutes to load, just by itself, on a dial-up connection, whereas a page full of just text would have loaded in under a minute.
If you really, really want a different and trendy font for your web site, try using the @font-face CSS property and be sure to include the font file on your site. (Also, make sure that there’s a more generic “fallback” font specified for mobile and dialup connections, otherwise your text will be invisible until the font file loads!) Style your font carefully with CSS, and you might just like your text better than the image version anyway!
#3: Divide Up Long Pages of Images
Instead of having an “endless” page of images (which never load on mobile/dialup anyway), break up image pages into sections/pages. This does mean more clicks for your user, but it also means each page loads more quickly so that they can enjoy your content quicker. Using a fast-loading thumbnail image script, like the one at DynamicDrive, phpThumb(), or HighSlide, can work well, too.
#4: Minimize the Number of Site Branding Images
The more images you have per page, the longer it takes to load every time your user clicks an internal link on your site. Thus, you want your image usage to be striking but not overwhelming. Any place you’re using an image for site branding, brainstorm ways you could reduce or replace that image with a CSS trick, icon font, or HTML special character.
For instance, you can use CSS’ margin, padding, and line-height properties to space text out without having to resort to using a text image. Icon fonts, like Socialico and Modern Pictograms can be brought in with the @font-face property to use for social media links or iconic navigation. (Alternatively, you could use HTML special characters, such as the ones listed on UTexas, Webmonkey, and DeGraeve.)
#5: Pay Attention to File Size and Content
No matter what files you’re using, pay attention to how big they are. If you’re consistently creating and calling files over 500KB, slow connections won’t have a prayer of seeing those in a timely fashion. (And 1MB files just make mobile and dialup users cry at the unmoving progress bar.)
Do all you can to keep file size down. Firstly, use image compression techniques that work for your needs (see my JPG, GIF, or PNG article about which image compression technique would be best). Also, for large text files, PDFs, or coded webpages, cut out extra stuff and load it separately–for instance, I use PHP includes to load my header and footer on most of my sites so the browser doesn’t have to keep reloading the same layout info every time.
Lastly, using deprecated tags or having a page loading in quirks mode (without a doctype) is also a loading speed killer–make sure your code is valid, otherwise, your mobile and dialup users will be waiting a long time and most likely see an error page instead of your site.
Loading speed may not be the issue it once was, but it’s still important. Streamline your site, and you’ll be surprised how much faster your sites will load–even your fast internet users will notice!
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!