Making Our Sites Faster, Part 4: Three Things You Can Do To Make Your Site Faster

June 21, 2016

This is the fourth post in a 4-part series discussing performance on the GeorgiaGov platform.

I’ve been talking a lot about website performance — why it mattershow we measure up, and what we’re doing to improve our platform performance. Now it’s time to hit you where it hurts — and remind you that not all the burden of improved performance lies with the code.

We can adjust, aggregate, and optimize code all day long, but image sizes most heavily affect page load times across our platform. A few of these are images are “baked into” your design. Some themes are lighter than others because they don’t contain background images or other graphic elements. In fact, we recently optimized all our theme images to reduce their load, and we expect that to have a big impact across all the sites. Now it’s time to think about the images that are part of the content of the page.

This is where things get tricky. Many of our customers — the agencies these sites represent, and who manage their sites’ content — want nothing more than to add larger images, more rotating image carousels, and more bling to their sites. They tell us this will “capture millennials” and “help them win awards.” They don’t have data to back this up; just a general sense that more bling makes for a more engaging website. But if your users give up because your pages aren’t loading quickly enough, who are you serving?

To that end, each agency is responsible for its own site’s performance. What can be improved? I’m so glad you asked!

3 Easy Ways To  Speed Up Your Website

  1. Kill your rotator
  2. Lose unnecessary images
  3. Optimize remaining images

Let’s get into a little detail on each of these.

1. Kill Your Image Rotator

Also known as an image carousel, the rotator on your site either takes the form of a block of rotating images, or an image with accompanying text and a link. It’s our worst offender for performance drain, because it loads many large images and a lot of extra JavaScript. In fact, adding that rotator to your homepage basically doubles the size of your homepage. That rotator sucks up a ton of bandwidth and provides visitors with very little value in return. Our analytics show that less than 1% of visitors click on the image banners. If your visitors are ignoring your rotator, then it’s not adding value.

Ready to lose the rotator? Contact us at digitalservices.georgia.gov/help, where we can remove your image rotator and help you figure out what type of content block would make more of an impact in its place.

2. Lose Unnecessary Images

Are you using a stock photo just to “liven up” your page? Or creating a large banner image because you want to use a different font than the ones your site theme uses? For each image you add to a page, ask yourself what value it’s adding to the page. If you don’t have a clear answer, remove it.

Now, before you write me off as someone who thinks all images are bad, I need to point out that we at Georgia.gov post images, including large infographics. What’s more, I’m about to add screenshots into this very blog post — because they add value and illustrate a point. What I’m encouraging you to remove are images that could otherwise be text, or wouldn’t be missed if they were gone.

One extreme example of a state agency getting rid of images is the new pilot replacement site for va.gov, over at vets.gov. While the old site at va.gov looks very similar to many of our platform sites, the new pilot at vets.gov has stripped all the fluff and gets right to providing links to the services constituents need.

Screenshot for the va.gov homepage, with a menu bar, rotating image banner, and many sections and links.
Old site: va.gov
Screenshot for the simplified vets.gov homepage. There is a search bar, main heading, simple background image, and 3 large callout text link boxes, but little else.
New site: vets.gov

When asked about their choice to go light on the images, the team explained that the decision was based on usability testing — they talked to real users and found that their users preferred less imagery.

3. Optimize Remaining Images

Now that you’ve removed images that don’t add value, and you’re confident in the images you want to keep, make sure they’re optimized for the web. All your images should be

  • No larger than the size they will load on your website (remember, our platform layouts resize based on the screen width, so some images actually show up larger on the width of a typical tablet display than they do on a desktop display. None of your images will load larger than 900px wide).

  • Saved as the best file type (jpg, png, svg, or gif) and smallest size for the image style. If you have Photoshop, use the Save for Web feature to save your images. If you don’t have Photoshop, you can download the free image editing tool Gimp to perform these tasks. Not sure how these image types differ? Lara Hogan, senior engineering manager of performance at Etsy, created a detailed list of different optimization options per image format to help you choose.

  • Compressed again after you save them, using a free online image compression tool. Our front end developer recently started using compresspng.com and compressjpeg.com — both do an excellent job of compressing images, often with almost no discernable change in quality.

But wait, there’s more! For even more tips on saving your images specifically for the GeorgiaGov platform, see these previous blog posts on the topic:

Implement these changes to all new images, of course. But you should also carve out some time — even 15 minutes a day — to review old images and update them whenever you can. You’ll be surprised how much you can compress some of your images.

Let’s Do This

Your content is the most important part of your site — it’s why visitors go to your site in the first place. Fast performance and quicker image loads are the icing on the cake that makes that visit painless. So let’s do this.

Kendra Skeene

About the Author

Kendra oversees the state’s enterprise web platform, directing product strategy and working with development partners to create new products for the platform’s customers.

You might like...

Illustration of an old toddler game. A triangle-shaped block is ready to fit in through a triangle-shaped hole.
April 4, 2018

As we embark on our replatforming project, we're looking for vendor partners who share our same values.

Illustration of building blocks.
April 3, 2018

We're getting ready to build a digital platform in light of compliance, consistency, and collaboration. To get there, we're taking a modular approach to procurement.

Illustration of a group of people pulling one person up a cliff.
July 25, 2017

Support is best served as a collaborative, team effort. Recently, we changed our support process and are excited about the changes and how it has empowered our users to answer their own questions.