RockstarApps Optimizing the Web

RockstarAppsOptimizing the Web

Bob Buffonehttp://www.rockstarapps.com

Copyright http://www.rockstarapps.com 2

Agenda

Why are we here?How do we solve the problems?Startup-time Tuning• Bundling• Compression

RockstarApps Demo


What’s Happened to Websites?

Days of JavaScript being used only for form validation are gone.Sites are using more and more JavaScript to create highly interactive applications.Even sites that have simple interaction require lots of JavaScript• Digg.com (14 script files, 2 libraries, Multiple

Extensions)• Espn.com (24 JavaScript files)• Ajaxian.com (12 JavaScript files)

Use of third party libraries • jQuery, ExtJS, Dojo….


Why is this important?

Increase Revenue• Improving page loading times increases conversions, ad

revenue…• Many studies in this area all point to the same thing; the faster

your Website loads, the more money you will make.Decrease hosting fees• Web hosting and CDN services charge for bits and bytes which

means decreasing the bytes decreases the cost.• CDNs like Amazon CloudFront also charge for the number of

requests. • Deceasing the number of requests decreases the

infrastructure needed to run your Website.Increase Users Experience• Less waiting for sites to load means your users a much

happier• The farther people are away from the production server the

longer they need to wait.


How do I know if I have a problem with performance?

Open Source / Free tools – Great for debugging issues with front-end Web performance.• YSlow – This is a plugin for Firefox• WebPagetest – Free online to that give you site

performance information.• Google Page Speed - Plugin to firefox

Commercial – Provide continual monitoring of Website performance. • Keynote Systems• Gomez• BrowserMob


How do I fix my issues?

Reduce number of Requests• Concatenate CSS and JavaScript• Create CSS Sprites – Turn many

Reduce the size of the Requests• Minify JavaScript and CSS• Optimize Images – PngCrush, Smushit• Gzip JavaScript and CSS

Set proper cache headersUtilize a CDN• Amazon CloudFront, Akamai…


Reducing # of Requests

Makes the biggest impact on startup performanceBrowser has limited number of connections it can use to request resourcesEven when cached the browser still makes a requestAdd the expires header stop this from happening


The process is simple…

jquery.js

mycode.js

Bundling Process code.all.jsplugin.js


…it’s deciding how and when that’s tough

Only two choices for when to do it:• Runtime• Development

Multiple choice for how• Ant• Server code• Dojo• Command line• IDE Support?• …


Using server-side code to do the concatenation

Goal is to make one request for all the JavaScript

<head><script src=“jquery.js”></script><script src=“plugin.js”></script><script src=“mycode.js”></script>

</head>

Becomes

<head> <script src=“combiner.php”></script></head>


Reducing Size of Requests

How do I do that?• Remove whitespace and comments• Remove EOL characters• Shrink variable and function parameter names• GZIP

code.all.js Compression Process code.all.min.js


Compression Tools

jsMinDean Edward’s PackerDojo Shrinksafe YUI Compressor Google has a new compression toolRockstarApps Eclipse Plugin


X=10Y=“Bob”

Be careful removing EOLs

X=10Y=“Bob”

Compression Process


Be careful removing EOLs

X=10;Y=“Bob”;X=10;Y=“Bob”;

Compression Process


GZIP Compression

Pluses• Dramatically reduces size of file

• 330KB to 70KB

• Simple to do• Lots of gzip tools

Minuses• Lots of browser caveats


Why did I build the RockstarApps Tools?


RockstarApps - A better solution

Integrated into the IDESimple workflow to create compressed and concatenated filesBe able to rebuild the files that were createdAlso work with CSS


RockstarApps Compressing files in Aptanawww.rockstarapps.com


Other Items

Minimize the code that is executed at startupBring back data / content once screen is completely rendered• Look at the yahoo homepage, the content not visible

isn’t usually present on the client,• Yahoo also doesn’t fetch content until user requests it• rockstarapps.com fetches data feeds after screen is

rendered.

Loading images• Lets users know something is going on• Distracts the user from the time it is taking


Thank You!!!

Home of jsLex Website Optimization Tools• http://www.rockstarapps.com

Follow me on Twitter• http://twitter.com/rockstarapps

My Blog• http://rockstarapps.com/wordpress

RockstarApps Optimizing the Web

Documents

Transcript of RockstarApps Optimizing the Web