Recently I tried to add supabase integration with my Next.js 13 app but I discovered that the "Total Blocking Time" is high. Between 300ms-1000ms. I tried to create clientComponentClient, serverComponentClient and just import the global createClient from database connection but all of the methods was resulting the same. It's even worse because sometimes the TBT is normal about 150ms and then on another check it jumps to 600ms so it's really hard to diagnose but I removed the component which was using the supabase call and it went normal. Maybe somebody had a similar issue?

My component is array of images which are loaded in background so I don't need them to load in the first place but they are visible on initial page load.

import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import Image from 'next/image'
import type { Database } from '../../database.types';

const BackgroundImages = async () => {
    const supabase = createClientComponentClient<Database>()
    const {data} = await supabase.from('images').select("*").order('created_at', {ascending: false}).limit(25)
    return (
        <>
            {data && data.map(item => {
                return(
                    <Image 
                    src={item.image_path} 
                    placeholder='blur' 
                    blurDataURL={item.placeholder_url} 
                    alt={item.name} 
                    loading="eager"
                    decoding="async"
                    key={item.id} 
                    width={235} 
                    height={235}
                    quality={15}
                    />
                )
            })}
        </>
    );
}
 
export default BackgroundImages;