What is your PageSpeed Insights score?
So you’ve already ran Google’s PageSpeed Insights. Unfortunately, your score is poor. It highlights the following issues:
- Serve images in next-gen formats
- Efficiently encode images
- Properly size images
- Avoid enormous network payloads
Why You Should Not Use a Simple Image Compression Tool
The next step is to look for a solution for these image issues. Google provides some great advice for how to deal with images in its dev community. It can be summarized in the following steps:
- Select the appropriate file format
- Apply the appropriate image compression
- Apply the right display size
- Render the image
- Write responsive image code to select the right variant of the image
We call Google’s process the “Build-Time Responsive Syntax” approach. If you have a relatively static website where you don’t generate new pages or switch out images frequently, then you can probably live with this approach. However, if you have a large and dynamic site with many images, then you will quickly feel the pain of this approach. Google itself stresses that developers should seek to automate this image process. Why? Because the process has some serious workflow drawbacks:
Cons:
- Adds storage requirements due to large increase in image variants.
- Increases code bloat and introduces more code complexity.
- Requires developers’s time and effort to create variants and implement responsiveness.
- Requires logic to account for different browser’s support for next-gen image formats.
- Doesn’t adapt to different contexts. It relies on best-guess (breakpoints) of what device visits the web page.
- Needs a separate CDN to further increase delivery speeds.
- Requires ongoing maintenance to adapt to new devices, breakpoints, image formats, markets, and practices.
Pros:
- Don’t have to pay for or subscribe to additional software/services
- Relatively easy and well-documented standard to implement
The crux Build-Time Responsive Syntax approach is to use an image compressor tool. There are a number of image compressors. Many will optimize a few images at a time, or use a command line interface to process many images.
Image Compressor / Image Optimizer Comparisons
ImageEngine Takes Image Compression to the Next Level
All of these compression tools lack two critical features. First and most important is mobile device detection. Mobile dectection means more than the ability to query the screen size and feed it into some breakpoint evaluation. It means detection of the actual device model and numerous capabilities. These include: OS version, browser version, screen pixel density, screen resolution, support for advanced image and video formats.
This is where ImageEngine is unique in the market. ImageEngine uses true mobile device detection to further improve image optimization. It has a huge impact on the effectiveness of the image optimization.
The second feature these tools lack is a CDN. To accelerate your website, you want the optimially-sized image, in a next-gen format, positioned in cache around the globe.
Finally, automation. While you can follow all the steps of the Build-Time Responsive Syntax approach, it adds a huge amount of work to your workflow. Not just once, but every time you add an image. A fully automatic solution that addresses your entire website at once, is a better path for streamlining development.
Test Your Site’s Image Speed
You can quickly assess the impact that that ImageEngine will have on your PageSpeed Insights score. ImageEngine’s Image Speed Test will determine:
- Image Pageload Reduction
- Largest Contentful Paint Improvmement
- Speed Index Acceleration
- Page Load Time Acceleration