1426414 - Send preload headers for webfonts

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: General, defect)

Description

[maggus.staab]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0
Build ID: 20171220121833

Steps to reproduce:

as suggested in https://bugzilla.mozilla.org/show_bug.cgi?id=1426383#c2 we should send http preload headers for the used fonts to speedup the initial render

mstaab@mst16:~$ curl -I https://bugzilla-dev.allizom.org/
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: web5.stage.bugs.scl3.mozilla.com
Vary: Accept-Encoding
Cache-Control: max-age=60
Content-Type: text/html; charset=UTF-8
Strict-transport-security: max-age=31536000; includeSubDomains
Content-security-policy: default-src 'self'; child-src 'self'; img-src 'self' https://secure.gravatar.com https://www.google-analytics.com; object-src 'none'; script-src 'self' https://www.google-analytics.com; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'; form-action 'self' https://www.google.com/search https://github.com/login/oauth/authorize https://github.com/login
Date: Wed, 20 Dec 2017 16:56:00 GMT
X-xss-protection: 1; mode=block
Transfer-Encoding: chunked
X-content-type-options: nosniff
Connection: Keep-Alive
Set-Cookie: Bugzilla_login_request_cookie=Qonbirg9Aj; path=/; secure; HttpOnly
Set-Cookie: github_secret=foHVjF6vBuqlfZ7J; path=/; secure; HttpOnly
X-frame-options: SAMEORIGIN
X-Cache-Info: caching

* Should contain preload headers for all used fonts (WOFF/WOFF2 files)

Comment 1

[maggus.staab]

I would like to work on this, if you give me a hint where the corresponding change should be done.

Comment 2

[maggus.staab]

I guess we need to generate a `<link preload>` markup instead of a http-Link header via htaccess as we dont know the final url (which contains version numbers of the used assets)?

example url https://bugzilla.mozilla.org/static/v20171220.2/skins/standard/fira/FiraSans-Regular.woff

Comment 3

[Dylan Hardison [:dylan] (he/him)]

You can add a link header here: https://github.com/mozilla-bteam/bmo/blob/master/Bugzilla/CGI.pm#L515

Something like (untested):

my @fonts = (
    "skins/standard/fira/FiraSans-Regular.woff",
    # add more fonts
);
$headers{'-link'} = join(", ", map { sprintf('</static/v%s/%s; rel="preload"; as="font";', BUGZILLA->VERSION, $_) } @fonts);


You'll also want to check if the request is a webpage or an API, I think you can check the value of Bugzilla->usage_mode for this.

Comment 4

[Dylan Hardison [:dylan] (he/him)]

Rather:

$headers{'-link'} = join(", ", map { sprintf('</static/v%s/%s>; rel="preload"; as="font";', BUGZILLA->VERSION, $_) } @fonts);

Comment 5

[maggus.staab]

just sent a pull request on https://github.com/mozilla-bteam/bmo/pull/346.

Comment 6

[Bug Butler]

Attachment: github pull request

Comment 7

[maggus.staab]

Fix merged.