Upload
caridy-patino
View
2.689
Download
0
Embed Size (px)
DESCRIPTION
Faster web sites attract more users, engage them longer, and decrease the abandon rate drastically.In the quest for making a website faster, a solid loading strategy is an important vector. Dynamic injections, controlling early user interactions, parallel downloads, preloading, and iframe-loader are all well established strategies that you can use to improve performance. Knowing them iscritical for success, specially for complex web applications.Things you will learn from this presentation:a) Why picking up the right loading strategy is important.b) Different strategies that you can use today.c) Different tools under the YUI umbrella that you can use today.
Citation preview
YUI 3 Loading Strategies
Caridy Patino / @caridyFrontend EngineerYahoo! SearchYUI Evangelist
Evolution
developer.yahoo.com/performance/rules.html
Put Scripts at Bottom
Minimize HTTP Requests
Use a Content Delivery Network (CDN)
JS Loader Frameworks changed the game
YUI LABjs HeadJS ControlJS
RequireJS Load.jsYepNope.js $script.js
LazyLoad curl.js DeferJS jquery.defer.js jQl
DominateJS JSLBootstrap StealJS
bdLoad NBL.jshttps://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE#gid=0
dd, substitute and slider
tabview, oop, event, node, widget, etc
yui seed
loader
Static Combo Strategy
Data-driven initialization routine
Using app-rollout files
Using app-rollout files
Rollout vs Loader
Rollout Composition
Library
Plugins
CustomInit.js
A big app-rollout takes more time to download and can potentially freeze the browser
Simple rollout
Interactivity Core & Lazy Components
Defining the interactivity core is
crucial
Core and Lazy Components
core rollout
lazy components
Parallel Download Strategy
Get app-rollout early without compromising domready and onload
“Ideal Solution”
Parallel Download: Challenges
• Produce a VERY tiny non-blocking bootstrap
• Avoid blocking onload with app-rollout
• Split the app-rollout into multiple and balanced files
Event Binder Strategy
Time to Interactivity
Time to Interactivity
Users should be able to interact with the page at any time
Catch and hold some events until the handler become available
But, doing so without increasing the complexity of the application
yuilibrary.com/gallery/show/event-binder
Event Binder: Features
- Event-driven Module Loading
- Early Event Binding
Event-driven Module Loading
Regular YUI 3 Module
Event-driven Module Loading
Early Event Binding
Early Event Binding
iFrame Strategy
Plug & Play Widgets
A Plug & Play Widget is an independent piece of software that can run on any page
Widgets: Challenges
- Inject the widget without degrading the host page
- Keep the widget JavaScript in a sandbox
- Keep the widget CSS in a sandbox
A YUI instance can be tailored to work off a different document
yuilibrary.com/gallery/show/parent-window
Injecting a widget using an iframe
widget-app-rollout.js
Preload Strategy
http://www.linkedin.com/jsearch
Preload: Features
- Store static JS assets in cache without executing them
- Store static CSS assets in cache without including them
Stay ahead of the users without increasing the complexity of the app
yuilibrary.com/gallery/show/preload
… some more thoughts
- Optimize only if it doesn’t add complexity to your app
- Granularity is good for optimization - Rollouts can help you to control the loading process
- Focus on the bottle necks that affect the majority of your users
- Work on the user perception
Thanks!
Caridy Patinohttp://github.com/caridyhttp://twitter.com/caridy