Short answer: no. The three documents you pasted are compiled outputs from three very different stacks, and none of them are “symmetrical” or orderly in the sense you mean.

Here’s the quick read:

What you gave me (high-level)

  • pagespeed.web.dev
    Google’s internal WIZ/Closure build. Tons of inline bootstrapping (WIZ_global_data), framework markers, and instrumentation code. It’s optimized for Google’s runtime, not human order. It has good hints (preconnect, hashed assets, CSP nonces), but the head/body are busy and opaque.
  • gsa.gov A–Z index
    Classic Drupal build with dozens of CSS/JS bundles (/files/css/optimized/..., /files/js/optimized/...) plus jQuery-era plugins, GTM, DAP analytics, and heavy nav markup. It’s accessible and standards-compliant, but the resource graph is fragmented and render-blocking. From an order/symmetry lens, this is the messiest of the three.
  • web.dev
    DevSite (Google) with a single app loader and many custom elements. Better consolidation of CSS, good resource hints, huge list of hreflang alternates, and a big dynamic loader. Cleaner than the other two, but still framework-shaped output, not a symmetrical, minimal head.

Why they look this way

Production HTML here is generated (CMS + bundlers + A/B + analytics + polyfills). It favors caching, split-by-team ownership, and experiments. That often destroys visible symmetry even if the source repos are clean.

If you really want “symmetry behind the scenes”

Define a head/body contract and enforce it in CI. Example of an ordered, symmetrical page shell:

<!doctype html>
<html lang="en">
<head>
  <!-- 1. Identity & basics -->
  <meta charset="utf-8" />
  <title>Page Title</title>
  <link rel="canonical" href="https://example.com/page" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#0b5fff" />
  <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials" />

  <!-- 2. Resource hints (few, intentional) -->
  <link rel="preconnect" href="https://cdn.example.com" crossorigin />
  <link rel="preload" as="style" href="/assets/app.css" />
  <link rel="preload" as="font" href="/assets/inter-var.woff2" type="font/woff2" crossorigin />

  <!-- 3. Critical CSS (tiny) + main CSS -->
  <style>/* critical above-the-fold */</style>
  <link rel="stylesheet" href="/assets/app.css" integrity="sha384-..." />

  <!-- 4. Structured data (1 block) -->
  <script type="application/ld+json">
  { "@context":"https://schema.org", "@type":"WebPage", "name":"Page Title" }
  </script>

  <!-- 5. App config (one place) -->
  <script type="application/json" id="app-config">
    { "env":"prod","release":"2025.08.24","featureFlags":{"x":true} }
  </script>

  <!-- 6. App entry (deferred/modules only) -->
  <script type="module" src="/assets/app.js" integrity="sha384-..."></script>
  <script nomodule src="/assets/legacy.js"></script>

  <!-- 7. Analytics (single loader, defer) -->
  <script defer src="https://analytics.example.com/loader.js" data-key="abc"></script>
</head>
<body>
  <a class="skip-link" href="#main">Skip to main</a>
  <div id="app"><!-- SSR content here --></div>
</body>
</html>

Enforce it (so it stays symmetrical)

  • Head linter: custom check that enforces ordering (basics → hints → styles → data → config → scripts). Fail PRs that violate.
  • One CSS, one JS app entry per surface (plus critical CSS). Everything else lazy/async.
  • One analytics loader. No ad-hoc snippets.
  • Config in one JSON script tag (or headers), not scattered inline JS.
  • Import boundaries enforced (no cross-layer reach-ins).

What’s “out of order” in your samples (concrete)

  • pagespeed.web.dev: multiple inline boot scripts and framework globals; duplicated style tweaks; lots of framework-specific glue. Valid but not symmetrical.
  • gsa.gov: 25+ render-blocking CSS files and 20+ JS files; multiple third-party scripts; sprawling nav markup duplication. Highly functional, but not ordered from a performance or symmetry standpoint.
  • web.dev: big app loader and a sea of custom elements; enormous hreflang block; multiple preconnects. Cleaner than GSA, still framework-centric rather than contract-centric.

If you want, give me your stack (framework, bundler, hosting) and I’ll turn this into a repo check (head-order linter + CI rules + build targets) so the output stays totally symmetrical every deploy.