[UK] Possible inlining critical CSS on front page.

4 files changed, 40 insertions, 2 deletions

diff --git a/.gitignore b/.gitignore
index 2c2171260..e5a3f23c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,7 +19,7 @@ FixMyBarangay.po
 /web/css/main.css
 /web/cobrands/*/*.css
 /web/cobrands/*/*.css.map
-*.auto.min.js
+*.auto.*
 
 # Photo upload cache
 /web/photo
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb8783ce4..aca47a305 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@
       - Report field pre-filling for inspectors configurable #1854
     - UK:
         - Use SVG logo, inlined on front page. #1887
+        - Inline critical CSS on front page.
 
 * v2.2 (13th September 2017)
     - New features:
diff --git a/templates/web/base/index.html b/templates/web/base/index.html
index 8cb127e6a..92c6b1eed 100644
--- a/templates/web/base/index.html
+++ b/templates/web/base/index.html
@@ -1,7 +1,7 @@
 [% PROCESS 'front/javascript.html' %]
 
 [% pre_container_extra = PROCESS 'around/postcode_form.html' %]
-[% INCLUDE 'header.html', title = '', bodyclass = 'frontpage fullwidthpage' %]
+[% INCLUDE 'header.html', title = '', bodyclass = 'frontpage fullwidthpage' inline_css = 1 %]
 
 [% IF error %]
     <p class="form-error">[% error %]</p>
diff --git a/templates/web/fixmystreet.com/header/css.html b/templates/web/fixmystreet.com/header/css.html
new file mode 100644
index 000000000..d434beec8
--- /dev/null
+++ b/templates/web/fixmystreet.com/header/css.html
@@ -0,0 +1,37 @@
+[% SET base_css = version('/cobrands/' _ c.cobrand.asset_moniker _ '/base.css') %]
+[% SET layout_css = version('/cobrands/' _ c.cobrand.asset_moniker _ '/layout.css') %]
+[% SET ol_css = version('/vendor/OpenLayers/theme/default/style.css') %]
+
+[% TRY %][% critical = INSERT "header/critical.auto.min.css" %][% CATCH file %][% END %]
+
+[% IF inline_css AND critical %]
+<style id="critical">
+[% critical %]
+</style>
+
+<noscript><link rel="stylesheet" href="[% base_css %]"></noscript>
+<link rel="stylesheet" href="[% base_css %]" media="(min-width:48em)">
+<link rel="prefetch" href="[% ol_css %]" as="style">
+<link id="preload_base_css" rel="preload" href="[% base_css %]" as="style">
+<script nonce="[% csp_nonce %]">
+/* If browser *does* support preload, use stylesheets when loaded */
+document.getElementById('preload_base_css').onload = function(){this.rel='stylesheet'};
+/* Create link elements with JS because we can't use inline onload */
+// (function(d){var c=d.getElementById('critical');function a(p){var l=d.createElement("link");l.rel="preload";l.href=p;l.as="style";l.onload=function(){this.rel='stylesheet'};c.parentNode.insertBefore(l,c)}
+// a("[% base_css %]");
+// })(document);
+/*! loadCSS & rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
+(function(a){var b=function(b,h,e){function c(a){if(f.body)return a();setTimeout(function(){c(a)})}function k(){d.addEventListener&&d.removeEventListener("load",k);d.media=e||"all"}var f=a.document,d=f.createElement("link");var p=f.styleSheets;d.rel="stylesheet";d.href=b;d.media="only x";c(function(){h.parentNode.insertBefore(d,h)});var l=function(a){for(var b=d.href,c=p.length;c--;)if(p[c].href===
+b)return a();setTimeout(function(){l(a)})};d.addEventListener&&d.addEventListener("load",k);l(k)};a.loadCSS=b})(this);
+(function(a){var b={};b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}};b.poly=function(){for(var b=a.document.getElementsByTagName("link"),e=0;e<b.length;e++){var c=b[e];"preload"===c.rel&&"style"===c.getAttribute("as")&&(a.loadCSS(c.href,c,c.getAttribute("media")),c.rel=null)}};if(!b.support()){b.poly()}})(this);
+</script>
+[% ELSE %]
+<link rel="stylesheet" href="[% ol_css %]">
+<link rel="stylesheet" href="[% base_css %]">
+[% END %]
+<link rel="stylesheet" href="[% layout_css %]" media="screen and (min-width:48em)">
+<!--[if (lt IE 9) & (!IEMobile)]>
+    <link rel="stylesheet" href="[% layout_css %]">
+<![endif]-->
+
+[% extra_css %]