sanbimu
September 5, 2023, 1:18pm
1
Hi Prismic community,
I am currently developing a website with Next.js 13 and Prismic (deployed using Vercel).
The problem seems to be mainly with the server response time. Any idea how I can get this to be faster?
I have already implemented DNS-prefetch tags as suggested in this thread , but this didn't help. I am using the Next Image component with sizes prop and priority set to true.
Thanks a lot!
Phil
September 5, 2023, 1:59pm
2
Hi Nathalie,
Can you send me a link to your deployed site so I can test this on my side?
Also, how is your website deployed? Statically?
One last thing are you using the Next Image component or the Prismic Next Image component?
Thanks.
sanbimu
September 5, 2023, 2:53pm
4
Hi Phil,
Thanks for your quick answer! I have deployed a static test version of my website at the moment, as I'm trying to improve performances for a client's already existing website. Here is my test version, the problem is specifically with product pages like this one: Bien à vendre
Phil
September 6, 2023, 9:34am
5
Just having a look at the website code:
<img alt="image bien" fetchpriority="high" decoding="async" data-nimg="fill" class="object-cover rounded-[12px]" sizes="(max-width: 768px) 850px, (max-width: 1200px) 1400px, 2400px" srcset="/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=16&q=75 16w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=32&q=75 32w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=48&q=75 48w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=64&q=75 64w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=96&q=75 96w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=128&q=75 128w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=256&q=75 256w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=384&q=75 384w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=640&q=75 640w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=750&q=75 750w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=828&q=75 828w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=1080&q=75 1080w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=1200&q=75 1200w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=1920&q=75 1920w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=2048&q=75 2048w, /_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=3840&q=75 3840w" src="/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fbarbiere-website%2F3e8c45d5-294b-441c-8933-b35708895142_Loverval%2B17%2B-%2B01.jpg%3Fauto%3Dcompress%2Cformat%26rect%3D0%2C375%2C6000%2C3250%26w%3D2400%26h%3D1300&w=3840&q=75" style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;">
You're loading the same image 16 times. You've got 16 view ports that load the same resolution. I guess this is your issue.
sanbimu
September 8, 2023, 11:09am
6
Hi Phil,
That large sourceset is because I was using the Next Image prop sizes . If you check the website again I have now removed that prop and indeed the server response time has dropped to around 250 - 300 ms, which is much better but still too slow in my opinion. You can notice the loading time between each image, which is not optimal for user experience.
Also some images are very large and now on mobile devices the image is being dowloaded full sized to be rendered much smaller, which slows the whole process down even more.
Would you not recommend using the sizes prop with Prismic?
Phil
September 8, 2023, 1:25pm
7
On my side, the first image loaded at 36ms max in my tests.
and about 19ms for the next few:
Prismic Next Image will process the different image sets that you create in Prismic automatically for you so you don't have to.
