What could be causing the slow loading time of my Shopify App developed using Next.js (React)?

I recently followed a tutorial at

However, I am facing severe performance issues with my app. It loads extremely slowly when changing tabs, whether it's running on ngrok, localhost, or deployed on app engine.

I'm new to React, Next.js, and Shopify App development, so the solution might be basic.

In the build output, there is mention of "First Load JS shared by all" being too large, highlighted in red. Could this 214KB chunk size really be causing such slow loading times?

Build

https://i.stack.imgur.com/GehRz.png

React Dev Tools Profiler

https://i.stack.imgur.com/uEVQs.png

https://i.stack.imgur.com/Nw366.png

@next/bundle-analyzer Output:

Parsed

https://i.stack.imgur.com/PyxZ7.jpg

https://i.stack.imgur.com/xrHX7.jpg

Gzipped

https://i.stack.imgur.com/7CD7F.jpg

https://i.stack.imgur.com/bUYPZ.jpg

package.json

 {
      "name": "ShopifyApp1",
      "version": "1.0.0",
      ...
    }

Chrome Dev Tools Network Tab

EDIT:

npm run dev

https://i.stack.imgur.com/4XBDH.png

The "webpack-hmr" line load time keeps increasing for some strange reason.

npm run build && npm run start

https://i.stack.imgur.com/I5WjN.png

next.config.js

require("dotenv").config({path:"live.env"});
const withCSS = require('@zeit/next-css');
...

_app.js

import App from 'next/app';
...

Index.js (client)

