Web Development

Benchmarking your webpages for responsiveness, speed and security

Everyone knows that a website needs to be responsive, fast and secure – but how are your sites being tested? Are you doing it first, or leaving it to your users?

My next few posts are going to be a bit different to the ones I’ve done previously – I’m going to suggest a few links that might help give you a shortcut to solving some common issues. In this post I’ll share some links that enable you to benchmark your webpages. It’s always better for you to find the kind of problems these sites highlight (because if you don’t find these problems first, then it means your users are suffering).

I’ve often found these kind of sites to be really useful – occasionally they’ll flag something I’ve forgotten or not thought about, and I’ve found them most helpful when I’m auditing someone else’s site for snags.

Responsive Behaviour

Google have created an application to which rates your application for how it responds on different device types (mobile, tablet, desktop).

https://testmysite.thinkwithgoogle.com/

screenshot.1483378770.png

‘Mobile First’ is more than just testing for responsiveness – ideally sites today should be built to be Progressive Web Apps. If you don’t know what a Progressive Web App is, then check out the Wikipedia entry for a Progressive Web App.

Google have created a plugin for their Chrome browser called “Lighthouse” – this will test your website to see if it meets the basic criteria of a progressive web app. This isn’t strictly a benchmarking site (although the plugin runs in a browser) – it’ll give you a score out of 100 for how your site rates against their best practices.

https://developers.google.com/web/updates/2016/12/lighthouse-dbw

screenshot-1483379397

Build for speed

There are a few really good benchmarking sites to allow you to see if there’s any immediate room for improvement on your pages. If you’ve forgotten to compress your JavaScript or CSS, or if you’re not gzip-ing your response stream, these sites will spot it.

PageSpeed from Google: https://developers.google.com/speed/pagespeed/insights/

screenshot.1483379585.png

GTmetrix: https://gtmetrix.com/

screenshot.1483379678.png

Pingdom: https://tools.pingdom.com/

screenshot.1483379761.png

What about CSS?

I hate to say it, but sometimes CSS is treated like a poor relation when it comes to page optimisation. Just because we’ve minified the CSS and gzip-ed the stream doesn’t mean we’ve optimised it – there’s often lots of CSS classes which aren’t used or even have errors – the links below help you see if your CSS is bloated or has errors.

Parse CSS gives a nice minimal assessment and summary of the styles available to the page being tested, and is really useful as it provides a preview of these styles. The site doesn’t make any judgement on whether the CSS is good or bad – but you might find that a vast amount of the styles available to you actually aren’t needed.

 

screenshot.1483380493.png

If you want to read more about how to use this information to improve your site, check out CSS Purge at http://www.csspurge.com/. This gives a good explanation of why CSS bloat is damaging your site performance, and how to improve it.

Security checks

I’ve covered some of this in a previous post, but I’ll include the benchmarking sites that I like here again for completeness.

SecurityHeaders.io – this is a simple interface which checks if your site’s headers could be tuned be more secure against attack. It really helpfully links to explanations of jargon, and explains why it matters in plain English.

https://securityheaders.io

screenshot-1483379947

Also, High Tech Bridge also provide a site to do a similar test.

https://www.htbridge.com/websec/

screenshot.1483379844.png

Wrapping Up

I hope these links and tools are useful – they’ll maybe give you a new way of looking at your site, and might point you in the direction of making it better.