Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(gatsby): add preload headers for critical resources so those can started fetching before common.js is fetched #28460

Merged
merged 3 commits into from
Dec 7, 2020

Conversation

pieh
Copy link
Contributor

@pieh pieh commented Dec 3, 2020

Description

Development runtime currently has network request waterfall where we wait to fetch critical resources to render a page until common.js is fetched, parsed and executed which triggers fetching those resources.

Adding preload header allow us to avoid network request waterfalls

Comparisons:

Chrome dev tools, networks tab (slow 3g):

Master:

Screenshot 2020-12-03 at 15 50 05

This PR:

Screenshot 2020-12-03 at 15 50 49

Webpagetest

First contentful paint

Running

performance.getEntriesByType('paint').find(entry => entry.name === 'first-contentful-paint').startTime

in dev tools console (with slow-3g throthling) result in:

  • master: 20529.959999985294
  • this PR: 16223.045000020647

(above was from single runs, so take it with grain of salt)

[ch20207]

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Dec 3, 2020
@pieh pieh added topic: resource loading* and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Dec 3, 2020
@pieh pieh force-pushed the feat/develop/add-preload-headers branch from 6ceae00 to d9273dd Compare December 4, 2020 11:13
…pages too, ensure static query hashes have no duplicates
@pieh pieh marked this pull request as ready for review December 4, 2020 17:26
Copy link
Contributor

@wardpeet wardpeet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is perfect. Thank you for tackling this!

@wardpeet wardpeet changed the title feat(develop): add preload headers for critical resources so those can started fetching before common.js is fetched feat(gatsby): add preload headers for critical resources so those can started fetching before common.js is fetched Dec 7, 2020
@wardpeet wardpeet merged commit b4a76f5 into master Dec 7, 2020
@wardpeet wardpeet deleted the feat/develop/add-preload-headers branch December 7, 2020 13:58
pieh added a commit that referenced this pull request Dec 7, 2020
… started fetching before common.js is fetched (#28460)

(cherry picked from commit b4a76f5)
pieh added a commit that referenced this pull request Dec 7, 2020
… started fetching before common.js is fetched (#28460) (#28521)

(cherry picked from commit b4a76f5)

Co-authored-by: Michal Piechowiak <[email protected]>
@pieh
Copy link
Contributor Author

pieh commented Dec 7, 2020

Published in [email protected]

pragmaticpat pushed a commit to pragmaticpat/gatsby that referenced this pull request Apr 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants