From 68e6bec9b5647a267f239944a7be4cf9337615a7 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 8 Jan 2025 18:29:54 -0800
Subject: [PATCH] Reduce website loading times and related code cleanup

---
 .github/workflows/website.yml                 |  2 +
 website/content/_index.md                     | 25 ++++---
 website/content/about.md                      |  4 +-
 ...01-looking-back-on-2023-and-what's-next.md |  2 +-
 website/content/donate.md                     |  5 +-
 website/content/features.md                   |  2 +-
 website/content/learn/_index.md               |  2 +-
 .../learn/_unpublished/workflows/imaginate.md |  2 +-
 website/content/learn/introduction/_index.md  |  2 +-
 website/content/logo.md                       |  2 +-
 website/content/volunteer/_index.md           |  4 +-
 website/content/volunteer/guide/_index.md     |  2 +-
 .../guide/codebase-overview/_index.md         |  2 +-
 .../submitting-a-contribution.md              |  2 +-
 .../balance-text.scss}                        |  4 ++
 website/sass/base.scss                        | 11 +--
 website/static/js/carousel.js                 | 12 +++-
 website/templates/article.html                |  2 +-
 website/templates/base.html                   | 72 ++++++++++++++-----
 website/templates/blog.html                   |  2 +-
 website/templates/book.html                   |  5 +-
 website/templates/macros/replacements.html    |  2 +-
 22 files changed, 112 insertions(+), 56 deletions(-)
 rename website/{static/css/balance-text.css => sass/balance-text.scss} (59%)

diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
index 1078cf9ea2..03eda92e4a 100644
--- a/.github/workflows/website.yml
+++ b/.github/workflows/website.yml
@@ -38,6 +38,8 @@ jobs:
           git rev-parse --abbrev-ref HEAD | grep master > /dev/null || export INDEX_HTML_HEAD_INCLUSION=""
 
       - name: 🌐 Build Graphite website with Zola
+        env:
+          MODE: prod
         run: |
           cd website
           zola --config config_prod.toml build
diff --git a/website/content/_index.md b/website/content/_index.md
index 359a4cef82..1ec67278b5 100644
--- a/website/content/_index.md
+++ b/website/content/_index.md
@@ -3,8 +3,9 @@ title = "Free online vector editor & procedural design tool"
 template = "section.html"
 
 [extra]
-css_inline = ["index.css"]
-js = ["carousel.js", "youtube-embed.js", "video-autoplay.js"]
+css = ["/index.css", "/balance-text.css"]
+js = ["/js/carousel.js", "/js/youtube-embed.js", "/js/video-autoplay.js"]
+linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
 meta_description = "Open source free software. A vector graphics creativity suite with a clean, intuitive interface. Opens instantly (no signup) and runs locally in a browser. Exports SVG, PNG, JPG."
 +++
 
@@ -80,13 +81,15 @@ meta_description = "Open source free software. A vector graphics creativity suit
 <section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint>
 
 <div class="carousel-slide" data-carousel-slide>
-	<!-- Copy of last --><img src="https://static.graphite.rs/content/index/gui-mockup-nodes__7.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
-	<img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
-	<img src="https://static.graphite.rs/content/index/magazine-page-layout.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
-	<img src="https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
-	<img src="https://static.graphite.rs/content/index/gui-demo-fractal__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
 	<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__7.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
-	<!-- Copy of first --><img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
+	<!-- Above is a copy of the last -->
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" />
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/magazine-page-layout.avif" />
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires__2.avif" />
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-fractal__2.avif" />
+	<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-mockup-nodes__7.avif" />
+	<!-- Below is a copy of the first -->
+	<img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
 </div>
 
 <div class="carousel-slide torn left" data-carousel-slide-torn-left></div>
@@ -287,7 +290,7 @@ Graphite is the first and only graphic design package built for procedural editi
 <div class="diptych red-dress">
 
 <div class="block video-background">
-	<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
+	<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play preload="none" poster="https://static.graphite.rs/content/index/procedural-demo-red-dress-poster.avif">
 		<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.webm" type="video/webm" />
 		<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.mp4" type="video/mp4" />
 	</video>
