General Data Protection Regulation and Performance

Gdpr,Law,Performance,Text.Posted May 27, 2018. 1147 words.

The General Data Protection Regulation (GDPR) is now in effect, although with how many emails various companies have sent you asking for consent you are probably already well aware. I am not a lawyer but in a nutshell, the GDPR requires:

  1. Lawful, fair, and transparent data processing
  2. Limitation of purpose, data, and storage to what’s strictly necessary
  3. Rights for data subjects to know, view, amend, object, complain, or delete their data
  4. Active consent to data collection by the data subject or a parent/guardian
  5. Disclosure of data breaches within 72 hours to the data subject and the regulator
  6. Data protection and privacy by default
  7. Performing data protection impact assessments when required
  8. Accountability on data transfer
  9. A data protection officer if significant data is processed
  10. Awareness and training about data protection

Reading the requirements, while this may inconvenience some large, slow moving organisations this seems like a win for data subjects (i.e. 99% of people). Unlike cookie consent, this legislation has teeth with fines of up to twenty million euros of 4% of global turnover. Read the full text (External).


Complying with the GDPR

But then, why am I writing about it? Well, I am (currently) a European Union citizen with a small blog that I at least hope appeals to at least a few other European Citizens. As far as I can tell the GDPR applies to me and every other small blog, not just the big players.

So what do I do? Well I could ignore the GDPR and hope for the best, spend a significant amount of money to hire a lawyer and review my site (I currently spend about three pounds a year running it), or treat data as dangerous and toxic. Aiming to minimise and eliminate my processing and third-parties processing of your data is obviously the right decision with the added bonus of improve performance all around.

I started by making a list of third parties that are required to view this blog, and I was a little surprised how many had crept in. In total eight third-parties were previous used, here they are in alphabetical order: CDNJS, Cloudflare, Disqus, Facebook, Font Awesome, GitHub, Google, and YouTube. Compared to the average website this is unfortunately a rather low number, but given that only Github was truly required as they host my blog I wanted to do something about it. I especially wanted to remove Google and Facebook as they were responsible for a number of tracking cookies.

A month ago Github pages added support for custom domain SSL allowing me to remove Cloudflare, CDNs are not necessary so all scripts and files are now self-served, Facebook videos are not necessary, and I can do without Google Analytics. This does have the unfortunate result that I no longer know who are my visitors and how many there are (Why not send me an email, the link is at the top of the page). I didn’t want to lose comments or Youtube videos, but didn’t want them to be required to view my blog. Therefore, I made them both click to play with a link to their privacy policies (By the way, the Youtube preview is faked with CSS and Javascript, nothing is loaded until clicked).

I can now say that this blog does not request, store, process, share, or sell information. Cookies are not used to track or identify users. This is unless the user consents to the third-party privacy policies of Disqus and/or YouTube and clicks to play or view them. In that case information is shared with and cookies may be created by the two organisations which both comply with the GDPR (Disqus, YouTube).

If you wish to get in contact, send an email using the link at the top of the page. Privacy policy can be found at the bottom.


Improving Blog Performance

With compliance (hopefully) sorted, I could focus on performance. By cutting out third-parties audit scores had improved but there was a lot of work to be done. This blog was still slow to load on a 3G connection, with many critical page blocking resources. With the following changes, this site achieves 99/100 in Google PageSpeed Insights (External) and 96/100 in Google Lighthouse (External). It also acheives 100/100 PWA, 100/100 Accessibility, 100/100 Practises, and 90/100 SEO (10 points deducted for 14px font on tiny smart phones).

Performance

For performance, the key is eliminating render-blocking round trips and minimising the number and size of resources needed.

  • Aggressively resize and optimize images, use thumbnails instead of large images. For this, I use ImageMagick (External) to resize down to a maximum of 640×640px, then either jpegtran (External) or optipng (External) to optimize. For JPGs use convert $f -quality 80 -resize 640x640\> $f && jpegtran -copy none -optimize -progressive -outfile $f $f and for PNGs use convert $f -quality 05 -resize 640x640\> $f && optipng -o7 -out $f $f.
  • Combine, minify, and append styles and scripts to each individual page. This may seem counter-intuitive as it prevents reuse, but in this page minified styles and scripts add up to 19.4KB. A tiny amount and allows the browser to avoid many network requests. For SCSS use scss --update style.css --sourcemap=none --style compressed and for JS use uglifyjs script.js -m -c -o script.min.js
  • Additionally, use font-display to let web-fonts load optionally, use IntersectionObserver (External) to lazy load images, avoid redirects, enable gzip compression, use browser caching, and audit your site using Google Lighthouse (External).
Progressive Web App

A progressive web app needs a manifest.json and a registered service-worker.js in the root of the application that can serve something when the browser cannot connect to the internet or the site. For this blog, it will just display an offline message.

Others

Here, there is not much to do but perform an audit, and then correct each failure in order. It’s pretty self explanatory. If you wish to use ARIA tags I suggest using aViewer (External) or a screen reader to test. This blog was failing on insufficient contrast and continues to fail on “Document doesn’t use legible font sizes” despite illegible font here meaning 14px on a 600px wide screen.


The GDPR is here to stay, and I believe it will help protect users while still letting the web flourish. I am not a lawyer, but if you do not process data, it is nothing to worry about. It would be great to one day not need a script or ad blocking extension to browse the web safely. Because of the GDPR, I expect many sites including mine will start to focus on improving data protection and performance.