How to speed up your site: start with images

Start with images to speed up your site

Chances are that your site is slower than it should be. Often, the most critical factor in determining your site’s page load time is the amount of data required to display your page. This “amount of data” is usually referred to as the size (or weight) of the page, and is usually measured in Bytes (such as MegaBytes, or MB).

Larger web pages take longer to load because more data has to be transmitted over the internet before your visitors can view them.

The data making up a web page is made up of a lot of separate files. Most web pages consist of HTML files, CSS files, JavaScript files, and images.

If you take nothing else from this post, remember this:

Usually, images are the largest files that have to be downloaded to display your site, so any discussion of speeding up your site should start with a discussion of images.

The good news is, there are some simple things you can do today, without a developer, to drastically reduce the burden placed on site speed from your web site’s images.

The key: reduce image file sizes to speed up your site

Do you really need this image?

A great first question to ask yourself: Do I even need this image on my site? If you’re loading an image into your site without a good reason, you should reconsider.

If you insist that your home page needs a “slider” with gigantic images in it, well…I’m here to stage an intervention.

Why? Completely removing an image from your site is the only method that can give you a 100% reduction in file size for a given image. Some of the other methods below will give you efficiency gains from about one to eighty percent, but if you’re serious about minimizing page size to speed up your site, eliminating an image is a great place to start.

Please don’t take this to mean that you should never use images. Graphics and images work great in a design when the images help to communicate something or otherwise enhance the purpose of the page. It’s up to you to determine when images are helping to enhance your site and when they’re hurting it.

As a good rule of thumb: I like adding one relevant and interesting image in a blog post, but generally I am very cautious about adding images to my content unless they are necessary to get my point across.

Is the image an appropriate resolution?

The width and height (usually measured in pixels) of your pictures should be appropriate for how you’re using that image in your layout. For example, an image that is 1200 pixels wide may be useful in a gallery view or as the main featured image on your homepage, but having an image of this size loaded into a smaller part of your layout, such as a sidebar, would be crazy!

Please, just scale down your images’ sizes appropriately before you put them on your site!

Use compression

This is related to the previous point because images with higher resolutions tend to be higher in file size, but you should seriously consider whether or not the file size of an image is acceptable for its use on your site.

If the image is going on your site, you should compress it. There are many tools that do this. The key is to start with “lossless compression” that will reduce your images’ file sizes without compromising their visual quality.

One great compression tool for Mac users is ImageOptim. It’s free and easy to use, as long as you can remember to compress your images before you upload them to your site.

Another tool that runs on your WordPress site and can automatically compress your images is WP Smush.

Recap

Image files usually represent a lot of your site’s “weight” and may be causing it to be slow for your visitors.

  • If an image isn’t helping your site to serve its purpose; don’t use the image on your site
  • Make sure you use the appropriate size images for the different areas of your page or site
  • Every image you upload to your site should be run through a compression algorithm

Designing and Developing a Custom Mapping App

custom-mapping-app-small-blur
A screenshot of the finished app

Intro

I recently finished up version 1.0 of a unique and exciting custom mapping app. The project helps a company automate pricing calculations based on geographic service areas. What follows is the detailed account of how it all went down!

About my client

Home to Heaven provides in-home pet hospice and euthanasia services. Dr. Kathleen Cooney founded the company in 2006 after realizing a need for compassionate and comfortable end-of-life care for families’ companion pets. Home to Heaven serves the majority of northern Colorado; an area spanning dozens of towns and cities and more than fifteen hundred square miles.

The problem

Serving such a huge expanse of Colorado requires Home to Heaven to break up the area into regions. Kathy and her team of veterinarians do almost exclusively house-call appointments, so customers pay a final price based on their location within one of these regions.

Previously, the company had to rely on looking up an address on a printed map. This method proved to be an effective way of calculating the charge for a client, but it wasn’t the most accurate or precise way of doing it for dozens of appointments each week.

The solution

Kathy had the idea to save a bit of time for her staff by creating a software tool that would take an address as input and return the price based on the service areas.  The Care Coordinators, her employees at the call center who take customer inquiries and book them as appointments, would simply enter the address of the client to calculate how much to charge.

I was picturing a single-page app from the start.  I would place a search box and large map, front and center.  There would probably not need to be user accounts, but most likely we’d need some kind of password protection to keep the page semi-private.

Mapping app first wireframe
An early wireframe

 

I used a design app called Sketch to create this first set of wireframes. Producing these was a great starting point for discussion. The wireframes helped us realize that we would need to add a button to allow the user to set the time for the appointment, since time of day is also a factor in determining price. I went with a simple toggle switch for this, since the price changed based on whether the appointment was roughly AM or PM.

wireframe-blur
Another early wireframe

 

JavaScript is the primary language for the app’s code. I utilized the Google Maps API to handle all mapping functions. First, we built the service areas into a Google Map as shapes, using Google Maps “My Maps” feature.

Then, I exported the service areas into KML format, which is an XML-like format for map data. I used Ruby and Nokogiri to pull and format the data I wanted from the KML file.

The output I needed was a nicely formatted JavaScript file containing variables with a bunch of latitude/longitude pairs representing the boundaries of the service regions. This way I could import the service regions into my JavaScript code.

I used the lat/long data to build Google Maps Polygon objects. Once I had these Polygons established, I could use a Google Maps API function called containsLocation(…) to see if a given Address was contained within one of my Polygons. I could use the result to do a simple price lookup based on the rates provided by Dr. Cooney.

I used Material Design elements from the Polymer project to handle design and layout, with BASSCSS as a helper library and custom CSS where necessary. The whole thing runs locally in the browser since, at this time, there is no need for a database or heavy server-side processing.

I used PHP and cookies to handle login.

I also added a lookup history where users can see their most recent searches in the event that they need to recall a recent client address or price quote.

The result

The mapping app helps Home to Heaven save time and provide consistent pricing for its clients. We have plans to increase the functionality and usability through a follow-on project.

Map regions shown with address lookup.
Final app running in the browser

 

Mobile will become the main way people use the internet

Mobile is not a subset of the internet anymore, that you use only if you’re waiting for a coffee or don’t have a PC in front of you – it’s becoming the main way that people use the internet.

– Benedict Evans

 

Person holding mobile device at table
Remember when you had to find a desktop PC to use the “real” internet? Increasingly, it’s getting to be the other way around.

Source: Forget about the mobile internet