Ultimate Guide to Page Speed: Novice

Chapter 1: A Guide To This Guide
Chapter 2: Why Page Speed Matters To Digital Marketing
Chapter 3: What Impacts Page Speed?
Chapter 4: Novice – Image Compression And Such ← You are here
Chapter 5: Intermediate – Server Compression And Geekery
Chapter 6: Advanced – Varnish, Apache and nginx

In this post: In life, nothing is easy. Except when it comes to page load speed. Little things make a big difference. Big things do, too. Changes that don’t require you to move mountains. Why friends don’t let friends create uncompressed image tiles.

Unless you’ve got serious server problems, the easiest way to boost page load speed is to reduce use of the pipe. That’s what this chapter is all about.

Optimize images

First time optimizing your site for speed? Start with images. 99.99999% of the time, images will be the first, biggest bandwidth hogs. They’re also some of the biggest, easiest speed improvements you can make, because they save space in the pipe. Remember the pipe? If not, look back over here.

If you want a quick primer about image file formats, see the glossary.

#1: Use the right file format

There are two widely-used image file formats:

JPEG or JPG (Joint Photographic Experts Group, pronounced jay-peg) refer to the same image format. We’ll use ‘JPG’ here. JPG files should have the file extension .jpeg or .jpg. JPG is usually best for images with thousands or millions of colors, like photographs. Those tend to be the biggest files, and JPG is a compression powerhouse.

PNG (Portable Network Graphics, pronounced ping or pee-en-gee, depending on who’s side you’re on) are ideal for line-art and other images with fewer colors.

All of these file types refer to the way the image files are compressed.

Use JPG for photographs and photographic images. JPG is known as lossy compression. It reduces file size by removing data. That’s why JPG compression is so effective for humungous, many-colored images. It deletes data. That can reduce quality, but done right, JPG compression is nearly undetectable.

Use PNG for line art or images where your design requires transparent backgrounds. PNG is a lossless file format. It works by rearranging data to more efficiently use file space. It doesn’t reduce photographic image file size that much. But for line art and images with few colors, it’s fantastic. And it preserves transparency.

Choosing the right format makes a huge difference.

Here’s a completely uncompressed photograph:

Here’s a photograph compressed using PNG. The file size is actually larger:

Clearly JPG’s the best format for photographs like this.

PNG, though, excels with simpler images and icons. Here’s the Portent logo as a transparent PNG. It’s a 12kb file:

And here it is as a JPG. It’s almost 2x larger, at 22kb:

Choosing the right format has an immediate impact.

#2: Compress your images

Choosing the right format is the first step. Use that format’s compression algorithm and you can see even bigger savings.

You can increase or decrease the ‘lossiness’ of jpg compression. Remember the previous example? That image was 2.7 megabytes in JPG format.

Compress it 20%, though, and you can get the file size down to 400kb.

Hard to tell the difference, but it’s less than one-sixth the size. That’s a huge savings.

You can go too far with JPG, though. The more you compress, the more data JPG removes, and the more the image starts to look like this:

It’s a balancing act. Compress as much as you can but always be aware of context. It’s not just about speed, after all. Images are there to deliver a message. A pixelated image may not deliver the message you want.

You can also change PNG 32 to PNG 24 to PNG 8. Each removes colors from the image. Here’s the Portent logo again, still transparent but converted from a PNG 32 to a PNG 8. It’s now 7kb:

A caveat: PNG for really small photos: Sometimes, if you have a really, really small photo, like a thumbnail, PNG may be the better format.

Testing and compressing images

You can use Google Page Speed to test images on your page. Run Page Speed Insights. Then look for ‘Optimize Images.’

If ‘optimize images’ appears under ‘should fix’ or ‘consider fixing,’ nice! You don’t have to worry about your images. If you’re like the rest of us, though, you’ll see a few:

Yikes. That’s a little embarrassing, actually.

You can see all of the compressed images you need in one shot. Run Page Speed Insights, then scroll to the bottom and click ‘Download optimized image, JavaScript and CSS resources for this page.’

Download them, then upload them to our server, replacing the old ones.

We just reduced image transfer by 91%.

Google Page Speed: One problem
Google Page Speed uses lossless compression on all images. Remember tip #1? Google doesn’t follow it. They don’t want to risk hurting image quality, so they sacrifice compression. You, however, can absolutely use JPG compression without any reduction in quality. And you should.

Image Compression Tools

If you want more effective compression than Google Page Speed Insights will provide, use one of these tools:

1. Photoshop. Adobe used to have this fantastic web graphics programs called Fireworks. But they’ve discontinued it. Sniff. Photoshop isn’t bad, though.
2. Imageoptim on the Mac. Far and away the best easy-to-use image compressor you’ll find. It’s what we used for the examples above.
3. Caesium on the PC. Not quite as easy, but still awfully good.

We ran imageoptim PNG optimization on our 8-bit PNG logo, and it reduced it by 2kb to 5kb:

