CISA.gov homepage — technical teardown & fast-fixes

Here’s a tight, dev-oriented audit of the HTML you shared (Drupal 11 + USWDS). I’ve prioritized the biggest wins first and included drop-in snippets.

Top 12 fixes (highest impact)

  1. Hero / carousel LCP
  • First carousel image is loading="lazy". That delays your Largest Contentful Paint.
  • Fix: only the first slide’s image should be non-lazy + high priority; all others stay lazy. <!-- First slide --> <img src="/path/slide-1.jpg" alt="..." width="1300" height="731" fetchpriority="high" decoding="async"> <!-- Other slides --> <img src="/path/slide-2.jpg" alt="..." width="1300" height="731" loading="lazy" decoding="async">
  1. Google CSE included twice
  • The CSE script is printed in both the header and the main nav.
  • Fix: include https://cse.google.com/cse.js?cx=ffc4c79e29d5b3a8c once and reuse the searchbox containers.
  1. Social share uses /node/16104
  • Share links point to the raw node path, not the canonical homepage.
  • Fix: swap node URLs for https://www.cisa.gov/ (or the clean alias). <!-- Example: Facebook --> https://www.facebook.com/sharer/sharer.php?u=https://www.cisa.gov/&title=CISA
  1. Add missing social cards
  • You have prefix="og:" but no Open Graph/Twitter card tags. <meta property="og:site_name" content="CISA"> <meta property="og:type" content="website"> <meta property="og:url" content="https://www.cisa.gov/"> <meta property="og:title" content="Cybersecurity & Infrastructure Security Agency (CISA)"> <meta property="og:description" content="America’s Cyber Defense Agency."> <meta property="og:image" content="https://www.cisa.gov/path/to/share-image.jpg"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@CISAgov">
  1. Title polish
  • Current: Home Page | CISA. Prefer a shorter, brand-first title. <title>Cybersecurity & Infrastructure Security Agency (CISA)</title>
  1. Fonts (privacy/perf)
  • Loading Google Fonts (fonts.googleapis.com) on a .gov site adds cross-origin requests and privacy concerns.
  • Fix: self-host Montserrat/Public Sans or use USWDS’ system fonts; if keeping Google, add preconnects: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  1. Preconnect critical third-parties
  • Speed up early connections for services you always hit: <link rel="preconnect" href="https://www.googletagmanager.com"> <link rel="preconnect" href="https://dap.digitalgov.gov"> <link rel="preconnect" href="https://siteimproveanalytics.com"> <link rel="preconnect" href="https://cse.google.com">
  1. Reduced motion & controls for carousel
  • Ensure accessible motion defaults and explicit controls. @media (prefers-reduced-motion: reduce) { .c-homepage-slider * { animation: none !important; transition: none !important; } } Also add a visible Pause/Play button, and give “Previous/Next” buttons aria-label like “Previous slide” / “Next slide”.
  1. Duplicate global buttons block
  • The same “Free Cyber Services / Secure by Design / …” block appears in header and nav. If that’s intentional for responsive layouts, mark one as aria-hidden="true" when off-screen to avoid duplicate focus/verbosity for screen readers.
  1. SVG alt texts & brand logos
  • Header logo alt is a long sentence. For brand marks, keep alts short (“CISA logo”) and move taglines into visible text. Decorative visuals should be alt="".
  1. Inline <center> & minor HTML hygiene
  • Replace <center> with utility classes (it appears in the mobile tagline block). Avoid deprecated tags.
  1. Security headers / CSP (report-only to start)
  • Lock down third-party execution and start collecting reports. Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com https://dap.digitalgov.gov https://siteimproveanalytics.com https://cse.google.com; img-src 'self' data: https:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; frame-src https://www.googletagmanager.com https://www.dhs.gov https://cse.google.com; connect-src 'self' https:; report-uri https://YOUR-collector.example/csp;

Accessibility & UX quick wins

  • Carousel labelling: The slider uses aria-roledescription="carousel" with per-slide aria-labelledby (good). Ensure the region has a descriptive label (e.g., aria-label="Featured alerts and guidance").
  • Keyboard: confirm left/right arrows and Home/End behaviors work; ensure focus isn’t trapped when the slider updates.
  • External links: add rel="noopener noreferrer" to social/footer externals (some have it, some don’t).
  • Color contrast: verify button variants (teal/green/red on dark) meet WCAG contrast (4.5:1 for text).

Performance quick wins

  • Images: add decoding="async" to all non-LCP images; use sizes on cards/teasers so the browser picks appropriate sources.
  • Hero preload (optional): if the first slide image isn’t very cache-hot, consider <link rel="preload" as="image" href="/sites/default/files/.../slide-1.jpg" imagesrcset="/... 1300w, /... 700w" imagesizes="(min-width: 64rem) 1300px, 100vw">
  • JS bundles: ensure homepage-slider.es6.js only initializes once (no double binds), and that the slider code defers until after first paint.

Structured data (Organization)

Add an Organization schema to help search engines and assistants:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "GovernmentOrganization",
  "name": "Cybersecurity & Infrastructure Security Agency",
  "url": "https://www.cisa.gov/",
  "logo": "https://www.cisa.gov/sites/default/files/images/SVG/header_logo_tagline_update.svg",
  "sameAs": [
    "https://www.facebook.com/CISA",
    "https://x.com/CISAgov",
    "https://www.linkedin.com/company/cybersecurity-and-infrastructure-security-agency",
    "https://www.youtube.com/@cisagov",
    "https://www.instagram.com/cisagov"
  ],
  "parentOrganization": {
    "@type": "GovernmentOrganization",
    "name": "U.S. Department of Homeland Security",
    "url": "https://www.dhs.gov/"
  }
}
</script>

Small backlog (ready to ticket)

  • Make first carousel image LCP: non-lazy + fetchpriority="high".
  • Load Google CSE script once; reuse markup in both search boxes.
  • Switch share links to https://www.cisa.gov/ (not /node/16104).
  • Add OG/Twitter tags and Organization JSON-LD.
  • Update <title> to “Cybersecurity & Infrastructure Security Agency (CISA)”.
  • Self-host fonts or add preconnect to Google Fonts endpoints.
  • Add prefers-reduced-motion rules + a Pause/Play control to the carousel.
  • Mark duplicated “global buttons” block aria-hidden when not visible.
  • Shorten logo alt; use alt="" for purely decorative images.
  • Remove <center>; replace with CSS utility classes.
  • Add rel="noopener noreferrer" to all external anchors.
  • Pilot a CSP (Report-Only) policy; iterate on violations.

If you’d like, I can convert these into Jira tickets with acceptance criteria or provide a Drupal hook_preprocess_html() snippet to inject the SEO tags and JSON-LD cleanly.