Inline styles for better performance (#22)

* Inline styles for better performance * Optimize images
vercel-labs · Jul 19, 2024 · b06d388 · b06d388
1 parent 463eec5
commit b06d388
Show file tree

Hide file tree

Showing 6 changed files with 1,014 additions and 817 deletions.
diff --git a/app/globals.css b/app/globals.css
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,20 +1,19 @@
-import { CartCountProvider } from '#/components/cart-count-context';
-import { Header } from '#/components/header';
-import { Sidebar } from '#/components/sidebar';
-import { GeistSans } from 'geist/font/sans';
-import { Metadata } from 'next';
-import './globals.css';
+import { CartCountProvider } from "#/components/cart-count-context";
+import { Header } from "#/components/header";
+import { Sidebar } from "#/components/sidebar";
+import { Metadata } from "next";
+import { GlobalStyles } from "./styles";
 
 export const metadata: Metadata = {
-  metadataBase: new URL('https://partialprerendering.com'),
-  title: 'Next.js Partial Prerendering',
-  description: 'A demo of Next.js using Partial Prerendering.',
+  metadataBase: new URL("https://partialprerendering.com"),
+  title: "Next.js Partial Prerendering",
+  description: "A demo of Next.js using Partial Prerendering.",
   openGraph: {
-    title: 'Next.js Partial Prerendering',
-    description: 'A demo of Next.js using Partial Prerendering.',
+    title: "Next.js Partial Prerendering",
+    description: "A demo of Next.js using Partial Prerendering.",
   },
   twitter: {
-    card: 'summary_large_image',
+    card: "summary_large_image",
   },
 };
 
@@ -24,7 +23,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={`[color-scheme:dark] ${GeistSans.variable}`}>
+    <html lang="en" className={`[color-scheme:dark]`}>
+      <head>
+        <GlobalStyles />
+      </head>
       <body className="overflow-y-scroll bg-gray-1100 bg-[url('/grid.svg')] pb-36">
         <Sidebar />
         <div className="lg:pl-72">

diff --git a/app/styles.tsx b/app/styles.tsx
diff --git a/components/single-product.tsx b/components/single-product.tsx
@@ -1,11 +1,11 @@
-import { Pricing } from '#/components/pricing';
-import type { Product } from '#/types/product';
-import { ProductRating } from '#/components/product-rating';
-import Image from 'next/image';
+import { Pricing } from "#/components/pricing";
+import type { Product } from "#/types/product";
+import { ProductRating } from "#/components/product-rating";
+import Image from "next/image";
 
 export async function SingleProduct() {
   const product: Product = await fetch(
-    `https://app-router-api.vercel.app/api/products?id=1`,
+    `https://app-router-api.vercel.app/api/products?id=1`
   ).then((res) => res.json());
 
   return (
@@ -31,7 +31,7 @@ export async function SingleProduct() {
                 alt={product.name}
                 fill
                 sizes="(min-width: 1184px) 75px, (min-width: 768px) 8.33vw, 16.66vw"
-                priority
+                loading="lazy"
               />
             </div>
             <div className="relative aspect-square w-1/3">
@@ -41,7 +41,7 @@ export async function SingleProduct() {
                 alt={product.name}
                 fill
                 sizes="(min-width: 1184px) 75px, (min-width: 768px) 8.33vw, 16.66vw"
-                priority
+                loading="lazy"
               />
             </div>
             <div className="relative aspect-square w-1/3">
@@ -51,7 +51,7 @@ export async function SingleProduct() {
                 alt={product.name}
                 fill
                 sizes="(min-width: 1184px) 75px, (min-width: 768px) 8.33vw, 16.66vw"
-                priority
+                loading="lazy"
               />
             </div>
           </div>

diff --git a/lib/constants.ts b/lib/constants.ts
@@ -1,4 +1,4 @@
 // Times are in milliseconds
-export const delayShippingEstimate = 400;
-export const delayRecommendedProducts = 800;
-export const delayReviews = 1000;
+export const delayShippingEstimate = 200;
+export const delayRecommendedProducts = 500;
+export const delayReviews = 600;