Skip to content

Performance monitoring: Islands - #5296

Merged
mxdvl merged 4 commits into
mainfrom
mxdvl/islands-perf
Jul 4, 2022
Merged

mxdvl merged 4 commits into
mainfrom
mxdvl/islands-perf

Conversation

@mxdvl

@mxdvl mxdvl commented Jul 4, 2022 •

Copy link
Copy Markdown
Contributor

What does this change?

Refactor initPerf to simplify and shorten the code. Stop logging willy-nilly for data that we never look at.

Log islands performance info: how long it took then to render or hydrate, how long to download their JavaScript.

Chore: bump lockfiles.

Why?

We need more fine-grained information about our Islands hydration. In order to know which ones are performing best and worse, and start enforcing budget, we need information broken down by Island.

Related

Screenshots

Before After
before after

@mxdvl mxdvl added the 📊 Data label Jul 4, 2022
@mxdvl
mxdvl requested a review from a team as a code owner July 4, 2022 08:33
@mxdvl
mxdvl requested a review from a team July 4, 2022 08:33
@github-actions

github-actions Bot commented Jul 4, 2022 •

Copy link
Copy Markdown

Size Change: -4.79 kB (0%)

Total Size: 1.78 MB

Filename Size Change
dotcom-rendering/dist/atomIframe.********************.js 776 B -986 B (-56%) 🏆
dotcom-rendering/dist/dynamicImport.********************.js 1.93 kB -964 B (-33%) 🎉
dotcom-rendering/dist/frontend.server.js 447 kB +305 B (0%)
dotcom-rendering/dist/ga.legacy.********************.js 2.9 kB -1.12 kB (-28%) 🎉
dotcom-rendering/dist/initDiscussion.legacy.********************.js 11 kB +170 B (+2%)
dotcom-rendering/dist/newsletterEmbedIframe.********************.js 956 B -964 B (-50%) 🏆
dotcom-rendering/dist/relativeTime.legacy.********************.js 1.35 kB -1.22 kB (-47%) 🎉
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1662.legacy.********************.js 5.78 kB 0 B
dotcom-rendering/dist/1815.legacy.********************.js 30.8 kB 0 B
dotcom-rendering/dist/2344.legacy.********************.js 2.77 kB 0 B
dotcom-rendering/dist/259.legacy.********************.js 3.24 kB 0 B
dotcom-rendering/dist/286.********************.js 23.2 kB 0 B
dotcom-rendering/dist/286.legacy.********************.js 23.9 kB 0 B
dotcom-rendering/dist/2947.********************.js 2.74 kB 0 B
dotcom-rendering/dist/2947.legacy.********************.js 2.82 kB 0 B
dotcom-rendering/dist/3307.********************.js 3.11 kB 0 B
dotcom-rendering/dist/3584.********************.js 1.8 kB 0 B
dotcom-rendering/dist/3584.legacy.********************.js 1.8 kB 0 B
dotcom-rendering/dist/4019.********************.js 3.44 kB 0 B
dotcom-rendering/dist/4019.legacy.********************.js 3.48 kB 0 B
dotcom-rendering/dist/4135.legacy.********************.js 6.76 kB 0 B
dotcom-rendering/dist/5058.********************.js 2.72 kB 0 B
dotcom-rendering/dist/5248.********************.js 6.62 kB 0 B
dotcom-rendering/dist/5436.legacy.********************.js 2.68 kB 0 B
dotcom-rendering/dist/5553.********************.js 2.85 kB 0 B
dotcom-rendering/dist/5553.legacy.********************.js 2.9 kB 0 B
dotcom-rendering/dist/6101.********************.js 32.8 kB 0 B
dotcom-rendering/dist/6131.********************.js 4.29 kB 0 B
dotcom-rendering/dist/6131.legacy.********************.js 4.3 kB 0 B
dotcom-rendering/dist/6400.********************.js 21.5 kB 0 B
dotcom-rendering/dist/6400.legacy.********************.js 21.5 kB 0 B
dotcom-rendering/dist/7148.********************.js 6.8 kB 0 B
dotcom-rendering/dist/7148.legacy.********************.js 7.31 kB 0 B
dotcom-rendering/dist/7576.********************.js 3.97 kB 0 B
dotcom-rendering/dist/7576.legacy.********************.js 5.39 kB 0 B
dotcom-rendering/dist/7800.********************.js 11.3 kB 0 B
dotcom-rendering/dist/7829.********************.js 2.8 kB 0 B
dotcom-rendering/dist/7829.legacy.********************.js 2.91 kB 0 B
dotcom-rendering/dist/8129.legacy.********************.js 11.8 kB 0 B
dotcom-rendering/dist/8344.legacy.********************.js 6.38 kB 0 B
dotcom-rendering/dist/8612.********************.js 3.72 kB 0 B
dotcom-rendering/dist/8612.legacy.********************.js 4.21 kB 0 B
dotcom-rendering/dist/9130.********************.js 5.92 kB 0 B
dotcom-rendering/dist/9380.legacy.********************.js 2.83 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.********************.js 4.52 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.legacy.********************.js 4.52 kB 0 B
dotcom-rendering/dist/atomIframe.legacy.********************.js 800 B 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.********************.js 459 B 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.legacy.********************.js 517 B 0 B
dotcom-rendering/dist/bootCmp.********************.js 8.8 kB 0 B
dotcom-rendering/dist/bootCmp.legacy.********************.js 12.4 kB -5 B (0%)
dotcom-rendering/dist/Branding-importable.********************.js 3.99 kB 0 B
dotcom-rendering/dist/Branding-importable.legacy.********************.js 4.01 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.********************.js 36.1 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.legacy.********************.js 36.1 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.********************.js 8.96 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.legacy.********************.js 9.65 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.********************.js 8.11 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.legacy.********************.js 8.46 kB 0 B
dotcom-rendering/dist/ChartAtomWrapper-importable.********************.js 261 B 0 B
dotcom-rendering/dist/ChartAtomWrapper-importable.legacy.********************.js 271 B 0 B
dotcom-rendering/dist/CommentCount-importable.********************.js 7.27 kB 0 B
dotcom-rendering/dist/CommentCount-importable.legacy.********************.js 7.42 kB 0 B
dotcom-rendering/dist/CommercialMetrics-importable.********************.js 7.77 kB 0 B
dotcom-rendering/dist/CommercialMetrics-importable.legacy.********************.js 3.11 kB 0 B
dotcom-rendering/dist/CoreVitals-importable.********************.js 6.64 kB 0 B
dotcom-rendering/dist/CoreVitals-importable.legacy.********************.js 1.38 kB 0 B
dotcom-rendering/dist/DiscussionContainer-importable.********************.js 7.32 kB 0 B
dotcom-rendering/dist/DiscussionContainer-importable.legacy.********************.js 7.68 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.********************.js 7.7 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.legacy.********************.js 7.89 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.********************.js 2.99 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.legacy.********************.js 3.1 kB 0 B
dotcom-rendering/dist/dynamicImport.legacy.********************.js 2.01 kB 0 B
dotcom-rendering/dist/EditionDropdown-importable.********************.js 4.09 kB 0 B
dotcom-rendering/dist/EditionDropdown-importable.legacy.********************.js 4.13 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.********************.js 3.34 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.legacy.********************.js 3.44 kB 0 B
dotcom-rendering/dist/embedIframe.********************.js 778 B 0 B
dotcom-rendering/dist/embedIframe.legacy.********************.js 800 B 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.********************.js 6.21 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.legacy.********************.js 6.8 kB 0 B
dotcom-rendering/dist/FetchCommentCounts-importable.********************.js 9.52 kB 0 B
dotcom-rendering/dist/FetchCommentCounts-importable.legacy.********************.js 9.71 kB 0 B
dotcom-rendering/dist/FilterButton-importable.********************.js 6.45 kB 0 B
dotcom-rendering/dist/FilterButton-importable.legacy.********************.js 6.61 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.********************.js 3.35 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.legacy.********************.js 3.41 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.********************.js 4.71 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.legacy.********************.js 4.77 kB 0 B
dotcom-rendering/dist/ga.********************.js 2.85 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.********************.js 7.79 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.legacy.********************.js 8.02 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.********************.js 12.9 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.legacy.********************.js 13.3 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.********************.js 10.1 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.legacy.********************.js 11 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.********************.js 6.87 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.legacy.********************.js 7.09 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.********************.js 11.3 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.js 10.3 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.legacy.********************.js 11.4 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.********************.js 9.28 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.js 9.75 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.legacy.********************.js 9.37 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.********************.js 263 B 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.legacy.********************.js 273 B 0 B
dotcom-rendering/dist/initDiscussion.********************.js 10.6 kB 0 B
dotcom-rendering/dist/InstagramBlockComponent-importable.********************.js 3 kB 0 B
dotcom-rendering/dist/InstagramBlockComponent-importable.legacy.********************.js 3.09 kB 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.********************.js 8.04 kB 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.legacy.********************.js 8.27 kB 0 B
dotcom-rendering/dist/islands.********************.js 10.9 kB 0 B
dotcom-rendering/dist/islands.legacy.********************.js 11.7 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.********************.js 6.72 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.legacy.********************.js 6.93 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtomWrapper-importable.********************.js 268 B 0 B
dotcom-rendering/dist/KnowledgeQuizAtomWrapper-importable.legacy.********************.js 280 B 0 B
dotcom-rendering/dist/LabsHeader-importable.********************.js 8.65 kB 0 B
dotcom-rendering/dist/LabsHeader-importable.legacy.********************.js 8.81 kB 0 B
dotcom-rendering/dist/Links-importable.********************.js 5.96 kB 0 B
dotcom-rendering/dist/Links-importable.legacy.********************.js 6.01 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.********************.js 5.45 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.legacy.********************.js 6.12 kB 0 B
dotcom-rendering/dist/Liveness-importable.********************.js 3.31 kB 0 B
dotcom-rendering/dist/Liveness-importable.legacy.********************.js 3.43 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.********************.js 8.87 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.legacy.********************.js 9.16 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.********************.js 11.3 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.legacy.********************.js 11.5 kB 0 B
dotcom-rendering/dist/MostViewedRightWrapper-importable.********************.js 10.7 kB 0 B
dotcom-rendering/dist/MostViewedRightWrapper-importable.legacy.********************.js 8.68 kB 0 B
dotcom-rendering/dist/newsletterEmbedIframe.legacy.********************.js 973 B 0 B
dotcom-rendering/dist/OnwardsLower-importable.********************.js 15.8 kB 0 B
dotcom-rendering/dist/OnwardsLower-importable.legacy.********************.js 16.2 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.********************.js 23.1 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.legacy.********************.js 23.7 kB 0 B
dotcom-rendering/dist/ophan.********************.js 7.09 kB 0 B
dotcom-rendering/dist/ophan.legacy.********************.js 7.3 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtomWrapper-importable.********************.js 271 B 0 B
dotcom-rendering/dist/PersonalityQuizAtomWrapper-importable.legacy.********************.js 282 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.********************.js 264 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.legacy.********************.js 274 B 0 B
dotcom-rendering/dist/PulsingDot-importable.********************.js 1.66 kB 0 B
dotcom-rendering/dist/PulsingDot-importable.legacy.********************.js 1.76 kB 0 B
dotcom-rendering/dist/QandaAtomWrapper-importable.********************.js 262 B 0 B
dotcom-rendering/dist/QandaAtomWrapper-importable.legacy.********************.js 272 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.********************.js 4.58 kB 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.legacy.********************.js 4.6 kB 0 B
dotcom-rendering/dist/readerRevenueDevUtils.********************.js 3.12 kB 0 B
dotcom-rendering/dist/readerRevenueDevUtils.js 2.31 kB 0 B
dotcom-rendering/dist/readerRevenueDevUtils.legacy.********************.js 4.16 kB 0 B
dotcom-rendering/dist/ReaderRevenueLinks-importable.********************.js 5.05 kB 0 B
dotcom-rendering/dist/ReaderRevenueLinks-importable.legacy.********************.js 5.45 kB 0 B
dotcom-rendering/dist/relativeTime.********************.js 1.33 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.********************.js 9.45 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.legacy.********************.js 9.62 kB 0 B
dotcom-rendering/dist/SecureSignupIframe-importable.********************.js 8.29 kB 0 B
dotcom-rendering/dist/SecureSignupIframe-importable.js 4.31 kB 0 B
dotcom-rendering/dist/SecureSignupIframe-importable.legacy.********************.js 8.59 kB 0 B
dotcom-rendering/dist/sentry.********************.js 684 B 0 B
dotcom-rendering/dist/sentry.legacy.********************.js 691 B 0 B
dotcom-rendering/dist/sentryLoader.********************.js 10.1 kB 0 B
dotcom-rendering/dist/sentryLoader.legacy.********************.js 14 kB -5 B (0%)
dotcom-rendering/dist/SetABTests-importable.********************.js 9.36 kB 0 B
dotcom-rendering/dist/SetABTests-importable.legacy.********************.js 4.77 kB 0 B
dotcom-rendering/dist/ShareCount-importable.********************.js 7.4 kB 0 B
dotcom-rendering/dist/ShareCount-importable.legacy.********************.js 7.57 kB 0 B
dotcom-rendering/dist/shimport.********************.js 2.78 kB 0 B
dotcom-rendering/dist/shimport.legacy.********************.js 2.79 kB 0 B
dotcom-rendering/dist/SignInGateMain.********************.js 4.46 kB 0 B
dotcom-rendering/dist/SignInGateMain.js 2.88 kB 0 B
dotcom-rendering/dist/SignInGateMain.legacy.********************.js 4.57 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.********************.js 5.19 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.legacy.********************.js 5.47 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.********************.js 8.98 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.legacy.********************.js 10.2 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.********************.js 8.79 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.legacy.********************.js 9.09 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.********************.js 13.3 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.legacy.********************.js 14.9 kB 0 B
dotcom-rendering/dist/SubNav-importable.********************.js 7.04 kB 0 B
dotcom-rendering/dist/SubNav-importable.legacy.********************.js 7.21 kB 0 B
dotcom-rendering/dist/TimelineAtomWrapper-importable.********************.js 262 B 0 B
dotcom-rendering/dist/TimelineAtomWrapper-importable.legacy.********************.js 273 B 0 B
dotcom-rendering/dist/TopicFilterBank-importable.********************.js 7.5 kB 0 B
dotcom-rendering/dist/TopicFilterBank-importable.legacy.********************.js 7.67 kB 0 B
dotcom-rendering/dist/TopRightAdSlot-importable.********************.js 2.06 kB 0 B
dotcom-rendering/dist/TopRightAdSlot-importable.legacy.********************.js 2.09 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.********************.js 1.8 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.legacy.********************.js 1.79 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.********************.js 2.98 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.legacy.********************.js 3.08 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.********************.js 8.88 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.legacy.********************.js 9.16 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.********************.js 2.8 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.legacy.********************.js 2.9 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.********************.js 9.45 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.legacy.********************.js 9.82 kB 0 B

