When I was first starting my career as a Web Developer in the nineties, we were all about saving bandwidth. We compressed images, removed newline characters, whatever we could do to decrease the size of our downloads. As the World Wide Web grew to what it is today, bandwith increased, browsers became more efficient in caching and DNS prefetching and people slowly shifted their attention to making their sites dazzle and compete for audience attention rather than optimizing download speeds. Now, the pendulum is starting to swing in the opposite direction because, for one thing, people’s attention span has shortened and you just can’t get away with making them wait. Furthermore, as sites become increasingly interactive, their use of client-side script libraries has increased exponentially. All this leads one to the realization that we must optimize our sites.<\/p>\n
Thanks to Paul Irish’s HTML5 Boilerplate Build tool, we don’t have to go through a lot of trouble to do it. In fact, Mr. Irish would have us believe that it can be as easy as clicking a batch file! To put this bold claim to the test, I ran the build tool against my robgravelle.com index page, along with its associated script, CSS, and image files. I’m happy to report that it really is quite easy to get the hang of.<\/p>\n
How it Works<\/strong><\/p>\n The build tool is really a collection of separate utilities bound together by an Apache Ant script, which is a popular Java-based build tool. Being Java-based makes it platform independent, making it easy to move from one environment to another. Some of the tools that it uses include jpegtran and optipng, for compressing JPEG and PNG images respectively. This step alone can save 50 percent of loading speed! It also revises file names, using REVed, so that you can employ heavy caching, while still updating assets when a new build is rolled out. Html minification, performed via htmlcompressor, can be set to from basic to aggressive using property files.<\/p>\n Before you Run the Build Tool<\/strong><\/p>\n There are a few things that you’ll have to do before you call the build script. The first is to make sure you’ve installed both the Java runtime-environment<\/a> (JRE) and Ant<\/a>, in that order. On Windows, you should install Ant using WinAnt<\/a>. It will run a Wizard to guide you through the installation process, making it super-easy!<\/p>\n The next step is to configure the property files.<\/p>\n The build tool expects the directory to mimic that of the HTML5 Boilerplate Template, which is:<\/p>\n Chances are that if you did not use the HTML5 Boilerplate Template to build your site, it won’t conform to these exact specifications, so you’ll have to set some values in the properties files.<\/p>\n There are two property files located in the buildconfig folder called default.properties and project.properties. The default.properties are the “goto” properties, while the project.properties override the defaults for project-specific attributes.<\/p>\n Perhaps the most important one is the dir.source. It’s where your project resides. By default the build script expects your project’s root to be in the same directory as the build folder. Unless you update this value, you should move or copy your build folder to the root of your project, where the index.html file resides.<\/p>\n Directory Paths<\/strong><\/p>\n The Directory Paths section is where you would set the names and location of various folders. Here are the values with extra comments explaining what each property is for:<\/p>\n In the project.properties, assign your Html page(s) to the file.pages property unless you only have one page named index.htm.<\/p>\n Excluding Files<\/strong><\/p>\n In addition to files in the default.properties file, like .project and README files, you can designate additional files for exclusion using the file.exclude property. The mylibs directory has a separate property for JavaScript files called file.js.bypass.<\/p>\n Running the Build Tool<\/strong><\/p>\n All you have to do to run the Build Tool is navigate to the build folder and call Ant. Here’s the output of a successful run:<\/p>\n Assessing the Results<\/strong><\/p>\n Starting with the HTML page, we can see that the IE conditional statements have been condensed somewhat by the removal of extra newlines and spaces:<\/p>\n Before:<\/p>\n After:<\/p>\n Same for inline styles:<\/p>\n Before:<\/p>\n After:<\/p>\n The effect on scripts is especially dramatic.<\/p>\n Before:<\/p>\n <\/p>\n After:<\/p>\n <\/p>\n External stylesheets were minified by removing spaces and newlines and by including @import statements. Here are the first few lines of the main.css file:<\/p>\n Before:<\/p>\n After:<\/p>\n Linked JavaScript files were similarly minified. Here are the first few lines of the Lightbox.js file:<\/p>\n Before:<\/p>\n After:<\/p>\n Scripts in the jsmylibs folder were amalgamated into one minified script called “27f8b5e6f9013c675db385588386d0175c8a8148.js” and placed in the js root:<\/p>\n Conclusion<\/strong><\/p>\n Nothing could be done for my image files because my host’s Content Management System already incorporates image optimization. Nonetheless, I did achieve a overall site reduction of sixteen percent, from 456 KB (467,122 bytes) or 1.62 MB (1,703,936 bytes) on disk, to 381 KB (391,058 bytes) or 1.46 MB (1,540,096 bytes) on disk. That’s still substantial enough to make the build process worth while.<\/p>\n","protected":false},"excerpt":{"rendered":" When I was first starting my career as a Web Developer in the nineties, we were all about saving bandwidth. We compressed images, removed newline characters, whatever we could do to decrease the size of our downloads. As the World Wide Web grew to what it is today, bandwith increased, browsers became more efficient in […]<\/p>\n","protected":false},"author":93,"featured_media":6003,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30683],"tags":[2003,31224],"b2b_audience":[29],"b2b_industry":[52],"b2b_product":[68,136],"acf":[],"yoast_head":"\n <\/pre>\n
index.html\njs -- -\n |\n libs - contains common script libraries such as Modernizr and jQuery\n mylibs - contains site specific custom library scripts\n plugins.js - contains all jQuery plugins\n scripts.js - contains site\/page specific JavaScript code\ncss -- |\n style.css\n handheld.css\nimg (erroneously reported as images in build tool docs!)\n<\/pre>\n
#\n# Directory Paths\n#\ndir.source = . #project root is where ever the build folder is located by default\ndir.intermediate = intermediate #this is a kind of temp folder. It's not needed to publish \n #so you may want to have it outside of your project tree structure \ndir.publish = publish #this is the folder that will contain your prod-ready site with optimizations\ndir.build = build # the build tool root folder\ndir.build.tools = ${dir.build}\/tools #tools used by the build script\ndir.test = test #a project folder containing test files\ndir.demo = demo #a project folder containing demo files\ndir.js = js #the root JavaScript folder\ndir.js.main = ${dir.js} #folder containing your main JS file\n# scripts in the libs directory will only be minified, not concatenated together\ndir.js.libs = ${dir.js}\/libs #a folder containing common script libraries such as Modernizr and jQuery\ndir.js.mylibs = ${dir.js}\/mylibs #a folder containing site specific custom library scripts\ndir.css = css #the css folder\ndir.images = img #the image folder\n<\/pre>\n# Files can be added in a comma separated form\nfile.pages = RobGravelle.htm\n<\/pre>\n
E:unprotectedCIC PC BackupwritingsArticlesITHTML GoodiesHTML5-boilerplate\nHTML5 Boilerplate BuildTest Projectbuild>\"C:Program FilesWinAntbinant\"\nBuildfile: E:unprotectedCIC PC BackupwritingsArticlesITHTML GoodiesHTML5-\nboilerplateHTML5 Boilerplate BuildTest Projectbuildbuild.xml\n\nbuild:\n [echo] Building a Production Environment…\n\n-rev:\n [echo] =====================================================================\n [echo] Welcome to the HTML5 Boilerplate Build Script!\n [echo]\n [echo] We're going to get your site all ship-shape and ready for prime time.\n [echo]\n [echo] This should take somewhere between 15 seconds and a few minutes,\n [echo] mostly depending on how many images we're going to compress.\n [echo]\n [echo] Feel free to come back or stay here and follow along.\n [echo] =====================================================================\n [echo]\n [echo]\n\n-mkdirs:\n [echo] Creating directory structure… publish\n [copy] Copied 1 empty directory to 1 empty directory under E:unprotectedC\nIC PC BackupwritingsArticlesITHTML GoodiesHTML5-boilerplateHTML5 Boilerpla\nte BuildTest Projectintermediate\n [mkdir] Created dir: E:unprotectedCIC PC BackupwritingsArticlesITHTML\nGoodiesHTML5-boilerplateHTML5 Boilerplate BuildTest Projectpublish\n [copy] Copied 11 empty directories to 11 empty directories under E:unprote\nctedCIC PC BackupwritingsArticlesITHTML GoodiesHTML5-boilerplateHTML5 Boi\nlerplate BuildTest Projectpublish\n\n-js.all.minify:\n [echo] Minifying scripts\n [copy] Copying 3 files to E:unprotectedCIC PC BackupwritingsArticlesIT\nHTML GoodiesHTML5-boilerplateHTML5 Boilerplate BuildTest Projectpublish\n\n-js.main.concat:\n [echo] Concatenating Main JS scripts…\n\n-js.mylibs.concat:\n [echo] Concatenating JS libraries\n\n-js.scripts.concat:\n [echo] Concatenating library file with main script file\n [copy] Copying 1 file to E:unprotectedCIC PC BackupwritingsArticlesIT\nHTML GoodiesHTML5-boilerplateHTML5 Boilerplate BuildTest Projectpublishjs\n\n-css:\n [echo] Concatenating any @imports…\n [copy] Copying 1 file to E:unprotectedCIC PC BackupwritingsArticlesIT\nHTML GoodiesHTML5-boilerplateHTML5 Boilerplate BuildTest Projectintermediate\ncss\n [echo] Minifying css…\n [apply] Warning: style-concat.css modified in the future.\n [copy] Copying 1 file to E:unprotectedCIC PC BackupwritingsArticlesIT\nHTML GoodiesHTML5-boilerplateHTML5 Boilerplate BuildTest Projectpublishcss\n [echo] Minifying any unconcatenated css files…\n\n-usemin:\n [echo] Switching to minified js files…\n [echo] Kill off those versioning flags: ?v=2\n [echo] Remove favicon.ico reference if it is pointing to the root\n [echo] Update the HTML to reference our concatenated script file: js\/27f8b5\ne6f9013c675db385588386d0175c8a8148.js\n [echo] Updating the HTML with the new css filename: css\/471e69f144b6b34b032\ne23c2879b78eadea4ae59.css\n\n-manifest:\n [echo] no manifest.appcache generated!\n\n-htmlclean:\n [echo] Run htmlcompressor on the HTML\n [echo] - maintaining whitespace\n [echo] - removing html comments\n [echo] - compressing inline style\/script tag contents\n\n-imagespng:\n [echo] Optimizing images…\n [echo] This part might take a while. But everything else is already done.\n [echo]\n [echo] First, we run optipng on the .png files…\n\n-imagesjpg:\n [echo] Now, we clean up those jpgs…\n\n-copy:\n [echo] Copying over new files…\n [copy] Copying 27 files to E:unprotectedCIC PC BackupwritingsArticlesI\nTHTML GoodiesHTML5-boilerplateHTML5 Boilerplate BuildTest Projectpublish\n [echo] A copy of all non-dev files are now in: .\/publish.\n\n-build.production:\n\nBUILD SUCCESSFUL\nTotal time: 16 seconds\n<\/pre>\n
<\/pre>\n
<\/pre>\n
<\/pre>\n
<\/pre>\n
\/* body.forms div#content { position: relative; } *\/\n\n\/*********************************\n * SECTION 1: General Properties *\n **********************************\/\n\n\n\/*\n * General html and body properties.\n *\/\nhtml {\n}\nbody {\n\tmargin: 0px;\n\tpadding: 0px;\n\tfont-family: Arial, Helvetica, Verdana, sans-serif;\n\tfont-size: 90%;\n}\n<\/pre>\n@import url(teasers.css);body{margin:0;padding:0;font-family:Arial,Helvetica,Verdana,sans-serif;font-size:90%}\n<\/pre>\nvar resizeSpeed = 8; \/* 1 = slowest, 10 = fastest *\/\nvar borderSize = 10; \/* Update this f you adjust the padding in the CSS *\/\n\n\/* Globals *\/\nvar imageGroups = new Array;\nvar imageArray;\nvar activeImage;\n\nif (resizeSpeed > 10) { resizeSpeed = 10; }\nif ( resizeSpeed < 1 ) { resizeSpeed = 1; }\nvar resizeDuration = (11 - resizeSpeed) * 0.15;\n<\/pre>\nvar resizeSpeed=8;var borderSize=10;var imageGroups=new Array;var imageArray;var activeImage;if(resizeSpeed>10){resizeSpeed=10}if(resizeSpeed<\/pre>\n