Gatsby performance/page-load issue on Mobile.

[jkr86]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hello!

I'm currently using Gatsby version 5.11.0 and encountering performance issues on mobile devices. I've created a simple homepage containing only text to evaluate the page loading speed. Surprisingly, I'm observing a significant discrepancy in performance between mobile and desktop. The mobile performance score on vercel is 71, while the desktop score is 94 and The mobile performance score on Netlify is 67, while the desktop score is 85. I'm puzzled by this disparity, especially considering that the homepage has no content, CSS, or external links (such as Google Fonts or chats) attached.

Attached Screenshots below:

VERCEL:

NETLIFY:

Reproduction Link

https://github.com/jkr86/kip

Steps to Reproduce

1. Just open the home page URL I.e
   Vercel: https://kip-git-empty-home-page-jkr86s-projects.vercel.app/
   Netlify: https://empty-home-page--kip-web.netlify.app/

Expected Result

The mobile performance should be comparable to that of the desktop.

Actual Result

Described above.

Environment

System:
    OS: macOS 14.1.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.3.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 124.0.6367.62
    Safari: 17.1
  npmPackages:
    gatsby: ^5.11.0 => 5.13.3
    gatsby-link: ^5.11.0 => 5.13.1
    gatsby-plugin-functions: ^0.1.0-7 => 0.1.0-7
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-image: ^3.13.0 => 3.13.1
    gatsby-plugin-manifest: ^5.11.0 => 5.13.1
    gatsby-plugin-netlify: ^5.1.1 => 5.1.1
    gatsby-plugin-postcss: ^6.11.0 => 6.13.1
    gatsby-plugin-react-helmet: ^6.12.0 => 6.13.1
    gatsby-plugin-sharp: ^5.13.0 => 5.13.1
    gatsby-plugin-sitemap: ^6.12.3 => 6.13.1
    gatsby-source-contentful: ^8.13.0 => 8.13.1
    gatsby-source-filesystem: ^5.13.0 => 5.13.1
    gatsby-transformer-json: ^5.13.1 => 5.13.1
    gatsby-transformer-sharp: ^5.13.0 => 5.13.1
  npmGlobalPackages:
    gatsby-cli: 5.13.1

Config Flags

require('dotenv').config();
import type { GatsbyConfig } from "gatsby";
import path from "path";

const config: GatsbyConfig = {
siteMetadata: {
title: kip,
siteUrl: https://kip.com.au/,
},
graphqlTypegen: true,
plugins: [
"gatsby-plugin-netlify",
"gatsby-plugin-postcss",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
"gatsby-plugin-typescript",
"gatsby-plugin-image",
"gatsby-plugin-sitemap",
"gatsby-plugin-react-helmet",
{
resolve: "gatsby-plugin-manifest",
options: {
icon: "src/images/favicon.svg",
},
},
{
resolve: "gatsby-plugin-sitemap",
options: {},
},
{
resolve: gatsby-plugin-sharp,
options: {
defaults: {
formats: [auto, webp],
quality: 50
},
},
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: path.join(__dirname, src, images),
},
__key: "images",
},
gatsby-transformer-json,
{
resolve: gatsby-source-filesystem,
options: {
path: path.join(__dirname, src, data),
},
},
{
resolve: gatsby-source-contentful,
options: {
spaceId: 9bksknr2wzy2,
// Learn about environment variables: https://gatsby.dev/env-vars
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
},
},
],
};

export default config;

[branberry]

It looks like this is due largely to third party scripts:

I tried viewing your repository, but I get a 404 so I am not able to know for sure where exactly these scripts are coming from