@@ -323,7 +326,7 @@ Blend across color schemes. Morph shapes before they're scattered around the can
 </div>
 
 <div class="block video-background">
-	<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
+	<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play preload="none" poster="https://static.graphite.rs/content/index/procedural-demo-leaves-poster.avif">
 		<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.webm" type="video/webm" />
 		<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.mp4" type="video/mp4" />
 	</video>
@@ -454,7 +457,7 @@ Get started with Graphite by following along to a hands-on quickstart tutorial.
 <div class="block video-container">
 <div>
 <div class="video-embed aspect-16x9">
-	<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
+	<img data-video-embed="7gjUhl_3X10" loading="lazy" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
 </div>
 </div>
 </div>
diff --git a/website/content/about.md b/website/content/about.md
index d885f07042..5684efb629 100644
--- a/website/content/about.md
+++ b/website/content/about.md
@@ -2,8 +2,8 @@
 title = "About Graphite"
 
 [extra]
-css_inline = ["about.css"]
-css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+css = ["/about.css"]
+linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
 +++
 
 <section>
diff --git a/website/content/blog/2024-01-01-looking-back-on-2023-and-what's-next.md b/website/content/blog/2024-01-01-looking-back-on-2023-and-what's-next.md
index 7be5618a3b..8397096dbc 100644
--- a/website/content/blog/2024-01-01-looking-back-on-2023-and-what's-next.md
+++ b/website/content/blog/2024-01-01-looking-back-on-2023-and-what's-next.md
@@ -10,7 +10,7 @@ summary = "Looking back on 2023, we reflect on our significant achievements and
 reddit = "https://www.reddit.com/r/graphite/comments/18xmoti/blog_post_looking_back_on_2023_and_whats_next/"
 twitter = "https://twitter.com/GraphiteEditor/status/1742576805532577937"
 
-js = ["youtube-embed.js"]
+js = ["/js/youtube-embed.js"]
 +++
 
 The new year is here, and with so many accomplishments to share from the past twelve months, let's revisit the highlights of 2023 for the Graphite project. Now that winter has entered, let's swing back to the spring, summarize the summer, and follow this fall's noteworthy developments that brought another year of fruitful progress to Graphite's mission of re-envisioning artists' 2D creative workflows with the best free software we can build for the open source community. This past year as a team, we all got closer— to one another from continents apart; to visiting and connecting with our industry peers; and to reaching exciting new development milestones.
diff --git a/website/content/donate.md b/website/content/donate.md
index f408622a74..c50c622d98 100644
--- a/website/content/donate.md
+++ b/website/content/donate.md
@@ -2,8 +2,9 @@
 title = "Donate"
 
 [extra]
-# css_inline = ["donate.css"]
-# js = ["fundraising.js"]
+# css = ["/donate.css", "/balance-text.css"]
+# js = ["/js/fundraising.js"]
+# linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
 +++
 
 <section>
diff --git a/website/content/features.md b/website/content/features.md
index 4763fd8441..c70a036e58 100644
--- a/website/content/features.md
+++ b/website/content/features.md
@@ -2,7 +2,7 @@
 title = "Graphite features"
 
 [extra]
-css_inline = ["features.css"]
+css = ["/features.css"]
 +++
 
 <section>
diff --git a/website/content/learn/_index.md b/website/content/learn/_index.md
index ab0f8fc47b..ab80d056b5 100644
--- a/website/content/learn/_index.md
+++ b/website/content/learn/_index.md
@@ -5,7 +5,7 @@ page_template = "book.html"
 
 [extra]
 book = true
-js = ["youtube-embed.js"]
+js = ["/js/youtube-embed.js"]
 +++
 
 Welcome to the Graphite user manual. Keep reading to to learn how the software can help bring your 2D creative ideas to life.
diff --git a/website/content/learn/_unpublished/workflows/imaginate.md b/website/content/learn/_unpublished/workflows/imaginate.md
index b3cefce68c..2473d052e5 100644
--- a/website/content/learn/_unpublished/workflows/imaginate.md
+++ b/website/content/learn/_unpublished/workflows/imaginate.md
@@ -3,7 +3,7 @@ title = "Imaginate"
 
 [extra]
 order = 2
