profile
viewpoint

Ask questions[Help] I somehow managed to butcher my site's performance

<!-- To make it easier for us to help you, please include as much useful information as possible.

Useful Links:

  • Documentation: https://www.gatsbyjs.org/docs/
  • Contributing: https://www.gatsbyjs.org/contributing/

Gatsby has several community support channels, try asking your question on:

  • Discord: https://gatsby.dev/discord
  • Spectrum: https://spectrum.chat/gatsby-js
  • Twitter: https://twitter.com/gatsbyjs

Before opening a new issue, please search existing issues https://github.com/gatsbyjs/gatsby/issues -->

Summary

When accessed through normal means, the site is blazing fast. However, when tested using lighthouse, the performance score is terrible.

Relevant information

Webpage Test Results

Lighthouse Results

I believe the image sizes are fixable but I'm not sure how to optimize for the rest. Especially this part where I need to minimize main-thread work:

Screen Shot 2019-05-09 at 12 40 12 PM

I'm not sure where to start and what to look for. I tried viewing the trace, but I have no clue what's going on and what's causing this. If someone can help or even point me to the right direction, that would be helpful!

<!-- Provide as much useful information as you can -->

Environment (if relevant)

System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.0.0 - /usr/local/bin/node
    Yarn: 1.6.0 - ~/.yarn/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 74.0.3729.131
    Firefox: 66.0.3
    Safari: 12.1
  npmPackages:
    gatsby: ^2.3.23 => 2.3.23 
    gatsby-image: ^2.0.35 => 2.0.35 
    gatsby-plugin-canonical-urls: ^2.0.12 => 2.0.12 
    gatsby-plugin-feed: 2.1.0 => 2.1.0 
    gatsby-plugin-google-analytics: 2.0.18 => 2.0.18 
    gatsby-plugin-html-attributes: ^1.0.5 => 1.0.5 
    gatsby-plugin-manifest: ^2.0.19 => 2.0.19 
    gatsby-plugin-netlify: 2.0.13 => 2.0.13 
    gatsby-plugin-nprogress: 2.0.10 => 2.0.10 
    gatsby-plugin-offline: ^2.0.24 => 2.0.24 
    gatsby-plugin-react-helmet: ^3.0.8 => 3.0.8 
    gatsby-plugin-react-svg: ^2.0.0 => 2.0.0 
    gatsby-plugin-sitemap: 2.0.10 => 2.0.10 
    gatsby-plugin-styled-components: ^3.0.7 => 3.0.7 
    gatsby-plugin-typography: 2.2.10 => 2.2.10 
    gatsby-remark-external-links: 0.0.4 => 0.0.4 
    gatsby-remark-prismjs: 3.2.6 => 3.2.6 
    gatsby-source-contentful: ^2.0.44 => 2.0.44 
    gatsby-source-filesystem: ^2.0.28 => 2.0.28 
    gatsby-transformer-remark: 2.3.8 => 2.3.8 
    gatsby-transformer-sharp: 2.1.17 => 2.1.17 
  npmGlobalPackages:
    gatsby-cli: 2.5.12

<!-- Required. Run gatsby info --clipboard in your gatsby project directory and paste its contents here. -->

File contents (if changed)

gatsby-config.js: N/A <!-- Please use a code block or just leave it as is if wasn't changed --> package.json: N/A <!-- Please use a code block or just leave it as is if wasn't changed --> gatsby-node.js: N/A <!-- Please use a code block or just leave it as is if wasn't changed --> gatsby-browser.js: N/A <!-- Please use a code block or just leave it as is if wasn't changed --> gatsby-ssr.js: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->

gatsbyjs/gatsby

Answer questions daydream05

I'm getting closer to a respectable speed.

Things I've done so far. I might be wrong on some of these assumptions.

  • Reduced all my image sizes
  • Stopped using base64 on the images
  • Removed the video

Biggest difference maker:

  • Stopped bundling my js and css on Netlify. My assumption is that bundling lowers the number of times your sites make a request, but it increases the size & complexity of your js. This takes the browser a lot more time to process and evaluate. So removing bundling helped reduce javaScript execution time.
useful!

Related questions

Error: Cannot create as TypeComposer the following value: Date. hot 3
Importing Link from gatsby breaks Storybook hot 2
Loading chunks while a new release is deployed hot 2
Webpack error #98123 when running "gatsby develop" hot 2
gatsby build error #11328 A page component must export a React component for it to be valid. Please make sure this file exports a React component: /Users/tiagosanchez/Documents/Projects/personalBlog/node_modules/gatsby-plugin-offline/app-shell.js hot 2
[gatsby-telemetry] error: src/postinstall.js not found in Linux environments hot 2
IE11: Object not valid as React Child hot 2
CircleCI build Error: spawn ENOMEM hot 2
Build gets stuck at Generating image thumbnails / Update schema on large sites hot 2
[gatsby-source-graphql] Shopify GraphQL Schema Error hot 2
UNHANDLED REJECTION Source and destination must not be the same. hot 2
gatsby-source-shopify unable to complete build hot 2
Gatsby's Use Of Polyfills and the 'Missing Resources for x' error hot 2
Autoprefixer "browsers" option is deprecated in v9, produces warnings hot 2
&#39;gatsby&#39; is not recognized as an internal or external command hot 2
Github User Rank List