The delay between initiating a Next JS route by clicking and the corresponding page actually loading

Just launched my website at this link: I am experiencing a delay of up to 2 seconds between clicking the header links and the page loading. The site works fine in development and on localhost, so I'm not sure why there's such a slowdown on the live site.

UPDATE: The site performance deteriorates with each click until it eventually crashes. Could this be a memory leak issue?

I have identified the problematic code. How is it impacting every page load on my site?

const isBrowser = typeof window !== 'undefined'
if (isBrowser) {
  this.setState({ isLoading: false })
}

//Monitor router events to display loading spinner
Router.events.on('routeChangeStart', () => {
  this.setState({ isLoading: true })
})

Router.events.on('routeChangeComplete', () => {
  this.setState({ isLoading: false })
})

Router.events.on('routeChangeError', () => {
  this.setState({ isLoading: false })
})

Any suggestions for debugging? I've tried a few things with no luck.

Thank you

Answer №1

After analyzing the network calls, it appears that there is an excessive amount of data, over 28MB, being downloaded with each page load. Consider implementing lazy loading for off-screen images to optimize performance. Additionally, there are numerous unused JavaScript codes in your bundle. Utilize a bundle analyzer tool to eliminate any unnecessary code segments and enhance render speed.

To obtain comprehensive performance statistics, conduct a site audit using Light House

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error in Next.js Image Component: "Please provide the 'src' property for the image"

Dealing with Strapi v4.11.5 and Next.js 13.4.19 I've run into a problem while attempting to retrieve images in my Next.js project. In one of the components, I utilize the Image component from Next.js to showcase images fetched from an API. However, e ...

"Unresolved issue: Clicking on Navbar in Next JS results in

Exploring ways to create a responsive navigation feature by toggling a class on the nav when clicking a burger menu icon. An intriguing concept! Navigating through the realm of React and Next.js, still delving into its depths. import Link from 'next/ ...

Trouble altering an attribute using jquery

Hey there, I'm struggling with changing the attribute for an id and can't quite pinpoint where I'm going wrong. It's not making things easier that I'm pretty new to this whole thing as well. I've created a function to ensure ...

What methods can be used to construct components using smaller foundational components as a base?

Is there a more elegant approach to constructing larger components from smaller base components that encompass common functionalities, akin to an interface in the OOP realm? I'm experimenting with this concept, but it feels somewhat inelegant. Repor ...

Child_process module spawn method in Node.js

When I attempt to play an audio stream using the mpg123 command, everything works perfectly fine. I have also implemented a method to terminate the process successfully. However, I am struggling to retrieve output from the executed command. Despite follow ...

I'm encountering an issue while trying to retrieve NFTs from a contract on the marketplace

Unhandled Issue at Runtime Error Type: TypeError - contract?.getAddress is not a function Stack Trace: useActiveListings Error occurred in webpack-internal:///./node_modules/@thirdweb-dev/react-core/dist/useTransactions-07d3933d.browser.esm.js (3764:37) ...

Conceal Bootstrap Toast for a day following dismissal

I have implemented Bootstrap 5 toasts to showcase an advertisement on my website. The goal is to make the advertisement disappear for 24 hours once the user closes it. Here's the current code snippet: <div class="position-sticky bottom-0" ...

Merging two individual JavaScript scripts to ensure seamless functionality for both

I am facing a challenge with utilizing two scripts simultaneously: Script 1: $(document).ready(function () { $(".tabContent").not(":first").hide(); $("ul.tabs li:first").addClass("active").show(); $("ul.tabs li").click(function () { $ ...

Error: The specified object does not contain the 'tableRow' method

I am currently working on a contacts book project and I need a table to update as the user inputs data. However, I keep encountering an error related to 'tableRow'. I have tried changing function names and other solutions but haven't been ab ...

Just starting out with JavaScript - updating the appearance of an element

Based on the value of a boolean, I am looking to control the visibility of specific tabs in my sidebar when the page loads. var someVar = true; function show_ifTrue() { if (Boolean(someVar) == true) { document.getElementById('x'). ...

Troubleshooting slow/delayed performance when using manual dataItem.set() in Kendo UI Grid

I recently implemented an editable Kendo Grid with a checkbox column to toggle a boolean value, thanks to an ingenious solution offered by OnaBai. The implementation works flawlessly! The only issue I'm facing is that there seems to be a delay in cha ...

Is the tab not displaying correctly when using Bootstrap 5 button functionality?

With Bootstrap 5, I have a modal that contains two tabs for login and register. However, I am facing an issue where the tab is not displaying correctly based on the button click. The desired behavior is that clicking on the login button should activate th ...

After a push to the router, scrolling is disabled

While working on a Vuejs project, I encountered an issue when trying to change the page of my PWA using this.$router.push();. It seems to work fine everywhere else except when doing it from a modal within a component. The pushed page loads but scrolling is ...

Encountering an "undefined" error when implementing the useReducer hook in React

I'm encountering an error when using the UseReducer hook in React. Even though I have destructured the state object, I still receive this error: const [{previousOperand,currentOperand,operation},dispatch] = useReducer(reducer,{}); return ( ...

Difficulty encountered when trying to map an array to JSX - Error: Unexpected token

I am struggling to properly map an employees array to a new array using ReactJS and JSX. It seems like there is an issue with my return method. Please keep in mind that I am a complete beginner when it comes to React and ES6. Can someone guide me on how t ...

Create a repeating function that will show an image based on the specific class assigned to each individual element

Can someone help me create a function that automatically applies to all divs with a specific class on my document? I want the function to check for the presence of another class within those divs and display an image accordingly. document.getElementsByCla ...

When using Intl.DateTimeFormat, unexpected output may occur when formatting dates prior to the year 1847

Why do dates before 1848 result in May 10 when formatted? Could this be related to time zones? And if so, how can I prevent this issue when creating a date object from an ISO date string like YYYY-MM-DD format? (Tested on Chrome 59) const workingDate ...

Utilizing ScrollView Component in React Native

I have developed a simple app that displays a collection of images with titles, resembling a film gallery where all available films can be viewed. However, I encountered an issue when trying to implement the ScrollView element as it does not allow for scro ...

My NextJS page is missing the essential hreflang meta tags

I am facing an issue where the SEO checker tools like are unable to detect my generated HREFLANG tags. These tags are being generated within my language switcher component inside the next/head component. My assumption is that the problem might be related ...

Implementing a click function that toggles between adding and removing a class, keeping track of the number of clicks, and utilizing localStorage to prevent repeated clicking in the

Hi there! I'm currently working on a simple widget that features a clickable icon and a counter next to it. When the icon is clicked, it should toggle between an empty heart and a filled heart using addClass/removeClass. Additionally, each click incr ...