Search code examples
next.jsgoogle-pagespeedparallax.js

Can page load with parallax effect faster in Next.js?

My page get 50% from Google Page Speed: https://tikex-dev.com

The template page I replicating get 72% on desktop. http://themes.framework-y.com/codrop/music/

Why they page load faster? I see a black flash when loading the page in the parallax effect section, but I do not see it in the template I am following. I load a different image, but that is the only difference. I have an extra div under body, because Next.js puts it there.

<div class="parallax-mirror ken-burn-center" style="visibility: visible; z-index: -100; position: fixed; top: -13px; left: 0px; overflow: hidden; transform: translate3d(0px, 0px, 0px); height: 831px; width: 1440px;"><img class="parallax-slider" src="/young-people-dancing-tango-studio.jpg" style="transform: translate3d(0px, 0px, 0px); position: absolute; top: -230.6px; left: 0px; height: 961px; width: 1440px; max-width: none;"></div>

const Layout = ({ children, isNavbarTransparent }: Props) => {
    return (
        <>
            <Navbar transparent={isNavbarTransparent} />
            {children}

Do you have any idea, how to skip the black flash at beginning? Can parallax loading be used with server side rendering efficiently?

Solution

  • Your problem comes from that different image - it's 14.3 mb which leads to a huge LCP - 25% weightage on pagespeed scores.

    enter image description here

    Use next/image or a image CDN like cloudinary to send the right format/size for your devices.

    If you decide to use next/image then use the placeholder to use a low quality image that gets painted over or a blurdataurl - https://nextjs.org/docs/api-reference/next/image#placeholder - This will get rid of the black and have a pixelated image that gets painted over - This however is not your primary issue.