Keycdn.com published an excellent article where they asked 20+ web performance experts two simple questions:
- If there was only one web performance optimization you could focus on, what would it be?
- What are some of the common mistakes you see people making when it comes to web performance?
The TL;DR (summed up in a nice infographic in their post) is that the overwhelming majority of developers and web technology experts prioritize optimizing images for maximum results in both web performance and site usability.
While I definitely encourage to read their answers in full, below is a summary of responses that illustrate their thinking on placing an emphasis on image management.
Matt Shull “The average page is around 2200kb and around 1440kb are images which means that’s a good target for the biggest performance wins.”
Una Kravets “Images! Developers often focus on improving scripting performance, but they need to realize that the bulk of their performance woes come from media content.”
Aaron Gustafson “…I see people focusing on web optimization techniques that offer only modest gains…while ignoring low-hanging fruit like image optimization or even choosing the beset image format”
Dean Hume “If there were only one optimization to focus on it would be images! According to the HTTP archive they make up over 60% of the weight of a web page.”
Sergey Chernyshev “The most common mistake is oversized images – it’s a simple matter of ensuring small file size for states assets…”
Sara Soueidan “Image optimization. Optimize and use responsive images.”
Patrick Sexton “Images. Optimizing images and deferring images will speed up any web pages with very little pain.”
Christian Heilmann “Images. Images are by far the biggest problem we have on the web. Learn about optimization…”
Kent Alstad “Images are a large part of most applications so delivering the best image for each user context and caching the images at the right locations for reuse usually result in big wins.”
Damien Jubeau “Images, because it’s often there we see the best results with the less effort!”
Stefan Judis “Keeping assets as small as possible can reduce page weight drastically…but more importantly using the right type of images (jpeg, png, SVG) with proper compressions”
Stephan Max “Images, definitely. Although ‘the web is 95% typography’ (and I wholeheartedly agree), images still account for roughly 64% of the average bytes per page in January 2016, according to HTTP Archive.”
This is clearly great advice and shouldn’t be a surprise to many web professionals, but how does one go about managing and optimizing the images on their page in the new media-laden Internet. Especially on large scale sites that are made up of unpredictable user-generated content.
Filestack Improves Performance
While Filestack can help you manage any and all file types, our specialty is image management. From upload to delivery. How? Our picker allows you to grab files from some of the most popular cloud storage services on the Internet in addition to your user’s local hard drive. Our powerful processing engine can perform a number of operations to crop, resize, watermark, enhance and even compress your photos. And finally, our integrated CDN ensures that your content is served with minimal latency. Let’s dig into some specific features that are address what the experts are recommending to optimize website performance.
Use the right file types
From our HTML widget to our JavaScript API and our other open-sourced client libraries, it’s easy to control an uploaded file’s type, size, and extension. In addition to controlling the types of files users upload, it’s incredibly easy to programmatically convert existing files into preferred formats, such as converting a .tiff into .jpg, .png or .svg before or as it is delivered.
Reduce the size of the images uploaded
Filestack enables you to specify the image quality/compression ratio along with image dimensions as part of the upload workflow for local files. The compression and resizing is performed in the browser before the file is sent to your server. This kind of client side compression can vastly enhance user experience, especially for mobile users on a slow connection.
Reduce the size of images served
Filestack has a number of tools that ensure images served on your site are just the right “weight” and size for your users’s device and browser. Probably the easiest to implement with minimal code is our responsive image service. By adding some extra attributes to your <img> tags, Filestack can serve even the heaviest high resolution images at just the right size for your user’s browser window.
Caching for converted files
Filestack’s infrastructure is designed to be scalable, efficient and performant. This is achieved, in part, by a layered caching strategy stretching from your user’s browser into our Redis store where your unconverted images live. In between is our extensive content delivery network to ensure files are stored geographically close to your users.
Honorable Mention: Infrastructure
While it pales in comparison to the importance of images, a few of the contributors to the post mentioned “cheap” or underpowered hosting as a common mistake that can degrade web performance, and thus user experience. While Filestack is not a web hosting infrastructure, we allow you to offload a very complex, CPU-intensive service to our scalable, workload specific infrastructure. You focus on running a minimal infrastructure serving HTML, CSS and JavaScript, we manage the upload, storage, transformation and delivery of your media. Not only does this increase performance, but it is extremely cost effective.
These are just a few out-of-the-box ways that Filestack can improve performance and enrich your end-user experience. For more information on how our end-to-end file management platform can help you optimize your performance through our image management schedule a demo with one of our implementation engineers, please contact us:
Contact Sales
Filestack is a dynamic team dedicated to revolutionizing file uploads and management for web and mobile applications. Our user-friendly API seamlessly integrates with major cloud services, offering developers a reliable and efficient file handling experience.