gatsbyjs/gatsby

Gatsby performance/page-load issue on Mobile.

jkr86 opened this issue · 1 comments

jkr86 commented

Preliminary Checks

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:

Screenshot 2024-04-24 at 8 29 45 PM Screenshot 2024-04-24 at 8 29 55 PM

NETLIFY:

Screenshot 2024-04-24 at 8 30 13 PM Screenshot 2024-04-24 at 8 30 22 PM

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 commented

It looks like this is due largely to third party scripts:
image
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

  • 👍1