Improve Your Page Speed – A Case Study with Carvertise

June 23, 2015

Written By: John Himics

Web

Page speed optimization is important. Studies have shown that people expect a site to load in under two seconds! Is your site up to snuff and if not, what can you do about it?

Carvertise is a Delaware startup that brings together people who want to earn extra money and companies who want a unique and effective medium to promote their company image. They recruit local drivers to place advertisements on their cars, coordinate with local businesses who need advertising exposure, and offer detailed data on the effectiveness of the advertising campaign.

They’ve allowed us access to their website files to show the power of page speed optimization. To test this, we’ve deployed the original site and versions of the site with optimizations in place on the same server. We will use the same files, only making the changes as noted.

Let’s start with a baseline

We’ll be using Google PageSpeed Insights to test loading speed.

Original site

Test URL: carvertise.firstascentdesign.com/original
Google PageSpeed Results

Mobile Results: 31 / 100

Desktop Results: 56 / 100

Ouch. We recommend a minimum of 80 for both desktop and mobile. So let’s see what the major issues are:

Google PageSpeed lists two issues as “Should Fix”

  • Optimize images
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content

Let’s fix them!

Optimize Images

Image optimization is the process of getting the highest quality image possible for the smallest file size. The two factors that drastically effect file size and quality are the physical size of the image and the compression of the image.

Compression is the easiest thing to optimize. The first step we always take at First Ascent Design is to run the images through TinyPNG, an online image compression tool for PNGs and JPGs. TinyPNG offers a developer’s API and public HTTP service for compressing images. We wrote a quick Python script to compress all the images in the “img” directory while also making backups of the uncompressed images. If you don’t want to use the script, you can use TinyPNG and compress and re-download all the images.

import os
from os.path import dirname
import urllib2
from base64 import b64encode
import shutil
directory = "img/"
backup_directory = "img/backup/"
key = "BrwLyfGm7a9tlsywI_lyoBoHGejby4LJ"
backup_append = ".backup"
for filename in os.listdir(directory):
    print(filename)
    if not os.path.isdir(backup_directory):
        os.makedirs(backup_directory)
    if not os.path.isdir(directory+filename):
        shutil.copyfile(directory+filename, backup_directory + filename + backup_append)
        request = urllib2.Request("https://api.tinify.com/shrink", open(directory+filename, "rb").read())
        cafile = None
        auth = b64encode(bytes("api:" + key).decode('ascii'))
        request.add_header("Authorization", "Basic %s" % auth)
        try:
            response = urllib2.urlopen(request)
        except urllib2.HTTPError:
            print("Wrong File Type")
        if response.getcode() == 201:
            # Compression was successful, retrieve output from Location header.
            result = urllib2.urlopen(response.headers.get("Location")).read()
            open(directory+filename, "wb").write(result)
        else:
            # Something went wrong! You can parse the JSON body for details.
            print("Compression failed")

The result? The uncompressed size was 44mb  and the compressed size is 8.1mb, an 82% improvement! After compressing all images, we ran Google PageSpeed again.

Compressed Image site

Test URL: carvertise.firstascentdesign.com/Image_Compressed
Google PageSpeed Results

Mobile Results: 55 / 100

Desktop Results: 79 / 100

Much better! As you can see, optimizing images will drastically improve your website’s page speed.

Let’s see what the remaining major issues are:

Google PageSpeed lists two issues as “Should Fix”

  • Optimize images
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content

But wait, why is it still saying the images need to be fixed? Click the dropdown to see what images it’s referring to. Inspecting those images in the browser shows that they are WAY too big for what they’re being used for. For example take image “http://carvertise.firstascentdesign.com/Image_Compressed/img/wilm.png” This image is 900×900 pixels but is being displayed as 165×165 pixels. That means 96% of the image is effectively being wasted.

