Web performance tweaks

(See upcoming PR for details)
bensteinberg · May 27, 2022 · c871e8b · c871e8b
1 parent 75ab20d
commit c871e8b
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ settings.py
 __pycache__
 .vagrant/
 .virtualenvs/
+.DS_Store
 
 db.sqlite3
 celerybeat-schedule.db

diff --git a/capstone/capweb/templates/gallery/section_entries.html b/capstone/capweb/templates/gallery/section_entries.html
@@ -11,18 +11,18 @@
            title="{{ entry.title }} homepage"
            id="{{ entry.title|slugify }}"
            target="_blank">
-          <img class="gallery-thumbnail" alt="" src="{% if entry.image %}{{ entry.image.url }}{% else %}{% static 'img/gallery-default.jpg' %}{% endif %}">
+          <img class="gallery-thumbnail" loading="lazy" alt="" src="{% if entry.image %}{{ entry.image.url }}{% else %}{% static 'img/gallery-default.jpg' %}{% endif %}">
         </a>
       {% elif entry.repo_link %}
         <a href="{{ entry.repo_link }}"
            aria-label="{{ entry.title }} repository"
            title="{{ entry.title }} repository"
            id="{{ entry.title|slugify }}"
            target="_blank">
-          <img class="gallery-thumbnail" alt="" src="{% if entry.image %}{{ entry.image.url }}{% else %}{% static 'img/gallery-default.jpg' %}{% endif %}">
+          <img class="gallery-thumbnail" loading="lazy" alt="" src="{% if entry.image %}{{ entry.image.url }}{% else %}{% static 'img/gallery-default.jpg' %}{% endif %}">
         </a>
       {% else %}
-        <img class="gallery-thumbnail" alt="" src="{% if entry.image %}{{ entry.image.url }}{% else %}{% static 'img/gallery-default.jpg' %}{% endif %}">
+        <img class="gallery-thumbnail" loading="lazy" alt="" src="{% if entry.image %}{{ entry.image.url }}{% else %}{% static 'img/gallery-default.jpg' %}{% endif %}">
       {% endif %}
 
     </div>

diff --git a/capstone/capweb/templates/index.html b/capstone/capweb/templates/index.html
@@ -26,7 +26,9 @@
   <div class="main-content bg-black">
 
     <!-- START MAP -->
-    <div id="app"></div>
+    <div class="map-section-layout-shift-buffer">
+      <div id="app"></div>
+    </div>
     <!-- END MAP -->
     <!-- START DIVE-IN -->
 
@@ -172,12 +174,14 @@ <h2 id="section-dive-in" class="section-title p-0 pt-4 pt-md-3 pt-xl-0 mb-0 mb-m
         <div class="col-3 d-none d-lg-block pl-5 pt-4">
           <div class="boxcontainer image-boxcontainer mb-3">
             <img class="boxcontainer-img"
+                 loading="lazy"
                  alt="a technician holding disbound pages from a case reporter in front of a high speed scanner"
                  src='{% static "img/book-scan.jpg" %}'>
             <div class="boxcontainer-footer item-credit mt-2">Image: Brooks Kraft/Harvard Law School</div>
           </div>
           <div class="boxcontainer image-boxcontainer ">
             <img class="boxcontainer-img"
+                 loading="lazy"
                  alt="case reporter books in in stacks"
                  src='{% static "img/reporters.jpg" %}'/>
             <div class="boxcontainer-footer item-credit mt-2">Image: Brooks Kraft/Harvard Law School</div>

diff --git a/capstone/static/css/scss/_font-face.scss b/capstone/static/css/scss/_font-face.scss
@@ -1,4 +1,5 @@
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-black-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-black-webfont.woff') format('woff');
@@ -7,6 +8,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-blackit-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-blackit-webfont.woff') format('woff');
@@ -15,6 +17,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-bold-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-bold-webfont.woff') format('woff');
@@ -23,6 +26,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-boldit-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-boldit-webfont.woff') format('woff');
@@ -32,6 +36,7 @@
 
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-extralight-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-extralight-webfont.woff') format('woff');
@@ -40,6 +45,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-extralightit-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-extralightit-webfont.woff') format('woff');
@@ -48,6 +54,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-it-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-it-webfont.woff') format('woff');
@@ -56,6 +63,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-light-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-light-webfont.woff') format('woff');
@@ -64,6 +72,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-lightit-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-lightit-webfont.woff') format('woff');
@@ -72,6 +81,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-regular-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-regular-webfont.woff') format('woff');
@@ -80,6 +90,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-semibold-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-semibold-webfont.woff') format('woff');
@@ -88,6 +99,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-serif';
   src: url('../../fonts/source-serif-pro/sourceserifpro-semiboldit-webfont.woff2') format('woff2'),
   url('../../fonts/source-serif-pro/sourceserifpro-semiboldit-webfont.woff') format('woff');
