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.

Summary

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!