Instart Logic Advantages over Front End Optimization (FEO)

6
 !"#$%&$'()!*+*(, -(./&!)0$ 2345 6"#$%&$ 7()!*8 6"*+ 9'' &!)0$# &:#:&;:<+ !"#$%&$ ()*+, -./%"$%*0# 1"+230 #)4$5%&06.04+"0. ,7)3. ,7+0"$ %&,8+$0,$3&%7 %99&)%,8 $8%$ 0"%:70# 0".60". ,)"$&)7 )4 $80 %997+,%$+)" .07+/0&; 9%$8 <%,8+"0 70%&"+"* :%#0. %99&)%,8 4)& %3$)=%$0. 0>0,3$+)" )4 $80 %997+,%$+)" .07+/0&; ,)"$0"$ !"#$% '$( )*%+,+-.%+#$ +/ 01%"0,023 ,.$4.25 4$"02+.6205 .$( 7+22 8.4/0 /+%0 6"0.9.:0 ;$/%."% <#:+8=/ ,.8>+$0 20."$+$: 6./0( .**"#.8> +/ .4%#,.%0(5 >+:>23 "02+.6205 .$( "0?4+"0/ $# 8#(0 8>.$:0/ ?) =%"3%7 )9$+=+@%$+)"#A ") $+=0 #90"$ )" =%+"$0"%",0A ") ,8%"*0# $) ,).0A ") B)6$)6<%&C0$ .07%;# D$%$0 )4 $80 %&$ *7):%7 "0$5)&C .+#$&+:3$+)" 5+$8 ,)=9&080"#+/0 50: 90&4)&=%",0 %". #0,3&+$; )440&+"*# EFG +# 0##0"$+%77; %997;+"* 50: 90&4)&=%",0 :0#$ 9&%,$+,0# $) 50:#+$0 ,)"$0"$A #90,+4+,%77; ,).0A +" )&.0& $) %,,070&%$0 90&4)&=%",0H EFG 0"*+"0# $;9+,%77; %"%7;@0 50: 9%*0#A ,&0%$0 =37$+970 )9$+=+@%$+)" /0&#+)"# $%&*0$0. $)5%&.# .+440&0"$ .0/+,0 ,%9%:+7+$+0#A %". $80" .+#90&#0 $80#0 $) 0.*0 #0&/0&# $) +",&0%#0 $80 90&,09$+)" )4 % :0$$0& 3#0& 0>90&+0",0H D)=0 ,)==)" 0>%=970# +",73.0 &0.3,+"* $80 #+@0 )4 ,).0 :; &0=)/+"* 58+$0#9%,0A ,%,8+"* 80%.0&#A 3#+"* .)=%+" #8%&.+"* $) +",&0%#0 9%&%7707 .)5"7)%.#A I)+"+"* =37$+970 J%/%D,&+9$ 4+70# $)*0$80& $) &0.3,0 $80 "3=:0& )4 3"+230 .)5"7)%.#A %". &0.3,+"* $80 23%7+$; )4 +=%*0#H K; %". 7%&*0A $80 .)5"4%77 )4 EFG %99&)%,80# +# $8%$ $80; $&; $) 9&0.+,$ 58%$ $80 :&)5#0& .)0# %$ &3"6$+=0H L80 3"4)&$3"%$0 &0%7+$; +# $80#0 EFG %99&)%,80# %&0 0>$&0=07; =%"3%7A &023+&0 ,8%"*0# $) $80 7)*+, )4 ,).0A 8%/0 % 80%/; =%+"$0"%",0 ,)#$ %". +" #0/0&%7 ,%#0#A 5+77 ,%3#0 #+$0 :&0%C%*0H !" #$%&C ,)"$&%#$ $) $80#0 :&+$$70 %". 4&%*+70 EFG %99&)%,80#A !"#$%&$ ()*+, $%C0# % &%.+,%77; .+440&0"$ %99&)%,8 $) 90&4)&=%",0 )9$+=+@%$+)"#H G3& %9 9&)%,8 70/0&%*0# % =%,8+"0670%&"+"* %7*)&+$8= +" ,)"I3",$+)" 5+$8 % ,7)3. ,7+0"$ %&,8+$0,$3&0 $) 4377; %3$)=%$0 %". %.%9$ 90&4)&=%",0 )9$+=+@%$+)"# 5+$8 ") ,8%"*0# $) $80 3".0&7;+"* ,).0H M+440&0"$ 4&)= 70*%,; ,)"$0"$ .07+/0&; 9&)/+.0&#A !"#$%&$ ()*+, 8%# % ,7)3. :%,C0". %". % ,7+0"$6#+.0 ,)=9)"0"$A $80 ?%")/+#)&A 58+,8 +# %" %:#$&%,$+)" 7%;0& $8%$ /+&$3%7+@0# $80 50: %997+,%$+)"H L80 97%$4)&= +# ,)=970$07; #)4$5%&0 .&+/0" %". 0"%:70# %:#)73$0 /+#+:+7+$; +"$) $80 3#0& :08%/ +)& )4 $80 50: %997+,%$+)"H N+$8 $80 %3$)=%$0. %". %.%9$+/0 "%$3&0 )4 !"#$%&$ ()*+,O# #0&/+,0A $80 43".%=0" $%7 47%5# )4 EFG #3,8 %# #+$0 :&0%C%*0 %". 8+*8 =%+"$0"%",0 %&0 "0 /0& +",3&&0.H !"#$%&$ ()*+,O# #)4$5%&0 .04+"0. %997+,%$+)" .07+/0&; %99&)%,8 ,%" %,,3&%$07; %". +"$077+*0"$7; =%C0 )9$+=+@%$+)" ,8%"*0# %$ &3"6$+=0  +" $80 :&)5#0&H K; %997;+"* "0$5)&C %". %997+,%$+)"6:%#0. )9$+=+@%$+)"#A !"#$%&$ ()*+, +# %:70 $) *3%&%"$00 8+*8 90&4)&=%",0A 8+*8 &07+%:+7+$; &0#37$+"* +" #3:#$%"$+%7 $+=0 #%/+"*# %". =%+"$0"%",0 ,)#$#H !') @ 08>$+8.2 A"+0B 

