Tips and Tricks for a Faster Loading Site

Rylan Francis
Aug 24, 2017 · 7 min read

I read an article the other day that the attention span of an average human is lower than a goldfish. It stated our attention span was down to just eight seconds. eight seconds. Have I lost you already?

In this hyper world we live in, designers have to be sure we use every millisecond to our advantage to get our content, design, and message across. So it is important to embed into your site and design process with techniques that don’t waste time for the user. A faster site has and will always be a better site. Its true. Gone are the days of the 56k modem, but still, users find themselves with little patience for a site that just isn’t loading. The worst thing a web designer can do is have a site that is never seen because the user got bored waiting for it to load. So with that in mind, I wanted to share some of the techniques and processes that I use when developing a site to shave off some precious seconds on load time.

Starting off small

First, think of a website as a conveyor belt, feeding your web browser different packages (images, javascript, etc.). Some are big packages like images, some are small like HTML files. The problem is your web browser can only take one package at a time. So how do you make it faster?

The first real step is make the big packages smaller and easier to handle. And you can do this in a few easy ways:

One easy way is by shrinking your code or minifying it. You’ve probably seen minified versions of javascript files if you’ve used a third-party script. Essentially, this is a non-pretty version that has stripped away all the excess spaces. Sure, its hard to read, but it is a smaller file. This is perfect for large files like CSS and HTML. The great thing is a lot of programs can do this for you. At Protect America, our system is built in Django and we use Compressor to do this automatically. However, standalone programs like CodeKit will also do this.

TinyPNG is magic

The next thing I do is run all my images through a loss-less image compressor. Essentially, these compressors shrink down your images by removing unneeded information without the loss of image quality. There are others out there, but I have found TinyPNG to be an awesome resource. They also have a plugin that will do this automatically on your site if you are using Wordpress. Use this on all your images — I tend to do this in bulk before pushing my site live.

Selecting the right image format to begin with

Another way to keep image size down is to be smart on how you save your files. There are essentially five types of image formats you can use when saving for the web — JPG, PNG 8, PNG 24, SVG, and GIF. Each one of these have advantages and disadvantages when it comes to saving for the web.

JPEG with a bit of artifacting

JPG: The most basic of image formats. These are good when wanting to display a photograph or something that has an expansive color range. It is a lossy format and does not support transparency. When, “Saving for Web” in Photoshop you get a variety of options when comes to image quality. I have a few rules that I use when saving my JPGs. First, never do a 100% quality if you are concerned at all about load time. The highest I usually go is 92 — there is usually no visible difference and you’ve saved yourself some kb. Second, when dropping quality, I drop by 10 starting at 92 (ex. 82,72,62,52,etc.). Finally, drop the quality until you are comfortable and accept the artifacts found in the image. You are the designer, you know how this image is going to be displayed. I usually end up with an image at either 72 (good quality) or 52 (medium quality) when I save.

PNG 8 with a white background built in

PNG 8: These are perfect for a simple illustration where you don’t need a lot of gradients, shadows, or transparency. While they do support transparency, you will get some pixelation on the edges — You can reduce this with straight edges or use it to your advantage if it blends into the background. PNG 8 handles up to 256 colors in its palette. The cool thing when saving these is you can set the number of colors to reduce file size. So if your image is built on 8 solid colors, use 8 and watch the kbs just slip away. You can play with the amount of colors in Photoshop to find what works best for you.

This phone’s background is transparent allowing it to sit atop other images and colors adding flexibility but also file size.

PNG 24: This is going to be the largest of the file formats. It handles the full color range like JPG but also handles transparency. They are beautiful, but you take the hit in file size. Honestly, I only use these if I need something transparent and PNG 8 just isn’t cutting it. If that’s the case, I usually try to see if I can slice the image in different ways to limit the amount of space a PNG 24 is using and use another image for the non-transparent space.

SVG: These are for vector based images like logos. They are a little harder to work with, but can save you tons of space and look good on every type of display (desktop, mobile, 1x, 2x, etc.). They are supported on all major browsers and can be embedded right into your code to reduce a request if you want.

GIF: I would only use this if it is animated. Other than that, I find a PNG 8 handles everything a gif can do but is usually smaller. Also, I throw my hat into the “GIF” team not the “JIF” team.

Image Dimensions

I added this section really quickly since I’m talking a lot about images. I have seen many designers save out images with huge dimensions — including one straight from the camera with a file size >3mb. Again, back to the conveyor belt, think about the size of your images. Save your images to the size you need them. Do you really need a 3000px wide image? Can it be smaller? Is there a different way you can accomplish what you are trying to do? Can you crop out unneeded image space? Simply reducing the actual dimensions of your images can go a long way to saving kb and thus load time on your website.

Reducing Requests

Ok, requests…let’s go back to the conveyor belt. So your website is feeding the browser these packages. However, your website is asking your server for the packages. Every time it has a new package, it asks for it — this is a request. This takes time. So the next thing you can do is reduce the number of requests by combining and/or removing things all together. By doing this, you are not only saving a request, but usually, removing extra kbs in the process.

Sprites (The non soda kind)

When talking about sprites I am immediately reminded of Super Nintendo. That is because that’s how the old gaming systems worked to save space. Its crazy that they had to fit an entire game on 16mb. One big way they did that is reusing images in what are known as sprite maps.

Chrono Trigger Sprite Map for one character…Crono

A sprite map is a bunch of images in one image. Now imagine all these images were on your website. That is a lot of requests. Instead you combine all these simple images into one and use CSS to call the section you are looking for. Since the colors are all the same and its all in one image a PNG can compress this pretty well. You save a ton of space on load and a ton of requests. I’m not going to go into implementation of sprite maps in this article but check out this W3schools article for help.

Google Sprite Map

Sprite maps are perfect for small icons and graphics that are used over and over throughout the site.

Fonts and Icons

Beyond sprites, you can also use custom fonts for icons throughout the site. Loading one font file in your <head> can give you access to a ton of icons that render perfectly no matter the size. These also obey CSS styling for color, font-size, etc. At Protect America, we use Material Icons but we’ve also used FontAwesome and I’ve personally built my own fonts using IcoMoon depending on the use case. This is an alternative way to remove images / requests altogether by moving over to a icon font library.


When building a site that loads quickly, you want to think, “Less is more.” Plan accordingly and use all the tools available to you. When creating your website you can make your design go further and take up less time and space. Your visitors and SEO managers will undoubtedly thank you.

Protect America Design

The Ones Doing the Things

)

Rylan Francis

Written by

Senior Creative Director at Protect America: a home security company based in Austin, Texas. I believe that one’s favorite movie says everything about them.

Protect America Design

The Ones Doing the Things

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade