Reduce website loading times and related code cleanup

.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

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>

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>

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.

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>

website/content/features.md

@@ -2,7 +2,7 @@
 title = "Graphite features"
 
 [extra]
-css_inline = ["features.css"]
+css = ["/features.css"]
 +++
 
 <section>

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.

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.

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. -->

website/content/logo.md

@@ -2,7 +2,7 @@
 title = "Graphite logo"
 
 [extra]
-css_inline = ["logo.css"]
+css = ["/logo.css"]
 +++
 
 <section class="reading-material">

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>

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.

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.

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.

website/static/css/balance-text.css → 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;
 }

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,17 +1216,17 @@ 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;
 		}
 
 		&.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;
 		}

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);
 }

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) -%}

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>

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) -%}