A few tricks
You can get pretty fancy with image compression. There are even competitions. Seriously.

If you want to squish every last byte out of images, try these techniques.

If none of these options make any sense, don’t worry about it. They’re all about that last 10% of compression. At this point, you’ve hit diminishing returns. Unless you’re a true image nerd (like us) it’s probably better to move on to the next thing.

1. Blur photograph backgrounds. JPG compression works better on blurrier images. You don’t want your product images to look smudged, but you can often blur the background 1-2 pixels. Do that and you’ll reduce file size another 20-30%.
2. Separate text and image. If you’re adding text to multi-color images, don’t. Instead, either place the text as HTML text over the image or put the text in a separate, transparent PNG layer.
3. Remove colors. PNG may keep more colors in an image than necessary. Try manually removing colors using your image compression tool.

#3: Resize images

Images on a web page have dimensions: Width and height. You can set those dimensions two ways:

• Using your photo editing software
• Using the HTML IMG tag’s height and width attributes

If you use the latter to squash an image down to size, you’re wasting bandwidth. Say you’re displaying a 400 x 400 pixel image on your page, and the original is 1200 x 1200 pixels.

If you deliver that file at 1200 x 1200 pixels and then set the IMG height and width attributes to 400 x 400, you’re still delivering the larger file and using all that bandwidth.

Resize it in your photo editor, though, and you deliver the 400 x 400 image.

The difference? Here’s our example image, resized in a photo editor to 400 pixels wide:

Only deliver what you need.

An important exception: Responsive design
There’s one critical exception: Responsive designs resize images ‘on the fly’ based on browser window height and width. In most cases, a responsive site uses a single large image that may be the right size for the desktop, then shrinks it for a tablet or smartphone.

In that case, you’re stuck.

There are some really fancy techniques for delivering smaller images at smaller screen sizes. We use them on eigene-homepage-erstellen.net.

That’s far beyond this little book. But you can contact us to learn more about it. We’re happy to nerd out.

Minify

“Minify.” It’s a fun word—sounds like it belongs in a Rick Moranis movie.

It also has real application. On the web, minify means removing any unnecessary spaces, line breaks and tabs. It also removes comments. These may be invisible to us, but they’re still characters, and removing them makes a difference.

Here’s jquery.js, un-minified. It’s 260kb:

Here it is, mininified. It’s 32kb:

Whoa.

Using minify with javascript, CSS and HTML can shave a lot off a page.

Minification Tools

A lot of web servers and tools include minification. WordPress’s W3TotalCache includes a ‘minify’ option. You can do it by hand, too. Some text editors like Sublime Text include minification tools. There are also lots of online tools.

And, if you use Google Page Speed Insights, it’ll minify files for you.

Editing gets harder

Unless you’re part computer, it’s nearly impossible to edit a minified file. Save a non-minified version so you can edit it without losing your mind.

Include, don’t insert

You can add javascript and CSS directly to a web page’s HTML code. Or, you can include it, like this:

If you use an include, visiting web browsers often load the file once and store it on the visitor’s computer. That’s called caching. The next time they load a page on your site, they load the javascript or CSS directly from the local hard drive rather than from your web site.

Just like my great uncle always said: Nothing makes a file load faster than not having to load it at all.

Put files in the right order

Browsers (and the Googles) render pages. Ideally, they should start by downloading the content. That’s the HTML and the images. Then, they can format everything. That’s the CSS. Then they can do all that nifty interactive stuff. This impacts the client—the software that downloads all of those files and then renders them.

Of course, others have a different opinion about load order and the concept of rendering. This is ours. We like it. Nyah nyah.

The problems start when you force browsers to, say, load a few CSS files, then load a javascript file, then load a few more CSS files.

Javascript is typically a blocking resource. The browser has to stop loading and rendering other resources until the full script loads. That can take a while and, even if your page appears to load quickly when you measure it, it’s a tooth-grinding nightmare to the user.

The fix is easy: Put javascript last, so that a visiting browser will load everything else first.

If that’s impossible or just doesn’t work, consider deferring via javascript. This post by Patrick Sexton provides a great step-by-step and an example.

Optimizing the file order doesn’t always speed file delivery from server to client. But it does speed rendering on the client.

This is one of the only ‘novice’ site speed upgrades that can utterly munge your website. Be sure to test your changes!

This doesn’t seem to save very much…

Some of the tips in this chapter only shave kilobytes off page load time. Maybe minifying that one CSS file reduced its size from 40kb to 20kb. Why bother?

Say 10,000 people visit your site each month. That one file will account for 200 megabytes of data transfer. If each person loads 3 pages on your site, then it’ll account for 600 megabytes. But that won’t be the only file. You have HTML pages, multiple javascript files and lots of images. It adds up fast. That’s why you should do it.

Deep breath. Onward to Intermediate.

Chapter 5: Intermediate – Server Compression And Geekery