Slow speed on mobile

[insaurabh]

Hi,

I migrated one of the WordPress frontend on gatsby

Gatsby version as mentioned below.
"gatsby": "5.6.1",
"gatsby-cli": "5.6.0"

On desktop speed is 82.

On mobile speed is 59

On mobile i am trying to optimize Reduce unused JavaScript

Till now

1. pre-loaded fonts
2. pre-loaded css
3. pre-loaded first few images
4. Found that slick causing issues so used keen slider ( need to work on this as per requirement ), currently I didn't remove slick from package.json as other modules are using it, will remove later.

Plugin list

   "@babel/runtime": "7.21.0",
   "@loadable/component": "^5.15.2",
   "@loadable/server": "^5.15.2",
   "@reach/router": "^1.3.4",
   "@react-google-maps/api": "^2.13.1",
   "@todys/react-slide-toggle": "^2.0.7",
   "animate.css": "^4.1.1",
   "fs": "0.0.1-security",
   "gatsby": "5.6.1",
   "gatsby-cli": "5.6.0",
   "gatsby-plugin-advanced-sitemap": "2.0.0",
   "gatsby-plugin-html-attributes": "^1.0.5",
   "gatsby-plugin-image": "^3.7.0",
   "gatsby-plugin-load-script": "^1.1.0",
   "gatsby-plugin-loadable-components-ssr": "^4.3.2",
   "gatsby-plugin-lodash": "^6.8.0",
   "gatsby-plugin-manifest": "^5.4.0",
   "gatsby-plugin-postcss": "^6.6.0",
   "gatsby-plugin-preact": "^7.7.0",
   "gatsby-plugin-preload": "^1.0.0",
   "gatsby-plugin-preload-fonts": "^4.6.0",
   "gatsby-plugin-purgecss": "^6.2.1",
   "gatsby-plugin-react-helmet": "^6.4.0",
   "gatsby-plugin-robots-txt": "^1.8.0",
   "gatsby-plugin-sass": "^6.6.0",
   "gatsby-plugin-sharp": "^5.6.0",
   "gatsby-plugin-sitemap": "^6.7.0",
   "gatsby-plugin-split-css": "^2.0.2",
   "gatsby-plugin-stylus": "^5.6.0",
   "gatsby-plugin-zopfli": "^2.0.0",
   "gatsby-react-router-scroll": "^6.3.0",
   "gatsby-remark-images": "^7.6.0",
   "gatsby-remark-lazy-load": "^1.0.2",
   "gatsby-source-filesystem": "^5.6.0",
   "gatsby-source-wordpress": "^7.6.0",
   "gatsby-source-wordpress-menus": "^1.1.4",
   "gatsby-transformer-remark": "^6.6.0",
   "gatsby-transformer-sharp": "^5.6.0",
   "google-map-react": "^2.2.0",
   "html-react-parser": "^3.0.9",
   "keen-slider": "^6.8.5",
   "lazysizes": "^5.3.2",
   "lodash": "^4.17.21",
   "perfect-scrollbar": "^1.5.5",
   "postcss": "^8.2.10",
   "preact": "^10.13.1",
   "preact-render-to-string": "^5.2.6",
   "query-string": "^8.1.0",
   "querystring-es3": "^0.2.1",
   "react": "^18.2.0",
   "react-alphabet-sorter": "^1.0.2",
   "react-best-tabs": "^1.3.3",
   "react-collapsible": "^2.10.0",
   "react-cookie": "^4.1.1",
   "react-countup": "^6.4.2",
   "react-datepicker": "^4.8.0",
   "react-dom": "^18.2.0",
   "react-google-autocomplete": "^2.7.0",
   "react-google-maps": "^9.4.5",
   "react-helmet": "^6.1.0",
   "react-hook-form": "^7.40.0",
   "react-lazy-load-image-component": "^1.5.5",
   "react-modal": "^3.16.1",
   "react-native-fontawesome-pro": "^2.1.0",
   "react-perfect-scrollbar": "^1.5.8",
   "react-player": "^2.11.0",
   "react-query": "^3.39.3",
   "react-router-dom": "^6.4.2",
   "react-script-tag": "^1.1.2",
   "react-slick": "^0.29.0",
   "react-social-media-embed": "^2.2.2",
   "react-string-replace": "^1.1.0",
   "react-tab-view": "^1.1.1",
   "react-tabs": "^6.0.0",
   "react-transition-group": "^4.4.5",
   "react-wait": "^0.3.0",
   "sass": "^1.54.8",
   "slick-carousel": "^1.8.1",
   "styled-components": "^5.3.5",
   "typeface-merriweather": "1.1.13",
   "typeface-montserrat": "1.1.13",
   "video-react": "^0.16.0",
   "yoga-layout-prebuilt": "^1.10.0"
 },
 "devDependencies": {
   "@loadable/babel-plugin": "^5.13.2",
   "@loadable/webpack-plugin": "^5.15.2",
   "@types/react-lazy-load-image-component": "^1.5.2",
   "dumper.js": "^1.3.1",
   "prettier": "2.8.4"
 }```

[insaurabh]

Update

1. My page-data/index/page-data.json is very heavy almost 12MB

It contains data of internal pages. I removed of gatsby as well.

Any suggestions on how the page-data.json file was created?

Thank You.

[808vita]

try optimizing the graphql queries maybe ?

For better metrics stick to basics-

lazy load components - more specifically for mobile load the first fold & lazy load rest .

reduce the div counts - removed unused divs (do it captiously , check for styling side effects)

optimize the queries - relevant for gatsby - load only the data that's required for the current page

optimize images - adjust the quality

optimize the code - remove unnecessary loops , etc

[insaurabh]

Thank you for your suggestions. I optimized the speed by approx 20 points by fixing issues like layout shifts, pre loading fonts.

Without google script speed is 70 on mobile but once I add the google script speed decreased. I am using <Script /> provided by gatbsy with idle mode.

[808vita]

does the stats change on other script load strategies ?
if the script is going to exist on all pages , trying adding it to the html template and defer it ? (use html.js please refer to the gatsby docs .)