import {
  Button,
  Card,
  Form,
  FormLayout,
 ...
class Index extends React.Component  {
 ...
export default Index;

server.js

const dev = process.env.NODE_ENV !== 'production';
...

Edit

I have already tried an initial solution, but I'm open to better suggestions if available.

Additionally, it seems like we can optimize the Shopify app bridge navigation links to use the next.js router instead of full page reloads:

If anyone can provide detailed steps on how to implement this in next.js, that would be greatly appreciated.

javascriptnode.jsreactjsshopifynext.js

Answer №1

https://i.stack.imgur.com/wxcOY.png

My question included load times measured using npm run dev, but I also have some details about load times in prod mode.

When running the app in prod mode (using npm run build and npm run start) without embedding into the Shopify admin UI, it takes approximately 2 seconds to load, which is still considered slow compared to other platforms (Shopify UI added an extra 3 seconds).

In my observation, the navigation links in the Shopify app caused full page reloads when clicked instead of simply changing pages like Next.js links would do.

I decided to replace the App Navigation links with Next links to improve performance.

However, even with these changes, the initial load time of 1.86 seconds is not satisfactory, so I am open to exploring better solutions.

Answer №2

It's quite concerning that your initial load on the index page took nearly 2 seconds for just 18.5KB of data, as indicated by your dev tools waterfall. This sluggish performance seems to suggest potential network or server delays. Have you considered if you are hosting this website locally or on a web server?

I recommend stripping down your content to see if the issue persists. Try loading a barebones index.html file with only a header and see if the delay still exists. If so, it might be time to consider upgrading your hosting provider or migrating to a more efficient one. Slow upload speeds could also be a factor, especially if you're hosting locally and your internet plan offers faster downloads than uploads.

Answer №3

Consider streamlining your code by eliminating any unnecessary elements. Utilize dynamic imports to prioritize a fast initial load, with heavier content like charts, graphs, images, and videos loading at a later time on the client side. Import dynamically from "next/dynamic" for a swift first paint view akin to YouTube.

https://nextjs.org/docs/advanced-features/dynamic-import

Experiment with React Formik (an optimized form controller for small applications) and shift towards using function components instead of Class Components. With Next.js, you can handle most database calls in getStaticProps, getServerSideProps, and getStaticPaths. For periodic cached fetching, consider utilizing the SWR hook.

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

Looking to eliminate the bullet point next to the labels on a highcharts graph?

I have implemented a Highcharts solid gauge in my project, and you can view a sample image https://i.stack.imgur.com/QQQFn.png However, I am facing an issue where unwanted grey bullets are appearing in the test environment but not locally. I have checked ...

javascriptvue.jshighcharts

Improving how React deals with routes

Is there a more efficient way to manage react routes for my book store website? I want each book to have its own page with author information and purchase options. Here are my current routes: <Routes> {/* DASHBOARD */} < ...

reactjsroutes

What is the best way to implement an automatic logout feature in PHP?

I develop websites with login/logout functionality. Whenever a link or button is clicked on the website, I use an ajax function to verify the user's login status and automatically log them out if their session has expired. The logout function also up ...

javascriptphpjqueryajax

Creating interactive carousel slides effortlessly with the power of Angular and the ngu-carousel module

I'm currently tackling the task of developing a carousel with the ngu-carousel Angular module, available at this link. However, I'm facing some challenges in configuring it to dynamically generate slides from an array of objects. From what I&apos ...

javascriptangulartypescriptngu-carousel

Establish a global variable within a TypeScript file

I am currently facing an issue where I need to add an event to the browser inside the CheckSocialMedia function. However, it keeps saying that it could not find the name. So, my question is how do I make the 'browser' variable global in the .ts ...

javascriptangularionic3inappbrowser

An error was returned by Ajax when attempting to make the ajax call

I have a custom ajax function that successfully updates my database. After the update, I call the successAlert() function. Now, I want to incorporate an error handling mechanism by calling the error function in case of any errors. However, during testing, ...

javascriptphpjqueryajax

How come I am unable to pass JavaScript values to my PHP5 code?

I'm struggling with this code snippet: <?php $html=file_get_contents('testmaker_html.html'); echo $html; ?> <script type="text/javascript"> document.getElementById('save_finaly_TEST').addEventLis ...

javascriptphpphp-5.2

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

When working with a button component, I pass props to customize its appearance: const StoreButton = ({ storeColor }) => { const borderBottom = `solid 3px ${storeColor}`; const classes = useStyles({ borderBottom }); return ( <Button varian ...

javascriptcssreactjsmaterial-uijss

When I attempt to add yarn using `yarn add`, the entire directory receives a "cannot find module" error message from nodeJS

I'm currently working on a project for a login web application in a folder named 'login.' To start off, I used yarn add to set up my project and include all the necessary packages. However, when attempting to run the project using node ., an ...

node.jsexpressnode-modulesyarnpkg

Is Window.navigator malfunctioning on different browsers in Mac OS?

I'm attempting to access the navigator function in my project to share a specific URL, but I'm facing difficulties accessing it on Mac OS when using browsers other than Safari. Is there a solution to this issue? Below is the function I created f ...

javascriptnext.jsnavigator

Tips for executing a Python function from JavaScript, receiving input from an HTML text box

Currently, I am facing an issue with passing input from an HTML text box to a JavaScript variable. Once the input is stored in the JavaScript variable, it needs to be passed to a Python function for execution. Can someone provide assistance with this pro ...

javascriptpythonhtmlrobotframework

Issue with react-bootstrap NavBar functionality being uncooperative

As a newcomer to the world of react, I am facing an issue with the <NavDropdown.Item> component within the given class: import React, { Component } from 'react'; import { Nav, Navbar, NavItem, NavDropdown } from 'react-bootstrap'; ...

reactjsreact-bootstrap

Automate brush control and transmit pertinent data through coding

Extending on the query from yesterday's thread, I am working towards implementing multiple brushes. While my current brute force method is functional, I require additional functionality to programmatically manage each of these newly created brushes. ...

javascriptd3.js

Utilizing a functional component to incorporate a "load more" button in ReactJS

Hey everyone, I've come across this ReactJS code that I need some help with: function DisplaySolutions({solutions}) { const topSolutions = solutions.slice(0, 4); const remainingSolutions = solutions.slice(4); const [isD ...

javascriptreactjs

Guide to locating and substituting two integer values within a string using JavaScript

Given a string such as: "Total duration: 5 days and 10 hours", where there are always two integers in the order of days and then hours. If I need to update the old string based on calculations using fields and other values, what is the most efficient meth ...

javascriptregex

Using both withNextIntl and withPlaiceholder simultaneously in a NextJS project causes compatibility issues

I recently upgraded to NextJS 14 and encountered an issue when deploying my project on Vercel. The next.config.mjs file in which I wrapped my nextConfig in two plugins seemed to prevent the build from completing successfully. As a workaround, I decided t ...

javascriptnode.jstypescriptnext.jsnext-intl

How can parameters be included in ng-href when using ng-click?

So I have this list of products and I want to pass the current product id when clicking on ng-href by using a function with ng-click in the ng-href. This is what my html file looks like: <div class="agile_top_brands_grids" ng-model="products" ng-repe ...

javascriptangularjsangularjs-ng-clickangularjs-ng-href

Retrieving a local variable within an AngularJS controller

Examining the code provided below: app.controller('Controller', function($scope, $http){ $scope.rep = []; $scope.tot = { name: '', marketValue: 0, cash: 0, legend: 'none' }; ...

javascriptangularjsclosures

Is there a way to uncheck a checkbox by clicking on a link?

Just have a single checkbox for toggling: <label><input type="checkbox" name="myfield" id="myfield" />&nbsp;&nbsp;Enable Sound</label> Users can click on it to turn sound on the site. I'm looking for a way to uncheck the ch ...

javascript

Improving JavaScript event management efficiency through handling numerous asynchronous HTTP requests

Summary: In a SPA CMS project, multiple dynamic data sources are causing performance issues due to a large number of asynchronous HTTP calls required to display a table with extensive data. The challenge is to maintain good performance while handling the ...

javascripthtmlperformancegraphqlweb-worker