When we talk about page speed, one of the key factors to having faster load times is the size of the page. Now, I’m not talking about width and height dimensions, I’m talking about data. The kilobytes, megabytes, or gigabytes of information being displayed. A great start to improving your site’s performance is to figure out what’s taking up the bulk of the data being served, then optimize it. One of the most common and most impactful ways to improve page speed is to optimize your images. Not just the file size, how you serve them can make a big difference too.
Over the past decade we’ve made huge advances in web technologies with regards to serving images. This came as a necessity with the increasing volume and size of the images on the web. Considering most cell phones today are equipped with12 megapixel cameras, which is about 3 to 3 and a half megabytes per image, it’s easy to imagine how quickly a web page can become quite large and why Google has dedicated 4 out of its 15 opportunities just to images. But, we don’t need to display images that large on our website because most screen sizes, especially on mobile devices, aren’t even half that size.
Image Optimization
Optimizing your images to the dimension and quality compression they’ll need to be clearly displayed is a great start to reducing load times. This is what Google refers to as “Properly size images” and “Efficiently encode images”.
Properly sizing your images just means that you’re not displaying a 256 x 256 pixel image in a space that only allows for 72 x 72 pixels. So, what if you have a responsive website, meaning it changes how it’s displayed based on screen size? Your images are likely to change size based on the screen they’re being viewed on. This presents another opportunity for us to optimize. Plenty of content management systems or CMS like WordPress for example, have the ability to scale your images on upload and store smaller sizes along with the original. This allows you to include a set of image urls to display properly sized versions based on the screen size. This is what’s called a source set. When you add a source set to your image tag, most modern browsers will be able to choose the appropriately sized image to display when loading. This means we don’t have to load more pixels and bytes than necessary to clearly display the image.
Image Compression & Next-Gen Formatting
Now what about that Efficiently encoding images thing. Well, that’s really just a fancy way to say image compression. It can be a difficult topic to understand, but the easiest explanation is it’s the process of reducing the amount of detail in an image. Less pixel variation means less data, and less data means smaller file sizes. All you need to know here is Google is looking for a compression level of 85, which is pretty substantial. The other opportunity that Google suggests with regards to compression, is serving your images in a Next-Gen format.
Now, I’m just going to mention this with a passing nod, mainly because next-gen formats are still fairly new, not widely supported yet, and require some server configuration, which most people would need a professional to assist with. These formats include JPEG 2000, JPEG XR, and Google’s favorite, WebP. They provide the ability to further compress your images, but more importantly maintain more detail in the process. If you’re not already using Next-gen formats, I would suggest looking into it because they are becoming more popular and support is increasing.
Lazy Loading
So what about images that are further down on the page, but not visible yet? Unfortunately, those pesky critters are still taking up valuable load time. Usually when you refer to something being lazy it’s a bad thing, but in the case of lazy loading, this couch potato gets an A+. Lazy loading is what Google is talking about when it refers to “deferring off screen images”. Lazy loading allows us to load images and other elements on the page only when they enter into the viewport. This way we don’t have to load everything all at once and we can save time on the initial page load. We can do this very simply with our image tags by adding the attribute loading=”lazy”. This is a pretty widely supported method in most desktop and android browsers. Sorry, you’re still going to need JavaScript for Apple users.
Minification
Speaking of JavaScript, let’s talk about minification for a bit. No, we’re not talking about some weird Hollywood science, Honey I Shrunk the Kids, scenario. Minification is just a way for us to further reduce file size. Oftentimes JavaScript and CSS is written in a human readable format because developers, like me, can get rather lost when we can’t keep track of what line we’re on, let alone what variable, or function. Computers, on the other hand, have no trouble reading these files. So we can trim off a lot of unnecessary characters, spaces, and indentions to save space. If this is showing up in your page speed analysis, be sure you check with your developers and implement a plan to correct it. It’s a wide spread standard practice, so there are tons of great, easy to use, tools available to help.
Content Delivery Network
One of the easiest ways we can improve performance is to serve our content over a CDN or content delivery network. CDNs essentially take your website and distribute it to servers all over the world. This allows users to access the server closest to their physical location. Rather than reaching a server located halfway across the country or even the world, users are redirected to a server that is much closer. This can greatly reduce the time it takes to send and receive data. Plus, CDNs like Cloudflare and Fastly, not only provide great coverage, but a variety of other services that can greatly improve your website’s speed and security, or even provide analytical data. Services like image resizing and next-gen format delivery, video streaming, improved caching policies, and file minification can simplify your efforts to optimize your site’s performance and give you a single point to adjust these settings.
From here we start getting into more advanced methods to improve page speed. These methods may include adjusting load order, prefetching and preloading resources, leveraging browser cache, loading resources asynchronously and deferring other resources. If this stuff sounds like space technology to you, we recommend asking your developers to “make it so”.