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

Improve page load performance #2155

Merged
merged 14 commits into from
Aug 5, 2024
Merged

Improve page load performance #2155

merged 14 commits into from
Aug 5, 2024

Conversation

delucis
Copy link
Member

@delucis delucis commented Jul 26, 2024

Description

  • This PR includes some performance optimizations implemented based on looking at page load traces
  • These changes are mostly very subtle, but help delay non-essential JS to only run once pages are fully loaded. The impact is mainly relevant on lower-powered devices

Traces

Here are two traces with simulated 20x CPU throttling in Chrome. You can see that the same work still needs to happen, but table of contents and code sample logic is deferred until the main thread is idle, avoiding forced style recalculation/layout work and moving the DOMContentLoaded event earlier.

Before

image

Download trace (6.9 MB)

After

image

Download trace (6.7 MB)

Copy link

changeset-bot bot commented Jul 26, 2024

🦋 Changeset detected

Latest commit: c23f3a2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@astrojs/starlight Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the 🌟 core Changes to Starlight’s main package label Jul 26, 2024
Copy link

netlify bot commented Jul 26, 2024

Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit c23f3a2
🔍 Latest deploy log https://app.netlify.com/sites/astro-starlight/deploys/66ab8dc034dc030008e7b2d3
😎 Deploy Preview https://deploy-preview-2155--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 92 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@astrobot-houston
Copy link
Collaborator

astrobot-houston commented Jul 26, 2024

size-limit report 📦

Path Size
/index.html 5.95 KB (+0.02% 🔺)
/_astro/*.js 21.93 KB (+0.3% 🔺)
/_astro/*.css 13.79 KB (0%)

@delucis delucis marked this pull request as ready for review August 1, 2024 13:04
@delucis delucis changed the title [TEST] Improve page load performance Improve page load performance Aug 1, 2024
@delucis delucis added the 🌟 patch Change that triggers a patch release label Aug 1, 2024
Copy link
Member

@HiDeoo HiDeoo left a comment

Choose a reason for hiding this comment

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

Amazing, and the code got simplified so much compared to the last time I checked this PR, super impressive 🌟

@delucis delucis merged commit 8bed886 into main Aug 5, 2024
15 checks passed
@delucis delucis deleted the chris/toc-perf branch August 5, 2024 12:49
@astrobot-houston astrobot-houston mentioned this pull request Aug 5, 2024
HiDeoo added a commit to HiDeoo/starlight that referenced this pull request Aug 6, 2024
* main: (275 commits)
  [ci] release (withastro#2165)
  Define well-known RTL locales before calling `getLocaleInfo()` for default locale (withastro#2167)
  Update dependencies (withastro#2166)
  Improve page load performance (withastro#2155)
  docs: Add CodeSweetly to showcase (withastro#2160)
  [ci] release (withastro#2145)
  Fix bug for projects with spaces in their pathname (withastro#2156)
  ci: update file icons (withastro#2157)
  [ci] format
  Merge <link rel="canonical" /> tags, quick fixes (withastro#2153) (withastro#2154)
  Add two new showcase sites (withastro#2149)
  [ci] format
  i18n(zh-cn): Update `environmental-impact.md` (withastro#2148)
  add Saasfly showcase (withastro#2147)
  docs: add 'og:image:alt' metadata (withastro#2143)
  Deleting unnecessary twitter meta tags, quick fixes (withastro#2137)
  [ci] format
  i18n(es): update `environmental-impact` (withastro#2144)
  [ci] release (withastro#2142)
  feat: Add Pinterest icon to social list (withastro#2135)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌟 core Changes to Starlight’s main package 🌟 patch Change that triggers a patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants