Introducing the Instart Logic Playground

1
INTRODUCING THE INSTART LOGIC PLAYGROUND
BY DAVID W. HSIEH
2
Were 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. Wed like to invite you to see for
yourself what these select technologies look like
in action. Our technology is your Playground!
3
SMARTVISION
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 images sweet
spot and compare that to SmartVisions
decision. Note that, SmartVision can do this at
scale and apply this capability to thousands of
images, saving precious time.
4
Here's a quick walkthrough of the SmartVision
demo
Click here to access the Playground and play with
SmartVision. 
5
HTML STREAMING
HTML Streaming is a technology that improves
performance by sending the ltHEADgt section of a
page to the browser before the ltBODYgt. 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 users time to
interaction with your site will drastically
improve. With todays zero-patience users,
perceived performance is everything. Just
ask DAILYLOOK. 
"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.
6
Here's a quick walkthrough of the HTML Streaming
demo
Click here to access the Playground and play with
HTML Streaming.  
7
IMAGE ADAPTATION
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. Youll 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.
8
Here's a quick walkthrough of the Image
Adaptation demo 
Click here to access the Playground and play with
Image Adaptation . 
9
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!
Visit our Blog to learn more