Help in optimizing my simple website

[orron (orki)]

I have a simple website that display content I pull from a Database. My website is slowly growing but definitely not big and the issue is that I see the major low metrics in speed analytics:

I’m assuimg that for such a simple website i should have a much better speed score and I’m asking help in debugging the issues.

Adding main parts of the page code:

const prisma = new PrismaClient()

const findQuestionWithCache = unstable_cache(async (url_title: string) => {

  return await await prisma.tab.findFirst({
    where:{
      urlTitle: url_title,
    },
    include: {
      categories:{

      },
      whistles:{
        take: 5
      }
    }
  }) ;
},
[],
{
  revalidate: 60*60*24*2
});

type Props = {
  params: { url_title: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.url_title
  const tab = await findQuestionWithCache(params.url_title)
  
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: `${tab?.title} - Tin Whistle Tab & Backing Track Readable and Easy to play`
  }
}


export default async function Page({ params }: { params: { url_title: string } }) {
  
  const tab = await findQuestionWithCache(params.url_title) ?? notFound()
  const whistles = tab.whistles
  return (
    <main className="container max-w-screen-2xl flex flex-col justify-between">
        ...
          <div className="flex flex-col lg:flex-row lg:items-start">
            {/* Tabs Base */}
            <TabPage page={tab.notes}/>
            {/* Side Bar */}
            <SideBar tab={tab} whistles={whistles}/>
          </div>
       ...
    </main>
  );
}

[pawlean (Pauline P. Narvas)]

Hey, Orki! Welcome

It might be worth using v0.dev for this, simply connect your project and ask v0 to make optimisation recommendations.

Cross-posting some helpful content:

Bidirectional git sync for v0 Premium users is now in beta

Happy to announce we’re rolling out bi-directional git sync for v0 Premium users You can connect your chat to GitHub to either main or another branch and every new generation will be synced as a new commit [image] If you create a new branch it will fork your chat and then all generations in the new fork will write to that branch. [image] This feature unlocks a development workflow where you work in a new chat with a fresh branch and deploy by reviewing and merging the PR through GitHub. I…

Git Workflows for v0

v0 has two-way git sync, which allows you to work both in v0 in your browser and in a local code editor. When you sync to a branch every time v0 generates code, it will auto-commit it to the branch every time an external commit is pushed to the branch, v0 will pull the latest code You can choose the branch you connect to, and you can toggle auto-commit on or off. You currently cannot turn off the auto-pull, and instead need to unlink the branch. Dev branch workflow This is a more robust wo…

[jacobparis]

The slow initial loads is probably coming from your data fetching, you can find out for sure by logging the time before and after

const t0 = performance.now();
const tab = await findQuestionWithCache(params.url_title) ?? notFound()
console.log(`findQuestionWithCache`, `${performance.now() - t0}ms`)

This is a blocking operation, which means Next.js will suspend (wait for it to complete) before continuing to render the rest of your page

If you put a loading.tsx file beside this page.tsx, Next.js will switch to rendering that loading state when it suspends, and then navigations will be faster