diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
index 1078cf9e..03eda92e 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 359a4cef..1ec67278 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 d885f070..5684efb6 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 7be5618a..8397096d 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 f408622a..c50c622d 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 4763fd84..c70a036e 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 ab0f8fc4..ab80d056 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 b3cefce6..2473d052 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 b5b15a2f..b331b168 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 1938e605..92982cb4 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 d526ed85..ea39c641 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 0004fa6c..737049e6 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 d22f45cb..5b823d98 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 4cec310b..e6293bf2 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 b718da19..263f04dc 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 79e6a15e..f16f45ff 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 fec94fd2..5eba157f 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 5232425b..21966bc1 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 230b4588..69b398ba 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"] %}
+
+	{#- 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 }}
-	{%- for css_inline in extra_css_inline | concat(with = global_css_inline | default(value = [])) -%}
-	{{ load_data(path = css_inline) | safe }}
-	{%- endfor %}
+	{{ 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 ac24d86b..438584a0 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 f17529b7..b438ed7a 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 50de67e9..b3b000b9 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>