From ea124f2886809ea0b3d7b502c0ac6bdb7580c591 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 29 Dec 2020 13:38:27 +0000 Subject: [PATCH] Tell browsers to preload fonts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When looking at Google’s PageSpeed Insights tool as part of the compression work I noticed a suggestion that we preload our font files. The tool suggests this should save about 300ms on first page load time. *** Our font files are referenced from our CSS. This means that the browser has to download and parse the CSS before it knows where to find the font files. This means the requests happen in sequence. We can make the requests happen in parallel by using a `` tag with `rel=preload`. This tells the browser to start downloading the fonts before it’s even started downloading the CSS (the CSS will be the next thing to start downloading, since it’s the next `` element in the head of the HTML). Downloading fonts before things like images is important because once the font is downloaded it causes the layout to repaint, and shift everything around. So the page doesn’t feel stable until after the fonts have loaded. Google call this [cumulative layout shift](https://web.dev/cls/) which is a score for how much the page moves around. A lower score means a better experience (and, less importantly for us, means the page might rank higher in search results) We’re only preloading the WOFF2 fonts because only modern browsers support preload, and these browsers also all support WOFF2. We set an empty `crossorigin` attribute (which means anonymous-mode) because the preload request needs to match the origin’s CORS mode. See https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#CORS-enabled_fetches for more details. We set `as=font` because this helps the browser use the correct content security policy, and prioritise which requests to make first. --- app/__init__.py | 9 ++++++++- app/asset_fingerprinter.py | 4 +++- app/templates/admin_template.html | 3 +++ tests/app/main/test_asset_fingerprinter.py | 10 ++++++++++ tests/app/main/views/test_index.py | 16 ++++++++++++++++ 5 files changed, 40 insertions(+), 2 deletions(-) diff --git a/app/__init__.py b/app/__init__.py index ec0ce3771..20f0bc430 100644 --- a/app/__init__.py +++ b/app/__init__.py @@ -1,4 +1,5 @@ import os +import pathlib import re import urllib from datetime import datetime, timedelta, timezone @@ -202,6 +203,11 @@ def init_app(application): application.before_request(load_organisation_before_request) application.before_request(request_helper.check_proxy_header_before_request) + font_paths = [ + str(item)[len(asset_fingerprinter._filesystem_path):] + for item in pathlib.Path(asset_fingerprinter._filesystem_path).glob('fonts/*.woff2') + ] + @application.context_processor def _attach_current_service(): return {'current_service': current_service} @@ -228,7 +234,8 @@ def init_app(application): return { 'asset_path': application.config['ASSET_PATH'], 'header_colour': application.config['HEADER_COLOUR'], - 'asset_url': asset_fingerprinter.get_url + 'asset_url': asset_fingerprinter.get_url, + 'font_paths': font_paths, } application.url_map.converters['uuid'].to_python = lambda self, value: value diff --git a/app/asset_fingerprinter.py b/app/asset_fingerprinter.py index 228b9d512..c6fa3859c 100644 --- a/app/asset_fingerprinter.py +++ b/app/asset_fingerprinter.py @@ -24,7 +24,9 @@ class AssetFingerprinter(object): self._asset_root = asset_root self._filesystem_path = filesystem_path - def get_url(self, asset_path): + def get_url(self, asset_path, with_querystring_hash=True): + if not with_querystring_hash: + return self._asset_root + asset_path if asset_path not in self._cache: self._cache[asset_path] = ( self._asset_root + diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html index 4d5f1c006..a492c9716 100644 --- a/app/templates/admin_template.html +++ b/app/templates/admin_template.html @@ -12,6 +12,9 @@ {% endblock %} {% block head %} + {%- for font in font_paths %} + + {%- endfor %} {% block extra_stylesheets %} diff --git a/tests/app/main/test_asset_fingerprinter.py b/tests/app/main/test_asset_fingerprinter.py index 581294dbd..50513dd4f 100644 --- a/tests/app/main/test_asset_fingerprinter.py +++ b/tests/app/main/test_asset_fingerprinter.py @@ -89,6 +89,16 @@ class TestAssetFingerprint(object): 'app/static/application.css' ) + def test_without_hash_if_requested(self, mocker): + fingerprinter = AssetFingerprinter() + assert fingerprinter.get_url( + 'application.css', + with_querystring_hash=False, + ) == ( + '/static/application.css' + ) + assert fingerprinter._cache == {} + class TestAssetFingerprintWithUnicode(object): def test_can_read_self(self): diff --git a/tests/app/main/views/test_index.py b/tests/app/main/views/test_index.py index 4067452bc..3615b1c65 100644 --- a/tests/app/main/views/test_index.py +++ b/tests/app/main/views/test_index.py @@ -331,3 +331,19 @@ def test_letter_spec_redirect_with_non_logged_in_user(client_request): '/documentation/images/notify-pdf-letter-spec-v2.4.pdf' ), ) + + +def test_font_preload( + client_request, + mock_get_service_and_organisation_counts, +): + client_request.logout() + page = client_request.get('main.index', _test_page_title=False) + + preload_tags = page.select('link[rel=preload][as=font][type="font/woff2"][crossorigin]') + + assert len(preload_tags) == 4, 'Run `npm build` to copy fonts into app/static/fonts/' + + for element in preload_tags: + assert element['href'].startswith('https://static.example.com/fonts/') + assert element['href'].endswith('.woff2')