WebPerf Image CDN – Speed Up Delivery of Your #1 Asset

Images are an integral part of the web today and are used in all sorts of different ways. They say a picture is worth a thousand words. Well, that is probably true, as long as they don’t slow down your website to the point where you are losing visitors. When it comes to optimizing your site, images are generally the number one asset you should spend time on figuring out how to reduce in size and deliver in a more efficient and optimal way. Using an image CDN, such as KeyCDN, can help deliver your number one asset (images), faster around the globe!


Image Assets and Mobile


We have been talking a lot about website optimization lately and recently interviewed 20+ web performance experts to see what their recommendations and advice was. We got some great responses from knowledge experts who work in the industry every day, such as Jeff Atwood (co-founder of Stack Exchange) and Patrick Meenan (creator of WebPageTest). If you haven’t had a chance to read it yet, we recommend taking some time to go through it as there was a lot of great applicable information that was shared.

Not to our surprise, the 46% of the experts said that the number one priority or focus should be on image optimization! And over half of them mentioned the importance of decreasing your overall page weight. And the easiest way to decrease page weight? You guessed it, images. Here are just a few of their responses.

A big focus for our performance team is (and will continue to be) optimizing images. The average page is around 2200kb and around 1440kb are images which means that’s a good target for the biggest performance wins. There are a number of file types out there that can help in image compression (*cough* WebP *cough*) and they are underutilized… – Matt Shull

Images! Developers often focus on improving scripting performance, but they need to realize that the bulk of their performance woes come from media content… – Una Kravets

Image optimization. Optimize and use responsive images (<image> and the srcset attribute). I’m almost always on a slow connection and the amount of time it takes images to load on most websites is just horrid… – Sara Soueidan

Just how much of a website is made up of images? Well, according to the HTTP Archive, 64% of the average bytes per page are made up of images.



And we can’t forget mobile devices when it comes to images. According to comScore mobile adoption surpassed that of desktop devices. Why is this important? Because mobile devices require things to be optimized even more than desktop. Also, as Sara Souedan said, not everyone has access to fast internet. For example, while mobile data speeds in New Zealand are super fast with averages of 27.7 Mbps on 4G, countries like Vietnam are still on average speeds of 1.9 Mbps. This means is we need to always be testing for different devices. Don’t just assume because your website is fast on your computer, that it will be for those on a mobile device. Take advantage of the free website speed test tools, many of which have options to test on mobile.



Ways to Optimize Your Images


There a lot of things you can do to optimize your images such as utilizing image compression tools, choosing better image file formats, using srcset and sizes attributes and integrating with 3rd party services.

Lossless Image Compression with Optimus


One of the best ways to optimize your images is by taking advantage of lossless image compression. KeyCDN developed and maintains Optimus Image Optimizer just for that very reason. It reduces the image’s file size without any loss in quality. And depending on the image and format, reductions in size of up to 70% are possible. We have a WordPress plugin available and If you utilize the API, it can be used with any platform. The PHP library for the Optimus API is available on GitHub.

---

Another great feature of Optimus is that it can convert your PNGs and JPGs to Google’s WebP format. Check out our case study we did on WebP vs PNGs and JPGs. According to Google, WebP lossless images are 26% smaller than PNGs and 25-34% smaller than JPEG images. Optimus is currently on sale and discounted 30% for a limited time. Grab the HQ version for only $19.95 and HQ PRO for only $99.00.

Another option you have is to use SVGs for better scalability. One advantage to this file format is that it should be supported by Google’s Brotli compression which is just now starting to be supported by browsers and servers. Check out our new Brotli test tool to see if your web server supports Brotli encoding yet.

Using srcset and sizes Attributes


Responsive image techniques, such as the HTML srcset and sizes attributes allow you to serve different scaled images based on the size of the display. What this means is that mobile users can now be served smaller file sizes, which in turn speeds up the delivery of the content. Check out our in-depth post on how to use responsive images.

3rd Party Image Services Like UploadCare


There are many great 3rd party image services available to you like our friends over at UploadCare. They offer on-the-fly image processing via a URL API. This allows you to crop, resize, mirror, blur, sharp, watermark and more simply by changing the URL.



By having so much control, this allows developers to better and more easily implement the correctly sized and optimized images to the user directly in any web or mobile application. A CDN is an integral part of their service and in fact they just wrote their own post on 7 reasons to use a CDN for your images.

How Can an Image CDN Help?


While optimization of your images is great, it really only gets you part of the way there. If you are targeting more than just a local audience, then a CDN is by far the easiest way to see instant improvements on your image download speeds. Why? The main reason is because it decreases the latency to the user where they are located by serving your images from a POP physically closest to them. A while back we did a case study on website latency with and without a content delivery network and tested overall times. Now we want to narrow in just on how using a CDN affects your image’s total download time. And since more than half of a web page is made up of images, the term “Image CDN” is very applicable as that is what most of the bandwidth is being used for.

