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….
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
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…
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
The process is simple…
jquery.js
Bundling
plugin.js code.all.js
Process
mycode.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
code.all.min.js
Process
Compression Tools
jsMin
Dean Edward’s Packer
Dojo Shrinksafe
YUI Compressor
Google has a new compression tool
RockstarApps Eclipse Plugin
Be careful removing EOLs
X=10 Compression
Process X=10Y=“Bob”
Y=“Bob”
Be careful removing EOLs
X=10; Compression
Process X=10;Y=“Bob”;
Y=“Bob”;
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 IDE

Simple workflow to create compressed and
concatenated files
Be able to rebuild the files that were created
Also work with CSS
RockstarApps Compressing files in
Aptana
www.rockstarapps.com
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
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

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

RockstarApps Optimizing The Web

Încărcat de

Drepturi de autor:

Formate disponibile

RockstarApps

Optimizing the Web

Why are we here?

Days of JavaScript being used only for form

Reduce number of Requests

Makes the biggest impact on startup

Integrated into the IDE

Minimize the code that is executed at startup

Home of jsLex Website Optimization Tools

S-ar putea să vă placă și