Improving your site with Lighthouse and Cloudflare

Google Chrome, and the open source Chromium, includes a helpful developer tool called Lighthouse that can help resolve some issues.  I wrote about upgrading eVitabu to use a newer version of Bootstrap and that was as a result of  a Lighthouse report.  Cloudflare is a web page proxying service that aims to improve the load times of your site as well as providing some protection against Denial of Service attacks and some common hacking techniques.

In this post I'm going to walk through some of the issues Lighthouse identified with some of my sites (now largely fixed) and comment on how to improve your site with Cloudflare.

Lighthouse

First, Lighthouse.  In Chrome (or Chromium) browse to the website you want to audit and activate the developer tools by pressing Ctrl + Shift + i or pressing F12.  From the menu bar along the top  (with Elements, Console etc.) choose Lighthouse (you may have to click the >> in order to scroll the menu).  You'll then see the generate report button.  Click that and an audit of the site will be conducted.  By default all of the checks will be run.

Incorrect HTTP header values

These were actually highlighted as browser errors, shown under the heading of browser errors were logged to the console.  Since I implemented a Content-Security-Policy the directive referrer had been deprecated, but I'd not noticed.  Similarly the reflected-xss directive was no more so needed to be removed.  As a result there were errors being logged to the browser console and that's not desired.  Notably, there were two errors shown for the eVitabu main site:

Unrecognized Content-Security-Policy directive 'referrer'.
Unrecognized Content-Security-Policy directive 'reflected-xss'.

(Note that "referrer" is misspelled in the original specification.)

Once I knew about the problem I could fix and a re-scan showed all was well.  I wouldn't rely on Lighthouse to check all my HTTP Security Headers though, instead I recommend SecurityHeaders.io by Scott Helme.  After scanning your site (just a connection that parses your HTTP headers) you're given a grade and some guidance for improvements.  This blog currently gets an "A" grade (I need to implement the Feature-Policy header next).

Missing "meta description"

The meta description for your site (or each page) is a brief snippet that search engines use.  You can see the meta description shown beneath the link in Google search:

If you're using the Ghost blogging platform you can add a meta description for your site in the Settings section under title & description > publication info:

Other systems should be configured per their manuals or you can add a meta tag to your code:

<meta name="description" content="A helpful blog" />

Awareness of accessibility

Lighthouse also flags up accessibility suggestions and concerns.  For example, my blog has insufficient contrast for some readers - particularly the abstracts of blog posts (grey) and tag names (blue).  Additionally some form elements don't have associated labels, making the form harder to use by someone with a screen reader.  At some point I'll need to edit the Jonsdocs blog's theme files to take care of these issues - please reach out to me on Twitter if this affects you particularly.

Finding vulnerabilities

The best practices section includes information about any security vulnerabilities that have been found.  In my day job I often find jQuery is out of date (the oldest version I've found recently being 1.8, the current latest is 3.5.1) in web applications so I was keen to practice what I preached and get that sorted.  I won't cover that excessively here as I wrote a whole blog post on migrating Yii2 to use Bootstrap 4, which included a jQuery update.

Unless you manually look for this detail, you'd usually pay for a web application vulnerability scan in order to find that you're using an outdated or vulnerable library.  It's really cool that Lighthouse points out this problem for free.

Cloudflare

Did you know that Cloudflare itself has a free tier (it's what I'm using for this blog) so you can protect your site?  Furthermore, did you know that Cloudflare gives you a free SSL certificate?  When visitors browse to your site they receive a certificate issued by Cloudflare (not the origin certificate discussed below).  Given both of those facts there's no reason not to have your site running over HTTPS.

Rocket Loader speed boost

Cloudflare's Rocket Loader allows you to gain an additional speed boost for your site, however, if you're using a Content-Security-Policy you'll need to make a change to allow Rocket to work.  According to Cloudflare's documentation:

Rocket Loader prioritises your website's content (text, images, fonts etc) by deferring the loading of all of your JavaScript until after rendering. On pages with JavaScript, this results in a much faster loading experience for your users

Cloudflare includes additional JavaScript in to provide this functionality and Cloudflare explains the relevant changes in this article.  To use Rocket Loader update your script-src directive to allow JavaScript from ajax.cloudflare.com:

Content-Security-Policy	script-src 'self' ajax.cloudflare.com;

Origin certificates

One of the biggest complaints about running an HTTPS enabled site is that certificate management is a pain, and if you forget to renew the certificate your site will cause warnings to show in the browser.  While you can use Let's Encrypt for a free certificate, and script renewal with Certbot, Cloudflare makes running your site even easier with origin certificates.

Communication between Cloudflare and your backend webserver is encrypted with an origin certificate that you generate through Cloudflare's management console.  These certificates have long validity periods to reduce the renewal frequency.

It's important to note that you must not use the origin certificate to secure traffic between your server and non-Cloudflare clients as the certificate is only trusted by Cloudflare's infrastructure.

Further instructions can be found in Cloudflare's knowledgebase: https://support.cloudflare.com/hc/en-us/articles/115000479507-Managing-Cloudflare-Origin-CA-certificates

Conclusion

Since knowing Lighthouse is available it's now one of my go-to tools[1] before deploying a new release.  I find it really useful for checking what's going on with my site and for ensuring I learn from my mistakes.  Give it a go!

Banner image: my lighthouse result.  (I know the "e" of "performance" is on a new line, that's their doing, not mine!)

[1] Not to be confused with GOTO, which, as explained by XKCD, would be a disasterous idea: