Declare concepts as defined terms, and stop analytics blocking the paint - #25
Open
msmfa wants to merge 2 commits into
Open
Declare concepts as defined terms, and stop analytics blocking the paint#25msmfa wants to merge 2 commits into
msmfa wants to merge 2 commits into
Conversation
The graph on every page described only where a page sat: WebSite, WebPage and a BreadcrumbList. Nothing said what a page held, so a concept page and any other page looked like the same kind of thing to a crawler. Each concept now adds a DefinedTerm carrying the short definition, pointing at the MDN page for the same term through sameAs, and claiming membership of a DefinedTermSet that the home page declares over all thirty-five concepts. A TechArticle wraps the prose around it, with the proficiency level taken from the existing Fundamentals and Advanced split and the modified date from the same content commit the sitemap already uses. This matters more for assistants answering "what is a closure in JavaScript" than for blue links: a page that names itself the definition of a term is far easier to identify as the source than one that only names itself a page.
Consent already granted meant gtag.js and PostHog's array.js were injected the moment the module ran. Both are async, so neither blocked rendering, but a quarter of a megabyte of parse work competed with the main thread while it was still painting. Lighthouse put element render delay at 1.1s inside a mobile LCP of 3.8s, and 120 KiB of the two bundles never executed at all. Nothing either vendor does matters before the page is visible, and both are built to be started late: gtag buffers through dataLayer and PostHog through its _i stub queue. So the shims, the config call and the stub still run synchronously, and only the two script injections move behind an idle callback after load. The page view is still queued at the moment it happens rather than when the bundles land. The idle deadline is 1500ms: long enough to clear the paint, short enough that a quick bounce is still recorded. Safari below 16.4 has no requestIdleCallback and falls back to a timer, which by then is also clear of the paint.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two separate changes, one commit each.
Declare each concept a defined term in a glossary set
Every page's structured data described only where the page sat (
WebSite,WebPage,BreadcrumbList). Nothing described what it held.Each concept page now also declares:
DefinedTermwith the short definition,sameAspointing at the MDN page for the same term, andinDefinedTermSetpointing at the glossaryTechArticlewrapping the prose, withproficiencyLevelfrom the existing Fundamentals/Advanced split anddateModifiedfrom the same content commit the sitemap usesThe home page declares a
DefinedTermSetlisting all 35 terms, so the glossary and its terms reference each other in both directions.Costs about 1.9 KB per page uncompressed.
Hold the analytics bundles back until the page has painted
With consent already granted, gtag.js and PostHog's
array.jswere injected as soon as the module ran. Both areasyncso neither blocked rendering, but 248 KiB of parse work competed with the main thread during first paint. Lighthouse measured element render delay at 1.1s inside a mobile LCP of 3.8s, with 120 KiB of the two bundles never executing.The shims, the
gtag('config')call and PostHog's_istub queue still run synchronously. Only the twoscript()injections move behindrequestIdleCallbackafterload, with a 1500ms deadline and a timer fallback for Safari below 16.4. The$pageviewis still queued when it happens, and both vendors replay what was buffered.Tradeoff worth knowing: a visitor who leaves inside that window now goes uncounted.
Verification
gtag, the PostHog stub and the queued page view all exist; PostHog replays the$pageviewonloadedrequestIdleCallbackstill loads both via the timer@ids, 247 references, zero dangling