Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: pagespeed

High Performance SVGs image/svg+xml

I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate dropped dramatically and conversion was restored.

Some handy tips on optimising SVGs for performance. I’ve been trusting Inkscape for my SVG production needs, but after reading this, I might take a closer look at the files it creates.

Key Moments In Web Page Loading, Totally Tooling Tips image/svg+xml

There are several key moments in the loading time of a web page. In this Totally Tooling Tips Addy & Matt look at time to first paint, time to first meaningful paint and time to stable layout.

In the old days, there was a lot of guess work involved when trying to speed-up and optimise a website, so I love that we now have easy access to the tools required for this type of analysis.

100/100 Google PageSpeed

I’ve been playing around with this website, and the server it’s hosted on, in an effort to score top marks on Google’s PageSpeed Insights tool. Tonight, I managed to achieve the top score of 100/100, which I’m pretty happy about.

Interestingly, or not, I’ve read a number of negative comments from web developers about this Google initiative. A lot of naysayers point to the fact that Google’s sites perform quite poorly using its own tool. Personally, I think this is a nonsense argument. Sure, in a perfect world, all of Google’s properties would score 100/100, but I don’t think the tool is really designed to sit in judgement over how well a site performs in terms of speed.

It’s supposed to be a learning aid, designed to help developers understand what can be achieved using different optimisation techniques. The decision as to whether or not to use any of the techniques in production is down to the developer — some are a given, but others are debatable depending on server set-up, protocols, load etc.

Anyhow, if you’re interested in learning some of the techniques needed to obtain a top score, I’d highly recommend giving it a try. Just don’t be under any illusions that obtaining a score of 100/100 is the be-all and end-all.