GH-251 Audit site for performance issues focusing on images and caching (6a3c5a5db6261834164ce41b) (#251)

Co-authored-by: netlify[bot] <no-reply@netlify.com>

Author: netlify-coding[bot]

app/projects/eternalcore/eternal-showcase.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { FadeIn } from "@/components/ui/motion/motion-components";
+import netlifyImageLoader from "@/lib/netlify-image-loader";
 
 const marqueeItems = [
   // Row 1: Essentials & Chat
@@ -89,9 +90,10 @@ const ShowcaseModal = ({
             alt={item.title}
             className="object-contain"
             fill
+            loader={netlifyImageLoader}
             priority
+            sizes="(max-width: 1024px) 100vw, 1024px"
             src={item.src}
-            unoptimized
           />
           {/* Close Button */}
           <button
@@ -153,9 +155,10 @@ const InfiniteMarquee = ({
               alt={item.id}
               className="h-full w-full transform-gpu object-cover transition-transform duration-500 will-change-transform group-hover:scale-110"
               fill
+              loader={netlifyImageLoader}
+              loading="lazy"
               sizes="400px"
               src={item.src}
-              unoptimized
             />
 
             {/* Gradient Overlay & Content - Always visible on hover */}

app/projects/eternalcore/page.tsx

@@ -9,6 +9,7 @@ import { Card } from "@/components/ui/card";
 import { FacadePattern } from "@/components/ui/facade-pattern";
 import { FadeIn, MotionSection, ScaleIn, SlideIn } from "@/components/ui/motion/motion-components";
 import { slideUp } from "@/lib/animations/variants";
+import netlifyImageLoader from "@/lib/netlify-image-loader";
 
 import { ConfigPreview } from "./config-preview";
 import { EternalShowcase } from "./eternal-showcase";
@@ -101,8 +102,11 @@ export default function EternalCorePage() {
                   <Image
                     alt="EternalCore Project Banner"
                     className="transform-gpu object-cover transition-transform duration-700 will-change-transform group-hover:scale-105"
+                    fetchPriority="high"
                     fill
+                    loader={netlifyImageLoader}
                     priority
+                    sizes="(max-width: 1024px) 100vw, 50vw"
                     src="/eternalcore/readme-banner.png"
                   />
                   <div className="pointer-events-none absolute inset-0 bg-linear-to-tr from-blue-500/10 via-transparent to-purple-500/10 mix-blend-overlay" />

assets.d.ts

@@ -0,0 +1,11 @@
+declare module "*.svg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.png" {
+  import type { StaticImageData } from "next/image";
+
+  const src: StaticImageData;
+  export default src;
+}

components/home/about/about-section.tsx

@@ -7,6 +7,7 @@ import PolandMap from "@/components/home/about/poland-map";
 import PeopleGroupIcon from "@/components/icons/people-group";
 import { Button } from "@/components/ui/button";
 import { SlideIn } from "@/components/ui/motion/motion-components";
+import netlifyImageLoader from "@/lib/netlify-image-loader";
 import AboutImage from "@/public/hero image.png";
 
 export default function About() {
@@ -103,6 +104,7 @@ export default function About() {
                     alt="EternalCode Team"
                     className="h-auto w-full object-cover"
                     fetchPriority="low"
+                    loader={netlifyImageLoader}
                     loading="lazy"
                     placeholder="blur"
                     sizes="(max-width: 1024px) 100vw, 600px"

components/home/projects/projects-section.tsx

@@ -4,6 +4,7 @@ import { motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
+import netlifyImageLoader from "@/lib/netlify-image-loader";
 
 interface Project {
   name: string;
@@ -161,6 +162,8 @@ function ProjectCard({ project }: { project: Project }) {
         alt={project.name}
         className="transform-gpu object-cover transition-transform duration-700 will-change-transform group-hover:scale-105"
         fill
+        loader={netlifyImageLoader}
+        loading="lazy"
         sizes="(max-width: 768px) 300px, 420px"
         src={project.image}
       />

components/notification-generator/preview/background-image.tsx

@@ -1,12 +1,16 @@
 import Image from "next/image";
 import { memo } from "react";
+import netlifyImageLoader from "@/lib/netlify-image-loader";
 
 const BackgroundImage = memo(() => (
   <Image
     alt="Minecraft background"
     className="pointer-events-none absolute inset-0 h-full w-full select-none object-cover"
+    fetchPriority="high"
     fill
+    loader={netlifyImageLoader}
     priority
+    sizes="100vw"
     src="/mc-bg.png"
     style={{ zIndex: 0 }}
   />

components/ui/mdx/mdx-image.tsx

@@ -1,6 +1,10 @@
 "use client";
 
 import Image from "next/image";
+import netlifyImageLoader, {
+  getNetlifyImageSrcSet,
+  getNetlifyImageUrl,
+} from "@/lib/netlify-image-loader";
 
 interface MdxImageProps {
   src?: string;
@@ -14,7 +18,8 @@ export function MdxImage({ src, alt, className }: MdxImageProps) {
   }
 
   const isLocal = src.startsWith("/");
-  const cdnSrc = isLocal ? `/.netlify/images?url=${encodeURIComponent(src)}` : src;
+  const cdnSrc = isLocal ? getNetlifyImageUrl(src, 800) : src;
+  const cdnSrcSet = isLocal ? getNetlifyImageSrcSet(src) : undefined;
   const isVideo = src.endsWith(".mp4") || src.endsWith(".webm") || src.endsWith(".mov");
   const isGif = src.endsWith(".gif");
 
@@ -43,12 +48,15 @@ export function MdxImage({ src, alt, className }: MdxImageProps) {
     return (
       <span className="group relative my-6 block w-full overflow-hidden rounded-md bg-gray-100 shadow-sm dark:bg-gray-800">
         {/* biome-ignore lint/performance/noImgElement: Next.js Image Optimization warnings */}
-        {/** biome-ignore lint/correctness/useImageSize: Decorative preview */}
         <img
           alt={alt || ""}
           className={`h-auto w-full object-cover ${className || ""}`}
+          height={450}
           loading="lazy"
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 900px"
           src={cdnSrc}
+          srcSet={cdnSrcSet}
+          width={800}
         />
       </span>
     );
@@ -60,6 +68,8 @@ export function MdxImage({ src, alt, className }: MdxImageProps) {
         alt={alt || ""}
         className={`h-auto w-full rounded-md shadow-sm ${className || ""}`}
         height={500}
+        loader={isLocal ? netlifyImageLoader : undefined}
+        loading="lazy"
         sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 900px"
         src={src}
         width={900}

lib/netlify-image-loader.ts

@@ -0,0 +1,22 @@
+import type { ImageLoaderProps } from "next/image";
+
+export const NETLIFY_IMAGE_WIDTHS = [400, 800, 1200] as const;
+
+export function getNetlifyImageUrl(src: string, width: number, quality = 80) {
+  const params = new URLSearchParams({
+    url: src,
+    w: String(width),
+    fm: "avif",
+    q: String(quality),
+  });
+
+  return `/.netlify/images?${params.toString()}`;
+}
+
+export function getNetlifyImageSrcSet(src: string, widths = NETLIFY_IMAGE_WIDTHS) {
+  return widths.map((width) => `${getNetlifyImageUrl(src, width)} ${width}w`).join(", ");
+}
+
+export default function netlifyImageLoader({ src, width, quality }: ImageLoaderProps) {
+  return getNetlifyImageUrl(src, width, quality ?? 80);
+}

netlify.toml

@@ -7,5 +7,46 @@ publish = ".next"
   [headers.values]
     Cache-Control = "public, max-age=31556952, immutable"
 
+[[headers]]
+  for = "/_next/static/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+  for = "/icons/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+  for = "/*.png"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+  for = "/*.svg"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+
+[[headers]]
+  for = "/*.webmanifest"
+  [headers.values]
+    Cache-Control = "public, max-age=0, must-revalidate"
+
+[[headers]]
+  for = "/*"
+  [headers.values]
+    Netlify-CDN-Cache-Control = "public, max-age=0, stale-while-revalidate=86400"
+
+[images]
+remote_images = [
+  "https://github\\.com/.*",
+  "https://avatars\\.githubusercontent\\.com/.*",
+  "https://avatars-githubusercontent\\.webp\\.se/.*",
+  "https://private-user-images\\.githubusercontent\\.com/.*",
+  "https://i\\.imgur\\.com/.*",
+  "https://imgur\\.com/.*",
+  "https://cms\\.eternalcode\\.pl/.*"
+]
+
 [[plugins]]
 package = "@netlify/plugin-nextjs"