<!-- 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:

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 -->

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.