The Three C’s of Web Optimization: Content
The Three C’s of Web Optimization: Content
My approach to web optimization centers around three categories: Content, Code, and CDNs. For this meeting, I am going to focus on Content. I will share the whys and free tools and methods to get easy wins with your content.
My Three C’s are:
- Content - formatting and sizing your media appropriately
- Code - Optimizing the Web site’s code
- CDN - Implementing a Content Delivery Network
Importance of a Fast Web Experience
In today’s world, everything is digital. Users expect a fast friction less web experience.
In a recent study, they found that the bounce rate goes up as the page speed increases.
The bounce rate is the percentage of users that leave a webpage without taking any action.
We want users to take action - buy the thing, fill in the form, click to read another article, sign up for our app, etc.
More than half of all web traffic is mobile, but mobile conversion rates are less than desktop.
Conversion rates are kind of the opposite of bounce rates. They are the percentage of users that took a desired action.
In short when users bounce and don’t convert, they’re not generating revenue.
So how to fix it?
Optimizing your website/app for speed. Over the last year I’ve worked with around 40 different sites to do just that. Page Speed is just one part of Google’s Core Web Vitals. CWVs are one of over 200 known ranking signals for Google's algorithm.
One of the easiest, most effective, and most overlooked ways to do that is to optimize your media content - your photos and videos.
You should choose the right format and size for your needs. The most common photo formats are PNG and JPG, and video formats are mp4 and mov.
PNG is a lossless high resolution format, and it’s most commonly used in stock images and printing. These images are usually large and take a lot of resources to load. We may not notice that it takes 0.75s to load in a 10MB image on our Macs with broadband internet, but a user on a Samsung S8 on 3G sure can tell.
JPG is compressible and the most accessible format for the web. If you do nothing else to optimize your photos - make your photos jpgs and size them correctly. There’s no need to load a 2000px wide image in a 500px wide image slot. A general rule I follow is to size my jpegs 1.5x my needed size.
There’s a new next-gen format making its way into processes and it’s called Webp. If you run Lighthouse, Google is going to tell you to use a next-gen image format. Webp is not a replacement for traditional formats. Webp is not fully supported in all browsers, so when you use this format you have to also set a fallback src image, to ensure all users get served an image.
You might have encountered Webp in the wild, especially if you visit a website that is using cloudflare CDN, and tried to download an image from that site. It’ll download as a Webp, even when the browser address says it png. Photo editing software has not completely caught up with Webp yet. Photoshop has a WebP plugin, and there are online apps as well. I’ll share some of my favorite tools later.
Moving to videos
Can we all agree that at no point should we ever load a .mov file? Videos should be encoded in mp4.
Interestingly enough, mp4s are smaller to load than GIFs.
I love gifs when texting, and adding animation to a website can look nice, but it is also not friendly to those with motion sensitivities. I’m in the camp of “don’t force your auto-playing movies and animations on me unless I want them”. There’s two camps on this subject, and maybe another time we can debate that.
If you’re adding videos to your website, encode it with mp4. There’s also some tricks on how to delay loading until needed or to pre-load, which is part of the “Code” part of my Optimization rant *ahem* talk, but that’s not part of today’s lightning talk.
Free Compression Tools
Squoosh.app - online image compressor, resizer, and converter
HandBrake - open source video converter and encoder
Imagemin - npm package for node to minify and converter images to WebP