The whole process takes less than a minute and I have a production ready flat build. I could do more with JavaScript (concatenation and testing) but my usual work hasn’t mandated much attention here. Copy assets (images, fonts, JavaScript).Now thanks to Jamie Mason’s awesome Grunt-ImageOptim and ImageOptim-CLI that’s no longer the case! My automated build process now goes: There’s probably a faster way using a single phantom.js instance but by the time I figure that out I won’t need PNG fallbacks for legacy browsers… Update: I’ve now published grunt-svg2png to NPM and improved the speed performance dramatically! Instead of 30 seconds it’s done in less than 5.īecause I’m generating some raster graphics on the fly I’ve had to manually optimise them using the ImageOptim desktop app. I’ve now improved that, mostly with a sexy progress bar: It brought my laptop to a standstill while churning through as many phantom.js processes as there were SVG files. In this talk we’ll start with the basics and get progressively insane. There are many ways in which you can optimize the images that are used on your web site, and by combining the following techniques. The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get tired and leave. On the majority of web sites, images account for most of the page’s weight, so it is important to optimize them. My custom SVG rasterisation task was poorly written. In particular you can use the grunt-contrib-concat task to concatenate your files. It includes basic HTML & CSS and many Grunt tasks to automate compilation, minification, optimisation, and rasterisation.
Back in April I published my front-end starting point on GitHub.
0 kommentar(er)
