Merge pull request #1578 from appwrite/perf-improvements

Perf improvements

package.json

@@ -19,7 +19,8 @@
         "test": "npm run test:integration && npm run test:unit",
         "test:integration": "playwright test",
         "test:unit": "vitest",
-        "optimize": "node ./scripts/optimize-assets.js"
+        "optimize": "node ./scripts/optimize-assets.js",
+        "optimize:all": "node ./scripts/optimize-all.js"
     },
     "packageManager": "[email protected]+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
     "dependencies": {

scripts/optimize-all.js

@@ -0,0 +1,153 @@
+import { readdirSync, statSync } from 'fs';
+import { join, relative, resolve } from 'path';
+import sharp from 'sharp';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const project_root = resolve(__dirname, '..');
+
+// Directories to search in
+const search_dirs = ['src', 'static', 'routes', 'lib'];
+
+// Directories to skip
+const excluded_dirs = ['node_modules', '.svelte-kit', 'build', '.git', 'assets/'];
+
+/**
+ * @type {{
+ *     jpeg: sharp.JpegOptions,
+ *     webp: sharp.WebpOptions,
+ *     png: sharp.PngOptions,
+ *     gif: sharp.GifOptions,
+ *     avif: sharp.AvifOptions
+ * }}
+ */
+const config = {
+    jpeg: {
+        quality: 100
+    },
+    webp: {
+        lossless: true
+    },
+    png: {
+        quality: 100
+    },
+    gif: {
+        quality: 100
+    },
+    avif: {
+        lossless: true
+    }
+};
+
+/** @type {sharp.ResizeOptions} */
+const resize_config = {
+    width: 1280,
+    height: 1280,
+    fit: sharp.fit.inside,
+    withoutEnlargement: true
+};
+
+function* walk_directory(dir) {
+    try {
+        const files = readdirSync(dir);
+
+        for (const file of files) {
+            const pathToFile = join(dir, file);
+            const relativePath = relative(project_root, pathToFile);
+
+            // Skip excluded directories
+            if (excluded_dirs.some((excluded) => relativePath.includes(excluded))) {
+                continue;
+            }
+
+            const isDirectory = statSync(pathToFile).isDirectory();
+            if (isDirectory) {
+                yield* walk_directory(pathToFile);
+            } else {
+                yield pathToFile;
+            }
+        }
+    } catch (error) {
+        console.error(`Error accessing directory ${dir}:`, error.message);
+    }
+}
+
+function is_image(file) {
+    const extension = file.split('.').pop()?.toLowerCase();
+    return extension && Object.keys(config).includes(extension);
+}
+
+function format_size(bytes) {
+    const sizes = ['B', 'KB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
+}
+
+async function optimize_image(file) {
+    const is_animated = file.endsWith('.gif');
+    const image = sharp(file, { animated: is_animated });
+
+    try {
+        const size_before = (await image.toBuffer()).length;
+        const meta = await image.metadata();
+
+        if (!meta.format || !config[meta.format]) {
+            console.warn(`Unsupported format for file: ${file}`);
+            return;
+        }
+
+        const buffer = await image[meta.format](config[meta.format])
+            .resize(resize_config)
+            .toBuffer();
+        const size_after = buffer.length;
+
+        if (size_after >= size_before) {
+            console.log(`Skipping ${relative(project_root, file)} - no size reduction possible`);
+            return;
+        }
+
+        const savings = (((size_before - size_after) / size_before) * 100).toFixed(2);
+        console.log(`Optimizing ${relative(project_root, file)}`);
+        console.log(`  Before: ${format_size(size_before)}`);
+        console.log(`  After:  ${format_size(size_after)}`);
+        console.log(`  Saved:  ${savings}%`);
+
+        await sharp(buffer).toFile(file);
+    } catch (error) {
+        console.error(`Error processing ${file}:`, error.message);
+    }
+}
+
+async function main() {
+    let total_files = 0;
+    let processed_files = 0;
+
+    console.log('Starting image optimization...\n');
+
+    for (const search_dir of search_dirs) {
+        const full_path = join(project_root, search_dir);
+
+        try {
+            if (!statSync(full_path).isDirectory()) continue;
+
+            for (const file of walk_directory(full_path)) {
+                if (!is_image(file)) continue;
+                total_files++;
+
+                await optimize_image(file);
+                processed_files++;
+            }
+        } catch (error) {
+            if (error.code === 'ENOENT') {
+                console.log(`Directory ${search_dir} not found - skipping`);
+            } else {
+                console.error(`Error processing ${search_dir}:`, error.message);
+            }
+        }
+    }
+
+    console.log(`\nOptimization complete!`);
+    console.log(`Processed ${processed_files} of ${total_files} image files`);
+}
+
+await main();

src/lib/components/MainNav.svelte

@@ -22,15 +22,15 @@
         {#each links as link}
             <li class="web-main-header-nav-item text-primary hover:text-accent">
                 {#if link.submenu}
-                    <button
+                    <div
                         class="web-main-header-nav-item-button"
                         aria-haspopup="true"
                         aria-expanded="false"
                         aria-controls="submenu"
                         data-submenu-button
                     >
                         <svelte:component this={link.submenu} label={link.label} />
-                    </button>
+                    </div>
                 {:else}
                     <a
                         class={classNames(

src/lib/components/ProductsSubmenu.svelte

@@ -83,7 +83,7 @@
     export let label: string;
 </script>
 
-<li
+<button
     class={classNames(
         'text-primary focus:text-accent hover:text-accent inline-flex cursor-pointer items-center justify-between outline-none',
         {
@@ -99,7 +99,7 @@
             'rotate-180': $open
         })}
     />
-</li>
+</button>
 
 <div
     use:melt={$menu}

src/routes/+page.svelte

@@ -11,7 +11,7 @@
     import MainFooter from '../lib/components/MainFooter.svelte';
     import DeveloperCard from './DeveloperCard.svelte';
     import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
-    import CoverImage from './dashboard.png';
+    import CoverImage from './dashboard.webp';
     import Hero from '$lib/components/ui/Hero.svelte';
     import GradientText from '$lib/components/ui/GradientText.svelte';
     import Badge from '$lib/components/ui/Badge.svelte';
@@ -93,7 +93,7 @@
         <enhanced:img
             style="width:1466px; height:804px; transform:rotate(150.348deg); opacity: 0.65; filter: blur(127.5px);
 		max-block-size: unset; max-inline-size: unset;"
-            src="./top-page-dark.png"
+            src="./top-page-dark.webp"
             alt=""
         />
     </div>
@@ -104,7 +104,7 @@
     style="top: 22rem; left: 54%; translate: calc(-50% - 900px); width: 75.9375rem;"
     class:web-u-hide-mobile={$isMobileNavOpen}
 >
-    <img src="/images/bgs/hero-lines-1.png" alt="" />
+    <img src="/images/bgs/hero-lines-1.webp" alt="" />
 </div>
 
 <div
@@ -113,7 +113,7 @@
     class:web-u-hide-mobile={$isMobileNavOpen}
 >
     <div style="left: 0;">
-        <img src="/images/bgs/hero-lines-2.png" alt="" />
+        <img src="/images/bgs/hero-lines-2.webp" alt="" />
     </div>
 </div>