Files
notifications-admin/app/templates/admin_template.html
Chris Hill-Scott ea124f2886 Tell browsers to preload fonts
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 `<link>` 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 `<link>` 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.
2020-12-29 16:31:11 +00:00

269 lines
8.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "template.njk" %}
{% from "components/banner.html" import banner %}
{% from "components/cookie-banner.html" import cookie_banner %}
{% block headIcons %}
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ asset_url('images/favicon.ico') }}" type="image/x-icon" />
<link rel="mask-icon" href="{{ asset_url('images/govuk-mask-icon.svg') }}" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset_url('images/govuk-apple-touch-icon-180x180.png') }}">
<link rel="apple-touch-icon" sizes="167x167" href="{{ asset_url('images/govuk-apple-touch-icon-167x167.png') }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset_url('images/govuk-apple-touch-icon-152x152.png') }}">
<link rel="apple-touch-icon" href="{{ asset_url('images/govuk-apple-touch-icon.png') }}">
{% endblock %}
{% block head %}
{%- for font in font_paths %}
<link rel="preload" href="{{ asset_url(font, with_querystring_hash=False) }}" as="font" type="font/woff2" crossorigin>
{%- endfor %}
<link rel="stylesheet" media="screen" href="{{ asset_url('stylesheets/main.css') }}" />
<link rel="stylesheet" media="print" href="{{ asset_url('stylesheets/print.css') }}" />
{% block extra_stylesheets %}
{% endblock %}
<style>
.govuk-header__container { border-color: {{header_colour}} }
</style>
{% if g.hide_from_search_engines %}
<meta name="robots" content="noindex" />
{% endif %}
<meta name="google-site-verification" content="niWnSqImOWz6mVQTYqNb5tFK8HaKSB4b3ED4Z9gtUQ0" />
{% block meta_format_detection %}
<meta name="format-detection" content="telephone=no">
{% endblock %}
{% block meta %}
{% endblock %}
{% endblock %}
{% block pageTitle %}
{% block per_page_title %}{% endblock %} GOV.UK Notify
{% endblock %}
{% block bodyStart %}
{% block cookie_message %}
{{ cookie_banner() }}
{% endblock %}
{% endblock %}
{% block header %}
{% if current_user.is_authenticated %}
{% if current_user.platform_admin %}
{% set navigation = [
{
"href": url_for('main.support'),
"text": "Support",
"active": header_navigation.is_selected('support')
},
{
"href": url_for('main.documentation'),
"text": "Documentation",
"active": header_navigation.is_selected('documentation')
},
{
"href": url_for('main.user_profile'),
"text": current_user.name,
"active": header_navigation.is_selected('user-profile')
},
{
"href": url_for('main.platform_admin_splash_page'),
"text": "Platform admin",
"active": header_navigation.is_selected('platform-admin')
},
{
"href": url_for('main.sign_out'),
"text": "Sign out"
}
] %}
{% else %}
{% set navigation = [
{
"href": url_for('main.support'),
"text": "Support",
"active": header_navigation.is_selected('support')
},
{
"href": url_for('main.documentation'),
"text": "Documentation",
"active": header_navigation.is_selected('documentation')
},
{
"href": url_for('main.user_profile'),
"text": current_user.name,
"active": header_navigation.is_selected('user-profile')
},
{
"href": url_for('main.sign_out'),
"text": "Sign out"
}
] %}
{% endif %}
{% else %}
{% set navigation = [
{
"href": url_for('main.support'),
"text": "Support",
"active": header_navigation.is_selected('support')
},
{
"href": url_for('main.features'),
"text": "Features",
"active": header_navigation.is_selected('features')
},
{
"href": url_for('main.pricing'),
"text": "Pricing",
"active": header_navigation.is_selected('pricing')
},
{
"href": url_for('main.documentation'),
"text": "Documentation",
"active": header_navigation.is_selected('documentation')
},
{
"href": url_for('main.sign_in'),
"text": "Sign in",
"active": header_navigation.is_selected('sign-in')
}
] %}
{% endif %}
{{ govukHeader({
"homepageUrl": url_for('main.show_accounts_or_dashboard'),
"productName": "Notify",
"navigation": navigation,
"navigationClasses": "govuk-header__navigation--end",
"assetsPath": asset_path + "images"
}) }}
{% endblock %}
{% block footer %}
{% set meta_items = [
{
"href": url_for("main.privacy"),
"text": "Privacy"
},
{
"href": url_for("main.cookies"),
"text": "Cookies"
},
{
"href": url_for("main.accessibility_statement"),
"text": "Accessibility statement"
}
] %}
{% if current_service and current_service.research_mode %}
{% set meta_suffix = 'Built by the <a href="https://www.gov.uk/government/organisations/government-digital-service" class="govuk-footer__link">Government Digital Service</a><span id="research-mode" class="research-mode">research mode</span>' %}
{% else %}
{% set meta_suffix = 'Built by the <a href="https://www.gov.uk/government/organisations/government-digital-service" class="govuk-footer__link">Government Digital Service</a>' %}
{% endif %}
{{ govukFooter({
"classes": "js-footer",
"navigation": [
{
"title": "Support",
"columns": 1,
"items": [
{
"href": url_for('main.support'),
"text": "Contact support"
},
{
"href": "https://status.notifications.service.gov.uk",
"text": "System status"
},
{
"href": "https://www.gov.uk/performance/govuk-notify",
"text": "Performance data"
},
{
"href": "https://ukgovernmentdigital.slack.com/messages/C0E1ADVPC",
"text": "Chat to us on Slack"
}
]
},
{
"title": "About Notify",
"columns": 1,
"items": [
{
"href": url_for("main.features"),
"text": "Features"
},
{
"href": url_for("main.roadmap"),
"text": "Roadmap"
},
{
"href": url_for("main.who_can_use_notify"),
"text": "Who can use Notify",
},
{
"href": url_for("main.security"),
"text": "Security"
},
{
"href": url_for("main.terms"),
"text": "Terms of use"
},
{
"href": "https://gds.blog.gov.uk/category/gov-uk-notify/",
"text": "Blog"
}
]
},
{
"title": "Pricing and payment",
"columns": 1,
"items": [
{
"href": url_for("main.pricing"),
"text": "Pricing"
},
{
"href": url_for("main.how_to_pay"),
"text": "How to pay"
}
]
},
{
"title": "Using Notify",
"columns": 1,
"items": [
{
"href": url_for("main.get_started"),
"text": "Get started"
},
{
"href": url_for("main.trial_mode_new"),
"text": "Trial mode"
},
{
"href": url_for("main.message_status"),
"text": "Delivery status"
},
{
"href": url_for("main.guidance_index"),
"text": "Guidance"
},
{
"href": url_for("main.documentation"),
"text": "API documentation"
}
]
}
],
"meta": {
"items": meta_items,
"html": meta_suffix
}
}) }}
{% endblock %}
{% block bodyEnd %}
{% block extra_javascripts %}
{% endblock %}
<!--[if gt IE 8]><!-->
<script type="text/javascript" src="{{ asset_url('javascripts/all.js') }}"></script>
<!--<![endif]-->
{% endblock %}