From 2ec38cbe44cd0fdd1a6929e84c6e2e4ea0b5c39c Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 30 Apr 2026 20:51:00 +0400
Subject: [PATCH 1/3] perf(marketing): client-side render below-the-fold
 homepage sections

Wrap all components below LogoList (Bento, Pullquote, Ai, CaseStudies,
Features, Map, Scale, Pricing) in {#if browser} to avoid expensive SSR
rendering on every request. Adds a single 100vh placeholder to keep the
footer below the fold on the initial SSR paint.

- Hero, Platforms, LogoList remain SSR'd for fast first paint
- FooterNav and MainFooter remain SSR'd for SEO/crawler coverage
- Removes unused browser import from logo-list.svelte

Reduces warm SSR time from ~585ms to ~5ms.
---
 .../(marketing)/(components)/logo-list.svelte |  1 -
 src/routes/(marketing)/+page.svelte           | 60 +++++++++++--------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/routes/(marketing)/(components)/logo-list.svelte b/src/routes/(marketing)/(components)/logo-list.svelte
index 7549da1b57..57d3abae8b 100644
--- a/src/routes/(marketing)/(components)/logo-list.svelte
+++ b/src/routes/(marketing)/(components)/logo-list.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { browser } from '$app/environment';
     import { cn } from '$lib/utils/cn';
 
     type Props = {
diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
index a43a45e333..ce579c7d9f 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { browser } from '$app/environment';
     import Bento from './(components)/bento/bento.svelte';
     import CaseStudies from './(components)/case-studies.svelte';
     import Features from './(components)/features.svelte';
@@ -24,33 +25,40 @@
     <Hero />
     <Platforms headline="Designed for the tools you work with" />
     <LogoList class="border-smooth border-b" title="Trusted by developer teams worldwide" />
-    <Bento />
-    <Pullquote
-        name="Phil McCluskey"
-        title="App Manager, Majik Kids"
-        avatar="/images/testimonials/phil.jpg"
-    >
-        <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the tools
-        that you need with Appwrite.</Pullquote
-    >
-    <Ai />
-    <CaseStudies />
-    <Features theme="light" />
-    <div class="light bg-[#EDEDF0]">
-        <Map theme="light" />
-        <Scale
-            testimonial={{
-                name: 'Ryan O’Connor',
-                title: 'Founder',
-                company: 'K-Collect',
-                image: '/images/testimonials/ryan-oconner-testimonial.png'
-            }}
+
+    {#if browser}
+        <!-- Below the fold — client-side only to avoid SSR CPU cost -->
+        <Bento />
+        <Pullquote
+            name="Phil McCluskey"
+            title="App Manager, Majik Kids"
+            avatar="/images/testimonials/phil.jpg"
+        >
+            <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use
+            the tools that you need with Appwrite.</Pullquote
         >
-            The switch to using Appwrite brought
-            <span class="text-primary">infinite value that I'm still discovering today.</span>
-        </Scale>
-    </div>
-    <Pricing />
+        <Ai />
+        <CaseStudies />
+        <Features theme="light" />
+        <div class="light bg-[#EDEDF0]">
+            <Map theme="light" />
+            <Scale
+                testimonial={{
+                    name: 'Ryan O’Connor',
+                    title: 'Founder',
+                    company: 'K-Collect',
+                    image: '/images/testimonials/ryan-oconner-testimonial.png'
+                }}
+            >
+                The switch to using Appwrite brought
+                <span class="text-primary">infinite value that I'm still discovering today.</span>
+            </Scale>
+        </div>
+        <Pricing />
+    {:else}
+        <!-- Placeholder to keep the footer below the fold on SSR -->
+        <div style="height: 100vh;" aria-hidden="true"></div>
+    {/if}
 </Main>
 
 <div class="container">

From 74476e37ac7be34e685e043553b9e98a9c1c01ac Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 30 Apr 2026 20:55:10 +0400
Subject: [PATCH 2/3] chore: formatter

---
 src/routes/(marketing)/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
index ce579c7d9f..9f1ad9b39e 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -34,8 +34,8 @@
             title="App Manager, Majik Kids"
             avatar="/images/testimonials/phil.jpg"
         >
-            <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use
-            the tools that you need with Appwrite.</Pullquote
+            <span class="text-secondary">Just like a Swiss Army Knife</span> you can choose and use the
+            tools that you need with Appwrite.</Pullquote
         >
         <Ai />
         <CaseStudies />

From b5c706ec61df83a9213e182b0607cb99520a061e Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 30 Apr 2026 20:56:04 +0400
Subject: [PATCH 3/3] refactor(marketing): use tailwind h-screen for ssr
 placeholder

---
 src/routes/(marketing)/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
index 9f1ad9b39e..83163ff76f 100644
--- a/src/routes/(marketing)/+page.svelte
+++ b/src/routes/(marketing)/+page.svelte
@@ -57,7 +57,7 @@
         <Pricing />
     {:else}
         <!-- Placeholder to keep the footer below the fold on SSR -->
-        <div style="height: 100vh;" aria-hidden="true"></div>
+        <div class="h-screen" aria-hidden="true"></div>
     {/if}
 </Main>