Today, we’re excited to unveil our new Playground – an interactive visual representation of our technologies. In the first phase, we are showcasing an initial set of three of our Performance Suite features: SmartVision, HTML Streaming, and Image Adaptation. We created this space to demonstrate how our technology interacts with the various elements on your web page to improve performance, in an interactive demo-like environment.
We’d like to invite you to see for yourself what these select technologies look like in action. Our technology is your Playground!
SmartVision is a technology that uses computer vision algorithms to look at the images on your page, and intelligently determines the perfect balance between image quality and file size. This dramatically reduces the amount of content delivered to end user devices and therefore has a positive impact on the page load performance of your pages.
Every image has a "sweet spot" where compression and fidelity converge to optimize for performance and appearance, but the optimal compression level varies from file to file.
In order to find the right compression level – where the naked eye can no longer tell the difference in image quality – SmartVision analyzes each and every image file at a wide variety of quality levels and uses advanced computer vision technology to automatically selects the optimal image quality for that image.
In the demo, as you drag the image quality circle from the bottom of the image to the top to see the impact of different image quality levels, you can also slide the lever from side to side to compare image quality on the left and right. Notice as you increase and decrease the compression levels that there is a sweet spot where the impact of the drop in image quality is unnoticeable to the naked eye. We encourage you to play with different images and discover each image’s “sweet spot” and compare that to SmartVision’s “decision.” Note that, SmartVision can do this at scale and apply this capability to thousands of images, saving precious time.
Here's a quick walkthrough of the SmartVision demo:
Click here to access the Playground and play with SmartVision.
HTML Streaming is a technology that improves performance by sending the <HEAD> section of a page to the browser before the <BODY>. This reduces the time the browser waits for the page to download before it can begin processing it. By immediately streaming non-unique static and dynamic HTML to the browser while the backend servers generate unique HTML, the user’s time to interaction with your site will drastically improve.
"Instart showed me how different user perception is from the actual load time. …The entire system is built to optimize by delivering the highest priority content first and allowing users to interact with them as soon as possible.”
– Eric Marston, CTO and co-founder, DAILYLOOK.
By improving perceived performance, the user experience is dramatically enhanced, and users are happy.
In the Playground, you can see how the browser processes different types of HTML and how that affects what the user sees. Select and deselect the static and dynamic elements of the HTML page and see the performance impact. In this example, the time to complete download is improved by 45% and time to first content view has improved by 28%.
Here's a quick walkthrough of the HTML Streaming demo:
Click here to access the Playground and play with HTML Streaming.
The diversity of device types and screen sizes makes image optimization complex and costly.
You have three options to keep up with this new technology landscape. Either choose to not adapt your images based on device type; adapt for some devices; or adapt for every device. Options one and two are easier, but face performance penalties. The latter option allows you to create millions of iterations of a single source image, store those images, and deliver the best possible version for each user without penalizing performance and taking maximum advantage of browser-based capabilities. With Image Adaptation, the right-sized image can be delivered to the correct device type without performance penalties, using simple image URL parameters.
Play around with a few device screen sizes and images to see how file sizes and download times change with different images on different device types. You’ll see that sending a large desktop resolution image to a smartphone not only has a content and network penalty, but also takes up more device memory and therefore processing time. Our service helps with sending the right-sized image to any device, by creating those variants on the fly and caching them.
Here's a quick walkthrough of the Image Adaptation demo:
Click here to access the Playground and play with Image Adaptation .
Hope you enjoy playing in our Playground! We look to expand the Playground in the near future to include additional interactive demos of our technologies. Stay tuned!