Speeding Up JS and CSS Download Times with Aggregation and Minification

Speeding Up JS and CSS Download Timeswith Aggregation and MinificationAlex Soto BuenoComputer Engineer

Origin of problem What is HTML 5

Origin of ProblemHTML 5 = 3

Origin of ProblemHTML 5 = HTML 3

Origin of ProblemHTML 5 = HTML + CSS 3 3

Origin of ProblemHTML 5 = HTML + CSS 3 + JS 3

Origin of Problem1 HTML in 1994 4

Origin of Problem 1 HTML1 HTML n CSS in n JS 1994 in 2011 4

Origin of Problem 5

Origin of ProblemNow What ? 6

Origin of ProblemNow What ? Good Design 6

Origin of ProblemNow What ? Good Design Aggregation & Miniﬁcation 6

Aggregation & Minification Mini... what?

Aggregation & MinificationWhy Multiple Files? 8

Aggregation & MinificationWhy Multiple Files? Separation of Concerns 8

Aggregation & MinificationWhy Multiple Files? Separation of Concerns One File To Rule Them All 8

Aggregation & MinificationMini.... What? Free cholesterol 9

First Approach What is wrong?

First ApproachMiniﬁcators 11

First ApproachComparison 0 75,000.0 150,000.0 225,000.0 300,000.0 Packer 67255 Closure 82607 UglifyJS 92054 YUI 101990 Dojo 120615 JSMin 135349 Original 238158 12

First Approach Joining 13

First Approach Joining All in One Maven Plugin 13

First ApproachGood but ... 14

First ApproachGood but ... Duplicated Files 14

First ApproachGood but ... Duplicated Files Rerun Plugin for ANY Modification 14

JawrBest of Both Worlds

JawrJawr Open Source Project Joins and Miniﬁes at runtime 16

JawrFor Aggregation Maps resources to bundles 17

JawrFor MiniﬁcationBundle Post Processor 18

JawrFor MiniﬁcationBundle Post Processor JSMin YUI Compressor Closure Compiler ... your own 18

Example Hands on Work

Example 20

ExampleWeb Applications Based on Servlets <servlet> <servlet-name>JavascriptServlet</servlet-name> <servlet-class>net.jawr.web.servlet.JawrServlet</servlet-class>  <init-param> <param-name>configLocation</param-name> <param-value>/jawr.properties</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>JavascriptServlet</servlet-name> <url-pattern>*.js</url-pattern> </servlet-mapping> 21

ExampleWeb Applications Based on Spring MVC@Controllerpublic class JavascriptJawrController {! @Autowired! @Qualifier("jawrJsController")! private JawrSpringController jawrSpringController;! @RequestMapping(value="/**/*.js")! public ModelAndView jawrJavascript(HttpServletRequest request, HttpServletResponseresponse) throws Exception {! ! return this.jawrSpringController.handleRequest(request, response);! }} 22

Exampleand Many More ... Wicket Facelets Grails DWR 23

ExampleComparison 24

Conclusions I Need Them

ConclusionsAggregation Reduces Connections 26

ConclusionsAggregation Reduces ConnectionsMinification Reduces Download Time 26

ConclusionsAggregation Reduces ConnectionsMinification Reduces Download TimeAt Runtime Better than Built-in time. 26

ConclusionsAggregation Reduces ConnectionsMinification Reduces Download TimeAt Runtime Better than Built-in time.Mobile Users will Appreciate it 26

ConclusionsAggregation Reduces ConnectionsMinification Reduces Download TimeAt Runtime Better than Built-in time.Mobile Users will Appreciate itBut your Bank Account Too 26

Wait!!! Miniﬁed & GZip Miniﬁed 27

Wait!!! Miniﬁed & GZip Miniﬁed200000.0150000.0100000.0 50000.0 0 Closure Packer UglifyJS YUI JSMin DOJO 27

Game Is Over 28

Alex Soto Bueno asotobu@gmail.com alexsotob.blogspot.com @alexsotobImba wimbo, Wa upepo, Wakati unajiwa na (James Horner - Mighty Joe Young)

http://www.lordofthejars.com	750
http://alexsotob.blogspot.com	528
http://webcache.googleusercontent.com	1

Speeding Up JS and CSS Download Times with Aggregation and Minification

by Alex Soto on Dec 14, 2011

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 1,279

Statistics

Speeding Up JS and CSS Download Times with Aggregation and Minification — Presentation Transcript