Améliorer les performances de la page d'accueil

client/package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "vite build && node ./scripts/postBuild.cjs",
     "start": "node build",
     "preview": "vite preview",
     "test": "npm run test:integration && npm run test:unit",
@@ -31,6 +31,7 @@
     "@sveltejs/adapter-node": "^5.2.9",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+    "@zerodevx/svelte-img": "^2.1.2",
     "cssnano": "^7.0.6",
     "eslint-plugin-svelte": "^2.36.0",
     "globals": "^15.0.0",
@@ -46,5 +47,9 @@
     "vite": "^5.0.3",
     "vitest": "^2.0.0"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "cheerio": "^1.0.0",
+    "glob-promise": "^6.0.7"
+  }
 }

client/postcss.config.js

@@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== 'development') {
   plugins.push(
     purgeCSSPlugin({
       content: ['./src/**/*.svelte', './src/**/*.html'],
-      safelist: [/svelte-/, /placement/, /modal/],
+      safelist: [/svelte-/, /placement/, /modal/, /global/],
     }),
   );
 }

client/scripts/postBuild.cjs

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const fs = require('fs-extra');
+const glob = require('glob-promise');
+const cheerio = require('cheerio');
+
+async function transformHtml() {
+  try {
+    const svelteKitFiles = await glob('./.svelte-kit/output/**/*.html', {});
+    const buildFiles = await glob('./build/**/*.html', {});
+
+    const files = [...svelteKitFiles, ...buildFiles];
+
+    for await (let file of files) {
+      try {
+        const buffer = fs.readFileSync(file);
+        const $ = cheerio.loadBuffer(buffer);
+
+        const body = $('body');
+
+        $('link[rel="modulepreload"]').each((i, element) => {
+          const $this = $(element);
+          const src = $this.attr('href');
+          $(`<script type="module" async src="${src}"></script>`).appendTo(
+            body,
+          );
+
+          $this.remove();
+        });
+
+        await fs.outputFile(file, $.html());
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    console.log(`${files.length} HTML files transformed successfully.`);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+transformHtml();

client/src/ambient.d.ts

@@ -0,0 +1,5 @@
+// Squelch warnings of image imports from your assets dir
+declare module '$assets/*' {
+  const meta;
+  export default meta;
+}

client/src/lib/components/common/GradientBackgroundWrapper.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children: Snippet;
+  };
+
+  const { children }: Props = $props();
+</script>
+
+<div class="background-gradient">
+  {@render children()}
+</div>

client/src/lib/components/common/HorizontalCard.svelte

@@ -2,6 +2,7 @@
   import '@gouvfr/dsfr/dist/component/card/card.min.css';
   import '@gouvfr/dsfr/dist/utility/icons/icons-editor/icons-editor.min.css';
   import '@gouvfr/dsfr/dist/utility/icons/icons-system/icons-system.min.css';
+  import Img from '@zerodevx/svelte-img';
   import Photograph from '$components/common/Photograph.svelte';
 
   type Props = {
@@ -51,7 +52,7 @@
   </div>
   <div class="fr-card__header">
     <div class="fr-card__img">
-      <img
+      <Img
         class="fr-responsive-img"
         src={imgSrc}
         alt="" />

client/src/lib/components/pages/accueil/Hero.svelte

@@ -1,3 +1,8 @@
+<script lang="ts">
+  import Img from '@zerodevx/svelte-img';
+  import HomeHero from '$assets/images/home-hero.jpg?as=run';
+</script>
+
 <section class="hero">
   <div class="column text-container">
     <div class="title background-color-white">
@@ -25,20 +30,28 @@
       </a>
     </div>
   </div>
-  <div class="column illustration-container"></div>
+  <div class="column illustration-container">
+    <Img
+      class="fr-responsive-img"
+      src={HomeHero}
+      loading="eager"
+      alt="" />
+  </div>
 </section>
 
 <style lang="postcss">
+  .hero {
+    position: relative;
+    max-height: 772px;
+  }
+
   .text-container {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding-inline: var(--1w);
     padding-block-start: var(--8w);
     padding-block-end: var(--26w);
-    background-image: url('$assets/images/home-hero.jpg');
-    background-size: cover;
-    background-position: center;
 
     h1 {
       font-size: 1.5rem;
@@ -96,7 +109,21 @@
   }
 
   .illustration-container {
-    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+
+    :global(img) {
+      height: 100%;
+      object-fit: cover;
+    }
+
+    :global(picture) {
+      width: 100%;
+    }
   }
 
   @media (--xxs-viewport) {
@@ -168,16 +195,16 @@
     }
 
     .illustration-container {
-      width: 50%;
+      position: relative;
       display: flex;
       justify-content: center;
-      padding-block-start: var(--5w);
-      background-image: url('$assets/images/home-hero.jpg');
-      background-size: cover;
-      background-position: center;
+      width: 50%;
+      height: auto;
 
-      &::before {
+      &::after {
         content: '';
+        position: absolute;
+        top: var(--8w);
         width: 400px;
         height: 540px;
         background-image: url('$assets/illustrations/home-hero-trim.svg');

client/src/lib/components/pages/accueil/Infos.svelte

@@ -1,9 +1,9 @@
 <script>
   import HorizontalCard from '$components/common/HorizontalCard.svelte';
   import Section from '$components/common/Section.svelte';
-  import card1 from '$assets/images/home-card-1.jpg';
-  import card2 from '$assets/images/home-card-2.jpg';
-  import card3 from '$assets/images/home-card-3.jpg';
+  import card1 from '$assets/images/home-card-1.jpg?as=run';
+  import card2 from '$assets/images/home-card-2.jpg?as=run';
+  import card3 from '$assets/images/home-card-3.jpg?as=run';
   import { default as MascotteThinking } from '$assets/icons/mascotte-thinking.svg?raw';
   import { default as MascotteCelebrating } from '$assets/icons/mascotte-celebrating.svg?raw';
   import { default as EndOfPath } from '$assets/icons/end-of-path.svg?raw';

client/src/lib/components/pages/tout-savoir-sur-le-bail-reel-solidaire-brs/[slug]/Page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import Step from '$components/pages/tout-savoir-sur-le-bail-reel-solidaire-brs/[slug]/Step.svelte';
   import type { StepSection } from '$lib/utils/definitions';
+
+  import GradientBackgroundWrapper from '$components/common/GradientBackgroundWrapper.svelte';
   import Section from '$components/common/Section.svelte';
-  import Nav from './Nav.svelte';
-  import StepLink from './StepLink.svelte';
+  import Step from '$components/pages/tout-savoir-sur-le-bail-reel-solidaire-brs/[slug]/Step.svelte';
+  import Nav from '$components/pages/tout-savoir-sur-le-bail-reel-solidaire-brs/[slug]/Nav.svelte';
+  import StepLink from '$components/pages/tout-savoir-sur-le-bail-reel-solidaire-brs/[slug]/StepLink.svelte';
 
   type Props = {
     title: string;
@@ -66,7 +68,7 @@
   });
 </script>
 
-<div class="background-gradient">
+<GradientBackgroundWrapper>
   <Section>
     <div class="wrapper">
       <div class="fr-grid-row">
@@ -113,7 +115,7 @@
       </div>
     </div>
   </Section>
-</div>
+</GradientBackgroundWrapper>
 
 <style lang="postcss">
   .step-links {

client/src/routes/(accueil)/+page.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
-  import PageCta from '$components/common/PageCta.svelte';
   import Hero from '$components/pages/accueil/Hero.svelte';
-  import Infos from '$components/pages/accueil/Infos.svelte';
+  import GradientBackgroundWrapper from '$components/common/GradientBackgroundWrapper.svelte';
   import Promesse from '$components/pages/accueil/Promesses.svelte';
+  import Infos from '$components/pages/accueil/Infos.svelte';
   import Verbatims from '$components/pages/accueil/Verbatims.svelte';
+  import PageCta from '$components/common/PageCta.svelte';
 </script>
 
 <svelte:head>
   <title>Accueil - Boris</title>
 </svelte:head>
 
 <Hero />
-<div class="background-gradient">
+
+<GradientBackgroundWrapper>
   <Promesse />
   <Infos />
   <Verbatims />
   <PageCta />
-</div>
+</GradientBackgroundWrapper>

client/src/routes/notre-mission/+page.svelte

@@ -1,17 +1,18 @@
 <script>
-  import Chronology from '$components/pages/notre-mission/Chronology.svelte';
+  import GradientBackgroundWrapper from '$components/common/GradientBackgroundWrapper.svelte';
   import Hero from '$components/pages/notre-mission/Hero.svelte';
-  import Stats from '$components/pages/notre-mission/Stats.svelte';
   import Team from '$components/pages/notre-mission/Team.svelte';
+  import Chronology from '$components/pages/notre-mission/Chronology.svelte';
+  import Stats from '$components/pages/notre-mission/Stats.svelte';
 </script>
 
 <svelte:head>
   <title>Notre mission - Boris</title>
 </svelte:head>
 
-<div class="background-gradient">
+<GradientBackgroundWrapper>
   <Hero />
   <Team />
   <Chronology />
   <Stats />
-</div>
+</GradientBackgroundWrapper>

client/src/routes/simulateur-eligibilite/+page.server.ts

@@ -1,8 +1,7 @@
 import type { PageServerLoad } from './$types';
-import type { Data } from './definitions';
 import { LANDBOT_CONFIG_URL } from '$env/static/private';
 
-export const load: PageServerLoad = (): Data => {
+export const load: PageServerLoad = () => {
   return {
     landbotConfigUrl: LANDBOT_CONFIG_URL,
   };

client/src/routes/simulateur-eligibilite/+page.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
-  import type { Props } from './definitions';
+  import GradientBackgroundWrapper from '$components/common/GradientBackgroundWrapper.svelte';
   import Hero from '$components/pages/simulateur-eligibilite/Hero.svelte';
   import Chatbot from '$components/pages/simulateur-eligibilite/Chatbot.svelte';
   import Simulator from '$components/pages/simulateur-eligibilite/Simulator.svelte';
   import PageCta from '$components/common/PageCta.svelte';
 
+  type Props = {
+    data: {
+      landbotConfigUrl: string;
+    };
+  };
+
   const { data }: Props = $props();
 </script>
 
 <svelte:head>
   <title>Simuler mon éligibilité - Boris</title>
 </svelte:head>
 
-<div class="background-gradient">
+<GradientBackgroundWrapper>
   <Hero />
   <Chatbot landbotConfigUrl={data.landbotConfigUrl} />
   <Simulator />
   <PageCta />
-</div>
+</GradientBackgroundWrapper>

client/src/routes/tout-savoir-sur-le-bail-reel-solidaire-brs/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import GradientBackgroundWrapper from '$components/common/GradientBackgroundWrapper.svelte';
   import Hero from '$components/pages/tout-savoir-sur-le-bail-reel-solidaire-brs/Hero.svelte';
   import Promesse from '$components/pages/tout-savoir-sur-le-bail-reel-solidaire-brs/Promesses.svelte';
   import Steps from '$components/pages/tout-savoir-sur-le-bail-reel-solidaire-brs/Steps.svelte';
@@ -9,9 +10,9 @@
   <title>Tout savoir sur le BRS - Boris</title>
 </svelte:head>
 
-<div class="background-gradient">
+<GradientBackgroundWrapper>
   <Hero />
   <Promesse />
   <Steps />
   <PageCta />
-</div>
+</GradientBackgroundWrapper>

client/vite.config.ts

@@ -1,8 +1,19 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { imagetools } from '@zerodevx/svelte-img/vite';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  build: {
+    modulePreload: false,
+  },
+  plugins: [
+    sveltekit(),
+    imagetools({
+      profiles: {
+        run: new URLSearchParams('w=448;768;992;1248;1920&format=webp;jpg'),
+      },
+    }),
+  ],
   test: {
     include: ['tests/unit/**/*.{test,spec}.{js,ts}'],
   },