Re-thinking Web Performance
It doesn’t take much effort to find a “State of the Union” or a similar type of report by a CDN or performance measurement company where the sites listed are far slower than the consumer expected speeds associated with proper conversion rates. Almost all of the top 1000 sites use CDNs and almost all of them have huge web teams focused on building their web app and improving the speeds necessary to achieve the highest revenue possible and yet, they miss performance targets. These are not companies who don’t know what they are doing, but rather seasoned e-commerce and web professionals. So where can we pick up easy wins for performance?
The first area is on the front end of the site and more specifically the page weight due to images. Images are the life blood of sites and are critical to have a focus on performance and fidelity. The average amount of “weight” on a page that is attributed to images is usually near 65+% [EDITED from 90% in original post] and if you are not properly treating these images and specializing them for your users, you are never going to make your performance goals. For desktops with a good connection, this isn’t usually a focus for performance teams, but for any site where approximately 40+% of users are mobile devices, this is critical. It turns out, it’s not that easy to properly size for different devices.
Products for Front-End Optimization (FEO) often times tout that they can “optimize for any device type…” but the reality is, they can only do so much and usually they concentrate on a handful of devices that make up a what is considered a majority of devices and that’s about it. There are some 400 prominent devices currently being used globally and more OSs than any company can possibly track. This lead Salesforce this past week to officially drop support for devices, which were older than the current generation and 1 generation removed and all OSs not within the last 3 updates. So, it looks like the first thing that is a requirement is to know who your user is and what sort of image or content they can receive.
Once you know what size (physical dimension) a device can receive, the next thing to assess is what is the actual capability of the network to retrieve the image. This we can refer to as fidelity or compression to simplify terms slightly. The reason I consider this to be a fidelity rating is because you can serve a degraded image to a smaller screen and still have it look amazing versus on a 1080p 30″ monitor or a 15″ laptop – a 4 inch to 6 inch screen doesn’t need a ton of data to look good and any amount of data weight you can save will help customers with data plans, battery, and performance.
There are a couple of ways that marketing teams can do this today in order to achieve the same end result:
– Create a number of derivative images, store them, and then write Lua or VCL code in the CDN or on your own caches to tell it what to serve based on the user agent. This will catch about 50-60% of users with a customized image, with the balance being served a less optimized image and relying on the phone to manage the rest of the customization. There are also several factors to consider- storage, time, and effort to create the derivatives or keep them in step.
– Get an FEO product. There is a number of them out there, some are services and some are hardware, but all of them serve the same basic function, change the page and code to download “faster.” They will concentrate or draw your attention to all kinds of numbers rather than the actual download times (think DOM timings).
– Find a company with an expertise in Mobile acceleration and solutions with device typing and auto image resize/reduction.
The third choice is, of course, my favorite. It is the easiest option of all, little to no work – so imagine a workflow for your web teams where they upload a high fidelity mezzanine version of an image and the edge that the user connects to identify the user’s device, screen size, network performance, and then adjusts and adapts the content to the user. This can remove a vast amount of waste in performance in your website and help users to gain faster download times, achieve their surfing goals, and easily convert on your site.