@@ -96,6 +108,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source_sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-black-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-black-webfont.woff') format('woff');
@@ -104,6 +117,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-blackit-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-blackit-webfont.woff') format('woff');
@@ -113,6 +127,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-bold-webfont.woff') format('woff');
@@ -122,6 +137,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-boldit-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-boldit-webfont.woff') format('woff');
@@ -131,6 +147,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-extralight-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-extralight-webfont.woff') format('woff');
@@ -140,6 +157,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-extralightit-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-extralightit-webfont.woff') format('woff');
@@ -149,6 +167,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-it-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-it-webfont.woff') format('woff');
@@ -158,6 +177,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-light-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-light-webfont.woff') format('woff');
@@ -166,6 +186,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-lightit-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-lightit-webfont.woff') format('woff');
@@ -174,6 +195,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-regular-webfont.woff') format('woff');
@@ -182,6 +204,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-semibold-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-semibold-webfont.woff') format('woff');
@@ -190,6 +213,7 @@
 }
 
 @font-face {
+  font-display: swap;
   font-family: 'source-sans';
   src: url('../../fonts/source-sans-pro/sourcesanspro-semiboldit-webfont.woff2') format('woff2'),
   url('../../fonts/source-sans-pro/sourcesanspro-semiboldit-webfont.woff') format('woff');
@@ -198,63 +222,71 @@
 }
 
 @font-face {
-  font-family: 'source-code';
+  font-display: swap;
+  font-family:  'source-code';
   src: url('../../fonts/source-code-pro/sourcecodepro-it-webfont.woff2') format('woff2'),
   url('../../fonts/source-code-pro/sourcecodepro-it-webfont.woff') format('woff');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
-  font-family: 'source-code';
+  font-display: swap;
+  font-family:  'source-code';
   src: url('../../fonts/source-code-pro/sourcecodepro-light-webfont.woff2') format('woff2'),
   url('../../fonts/source-code-pro/sourcecodepro-light-webfont.woff') format('woff');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'source-code';
+  font-display: swap;
+  font-family:  'source-code';
   src: url('../../fonts/source-code-pro/sourcecodepro-lightit-webfont.woff2') format('woff2'),
   url('../../fonts/source-code-pro/sourcecodepro-lightit-webfont.woff') format('woff');
   font-weight: 300;
   font-style: italic;
 }
 
 @font-face {
-  font-family: 'source-code';
+  font-display: swap;
+  font-family:  'source-code';
   src: url('../../fonts/source-code-pro/sourcecodepro-medium-webfont.woff2') format('woff2'),
   url('../../fonts/source-code-pro/sourcecodepro-medium-webfont.woff') format('woff');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'source-code';
+  font-display: swap;
+  font-family:  'source-code';
   src: url('../../fonts/source-code-pro/sourcecodepro-mediumit-webfont.woff2') format('woff2'),
   url('../../fonts/source-code-pro/sourcecodepro-mediumit-webfont.woff') format('woff');
   font-weight: 500;
   font-style: italic;
 }
 
 @font-face {
-  font-family: 'source-code';
+  font-display: swap;
+  font-family:  'source-code';
   src: url('../../fonts/source-code-pro/sourcecodepro-regular-webfont.woff2') format('woff2'),
   url('../../fonts/source-code-pro/sourcecodepro-regular-webfont.woff') format('woff');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'source-code';
+  font-display: swap;
+  font-family:  'source-code';
   src: url('../../fonts/source-code-pro/sourcecodepro-semibold-webfont.woff2') format('woff2'),
   url('../../fonts/source-code-pro/sourcecodepro-semibold-webfont.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'source-code';
+  font-display: swap;
+  font-family:  'source-code';
   src: url('../../fonts/source-code-pro/sourcecodepro-semiboldit-webfont.woff2') format('woff2'),
   url('../../fonts/source-code-pro/sourcecodepro-semiboldit-webfont.woff') format('woff');
   font-weight: 600;
@@ -264,7 +296,8 @@
 
 // Libre
 @font-face {
-  font-family: 'Libre Baskerville';
+  font-display: swap;
+  font-family:  'Libre Baskerville';
   src: url('../../fonts/LibreBaskerville-Regular.woff') format('woff');
   font-weight: 300;
   font-style: normal;
@@ -273,34 +306,38 @@
 
 // Titillium
 @font-face {
-    font-family: 'titillium';
-    src: url('../../fonts/titilliumweb-bold-webfont.woff2') format('woff2'),
-         url('../../fonts/titilliumweb-bold-webfont.woff') format('woff');
-    font-weight: 700;
-    font-style: normal;
+  font-display: swap;
+  font-family: 'titillium';
+  src: url('../../fonts/titilliumweb-bold-webfont.woff2') format('woff2'),
+        url('../../fonts/titilliumweb-bold-webfont.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'titillium';
-    src: url('../../fonts/titilliumweb-semibold-webfont.woff2') format('woff2'),
-         url('../../fonts/titilliumweb-semibold-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
+  font-display: swap;
+  font-family: 'titillium';
+  src: url('../../fonts/titilliumweb-semibold-webfont.woff2') format('woff2'),
+        url('../../fonts/titilliumweb-semibold-webfont.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'titillium';
-    src: url('../../fonts/titilliumweb-regular-webfont.woff2') format('woff2'),
-         url('../../fonts/titilliumweb-regular-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
+  font-display: swap;
+  font-family: 'titillium';
+  src: url('../../fonts/titilliumweb-regular-webfont.woff2') format('woff2'),
+        url('../../fonts/titilliumweb-regular-webfont.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'titillium';
-    src: url('../../fonts/titilliumweb-extralight-webfont.woff2') format('woff2'),
-         url('../../fonts/titilliumweb-extralight-webfont.woff') format('woff');
-    font-weight: 200;
-    font-style: normal;
+  font-display: swap;
+  font-family: 'titillium';
+  src: url('../../fonts/titilliumweb-extralight-webfont.woff2') format('woff2'),
+        url('../../fonts/titilliumweb-extralight-webfont.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
 }