perf: address web performance audit (#16)

AGENTS.md

@@ -0,0 +1,21 @@
+# AGENTS.md
+
+## Repository layout
+
+This checkout is the `Coder-soft/renderdragon.org` fork. The canonical upstream
+for this project is **`creatorcluster/renderdragon.org`** (base branch `main`),
+which itself forks `Yxmura/renderdragon`.
+
+## Pull requests
+
+Open every pull request against upstream **`creatorcluster/renderdragon.org` `main`**,
+not against the `Coder-soft` fork. Push the branch to `origin` (the fork) and open a
+cross-repository PR:
+
+```sh
+git push -u origin <branch>
+gh pr create --repo creatorcluster/renderdragon.org --base main --head Coder-soft:<branch>
+```
+
+GitHub's native linked-branch feature (`gh issue develop`) does not work in the fork,
+so reference the relevant fork issue by URL in the PR body instead.

index.html

@@ -57,11 +57,8 @@
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin>
+  <link rel="preload" href="/fonts/minecraftia.woff2" as="font" type="font/woff2" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Chakra+Petch:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  <link href="https://fonts.cdnfonts.com/css/minecraftia" rel="stylesheet">
-  <link href="https://fonts.cdnfonts.com/css/minecraft-3" rel="stylesheet">
-
   <script type="application/ld+json">
     {
       "@context": "https://schema.org",

src/components/Logo.tsx

@@ -1,22 +1,25 @@
 import React from 'react';
 
-export const Logo = ({ className = "", size = "md", mobile = false }: { className?: string, size?: "sm" | "md" | "lg" | "xl", mobile?: boolean }) => {
+const LOGO_SRC = "/renderdragon-logo.webp";
+
+export const Logo = ({ className = "", size = "md" }: { className?: string, size?: "sm" | "md" | "lg" | "xl" }) => {
   const dimensions = {
     sm: "h-8",
     md: "h-10",
     lg: "h-12",
     xl: "h-14"
   }[size];
 
-  const src = mobile ? "/renderdragon.png" : "/favicon.ico";
-
   return (
     <img
-      src={src}
+      src={LOGO_SRC}
       alt="Renderdragon"
+      width={128}
+      height={92}
+      decoding="async"
       className={`${dimensions} w-auto object-contain ${className}`}
     />
   );
 };
 
-export default React.memo(Logo);
+export default React.memo(Logo);

src/components/PopularTools.tsx

@@ -28,7 +28,7 @@ const tools: Tool[] = [
     title: 'Background Gen',
     description: 'Generate stunning, unique backgrounds for your thumbnails in seconds.',
     icon: IconPhoto,
-    backgroundImage: '/assets/minecraft-pattern-background-1920x1080.png',
+    backgroundImage: '/assets/minecraft-pattern-background.webp',
     path: '/background-generator',
   },
   {
@@ -88,14 +88,14 @@ const PopularTools = () => {
                    className={`group relative block h-full pixel-card bg-card hover:bg-cow-purple/5 border-2 border-border hover:border-cow-purple p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-cow-purple/20 ${tool.backgroundImage ? 'overflow-hidden' : ''}`}
                  >
                    {tool.backgroundImage && <>
-                     <img src={tool.backgroundImage} alt="" aria-hidden="true" className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+                     <img src={tool.backgroundImage} alt="" aria-hidden="true" width={800} height={450} loading="lazy" decoding="async" className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
                      <div aria-hidden="true" className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_35%,rgba(0,0,0,0.55)_100%)] opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
                    </>}
                   <div className="flex items-start justify-between mb-5">
                    <div className="relative z-10 w-12 h-12 bg-cow-purple/15 border-2 border-cow-purple pixel-corners flex items-center justify-center group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-300">
                      <tool.icon className={`h-6 w-6 text-cow-purple transition-opacity duration-150 ${tool.hoverIcon || tool.hoverImage ? 'group-hover:opacity-0' : ''}`} stroke={2.5} />
                     {'hoverIcon' in tool && tool.hoverIcon && <tool.hoverIcon className="absolute h-6 w-6 text-red-500 opacity-0 transition-opacity duration-150 group-hover:opacity-100" stroke={2.5} />}
-                    {'hoverImage' in tool && tool.hoverImage && <img src={tool.hoverImage} alt="" className="absolute h-7 w-7 rounded-sm object-cover opacity-0 transition-opacity duration-150 group-hover:opacity-100" />}
+                    {'hoverImage' in tool && tool.hoverImage && <img src={tool.hoverImage} alt="" loading="lazy" decoding="async" className="absolute h-7 w-7 rounded-sm object-cover opacity-0 transition-opacity duration-150 group-hover:opacity-100" />}
                   </div>
                    <IconArrowRight className="relative z-10 w-5 h-5 text-cow-purple opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all" />
                 </div>

src/components/Testimonials.tsx

@@ -7,6 +7,7 @@ interface Testimonial {
   name: string;
   role: string;
   content: string;
+  avatar: string;
 }
 
 const testimonialsData: Testimonial[] = [
@@ -15,24 +16,28 @@ const testimonialsData: Testimonial[] = [
     name: "yFury",
     role: 'YouTuber',
     content: 'RenderDragon is a fantastic resource for any creator. I use it all the time for my videos!',
+    avatar: '/assets/yFury.webp',
   },
   {
     id: 2,
     name: "Jkingnick",
     role: 'Designer',
     content: 'The assets on RenderDragon are top-notch. They save me a ton of time and effort.',
+    avatar: '/assets/Jkingnick.webp',
   },
   {
     id: 3,
     name: "AlphaReturns",
     role: 'Editor',
     content: 'I love the variety of resources available. It\'s my go-to for all my editing needs.',
+    avatar: '/assets/AlphaReturns.webp',
   },
   {
     id: 4,
     name: "ItsProger",
     role: 'Minecraft YouTuber and Thumbnail Designer',
     content: "I really like renderdragon, it's one of the only and best websites for Minecraft content creators. I really like the style, assets, tools and the whole team working on this amazing project. I'll use it for every single video that I make in the future",
+    avatar: '/assets/ItsProger.webp',
   }
 ];
 
@@ -103,10 +108,13 @@ const Testimonials = () => {
               <div className="flex items-center gap-4 mb-5 pb-5 border-b-2 border-dashed border-border relative">
                 <div className="w-14 h-14 overflow-hidden border-2 border-cow-purple pixel-corners">
                   <img
-                    src={`/assets/${testimonial.name}.jpg`}
+                    src={testimonial.avatar}
                     alt={testimonial.name}
+                    width={112}
+                    height={112}
                     className="w-full h-full object-cover"
                     loading="lazy"
+                    decoding="async"
                   />
                 </div>
                 <div>

src/hooks/useProfile.ts

@@ -1,6 +1,6 @@
 
 import { useState, useEffect, useCallback } from 'react';
-import { supabase } from '@/integrations/supabase/client';
+import { getSupabase } from '@/integrations/supabase/lazyClient';
 import { useAuth } from './useAuth';
 import { toast } from 'sonner';
 import type { Database } from '@/integrations/supabase/types';
@@ -27,6 +27,7 @@ export const useProfile = () => {
 
     setLoading(true);
     try {
+      const supabase = await getSupabase();
       // Own-profile reads go through the security-definer RPC so the client
       // never needs (and no longer has) column access to email/first/last/etc.
       const { data: rawData, error } = await supabase.rpc("get_my_profile");
@@ -74,6 +75,7 @@ export const useProfile = () => {
 
     setLoading(true);
     try {
+      const supabase = await getSupabase();
       // Only columns the owner is actually allowed to change (RLS-granted).
       // email/created_at/updated_at/role/etc. are never written from the client.
       const allowedFields = [
@@ -114,6 +116,7 @@ export const useProfile = () => {
     if (!user) return;
 
     try {
+      const supabase = await getSupabase();
       // Get the current session to send the access token
       const { data: { session } } = await supabase.auth.getSession();
 

src/index.css

@@ -4,19 +4,19 @@
 
 @font-face {
   font-family: Minecraftia;
-  src: url('https://raw.githubusercontent.com/Yxmura/resources_renderdragon/d41fc385c3c178527da0710ad4f6cd4f37a12eea/fonts/minecraftia.ttf') format('truetype');
+  src: url('/fonts/minecraftia.woff2') format('woff2');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Minecraft Seven';
-  src: url('https://raw.githubusercontent.com/Yxmura/resources_renderdragon/d41fc385c3c178527da0710ad4f6cd4f37a12eea/fonts/minecraft.ttf') format('truetype');
+  src: url('/fonts/minecraft.woff2') format('woff2');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Minecraft Five Bold';
-  src: url('https://raw.githubusercontent.com/Yxmura/resources_renderdragon/d41fc385c3c178527da0710ad4f6cd4f37a12eea/fonts/minecraft.ttf') format('truetype');
+  src: url('/fonts/minecraft.woff2') format('woff2');
   font-display: swap;
 }
 

src/integrations/supabase/lazyClient.ts

@@ -0,0 +1,16 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from './types';
+
+let clientPromise: Promise<SupabaseClient<Database>> | null = null;
+
+export const getSupabase = (): Promise<SupabaseClient<Database>> => {
+    if (!clientPromise) {
+        clientPromise = import('./client')
+            .then((module) => module.supabase)
+            .catch((error) => {
+                clientPromise = null;
+                throw error;
+            });
+    }
+    return clientPromise;
+};

src/pages/Contact.tsx

@@ -22,7 +22,7 @@ const teamMembers: TeamMember[] = [
   {
     name: "Coder-soft",
     role: "Founder",
-    avatar: "/assets/codersoft.png",
+    avatar: "/assets/codersoft.webp",
     socials: {
       github: "https://github.com/coder-soft",
       discord: "https://discordapp.com/users/1094475489734819840",
@@ -32,7 +32,7 @@ const teamMembers: TeamMember[] = [
   {
     name: "Clover",
     role: "Admin",
-    avatar: "/assets/clover.jpeg",
+    avatar: "/assets/clover.webp",
     socials: {
       github: "https://github.com/CloverTheBunny",
       discord: "https://discordapp.com/users/789997917661560862",
@@ -41,7 +41,7 @@ const teamMembers: TeamMember[] = [
   {
     name: "Yamura",
     role: "Lead Programmer",
-    avatar: "/assets/yamura.png",
+    avatar: "/assets/yamura.webp",
     socials: {
       github: "https://github.com/Yxmura",
       discord: "https://discordapp.com/users/877933841170432071",
@@ -51,7 +51,7 @@ const teamMembers: TeamMember[] = [
   {
     name: "TomatoKing",
     role: "King of Yapping",
-    avatar: "/assets/tomatoking.png",
+    avatar: "/assets/tomatoking.webp",
     socials: {
       discord: "https://discordapp.com/users/1279190506126966847",
       website: "https://tomatosportfolio.netlify.app",
@@ -60,7 +60,7 @@ const teamMembers: TeamMember[] = [
   {
     name: "Denji",
     role: "Guides writer",
-    avatar: "/assets/denji.png",
+    avatar: "/assets/denji.webp",
     socials: {
       discord: "https://discordapp.com/users/1114195537093201992",
       website: "https://yournotluis.xyz/",
@@ -80,7 +80,7 @@ const teamMembers: TeamMember[] = [
   {
     name: "VOVOplay",
     role: "Animator",
-    avatar: "/assets/VOVOplay.png",
+    avatar: "/assets/VOVOplay.webp",
     socials: {
       website: "https://vovomotion.com/",
       discord: "https://discordapp.com/users/758322333437394944",
@@ -228,8 +228,11 @@ const Contact = () => {
                       <img
                         src={member.avatar}
                         alt={member.name}
+                        width={192}
+                        height={192}
                         className="w-full h-full object-cover"
                         loading="lazy"
+                        decoding="async"
                       />
                     </div>
                      <h3 className="text-lg font-geist font-medium">{member.name}</h3>