-js = ["carousel.js"]
+js = ["/js/carousel.js"]
 +++
 
 Imaginate is a useful tool at every stage in the artistic process. Early on it provides inspiration for styles, color palettes, subjects, and composition. It lets you quickly test ideas and explore artistic directions. It's also a useful way to generate placeholder images and content for kit bashing.
diff --git a/website/content/learn/introduction/_index.md b/website/content/learn/introduction/_index.md
index b5b15a2f70..b331b168fa 100644
--- a/website/content/learn/introduction/_index.md
+++ b/website/content/learn/introduction/_index.md
@@ -5,7 +5,7 @@ page_template = "book.html"
 
 [extra]
 order = 1
-js = ["youtube-embed.js"]
+js = ["/js/youtube-embed.js"]
 +++
 
 <!-- Before taking the time to read the coming chapters, let's build some context by jumping straight into a small project that you can follow along with. That way you will have a mental framework for the topics explained in the rest of this manual. -->
diff --git a/website/content/logo.md b/website/content/logo.md
index 1938e60571..92982cb406 100644
--- a/website/content/logo.md
+++ b/website/content/logo.md
@@ -2,7 +2,7 @@
 title = "Graphite logo"
 
 [extra]
-css_inline = ["logo.css"]
+css = ["/logo.css"]
 +++
 
 <section class="reading-material">
diff --git a/website/content/volunteer/_index.md b/website/content/volunteer/_index.md
index d526ed856b..ea39c641c6 100644
--- a/website/content/volunteer/_index.md
+++ b/website/content/volunteer/_index.md
@@ -2,8 +2,8 @@
 title = "Volunteer"
 
 [extra]
-css_inline = ["volunteer.css"]
-css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+css = ["/volunteer.css"]
+linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
 +++
 
 <section>
diff --git a/website/content/volunteer/guide/_index.md b/website/content/volunteer/guide/_index.md
index 0004fa6c94..737049e636 100644
--- a/website/content/volunteer/guide/_index.md
+++ b/website/content/volunteer/guide/_index.md
@@ -6,7 +6,7 @@ aliases = ["/contribute"]
 
 [extra]
 book = true
-css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
 +++
 
 Welcome, potential contributor! We're excited to have you join the Graphite project and it's our goal to make the process as smooth as possible. This guide will serve as your library of knowledge to help you get started contributing to the project. If you find any information missing or unclear, please let us know through Discord or submit a pull request to help document the process for future contributors.
diff --git a/website/content/volunteer/guide/codebase-overview/_index.md b/website/content/volunteer/guide/codebase-overview/_index.md
index d22f45cb88..5b823d9848 100644
--- a/website/content/volunteer/guide/codebase-overview/_index.md
+++ b/website/content/volunteer/guide/codebase-overview/_index.md
@@ -5,7 +5,7 @@ page_template = "book.html"
 
 [extra]
 order = 2 # Chapter number
-js = ["youtube-embed.js"]
+js = ["/js/youtube-embed.js"]
 +++
 
 The best introduction for getting up-to-speed with Graphite contribution comes from watching this webcast recording. Before asking questions in Discord, please watch the full video because it gives a comprehensive overview of most things you will need to know.
diff --git a/website/content/volunteer/guide/starting-a-task/submitting-a-contribution.md b/website/content/volunteer/guide/starting-a-task/submitting-a-contribution.md
index 4cec310b80..e6293bf2b1 100644
--- a/website/content/volunteer/guide/starting-a-task/submitting-a-contribution.md
+++ b/website/content/volunteer/guide/starting-a-task/submitting-a-contribution.md
@@ -3,7 +3,7 @@ title = "Submitting a contribution"
 
 [extra]
 order = 3 # Page number after chapter intro
-css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
 +++
 
 Collaboration is a key part of real-world software engineering. Graphite follows some basic procedures to keep the process smooth and efficient. You will want to familiarize yourself with these guidelines to save yourself and Graphite maintainers time and confusion.
