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

Performance monitoring: Islands #5296

Merged
merged 4 commits into from
Jul 4, 2022
Merged

Performance monitoring: Islands #5296

merged 4 commits into from
Jul 4, 2022

Conversation

mxdvl
Copy link
Contributor

@mxdvl mxdvl commented Jul 4, 2022

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

github-actions bot commented Jul 4, 2022

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

@github-actions
Copy link

github-actions bot commented Jul 4, 2022

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

@@ -5974,7 +5974,7 @@
"find-up": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
"integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
Copy link
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

Copy link
Contributor

@OllysCoding OllysCoding left a comment

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