Optimize CSS Delivery

Есть стандартная задача - оптимизировать загрузку CSS.

Есть ужатый (/static/CACHE/css/1f37a94c2ab5.css) и есть пару шрифтов, которые загружаются извне.

Со шрифтами я решил так:

<noscript id="deferred-styles">
<link type="text/css" rel="stylesheet" href="{% static 'css/pe-icon-7-stroke.css' %}">
<link type="text/css" rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">    
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico" >
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700">
</noscript>

и такой скрипт:

<script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>

Но проблему это не решило. PageSpeed Insights ругается на ужатый файл, т.к. он не обрабатывается этим скриптом.

Но если я засуну и ужатый CSS в <noscript></noscript>, то ругаться будет на все CSS подключения, и при этом есть явная проблема с отрисовкой стилей - сперва загружается белая html страница без стилей, а затем происходит отрисовка.

Подскажите, как это решить правильно?

Заранее спасибо.