General Data Protection Regulation and Performance
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:
- Lawful, fair, and transparent data processing
- Limitation of purpose, data, and storage to what’s strictly necessary
- Rights for data subjects to know, view, amend, object, complain, or delete their data
- Active consent to data collection by the data subject or a parent/guardian
- Disclosure of data breaches within 72 hours to the data subject and the regulator
- Data protection and privacy by default
- Performing data protection impact assessments when required
- Accountability on data transfer
- A data protection officer if significant data is processed
- 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.
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).
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).
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
optipng(External) to optimize. For JPGs use
convert $f -quality 80 -resize 640x640\> $f && jpegtran -copy none -optimize -progressive -outfile $f $fand 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 compressedand for JS use
uglifyjs script.js -m -c -o script.min.js
- Additionally, use
font-displayto 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.
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.