compressed-size-action

@mxdvl
mxdvl force-pushed the mxdvl/islands-perf branch from b9e14cf to 374daa5 Compare July 4, 2022 08:45
@github-actions

github-actions Bot commented Jul 4, 2022 •

Copy link
Copy Markdown

⚡️ Lighthouse report for the changes in this PR

Lighthouse tested 2 URLs

⚠️ Budget exceeded for 4 of 10 audits.

Report for Article

tested url https://www.theguardian.com/commentisfree/2020/feb/08/hungary-now-for-the-new-right-what-venezuela-once-was-for-the-left

Category Status Expected Actual
First Contentful Paint ✅ 1500 1186
Largest Contentful Paint ✅ 3000 1707
Time to Interactive ✅ 3500 2267
Cumulative Layout Shift ⚠️ 0.002 0.004428
accessibility ✅ 0.97 1.000000

Report for Front

tested url https://www.theguardian.com/uk

Category Status Expected Actual
First Contentful Paint ✅ 1500 1268
Largest Contentful Paint ⚠️ 3000 3004
Time to Interactive ⚠️ 3500 3551
Cumulative Layout Shift ✅ 0.002 0.000000
accessibility ⚠️ 0.97 0.890000

Comment thread apps-rendering/package-lock.json Outdated

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We really need to look into why these keep switching between sha1 and sha512 - it's very weird @JamieB-gu @marsavar

Comment thread dotcom-rendering/src/web/browser/islands/doHydration.ts Outdated

@OllysCoding OllysCoding left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

+1 This is lovely!!

mxdvl added 3 commits July 4, 2022 10:42
- Removed systematic console logs
- Removed dependency on getEntriesByName
- Return time elapsed since time origin for start()
- Add some documentation
Hopefully gaining more insight into where
improvements would be beneficial.

Now logging to the console the duration of:
- rendering or hydration
- downloading the island’s JavaScript
@mxdvl
mxdvl force-pushed the mxdvl/islands-perf branch from 374daa5 to 7388ffe Compare July 4, 2022 09:42
@mxdvl
mxdvl merged commit 81451a5 into main Jul 4, 2022
@mxdvl
mxdvl deleted the mxdvl/islands-perf branch July 4, 2022 10:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants