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 (AMP) is an open-source HTML framework from Google that keeps an amplified , putting it in the center of everything it does. Accelerated Mobile Pages focus on user experience 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 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. single hi-resolution version of every image Here’s a code snippet from a that showcases the use of ImageEngine in AMP: demo project 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 / attributes to accommodate typical devices) to immediately realize how quickly this can go out of hand and become a maintenance burden. srcset sizes t’s worth mentioning that some Image CDNs support . 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. Client Hints 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 . a sample project that showcases the integration 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. 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. ImageEngine Remember: unoptimized images are the number one . 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. cause of the bloat on the web Disclosure: I'm involved with the development of ImageEngine.