diff --git a/website/static/css/balance-text.css b/website/sass/balance-text.scss
similarity index 59%
rename from website/static/css/balance-text.css
rename to website/sass/balance-text.scss
index b718da19bf..263f04dc8b 100644
--- a/website/static/css/balance-text.css
+++ b/website/sass/balance-text.scss
@@ -1,3 +1,7 @@
+// CSS component of the JS text balancer script.
+// This must be loaded as an inline stylesheet in the head of the
+// document to avoid the possibility of a visible layout shift.
+
 .balance-text {
 	visibility: hidden;
 }
diff --git a/website/sass/base.scss b/website/sass/base.scss
index 79e6a15e5a..f16f45ff1d 100644
--- a/website/sass/base.scss
+++ b/website/sass/base.scss
@@ -693,7 +693,7 @@ hr,
 }
 
 // Using this requires adding this line to the page's frontmatter:
-// css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+// linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
 .emoji {
 	font-family: "Noto Color Emoji", sans-serif;
 	font-style: normal;
@@ -1175,6 +1175,7 @@ h1.feature-box-header.feature-box-header {
 			display: inline-block;
 			user-select: none;
 			flex: 0 0 auto;
+			height: auto;
 			padding: 0 20px;
 
 			&:first-child,
@@ -1215,8 +1216,8 @@ h1.feature-box-header.feature-box-header {
 		&.left {
 			padding-left: 160px;
 			margin-left: -160px;
-			-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-left.png"); // TODO: Switch PNG to AVIF when Edge support has rolled out
-			mask-image: url("https://static.graphite.rs/textures/torn-edge-left.png");
+			-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-left__2.png");
+			mask-image: url("https://static.graphite.rs/textures/torn-edge-left__2.png");
 			-webkit-mask-position: top left;
 			mask-position: top left;
 		}
@@ -1224,8 +1225,8 @@ h1.feature-box-header.feature-box-header {
 		&.right {
 			padding-right: 160px;
 			margin-right: -160px;
-			-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-right.png"); // TODO: Switch PNG to AVIF when Edge support has rolled out
-			mask-image: url("https://static.graphite.rs/textures/torn-edge-right.png");
+			-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-right__2.png");
+			mask-image: url("https://static.graphite.rs/textures/torn-edge-right__2.png");
 			-webkit-mask-position: top right;
 			mask-position: top right;
 		}
diff --git a/website/static/js/carousel.js b/website/static/js/carousel.js
index fec94fd2db..5eba157f3d 100644
--- a/website/static/js/carousel.js
+++ b/website/static/js/carousel.js
@@ -124,6 +124,16 @@ function slideTo(carousel, index, smooth) {
 		carousel.descriptions[index].classList.add("active");
 	}
 
+	// Account for the first image being the faded out last image
+	const offsetIndex = index + 1;
+	const slideImages = Array.from(carousel.carouselContainer.querySelectorAll("[data-carousel-slide] [data-carousel-image]"));
+	// Remove lazy loading from the adjacent images
+	slideImages[clamp(offsetIndex - 2, 0, slideImages.length - 1)].removeAttribute("loading");
+	slideImages[clamp(offsetIndex - 1, 0, slideImages.length - 1)].removeAttribute("loading");
+	slideImages[clamp(offsetIndex, 0, slideImages.length - 1)].removeAttribute("loading");
+	slideImages[clamp(offsetIndex + 1, 0, slideImages.length - 1)].removeAttribute("loading");
+	slideImages[clamp(offsetIndex + 2, 0, slideImages.length - 1)].removeAttribute("loading");
+
 	setCurrentTransform(carousel, index * -100, "%", smooth);
 }
 
@@ -283,6 +293,6 @@ function dragMove(event) {
 }
 
 function clamp(value, min, max) {
-	const m = Math; // Keep this line, it fixes a bug in Zola's minifier
+	const m = Math; // This is a workaround for a bug in Zola's minifier
 	return m.min(m.max(value, min), max);
 }
diff --git a/website/templates/article.html b/website/templates/article.html
index 5232425b4e..21966bc161 100644
--- a/website/templates/article.html
+++ b/website/templates/article.html
@@ -6,7 +6,7 @@
 {%- set meta_image = page.extra.banner_png | safe -%}
 {%- set meta_article_type = true -%}
 {%- set meta_description = page.extra.summary | default(value = page.content | striptags | safe | linebreaksbr | replace(from = "<br>", to = " ") | replace(from = "  ", to = " ") | trim | truncate(length = 200)) -%}
-{%- set css = ["article.css"] -%}
+{%- set css = ["/article.css"] -%}
 {%- endblock head -%}
 
 {%- block content -%}{%- set page = page | default(value = section) -%}
diff --git a/website/templates/base.html b/website/templates/base.html
index 230b458892..69b398bacc 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -29,27 +29,62 @@
 	{%- endblock %}
 	<link rel="preconnect" href="https://fonts.googleapis.com" />
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" />
-	<link rel="stylesheet" href="/base.css" />
-	<link rel="stylesheet" href="/syntax-highlighting.css" />
-	{%- set extra_css = page.extra.css | default(value = []) | concat(with = css | default(value = [])) -%}
-	{%- set extra_css_external = page.extra.css_external | default(value = []) | concat(with = css_external | default(value = [])) -%}
-	{% for css_path in extra_css | concat(with = extra_css_external) %}
-	<link rel="stylesheet" href="/{{ css_path | safe }}" />
+
+	{#- ON EVERY PAGE OF THE SITE: CSS AND JS TO LOAD EITHER AS A LINK OR INLINE -#}
+	{#- ======================================================================== -#}
+	{%- set global_linked_css = ["/base.css", "https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"] -%}
+	{%- set global_linked_js = [] -%}
+	{%- set global_css = [] -%}
+	{%- set global_js = ["/js/text-justification.js", "/js/navbar.js"] -%}
+
+	{#- RETRIEVE FROM TEMPLATES AND PAGES: CSS AND JS TO LOAD EITHER AS A LINK OR INLINE -#}
+	{#- ================================================================================ -#}
+	{%- set linked_css = page.extra.linked_css | default(value = []) | concat(with = linked_css | default(value = [])) -%}
+	{%- set linked_js = page.extra.linked_js | default(value = []) | concat(with = linked_js | default(value = [])) -%}
+	{%- set css = page.extra.css | default(value = []) | concat(with = css | default(value = [])) -%}
+	{%- set js = page.extra.js | default(value = []) | concat(with = js | default(value = [])) -%}
+
+	{#- COMBINE THE GLOBAL AND TEMPLATE/PAGE RESOURCE LISTS -#}
+	{#- =================================================== -#}
+	{%- set linked_css_list = linked_css | concat(with = global_linked_css) -%}
+	{%- set linked_js_list = linked_js | concat(with = global_linked_js) -%}
+	{%- set css_list = css | concat(with = global_css) -%}
+	{%- set js_list = js | concat(with = global_js) -%}
+
+	{#- CONDITIONALLY MAKE ONLY PROD BUILDS ACTUALLY INLINE THE CSS AND JS FOR CLEANLINESS -#}
+	{#- ================================================================================== -#}
+	{%- if get_env(name = "MODE", default = "dev") != "prod" -%}
+	{%- set linked_css_list = linked_css_list | concat(with = css_list) -%}
+	{%- set linked_js_list = linked_js_list | concat(with = js_list) -%}
+	{%- set css_list = [] -%}
+	{%- set js_list = [] -%}
+	{%- endif -%}
+	
+	{#- INSERT CSS LINKS -#}
+	{#- ================ -#}
+	{%- for path in linked_css_list %}
+	<link rel="stylesheet" href="{{ path | safe }}" />
 	{%- endfor %}
-	{%- set extra_css_inline = page.extra.css_inline | default(value = []) | concat(with = css_inline | default(value = [])) -%}
-	{%- set global_css_inline = ["css/balance-text.css"] %}
-	{{ "<" ~ "style>" | safe }}
-	{%- for css_inline in extra_css_inline | concat(with = global_css_inline | default(value = [])) -%}
-	{{ load_data(path = css_inline) | safe }}
+
+	{#- INSERT JS LINKS -#}
+	{#- =============== -#}
+	{%- for path in linked_js_list %}
+	<script src="{{ path | safe }}"></script>
 	{%- endfor %}
+
+	{#- INSERT INLINE CSS CODE -#}
+	{#- ====================== -#}
+	{%- for path in css_list %}
+	{{ "<" ~ "style>" | safe }}
+	{{ load_data(path = path) | safe }}
 	{{ "</" ~ "style>" | safe }}
-	{% set global_js = ["text-justification.js", "navbar.js"] -%}
-	{%- set extra_js = global_js | concat(with = page.extra.js | default(value = []) | concat(with = js | default(value = []))) -%}
-	{% for js_path in extra_js %}
-	{% set script_path = "js/" ~ js_path -%}
+	{%- endfor %}
+
+	{#- INSERT INLINE JS CODE -#}
+	{#- ===================== -#}
+	{%- for path in js_list %}
 	{{ "<" ~ "script>" | safe }}
-	{{ load_data(path = script_path) | safe }}
+	{{ load_data(path = path) | safe }}
 	{{ "</" ~ "script>" | safe }}
 	{%- endfor %}
 	{{- get_env(name = "INDEX_HTML_HEAD_INCLUSION", default = "") | safe }}
@@ -87,7 +122,7 @@
 		</main>
 		<footer>
 			<hr />
-			<nav class="balance-text require-polyfill">
+			<nav>
 				<a href="https://github.com/GraphiteEditor/Graphite" class="link not-uppercase">GitHub</a>
 				<a href="/license" class="link not-uppercase">License</a>
 				<a href="/logo" class="link not-uppercase">Logo</a>
@@ -97,6 +132,5 @@
 			<span>Copyright &copy; {{ now() | date(format = "%Y") }} Graphite Labs, LLC</span>
 		</footer>
 	</div>
-	<script src="https://static.graphite.rs/text-balancer/text-balancer.js"></script>
 </body>
 </html>
diff --git a/website/templates/blog.html b/website/templates/blog.html
index ac24d86b0b..438584a0eb 100644
--- a/website/templates/blog.html
+++ b/website/templates/blog.html
@@ -3,7 +3,7 @@
 {%- block head -%}{%- set page = page | default(value = section) -%}
 {%- set title = page.title -%}
 {%- set meta_title = "Graphite Blog" -%}
-{%- set css = ["blog.css"] -%}
+{%- set css = ["/blog.css"] -%}
 {%- endblock head -%}
 
 {%- block content -%}{%- set page = page | default(value = section) -%}
diff --git a/website/templates/book.html b/website/templates/book.html
index f17529b7ea..b438ed7aad 100644
--- a/website/templates/book.html
+++ b/website/templates/book.html
@@ -4,8 +4,9 @@
 {%- set title = page.title -%}
 {%- set meta_article_type = true -%}
 {%- set meta_description = page.extra.summary | default(value = page.content | striptags | safe | linebreaksbr | replace(from = "<br>", to = " ") | replace(from = "  ", to = " ") | trim | truncate(length = 200)) -%}
-{%- set css = ["book.css"] -%}
-{%- set js = ["book.js"] -%}
+{%- set linked_css = ["/syntax-highlighting.css"] -%}
+{%- set css = ["/book.css"] -%}
+{%- set js = ["/js/book.js"] -%}
 {%- endblock head -%}
 
 {%- block content -%}{%- set page = page | default(value = section) -%}
diff --git a/website/templates/macros/replacements.html b/website/templates/macros/replacements.html
index 50de67e9a1..b3b000b936 100644
--- a/website/templates/macros/replacements.html
+++ b/website/templates/macros/replacements.html
@@ -3,7 +3,7 @@
 {% set latest = articles.pages | slice(end = count) %}
 {% for article in latest %}
 <div class="block">
-	<a class="banner" href="{{ article.permalink | safe }}"><img src="{{ article.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Article cover image" /></a>
+	<a class="banner" href="{{ article.permalink | safe }}"><img loading="lazy" src="{{ article.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Article cover image" /></a>
 	<h2 class="headline"><a href="{{ article.permalink | safe }}">{{ article.title }}</a></h2>
 	<div class="summary">
 	<p>{{ article.summary | striptags | safe }}</p>