Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reorganise HEAD to load CSS as quickly as possible #1039

Merged
merged 2 commits into from
Jul 16, 2020
Merged

Reorganise HEAD to load CSS as quickly as possible #1039

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b3b440
Reorganise HEAD to load CSS as quickly as possible
tunetheweb Jul 15, 2020
e4e0b55
Remove unnecessary nonce
tunetheweb Jul 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Reorganise HEAD to load CSS as quickly as possible
  • Loading branch information
@tunetheweb
tunetheweb committed Jul 15, 2020
commit 8b3b4404fbffe01e040c024c0068901b97a5da49
80 changes: 42 additions & 38 deletions src/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,51 +3,32 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block head %}
<title>{% block title %}The Web Almanac{% endblock %}</title>
<link rel="stylesheet" href="/static/css/normalize.css?v=20200630133215">
{% block styles %}{% endblock %}
<link rel="stylesheet" media="print" href="/static/css/print.css?v=20200630133215">
{% endblock %}
<link rel="shortcut icon" href="/static/images/favicon.ico">
<link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-22381566-3" nonce="{{ csp_nonce() }}"></script>
<script nonce="{{ csp_nonce() }}">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-22381566-3', {
'link_attribution': true
});
</script>
{%- if request.url_root != "https://almanac.httparchive.org/" %}
<meta name="robots" content="noindex">
{%- endif %}
{% block meta %}
<meta property="og:title" content="{{ self.title() }}">
<meta property="og:image" content="/static/images/ha.png">
{% endblock %}
{% block head %}
<title>{% block title %}The Web Almanac{% endblock %}</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-22381566-3" nonce="{{ csp_nonce() }}"></script>
<script async src="/static/js/web-vitals.js" ></script>
<script nonce="{{ csp_nonce() }}">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-22381566-3', {
'link_attribution': true
});

function sendWebVitalsGAEvents(metric) {
gtag('event', metric.name, {
event_category: 'Web Vitals',
value: Math.round(metric.name === 'CLS' ? metric.delta * 1000 : metric.delta),
event_label: metric.id,
non_interaction: true,
});
}

window.addEventListener('load', function() {
webVitals.getFCP(sendWebVitalsGAEvents);
webVitals.getLCP(sendWebVitalsGAEvents);
webVitals.getCLS(sendWebVitalsGAEvents);
webVitals.getTTFB(sendWebVitalsGAEvents);
webVitals.getFID(sendWebVitalsGAEvents);
});

</script>
<link rel="shortcut icon" href="/static/images/favicon.ico">
<link rel="apple-touch-icon" href="/static/images/apple-touch-icon.png">
<link rel="stylesheet" href="/static/css/normalize.css?v=20200630133215">
{% block styles %}{% endblock %}
<link rel="stylesheet" media="print" href="/static/css/print.css?v=20200630133215">
{% endblock %}
<link rel="canonical" href="https://almanac.httparchive.org{{ url_for(request.endpoint, **get_view_args(lang=language.lang_code)) }}" />
{% if supported_languages | length > 1%}
{% for l in supported_languages %}
Expand Down Expand Up @@ -92,5 +73,28 @@
</symbol>
</svg>
{% block content %}{% endblock %}

{% block bodyend %}
<script defer src="/static/js/web-vitals.js" ></script>
<script nonce="{{ csp_nonce() }}">
function sendWebVitalsGAEvents(metric) {
gtag('event', metric.name, {
event_category: 'Web Vitals',
value: Math.round(metric.name === 'CLS' ? metric.delta * 1000 : metric.delta),
event_label: metric.id,
non_interaction: true,
});
}

window.addEventListener('load', function() {
webVitals.getFCP(sendWebVitalsGAEvents);
webVitals.getLCP(sendWebVitalsGAEvents);
webVitals.getCLS(sendWebVitalsGAEvents);
webVitals.getTTFB(sendWebVitalsGAEvents);
webVitals.getFID(sendWebVitalsGAEvents);
});

</script>
{% endblock %}
</body>
</html>