Speed up AMP pages with an Image CDN

It takes a lot of time and effort to build a profitable website that offers great user experience on any given device type. When you start from a clean slate, you have to take care of everything on your own: browser compatibility, performance, responsive design, discoverability and a whole slew of other factors.

If only there was a shortcut

How nice would it be if there was a clearly marked path to crafting engaging and performant websites without requiring a ton of expertise upfront?

AMP: A Quick Way to Build a Modern Website

Accelerated Mobile Pages (AMP) is an open-source HTML framework from Google that keeps an amplified focus on user experience, putting it in the center of everything it does.

AMP uses optimized custom HTML elements and embodies various best practices that effectively leave no chance for any slowdown or jank. Some might see it as highly opinionated and limiting, but in reality, AMP strives to protect you from introducing bugs and degrading the user experience.

For example, let’s take a look at responsive images. Quite often, images on websites don’t define their dimensions upfront.

This is a common performance bottleneck - the browser must first download the image to understand the initial dimensions, then resize it, trigger a page reflow, repaint the screen, and only after all these steps the image appears in front of a user’s eyes.

AMP won’t let this slip since it needs to understand the layout of the page before any of the assets load to ensure the optimal rendering path - it will throw an error when it encounters a dimensionless image and will guide you through the process of getting things back on track

AMP’s Achilles heel

AMP appears to be a magic pill for those who want to consistently delight their users and significantly boost their business metrics, but it has a weak spot: aforementioned responsive images.

Serving appropriately sized images with the right amount of compression applied to them while simultaneously taking into account the user's device type and browser is a complicated challenge. AMP, as powerful as it is, offers no help with the tedious task of optimizing images.

To avoid a huge pile of markup and spending countless hours fine-tuning images alongside serving logic, an Image CDN could be integrated to do all the heavy lifting on your behalf. It will precisely tailor images to any requesting device type while drastically reducing their size without impacting visual quality in a negative way - and all of it happens on the fly.

A Closer look at Image CDN’s mechanics

When leveraging an Image CDN, you typically can get away with a single hi-resolution version of every image that is referenced as a source in a single image tag. File extension doesn’t matter - depending on browser and device type, the Image CDN service will perform an automatic conversion to the most suitable image format. Re-uploading assets isn’t necessary either as all browser requests for images will be proxied and re-routed to the server closest to the user which will, in turn, retain a copy of the image in its cache to enable lightning fast responses in the future.

Here’s a code snippet from a

html
<amp-img
  src="//codesandboxamp.io.imgeng.in/images/tangerines.webp"
  alt="Tangerine tree and blue sky"
  width="750"
  height="500"
>
  <amp-img
    fallback
    src="//codesandboxamp.io.imgeng.in/images/tangerines.jxr"
    alt="Tangerine tree and blue sky"
    width="750"
    height="500"
  ></amp-img>
    <amp-img
      fallback
      src="//codesandboxamp.io.imgeng.in/images/tangerines.jpeg"
      alt="Tangerine tree and blue sky"
      width="750"
      height="500"
    ></amp-img>
</amp-img>

You don’t have to venture much further (for instance, adding several entries to

srcset

sizes

t’s worth mentioning that some Image CDNs support Client Hints. Client Hints is a mechanism for sharing a few extra bits of information about device’s parameters, as well as the network's conditions and settings.

This information is used to further improve the image delivery process, which particularly makes a huge difference if  the bulk of your audience is accessing your service via mobile devices,

Laptop with high DPI screen

iPhone SE

Curious to see how simple it is to get started with an Image CDN? Here is

Conclusion

AMP is an amazing set of components and best practices that boosts your content and product delivery by an order of magnitude without increasing operating and development costs.

Its relentless focus on a superior user experience results in high performance across various device types and distribution platforms. But despite all the great features it offers, working with image assets still feels suboptimal as there is little difference from the traditional approach that requires creating a huge and fragile pile of markup.

ImageEngine is a good example of an Image CDN which pairs seamlessly with AMP-powered websites and lets you forget about all the headaches associated with the task of serving and maintaining responsive image logic while improving performance and business metrics all at once.

Remember: unoptimized images are the number one cause of the bloat on the web. If your site takes a long time to load, it doesn’t matter how great your content or products are, some people will leave the page before they see what’s there.

Disclosure: I'm involved with the development of ImageEngine.