Google recommends we resize these images:

  • Compressing and resizing http://carvertise.firstascentdesign.com/Image_Compressed/img/wilm.png could save 52.1KiB (84% reduction).
  • Compressing and resizing http://carvertise.firstascentdesign.com/Image_Compressed/img/dend.png could save 17.5KiB (65% reduction).
  • Compressing and resizing http://carvertise.firstascentdesign.com/Image_Compressed/img/elite2.png could save 11.7KiB (46% reduction).
  • Compressing and resizing http://carvertise.firstascentdesign.com/Image_Compressed/img/naturalawn1.png could save 7KiB (49% reduction).
  • Compressing and resizing http://carvertise.firstascentdesign.com/Image_Compressed/img/rey3.png could save 5.6KiB (40% reduction).
  • Compressing and resizing http://carvertise.firstascentdesign.com/Image_Compressed/img/DBT.png could save 890B (12% reduction).
  • Compressing and resizing http://carvertise.firstascentdesign.com/Image_Compressed/img/PI.png could save 788B (14% reduction).
  • Compressing and resizing http://carvertise.firstascentdesign.com/Image_Compressed/img/DBD.png could save 656B (16% reduction).

We’ll resize these images directly by the percentage reduction Google anticipates. We can do this (reasonably) safely because we’ve already compressed the images in TinyPNG, so we’re assuming the anticipated reduction is only from image resizing. Double check your site after doing this. Again, we’re developers so we’re not going to do this one by one, but this time with a quick BASH script.

#!/bin/bash
 IMG=("wilm.png" "dend.png" "elite2.png" "naturalawn1.png" "rey3.png" "DBT.png" "PI.png" "DBD.png")
 SIZE=("84%" "65%" "46%" "49%" "40%" "12%" "14%" "16%")
 $index = 0
 for i in ${IMG[@]}; do
 convert $i -resize ${SIZE[index]} $i
 echo "resized"
 echo "$i"
 index=$((index + 1))
 done

If you don’t want to use a BASH script you can do this one-by-one in Photoshop (or another image editing program) or use a bulk resizing tool like BIRME.

After resizing all images Google suggested, let’s see how they perform!

Image Compressed and Resized site

Test URL: carvertise.firstascentdesign.com/Image_Resized
Google PageSpeed Results

Mobile Results: 71 / 100

Desktop Results: 80 / 100

Definitely better! The desktop results are at our target of 80!

Script and Style Optimization

There’s only one “Should Fix” item left.

  • Eliminate render-blocking JavaScript and CSS in above-the-fold content

This is a more technical issue. JavaScript and CSS files are bits and bytes just like anything else and have to be transported over the internet before the page is “fully loaded.” Each file requires a separate trip to the server and back. What Google PageSpeed is saying is that JS and CSS files being loaded before the HTML and images of the page actually block the web browser from rendering the page. The same thing happens with multiple files requiring multiple trips. This makes the page “feel” like it’s loading slowly. Moving and combining the files accomplishes the same effect but allows the site to render sooner, making it “feel” faster.

To fix this we’ve:

  • Moved jquery-2.1.0.min.js and jquery.circliful.min.js from the beginning of the document to the end.
  • Commented out a duplicate jQuery script
  • Combined bootstrap.min.cssjquery.circliful.css, and _main.css into one file, combined.css
  • Moved font CSS files to the bottom of the document, above the JS. (Warning: This could cause the wrong font to render for a split second while the site loads and is something that should be tested thoroughly to decide if it’s right for your site!)

Scripts and Styles Optimized Site

Test URL: carvertise.firstascentdesign.com/scripts_and_styles
Google PageSpeed Results

Mobile Results: 80 / 100

Desktop Results: 83 / 100

Awesome! We’ve succeeded at bringing the site speed rankings for both mobile and desktop to at least 80. That’s a success!

So is all this worth it?

Yes! According to a survey by Akamai.com, a 1 second delay in page response can result in a 7% reduction in conversions.

Let’s see what Carvertise’s site load time is for the original version vs. the final version.

Good 3G
Original: 23.32s | Final: 18.75s | Improvement: 20%

4G
Original: 8.83s | Final: 7.46s | Improvement: 15%

Wifi
Original: 5.75s Final: 4.55s | Improvement: 21%

*reporting “load” times on Chrome Web Inspector Throttling Options

What is 7%+ more sales worth to you?

Let's get started!

Tell us about your project or just say hi! We will get back to you within a few days to discuss how we can help you.

Shoot us an email at [email protected]