Nick Colley NickColley

Webfonts are huge and blocking

July 25th, 2016

Webfonts on GOV.UK block initial render and are surprisingly big at 200kb GZIPed

Measured impact

I have measured a 2g/3g connection with fonts blocked to see the difference it could make to lazy-load the font with the following results

Content	Views	Unique visitors
GitHub - alphagov/govuk-frontend: GOV.UK Frontend contains the code you need ...	1,230	403
govuk-frontend/src at master	423	97
Issues	301	45
Pull Requests	264	25
Search · template	243	48
govuk-frontend/installing-with-npm.md at master · alphagov/govuk-frontend · G...	221	111
govuk-frontend/src/components at master	213	66
govuk-frontend/src/settings at master	181	21

Sass mixins to help people implement focus styles

Overview of mixins

Sass is an extension language for CSS, it adds features to make maintaining large CSS codebases easier.

One feature in Sass is mixins.

“Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.”

	<!-- Example of using `currentColor` to set the colour of a SVG circle -->
	<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	<circle fill="currentColor" cx="10" cy="10" r="10"/>
	</svg>

	<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
	<style>
	.panel {
	box-sizing: border-box;

	height: 100px;
	width: 100px;
	border: 3px solid black;
	background: black;
	color: white;

	<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
	<style>
	.round-button {
	font-size: 16px;
	border-radius: 50%;
	height: 6em;
	width: 6em;
	}

	.round-button:focus {

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	html, body {
	font-size: 16px;
	font-family: sans-serif;


	{% from "warning-text/macro.njk" import govukWarningText %}
	{{ govukWarningText({
	text: "This is work in progress — No macro",
	iconFallbackText: "Warning"
	}) }}

	<h2 class="govuk-heading-m">DL - govuk-data-list with actions and borders</h2>

	Test name,Link,VoiceOver OSX,VoiceOver iOS,VoiceOver iPad,NVDA,JAWS,IE8,IE9,IE10,Internet Explorer 11 (Windows),Edge (Windows),Google Chrome (Windows),Mozilla Firefox (Windows),Safari (macOS),Google Chrome (macOS),Mozilla Firefox (macOS),Safari (iOS),Google Chrome (iOS),Google Chrome (Android),Samsung Internet (Android)
	Control,https://output.jsbin.com/yesilis,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected,As expected
	Visually Hidden with CSS,https://output.jsbin.com/xiqohaz,"Visually hidden text in links is always at the front for example: ""link, name Change"".

	This is still the same if the visually hidden text is in the middle of the link.

	Buttons behave as expected.
	","When swiping left and right visually hidden text is read out.

	When pressing on links directly visually hidden text is not read out.

	////
	/// @group helpers
	////

	/// Focusable helper
	///
	/// Provides an additional outline to clearly indicate when the target element is
	/// focussed. Used for interactive elements which themselves have some background
	/// or border, such as most form elements.
	///