The Carrot Blog

Page load speed is pretty high on our priorities list over here at carrot, and so is responsive design, as you could see by our last post. But the two don't always live in perfect harmony. While Roots' minified code paired with cloudflare and a brilliant nginx setup by kyle allowed us to push the initial page load and html delivery to the maximum possible speed, image assets can quickly become an issue, especially when building for retina at any screen size.

Although tools like imageoptim and imagealpha help us to squeeze every drop out of our images, we knew from the beginning that we would have a fairly image-heavy site, and our load time would probably suffer because of this. The big move we made in order to mitigate this issue was to using svg images, which was one of the best decisions we made while building this site. The carrot brand already utilizes a flat and simple illustration style, and it was easy for us to adapt the graphics for the new site into vectors. On top of this, svg images provide us with two gigantic benefits: first, they are infinitely scalable, and automatically retina (or higher), and second, the file size after begin gzipped is tiny. Fairly complex svg images from our site clock in around 50kb (already small) and are squeezed down easily below 20kb by gzip, which is especially effective on xml (which is how svg images are encoded) as we can see by the 50%+ reduction of image size. It's also worth mentioning svgo, a fantastic tool that allowed us to squeeze even more out of the svg source.

Optimizations such as these have allowed us to snag upwards of 95/100 on the google page speed rankings, and the only reason we were docked those 5 points was because of google maps' resource loading. Ah, the irony.

It's important to remember that a great product is always a balance between good looks and performance. By having our design team work closesly with developers, we were able to come up with creative solutions that not only allowed us to have gorgeous, resolution-independent animated graphics all over our site, but also have the page load consistently in less than a half second. That's how we do it here at carrot.