delayed css for pages that are not in a rush (#422)

Author: Peter Bengtsson

peterbecom/base/jinja2/base.html

@@ -148,10 +148,12 @@ <h1 class="ui header">{% block page_title %}{{ page_title }}{% endblock %}</h1>
   {% block basejs %}
   {%- if request.path == '/plog/blogitem-040601-1' %}
   {% javascript 'lyrics' %}
+  {% javascript 'delayedcss' %}
   {% else %}
   {% javascript 'base' %}
-  {% endif -%}
   {% javascript 'cssrelpreload' %}
+  {% endif -%}
+
   {% endblock %}
 
   {% block extrajs %}{% endblock %}

peterbecom/base/static/css/peterbe.css

@@ -1,3 +1,5 @@
+/*! peterbe.css */
+
 body {
   color: #333;
   background-color: #ffffff;
@@ -227,9 +229,9 @@ span.not-approved {
   color: rgba(0, 0, 0, 0.4);
   font-size: 0.875em;
 }
-.ui.comments .comment .metadata a {
+.ui.comments .comment a.metadata {
   color: rgba(0, 0, 0, 0.4);
 }
-.ui.comments .comment .metadata a:hover {
+.ui.comments .comment a.metadata:hover {
   color: rgba(0, 0, 0, 0.8);
 }

peterbecom/base/static/js/delayedcss.js

@@ -0,0 +1,15 @@
+(function() {
+  'use strict';
+
+  window.setTimeout(function() {
+    var links = document.getElementsByTagName('link');
+    var len = links.length;
+    for (var i = 0; i < len; i++) {
+      var link = links[i];
+      if (link.rel === 'preload' && link.getAttribute('media') === 'delayed') {
+        link.setAttribute('media', 'all');
+        link.rel = 'stylesheet';
+      }
+    }
+  }, 1000);
+})();

peterbecom/mincss_response.py

@@ -122,12 +122,17 @@ def mincss_html(html, abs_uri):
 
     found_link_hrefs = list(result["stylesheetContents"].keys())
 
-    # print("ABS_URI:", abs_uri)
-    template = (
-        '<link rel="preload" href="{url}" as="style" '
-        "onload=\"this.onload=null;this.rel='stylesheet'\">\n"
-        '<noscript><link rel="stylesheet" href="{url}"></noscript>'
-    )
+    if abs_uri.endswith("/plog/blogitem-040601-1"):
+        template = (
+            '<link rel="preload" href="{url}" as="style" media="delayed">\n'
+            '<noscript><link rel="stylesheet" href="{url}"></noscript>'
+        )
+    else:
+        template = (
+            '<link rel="preload" href="{url}" as="style" '
+            "onload=\"this.onload=null;this.rel='stylesheet'\">\n"
+            '<noscript><link rel="stylesheet" href="{url}"></noscript>'
+        )
 
     def equal_uris(uri1, uri2):
         # If any one of them is relative, compare their paths

peterbecom/plog/jinja2/plog/post.html

@@ -88,7 +88,6 @@ <h4><a href="{{ post.url }}">{{ post.url }}</a></h4>
 
 {% block content %}
 
-<!-- request.path="{{request.path}}" -->
 {% if request.path != '/plog/blogitem-040601-1' %}
 <div class="bsa-cpc"></div>
 {% endif %}

peterbecom/settings/bundles.py

@@ -97,6 +97,11 @@
         "output_filename": "js/cssrelpreload.min.js",
         "extra_context": {"async": True},
     },
+    "delayedcss": {
+        "source_filenames": ("js/delayedcss.js",),
+        "output_filename": "js/delayedcss.min.js",
+        "extra_context": {"defer": True},
+    },
     # 'warmup_songsearch': {
     #     'source_filenames': (
     #         'plog/js/warmup-songsearch.js',