We ran some speed tests again on our test domain, perfmatters.io, with and without the CDN. We used Pingdom (some people still like to see these even though it doesn’t support HTTP/2 yet) and WebPageTest, taking the median results from multiple tests. Our origin server is located in Dallas, TX while we performed the tests from Amsterdam, Netherlands. This allows us to so show the CDN difference.

Without a CDN (KeyCDN)


We first ran our tests without a CDN enabled.

Pingdom (test results)




What we care about in these tests are really how our image download times are affected. As you can see we are also using .webp images on our site with the free WordPress Cache Enabler plugin and Optimus Image Optimizer combination.

• Total: 123ms: perfmatters.webp
• Total: 123ms: jpg-to-webp-1v2.webp
• Total: 610ms: jpg-to-webp-2v2.webp
• Total: 721ms: jpg-to-webp-3v2.webp
• Total: 605ms: jpg-to-webp-4v2.webp
• Total: 607ms: jpg-to-webp-5v2.webp

WebPageTest – Median (test results)




And the waterfall view.

• Total: 133ms: perfmatters.webp
• Total: 133ms: jpg-to-webp-1v2.webp
• Total: 318ms: jpg-to-webp-2v2.webp
• Total: 885ms: jpg-to-webp-3v2.webp
• Total: 856ms: jpg-to-webp-4v2.webp
• Total: 849ms: jpg-to-webp-5v2.webp

With a CDN (KeyCDN)


We then enabled our CDN and ran our tests again.

Pingdom (test results)




And the waterfall view.

• Total: 53ms: perfmatters.webp
• Total: 61ms: jpg-to-webp-1v2.webp
• Total: 87ms: jpg-to-webp-2v2.webp
• Total: 94ms: jpg-to-webp-3v2.webp
• Total: 103ms: jpg-to-webp-4v2.webp
• Total: 72ms: jpg-to-webp-5v2.webp

WebPageTest – Median (test results)




And the waterfall view.

• Total: 253ms: perfmatters.webp
• Total: 79ms: jpg-to-webp-1v2.webp
• Total: 81ms: jpg-to-webp-2v2.webp
• Total: 90ms: jpg-to-webp-3v2.webp
• Total: 96ms: jpg-to-webp-4v2.webp
• Total: 98ms: jpg-to-webp-5v2.webp

And here are the results of how a CDN affects our image assets, not to mention the total download times of the website faster.

Speed Test Tool (file) NO CDN (MS) KEYCDN (MS) DIFFERENCE %

Pingdom (perfmatters.webp)​

123​

53​

– 56.91%
Pingdom (jpg-to-webp-1v2.webp)​

123​

61​

– 50.41%
Pingdom (jpg-to-webp-2v2.webp)​

610​

87​

– 85.74%
Pingdom (jpg-to-webp-3v2.webp)​

721​

94​

– 86.96%
Pingdom (jpg-to-webp-4v2.webp)​

605​

103​

– 82.98%
Pingdom (jpg-to-webp-5v2.webp)​

607​

72​

– 88.14%
WPT (perfmatters.webp)​

133​

53​

– 60.15%
WPT (jpg-to-webp-1v2.webp)​

133​

61​

– 54.14%
WPT (jpg-to-webp-2v2.webp)​

318​

87​

– 72.64%
WPT (jpg-to-webp-3v2.webp)​

885​

94​

– 89.38%
WPT (jpg-to-webp-4v2.webp)​

856​

103​

– 87.97%
WPT (jpg-to-webp-5v2.webp)​

849​

72​

– 91.52%​

As you can see the total download times on our image assets (without a CDN) and our POPs (with a CDN) on average is decreased by 75.58%! If you look at the WebPageTest data you can see that the “TTFB” and the “Content Download” times were the two greatest factors decreased by implimenting a CDN. And typical website owners will most likely see even greater gains since our site was highly optimized already.

Image CDN SEO


Another common misconception that we see mentioned quite often is that a CDN hurts your SEO. This is not true by any means. In fact it helps your SEO when setup properly! A common issue people run into is indexing of their images. By default if you don’t enable a custom zone URL your images will most likely index on your CDN providers default zone URL. If you setup a custom zone URL Google will see images as if they are on your site. Once we add rel="canonical" to the HTTP header, your images will index normally as the crawler will know that they are only a copy and not duplicate content. These headers are automatically added by KeyCDN. You can also control indexing further using your robots.txt file.



So how does this help you? Google loves speed. By using a CDN your images will index faster in Google image search! They will also be more likely to rank higher in SERPs. Check out our more in-depth post on Image CDN SEO.

Summary


As you can see there are many ways you can speed up the delivery of your images. The first is to make sure they are optimized and the second is to utilize an image CDN, like KeyCDN, to decrease the TTFB and content download times. Don’t let your number one asset be the reason for a having a slow website!

Related Articles

• Responsive Images: Using srcset and sizes Attributes
• 
  CDN SEO: Indexing Images in SERPs
  

Featured

250GB Free Traffic
Supercharge your Website Today with KeyCDN
HTTP/2 – Free SSL – RESTful API – 24+ POPs – Instant Purge

The post Image CDN – Speed Up Delivery of Your #1 Asset appeared first on KeyCDN Blog.

Continue reading...