description

FEO (front end optimization) is applying web performance best practices to website content, specifically code, so as to accelerate performance but it is manual, requires code changes and have heavy maintenance cost.Instart Logic’s machine learning based approach is automated, highly reliable, and requires no code changes. Read to know the disadvantages of FEO and how Instart Logic's approach is better.Learn more about Instart Logic: http://www.instartlogic.com/

Transcript of Instart Logic Advantages over Front End Optimization (FEO)

  • instartlogic.com Copyright 2015 Instart Logic, Inc. All rights reserved.

    Instart Logic AdvantagesUnique software-defined cloud client architectural approach that enables end-end control of the application delivery path

    Machine learning based approach for automated execution of the application delivery content

    Front End Optimization is extremely manual, unreliable, and will cause site breakage

    Instart Logics machine learning based approach is automated, highly reliable, and requires no code changes

    No manual optimizations, no time spent on maintenance, no changes to code, no Go-to-Market delays

    State of the art global network distribution with comprehensive web performance and security offerings

    FEO is essentially applying web performance best practices to website content, specifically code, in order to accelerate performance. FEO engines typically analyze web pages, create multiple optimization versions targeted towards different device capabilities, and then disperse these to edge servers to increase the perception of a better user experience. Some common examples include reducing the size of code by removing whitespace, caching headers, using domain sharding to increase parallel downloads, joining multiple JavaScript files together to reduce the number of unique downloads, and reducing the quality of images. By and large, the downfall of FEO approaches is that they try to predict what the browser does at run-time. The unfortunate reality is these FEO approaches are extremely manual, require changes to the logic of code, have a heavy maintenance cost and in several cases, will cause site breakage.

    In stark contrast to these brittle and fragile FEO approaches, Instart Logic takes a radically different approach to performance optimizations. Our approach leverages a machine-learning algorithm in conjunction with a cloud client architecture to fully automate and adapt performance optimizations with no changes to the underlying code. Different from legacy content delivery providers, Instart Logic has a cloud backend and a client-side component, the Nanovisor, which is an abstraction layer that virtualizes the web application. The platform is completely software driven and enables absolute visibility into the user behavior of the web application. With the automated and adaptive nature of Instart Logics service, the fundamental flaws of FEO such as site breakage and high maintenance are never incurred. Instart Logics software defined application delivery approach can accurately and intelligently make optimization changes at run-time in the browser. By applying network and application-based optimizations, Instart Logic is able to guarantee high

    performance, high reliability resulting in substantial time savings and maintenance costs.

    FEO Technical Brief

  • instartlogic.com Copyright 2015 Instart Logic, Inc. All rights reserved.

    FEO versus Machine Learning Optimizations

    High Performance, Low Reliability

    The chart above aims to seek clarity as to how the various FEO approaches and machine learning based optimizations are ranked. There is a long list of FEO techniques that exist in the market, but weve highlighted the ten most popular used approaches and bucketed them by performance and reliability. Likewise, weve charted machine learning based performance optimizations using the same dimensions reliability versus performance. The y axis is the measurement of performance impact whereas the x axis quantifies the reliability of implementation.

    These FEO techniques can move the performance needle quite substantially, however, the implementation of these approaches comes with a cost. Typically, these techniques when applied, are very manual, completely alter the execution logic of the code, and require a high amount of maintenance. Due to their unreliability, these FEO techniques eventually lead to site breakage.

    FEO Technical Brief

    High Performance, Low Reliability

    High Performance, High Reliability

    Low Performance, Low Reliability

    Low Performance, High Reliability

    Low Reliability High Reliability

    HTML Streaming

    GzipDomain Sharding

    Basic PNG Transcoding

    Image Adaptations

    InstantLoadLazy load Images

    Prefetch Images

    Defer first and third party scripts

    InstantOn

    Concat of resources

    Minification

    Inline small scripts (CSS, JSS)

    JavaScript Interception

    JavaScript Streaming

    Instart Logic can accelerate and optimize applications with high performance and high reliability

    Relative Reliability

    Orange dot = Machine Learning OptimizationsGreen dot = FEO Optimizations

  • instartlogic.com Copyright 2015 Instart Logic, Inc. All rights reserved.

    Lazy Loading of Images creates a negative user experience

    A well known FEO technique is lazy loading of images where images are in fact delayed to speed up page load times. On the onset, lazy loading of images sounds impressive due to the high performance impact it can have on page load times. However, lazy loading of images actually requires extensive rewrite to a customers HTML code and will only apply to simple IMG tag references in HTML. Further while it might improve performance metrics, it does this at the detriment of the user experience. The lazy loading of images means scrolling or swiping down on a page, which in turn produces a blank screen and then images load in later. With the actual implementation of lazy loading of images, site breakage is very high and therefore, it ranks low on the relative reliability spectrum.

    Prefetching Images is very unpredictable

    With modern web pages being driven by dynamic content in the form of rich imagery, most of the website weight is likely contributed to images. Waiting for all the images on a single web page to appear can result in long wait times and poor user experiences. Prefetching images tries to resolve this problem by assuming which links the user is most likely to click on and prefetching the content of those images and storing them in the browsers cache. The issue with this technique is that although it can dramatically improve performance, the reliability of prefetching images is incredibly unpredictable since any website changes without the browser cache being cleared results in the wrong images being served up.

    Deferral of Scripts is extremely fragile

    Large amounts of first and third party code can potentially cause a drag on performance. Therefore, a commonly implemented FEO approach is the deferral of first and third party scripts whereby manual static rules are created to delay specific JavaScript files and improve the perception of performance. Unfortunately, the deferral of first and third party scripts is extremely fragile and is prone to break sites as the code and user behavior continually change over time. Since there is virtually no contextual understanding of how the JavaScript code is used by end users, the reliability of successfully implementing the deferral of scripts feature is very low.

    InstantOn exposes the risk of broken webpages

    Another commonly used FEO technique is basic dynamical HTML caching, generally referred to as InstantOn. Typically, HTML sections are cached, however, the process is very manual on the onset with a large number of rules needing to be created to determine what can be cached versus what elements cannot be cached. In the absence of a platform that is not adaptive, websites that evolve over time to accommodate different device types need constant updates and changes to the ruleset in order for headers to be cached appropriately. The net result, caching headers is extremely manual and exposes the risk of broken pages being received by the end user when old cached information is sent in advance and completely different HTML arrives from the backend. Therefore, the apparent performance gains can be high, but the end result is very low reliability.

    FEO Technical Brief

  • instartlogic.com Copyright 2015 Instart Logic, Inc. All rights reserved.

    Low Performance, Low Reliability

    In the lower left is the Low Performance, Low Reliability quadrant. These FEO techniques are relatively low risk FEO features that wont make a great deal of performance impact.

    Low Performance, High Reliability

    In the lower right is the Low Performance, High Reliability quadrant. These FEO approaches are considered to be safe and low risk, however, their performance impact is quite negligible.

    FEO Technical Brief

    Minification is easily achievable, but not scalable

    Basic minification of JavaScript code removes whitespaces and comments to incrementally compress JavaScript files. This cleansing of JavaScript code is easily achievable, however, is generally not very scalable. As code continues to change, applying minification techniques to even small code changes will eventually break the site. Therefore, with low performance benefits and low reliability, there is minimal upside to implementing minification.

    Basic PNG transcoding only provides incremental performance benefits

    Basic image optimizations such as PNG transcoding only remove non-visual metadata from images similar to utilities like PNGcrush. This only provides incremental benefits for the portion of PNG images on a site and ignores JPG images or newer image formats such as WebP and JPEG XR.

    Concat of Resources and Inline Small Scripts will fade away with HTTP/2

    Similar to minification, other FEO techniques such as concat of resources and inline small scripts provide minimal performance benefits and are not reliable. In due time and as HTTP/2 begins to be more broadly adopted, FEO optimizations such as concat of resources, inline small scripts, and other such features will no longer be useful and may in fact, impair performance. With HTTP/2, header compression and multiplexing will be automatically built into the protocol, which will trump inline of scripts in HTML and concatenation of scripts and stylesheets, among others. Not only will these approaches no longer apply with the roll-out of HTTP/2, but in many cases, these HTTP 1.1 optimizations will actually degrade performance.

  • instartlogic.com Copyright 2015 Instart Logic, Inc. All rights reserved.

    Domain Sharding is fading into the distance with the adoption of HTTP/2

    Similar to basic PNG image optimizations, Gzip, and domain sharding are generally reliable, but dont do much in the way of performance improvements. For example, Gzipping, which compresses code is fairly simple to implement, but the net performance benefit is only incremental. Older FEO features such as domain sharding, which is the process of serving up more assets from different domains in order to increase the amount of assets that can be downloaded in parallel, is being phased out with the adoption of HTTP/2.

    FEO Technical Brief

    High Performance, High Reliability

    In comparison to the highly unreliable FEO approaches, Instart Logics machine learning algorithm fully automates and adapts performance optimizations with no changes to the underlying code. Due to the automated and adaptive nature of Instart Logics service, it doesnt have the same fundamental flaws of site breakage and high maintenance that FEO technology does. By applying network and application based optimizations that leverage a machine learning technology, Instart Logic is able to guarantee high performance, high reliability without the fundamental FEO flaws of site breakage, high maintenance, and the associated manual nature.

    Image Adaptation uses SmartVision to deliver the best image experience

    Unlike FEO solutions that resort to permanently reducing the quality of images and are narrowly focused on PNG images, Instart Logics technology uses a sophisticated image processing technology called SmartVision to enable the delivery of a wide variety of image formats without impact to quality, speed, and performance for the end user.

    With our Smart Vision technology, the Instart Logics service can automatically determine the best image compression, format, and quality levels for each individual image. In addition, Instart Logics service can analyze each image on the page and apply a unique transcoding approach to each image as well as resize the image immediately on the fly, dramatically reducing the size of the image file with no impact to image quality.

    HTML Streaming dramatically decreases overall load times

    Unlike basic dynamic HTML caching capabilities, Instart Logic has a sophisticated and application-intelligent HTML streaming feature that is able to distinguish between unique and non-unique dynamic HTML. With this technology, Instart Logic can stream non-unique dynamic HTML such as metadata, scripts, style sheets, etc. to the browser immediately while the backend server is generating the unique dynamic HTML, allowing immediate decrease in load times and an improved user experience. With its machine learning algorithms, Instart Logic also automatically learns which parts of the HTML are sections and the same across all users, caching those elements and patching in unique dynamic data, as needed. By being able to load portions of the faster and distinguishing between unique and non-unique dynamic HTML, the browser can instantaneously start to render a page faster, leading to a reduction in browser idle time by 80-90%. No manual rules need to be created and the end result is a safer and more sophisticated approach to dynamic HTML streaming to improve performance.

  • Instart Logic Advantages

    instartlogic.com Copyright 2015 Instart Logic, Inc. All rights reserved.

    JavaScript Streaming uses machine-learning to intelligently make decisions

    JavaScript Interception serves 3rd party code from a single source and reduces additional overhead

    InstantLoad provides faster repeat visits and multi-page views

    With the new storage technologies that now exist in modern web browsers and can deliver increased client storage and caching performance, Instart Logic has extended its cloud service to enable web technologies to benefit from this technology transparently and increase page load performance. The InstantLoad service automatically and intelligently manages client-side storage and cache, placing the most important application elements in higher-performance, but capacity-limited storage. Based on the discovery and deep understanding of the web application being delivered, Instart Logics service can transparently redirect critical elements of the application used in the page rendering process such as CSS and JavaScript to the best storage and cache available on each device. This provides for faster repeat visits and multi-page views with no changes to the application.

    FEO Technical Brief

    About Instart LogicInstart Logic accelerates cloud application delivery for the worlds most performance-obsessed organizations. Its unique software-defined application delivery technology solves performance challenges inherent in wireless connections and makes content delivery networks (CDNs) obsolete. Using Instart Logic, organizations can provide ultra-fast, visually immersive experiences on any device to maximize revenue, deliver superior customer experiences and gain competitive advantage.

    Instart Logic is funded by Andreessen Horowitz, Greylock Partners, Kleiner Perkins Caufield & Byers, Sutter Hill Ventures, Tenaya Capital and several notable Silicon Valley angel investors.

    Learn more at http://instartlogic.com or follow us on Twitter at @InstartLogic.

    Unlike minificaiton of JavaScript or other rudimentary FEO practices for JavaScript optimization which break sites over time, Instart Logic uses a machine learning technology called SmartSequence, which requires no manipulation of the underlying code. Utilizing the SmartSequence technology, Instart Logics JavaScript streaming service understands which JavaScript is actually needed and only sends that down to the browser while caching the elements of JavaScript that are rarely or never used. Rarely used JavaScript code is on demand loaded. Instart Logic's JavaScript Streaming features doesn't re-write or alter any source code, but instead simply packages the most used functions together so the browser can start parsing and executing the code sooner.

    The use of 3rd party JavaScript such as ads, social sharing widgets, and analytics has increased dramatically and is one of the most common points of failure for websites, leading to slow page load times. Instart Logic is the only application delivery solution on the market that can redirect third party JavaScript through the use of its cloud-client architecture. Once the content is redirected to Instart Logics service, the third party JavaScript components take advantage of Instart Logics machine learning technology to intelligently package decisions by learning how the code is executed. Similar to JavaScript Streaming, JavaScript Interception improves performance by breaking down 3rd party JavaScript code into fragments and streaming them across in prioritized order, thereby serving all 3rd party code from a single point and reducing additional overhead.