It also let us add the Content-Security-Policy header to FixMyStreet, which is a method in browsers to prevent cross-site scripting (XSS), clickjacking and other code injection attacks by specifying the valid sources for script execution.
Separate scripting and styling
When you report an issue on FixMyStreet on mobile, the map
/around page is
css() calls when setting up (or ending) the mobile view. It was
straightforward to move this CSS to a
mobile-reporting-map class and have the
(Later during this process, I also added an
only-map class to prevent the map
being scrolled until it is clicked, when the rest of the form can then be
in two files, both confusingly called
fixmystreet.js. Whilst in the future we
may want to split this up into separate files more tailored to the particular
combine these in one file, and tidy up all the setup functions into a list of
feature-based functions each called in turn on page load.
Now that I had a
mobile-reporting-map class, I wanted this class activated
as soon as possible as the page is loading, not only when the document had been
parsed. There were also a couple of site-wide variables,
page (the type of
cobrand (the branding of the site you’re
was activated, so that CSS using that class would be instantly active,
preventing a flash of style change or content.
To achieve all this, I created a
header.js file that performed the above
three tasks, setting a class on <html>, setting two variables on our
fixmystreet variable, and if we’re on a small width (using Modernizr)
and perhaps a map page, setting the appropriate classes. I then minimized and
inlined this script in the header of each page, so that we don’t have to wait
for any external script to load.
“nonce” was only added in the second version of the CSP spec, so you may note
our header also specifies
unsafe-inline. Any browser that supports version 2
will ignore this when it sees the nonce header, but it is needed in order for
the inline script to still run in any browser only supporting version 1.
In Google Page Speed Insights, with manual minification of the main JS files, this moves the front page from 68/84 to 85/92ish (filmstrip from webpagetest.org, top is live site, bottom is my dev site):
These are requests from the US: most of the initial delay is in that initial download. Now here’s a report page going from 58/77 to 85/86ish (“ish” because e.g. live site will have analytics that my dev site doesn’t):