Rockstarapps Optimizing The Web

RockstarApps Optimizing the Web Bob Buffone http://www.rockstarapps.com

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

Copyright http://www.rockstarapps.com

2

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…. Copyright http://www.rockstarapps.com

3

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. Copyright http://www.rockstarapps.com

4

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 Copyright http://www.rockstarapps.com

5

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 headers Utilize a CDN • Amazon CloudFront, Akamai… Copyright http://www.rockstarapps.com

6

Reducing # of Requests Makes the biggest impact on startup performance Browser has limited number of connections it can use to request resources Even when cached the browser still makes a request Add the expires header stop this from happening

Copyright http://www.rockstarapps.com

7

The process is simple…

jquery.js

plugin.js

Bundling Process

code.all.js

mycode.js

Copyright http://www.rockstarapps.com

8

…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? •…

Copyright http://www.rockstarapps.com

9

Using server-side code to do the concatenation Goal is to make one request for all the JavaScript

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

Becomes <script src=“combiner.php”>

Copyright http://www.rockstarapps.com 10

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

Copyright http://www.rockstarapps.com 11

Compression Tools jsMin Dean Edward’s Packer Dojo Shrinksafe YUI Compressor Google has a new compression tool RockstarApps Eclipse Plugin

Copyright http://www.rockstarapps.com 12

Be careful removing EOLs

X=10 Y=“Bob”

Compression Process

X=10Y=“Bob”

Copyright http://www.rockstarapps.com 13

Be careful removing EOLs

X=10; Y=“Bob”;

Compression Process

X=10;Y=“Bob”;

Copyright http://www.rockstarapps.com 14

GZIP Compression Pluses • Dramatically reduces size of file • 330KB to 70KB • Simple to do • Lots of gzip tools

Minuses • Lots of browser caveats

Copyright http://www.rockstarapps.com 15

Why did I build the RockstarApps Tools?

Copyright http://www.rockstarapps.com 16

RockstarApps - A better solution Integrated into the IDE Simple workflow to create compressed and concatenated files Be able to rebuild the files that were created Also work with CSS

Copyright http://www.rockstarapps.com 17

RockstarApps Compressing files in Aptana www.rockstarapps.com

Copyright http://www.rockstarapps.com 18

Other Items Minimize the code that is executed at startup Bring 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 Copyright http://www.rockstarapps.com 19

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

Copyright http://www.rockstarapps.com 20