I’ve worked as a web developer for over a decade. I built my first client website in 2011, ironically a pair of websites built to showcase sister artists and their work using images. I've worked on, in, and around hundreds of websites, so you can imagine I’ve had the performance conversation on more than a few occasions. I’ve been hired specifically to improve performance, and I know it's a big deal because smart companies have smart budgets for website performance, and it’s a sustainable niche on its own. Search engines and user experience are at least two reasons why it’s smart to invest in performance.
When I’m approached by a client regarding their website performance, I will do what any good developer will do: I’ll run the site through Google PageSpeed and GTMetrix. These are tools that analyze specific page performance, telling users about different types of issues that may exist on a page, such as render-blocking issues or redirect issues. I won’t pretend I'm the most experienced performance analyst on the market, but I have performed performance checks on a plethora of sites in my career. Here are a few tips.
Themes
Your website theme is probably affecting your performance. Think about what a theme is. It’s a set of website templates with code built in to handle design and functionality variants that you only use a few of, and theme settings that you only need to set once anyway. A poorly built theme, or one of those themes that are popular because they do “everything,” can be sluggish as you are loading thousands of lines of code that aren’t being used. I like themes, but avoid the bloated 'do-it-all' themes.
Images
Theme bloat aside, the #1 most controllable yet neglected factor in website performance is caused by the content manager within the content management system. And that’s images.
Here’s the thing: when you are putting a page together, you may have an image you created or downloaded, but you didn’t pay attention to the dimensions. Let’s say it’s 2400px wide. An average HD monitor is 1980px wide. The average article area of a website is 860px wide. You are going to drag that image into your CMS file manager and use it, aren’t you?
Did you know that in recent history Google expected website pages to be a total file size, with resources, of 56kb? Why? Because that’s how much a 56kb/s modem can download in 1 second.
Now, go look at that image file size. Is it over 5mb?
1 GB = 1,000 MB = 1,000,000 KB
5 megabytes is equal to 5,000 kilobytes. That’s a hefty image. You can check an image's size in your file manager by right-clicking and selecting properties or by selecting it and looking at the bottom of your file manager. Now look at the space the image is used on the web page; is it the size of the actual image? Probably not at 2400px wide.
Truthfully, nowadays the 56kb rule is lax. That being said, it’s great to use as an unreachable goal to strive for. Why not make your page sizes as small as possible?
Images have a minimum possible quality and size for a space that you can set before the image becomes blurry. This limit will vary based on the image, image type, and other factors related to the image. You will know if you have breached that limit because you will load the image on the web page and think, “Why is that kind of fuzzy?” The goal is to reduce your image file size and dimension size to the bare minimum for their space. Every image. Yes, the banner background, yes that weird shape you use for accents, even those icons you downloaded as PNGs from FontAwesome - every image on your site should be optimized.
How? Browser tools. I’ll show you a few tools that will help optimize images. I’m going to run the same image through each tool to give you an idea of which tools perform better in which situations. I’m also going to drop links to various tools.
Here I have an image from the Mario movie that came out recently. I used Cloud Converter to convert the image from the original WebP format to both PNG and JPG formats.
WebP
- Size: 34.8kb
- Width: 1000px
- Height: 563px
PNG
- Size: 563kb
- Width: 1000px
- Height: 563px
JPG
- Size: 117kb
- Width: 1000px
- Height: 563px
As you can see, the same image at the same dimension, without quality alterations, will have different file sizes based on different formats. WebP is the clear winner in terms of performance, out the gate. What are these formats?
WebP
WebP is considered a modern image format, coming onto the scene after PNG and JPG. You get smaller and richer images with superior lossless and lossy compression using predictive coding. According to developers.google.com:
“WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at an equivalent SSIM quality index.
Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG. Lossy, lossless, and transparency are all supported in animated WebP images, which can provide reduced sizes compared to GIF and APNG.”
The pros to the format are performance, size, etc. The cons are support and quality. For instance, you have to turn on support in some Adobe products for WebP imports. Some browsers might not support WebP, but these days I’d imagine it’s pretty covered. It’s a format for web dev, so it isn’t going to be common or popular, but if you use it, you will definitely get the smallest possible image.
Luckily, performance checkers do not ping you for the image format, just the image size and dimensions. So if you don’t want to figure out how to convert to WebP, no worries. You can still use PNG.
Before we look at PNG and JPG, let's run the WebP version of this image through the available optimizers and see the results.
- OptiWebP (60% quality) - EZGif
- Size: 23.23kb
- TinyPNG
- Size: 26kb
- Compress or Die
- Size: 27.55kb
By running the original WebP format version of the image through different compressors, we get a close winner. EZGif is my favorite site for working with images anyway, so I’m glad it won. However, I have to admit that the quality control is a cheat because you can raise and lower the output. Compress or Die also has settings. But 60% quality is a good standard for fresh images.
PNG
Portable Network Graphics is a raster-graphics file format that supports lossless compression. PNGs were actually meant to replace GIFs. I like my GIFs for animation and my PNGs for graphics, but JPG for photos, so I don’t think replacement is necessary. Really, PNGs are large and heavy, but they support alpha channels for transparency. So does WebP. Adobe products have quick export to PNG options that make this format prevalent.
Let’s run the PNG version of the image through some optimization compression.
- CompressPNG
- Size: 220kb
- TinyPNG
- Size: 181.5kb
- Compress or Die
- Size: 206.38kb
- OptiPNG - EZGif
- Size: 533.82kb
Clearly, EZGif isn’t great for all formats; that is barely a reduction. TinyPNG, on the other hand, wow, more than a 60% reduction! I’ll add here that while EZGif isn’t great for compressing all image formats, it doubles as a cropping and resizing tool. So you will find it useful. Because of the image format variance, you might do like me and just Google ‘ezgif png cropping’ or ‘ezgif webp optimizing’ to get to the correct version of the tool.
JPG
JPG-type images are raster bitmap images, basically, fixed, colored pixels. It’s probably still the most common; it’s the typical format for photos and real images. It’s lightweight but doesn’t allow the alpha channel, so you can't use transparency within the image.
Let’s optimize the JPG version of the image.
- OptiJPEG - EZGif
- Size: 55.72kb
- TinyJPG
- Size: 68.8kb
- Jpeg-Optimizer
- Size: 56.18kb
Apparently, JPG images compress pretty nicely across the board. EZGif is the winner by a few decimal points. And, again, EZGif is great for cropping and resizing images.
Conclusion
You probably can’t avoid using a theme. If you already have a website set up and don’t want to build a new one, then you can probably optimize your theme. If you are considering a website, make sure you choose a theme that has good performance standards. But regardless of how you set up your site, as you add content, you are going to want to put a few minutes of work into cropping, resizing, and optimizing your images. You can use the tools listed above to do this. Happy optimizing!
