We’ve been working with Jetpack around here as a sponsor. It’s a great match because as someone with a bunch of self-hosted WordPress sites, Jetpack is one of those no-brainer plugins for me. Jetpack can do a ton of good things for any site in a variety of very different ways. Here’s one way to think about it: it brings the power of WordPress’ own massive servers to you.
For now, let’s just focus on one angle of what Jetpack can do for you: image performance. Jetpack does a ton for you in this regard, solving some non-trivial performance upgrades. Let’s take a look at what I see as the four big boosts you get from Jetpack on your images.
1) WordPress does responsive images for you
OK, I cheated with the first one because you don’t actually need Jetpack to benefit from this. But it’s an important and foundational concept for fast images. Just by using WordPress, you get basic responsive images for free.
If you already know what I’m talking about, here’s an example of the output you’ll see in the DOM of a published WordPress post with an image in it uploaded via the Media Uploader:
If you are new to the idea of responsive images, the big idea is this: rather than a single image going to any browser visiting your website, you have multiple images in different sizes and the most-correct one is delivered. Imagine instead of a mobile phone downloading a 1600 pixel wide image (way bigger than it needs), it only downloads a 320-pixel wide image, saving a ton of downloading time.
We’ve written lots about responsive images over the years.
2) You get a CDN
Read a bit about web performance and you’ll be unanimously told: “use a CDN.” A CDN is a Content Delivery Network, essentially web servers designed specifically to make serving assets like images super fast. They call it a network because it isn’t just one server, it’s many servers physically located all over the world so that when your website is requested from different locations all around the world, the files being sent back come from geographically closer locations (faster!). Not to mention it does other clever things like not requiring cookies for each web request like your own server probably does.
Literally, flip a switch in Jetpack and you’ll be using an image CDN:
It’s called Photon.
Site speed is impacted by many factors and one of them is content delivery. Using what is referred to as a content delivery network (or CDN) helps by:
- Delivering your content from high-speed and dedicated data centers.
- More files can be downloaded simultaneously by the browser.
- Distributed data centers (ie in different geographic locations) improve download speeds and provide redundancy.
- By distributing load and save bandwidth you reduce your existing hosting costs (or keep them in check).
3) You get optimization
Una Kravets calls image optimization an easy performance win for designers. It’s an easy thing to see. Try taking a screenshot of something, exporting something from Photoshop, or grabbing some stock photography. Then drop it onto a tool like ImageOptim and watch the bytes fall away as it optimizes it. Massive savings.
But wouldn’t it be nice if it wasn’t on you to manually optimize all your images before using them? Computers are supposed to help us with menial tasks, right?! When you flip on the CDN feature of Jetpack, your images are now hosted on Photon, and you can see in the Photon docs how it handles things like resizing and quality for you.
4) You get lazy loading
Lazy loading is the idea that you don’t load anything at all unless you need it. In the case of images, don’t download the image unless it’s visible on the page. As in, don’t download an image that is three quarter down an article that a user might never scroll down to, but if they do, then download it.
You know what they say, the fastest web request is one that is never made. Jeremy Wagner, for Google, says:
When we lazy load images and video, we reduce initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance.
This is another flip-a-switch feature that works on any theme. Turn it on, you got lazy loading.
All Together Now
- You get responsive images with WordPress, which by itself can be a major performance win.
- With Jetpack, those responsive images are CDN-hosted, providing a speed boost and great caching for the images that are downloaded.
- Just because you’re using responsive images and a CDN doesn’t automatically mean those images are optimized, but they are on Photon.
- Last, nothing is downloaded at all unless the images are in view (lazy loading), which is the most efficient thing you can do.
Pretty compelling.
The post The Four Big Ways Jetpack Helps with Image Performance appeared first on CSS-Tricks.
Source: CSS-tricks.com