Improve public Lighthouse scores (#7) (#8)

## Summary
Closes #7.

Raise public marketing page Lighthouse scores (Performance / Accessibility / Best Practices / SEO) on `/`, `/about/`, and `/contact/`.

### Baseline (preview, mobile)
| Page | Perf | A11y | BP | SEO |
|------|------|------|----|-----|
| `/` | 70 | 80 | 82 | 100 |
| `/about/` | 71 | 81 | 82 | 100 |
| `/contact/` | 74 | 90 | 82 | 100 |

### Changes
- **Accessibility:** contrast overrides, nav `aria-label`s, footer/contact heading order (no skipped levels).
- **Best practices:** replace theme `unload` listeners with `pagehide` (also helps bfcache); `WHITENOISE_MAX_AGE` for hashed static.
- **Performance:** WebP heroes/headshot/breadcrumbs + preload; Google Fonts `display=swap` + fewer weights; async icon `fonts.css`; bundled/minified vendor CSS; lazy second swiper slide; remove above-fold WOW delay on home hero.
- **SEO:** already 100; kept structured data / meta.

### Local verify (dev server — no gzip, so Perf is not representative)
A11y / Best Practices / SEO all **100** on the three pages after fixes.

Perf will look better on beta/preview (WhiteNoise compression + CDN/proxy) than on `runserver`. Remaining Perf headroom is mostly the theme’s large `core.min.js` / unused CSS and infra HTTP/2.

## Test plan
- [ ] Deploy/preview branch and re-run Lighthouse on `/`, `/about/`, `/contact/`
- [ ] Spot-check home hero, about headshot, contact form + mobile nav toggles
- [ ] Confirm icons still appear after async `fonts.css` load
- [ ] Confirm swiper slide 2 background appears when navigating slides

Reviewed-on: #8

site/monica_site/settings/base.py

@@ -197,6 +197,8 @@ STORAGES = {
         "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
     },
 }
+# Hashed static filenames are immutable; long cache helps Lighthouse "efficient cache".
+WHITENOISE_MAX_AGE = 31536000
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 

site/monica_site/static/css/theme-overrides.css

@@ -20,9 +20,55 @@
   width: auto;
 }
 
+/* Footer section titles — keep h5 visual weight without skipping heading levels */
+.footer-heading {
+  font-size: 18px;
+  line-height: 1.4;
+  letter-spacing: 0.06em;
+  margin: 0 0 0.75rem;
+}
+
 .about-subtitle {
   font-size: 18px;
-  color: var(--monica-muted);
+  color: #4b5563; /* was muted grey; needs ≥4.5:1 on white/surface */
+}
+
+/* Contrast fixes (Lighthouse color-contrast) */
+.page .bg-gray-100 .text-width-1,
+.page section.bg-gray-100 p {
+  color: #4b5563;
+}
+.page .footer-advanced-text,
+.page .footer-advanced .footer-advanced-text {
+  color: #c5c6ca !important;
+}
+.page .footer-advanced .rights,
+.page .footer-advanced .rights span {
+  color: #c5c6ca !important;
+}
+.page .form-label-outside {
+  color: #374151 !important;
+}
+.page .form-hint {
+  font-weight: 400;
+  color: #4b5563;
+}
+.page .form-consent-note {
+  font-size: 13px;
+  color: #4b5563;
+  margin: 12px 0 20px;
+}
+.page .contact-form-title {
+  font-size: 1.75rem;
+  margin-bottom: 1rem;
+}
+
+/* Skip layout work for below-fold marketing sections */
+.page > .section.section-lg,
+.page > .section.section-sm,
+.page > .section.bg-gray-100 {
+  content-visibility: auto;
+  contain-intrinsic-size: 800px;
 }
 
 .page .button-primary,

site/monica_site/static/js/script.js

@@ -1151,10 +1151,15 @@
 						url;
 
 					if (url = $this.attr("data-slide-bg")) {
+						// Eager-load first slide only; defer others until slide change.
+						if (j === 0) {
 							$this.css({
 								"background-image": "url(" + url + ")",
 								"background-size": "cover"
-						})
+							});
+						} else {
+							$this.attr("data-slide-bg-lazy", url).removeAttr("data-slide-bg");
+						}
 					}
 				}
 
@@ -1194,6 +1199,14 @@
 
 						transitionStart: function () {
 							toggleSwiperInnerVideos(this);
+							var active = $(this.slides[this.activeIndex]);
+							var lazyUrl = active.attr("data-slide-bg-lazy");
+							if (lazyUrl) {
+								active.css({
+									"background-image": "url(" + lazyUrl + ")",
+									"background-size": "cover"
+								}).removeAttr("data-slide-bg-lazy");
+							}
 						}
 						// TODO code review
 						// transitionEnd: function () {

site/monica_site/templates/base.html

@@ -15,7 +15,7 @@
   <meta property="og:description" content="{% block og_description %}{{ SITE_NAME }} — {{ SITE_TAGLINE }}. {{ CONTACT_SERVICE_AREA }}.{% endblock %}">
   <meta property="og:url" content="{% block og_url %}{{ PUBLIC_SITE_URL }}{{ request.path }}{% endblock %}">
   {% block og_image %}
-  <meta property="og:image" content="{{ PUBLIC_SITE_URL }}{% static 'images/slider-minimal-slide-1-1920x968.jpg' %}">
+  <meta property="og:image" content="{{ PUBLIC_SITE_URL }}{% static 'images/slider-minimal-slide-1-1920x968.webp' %}">
   <meta property="og:image:alt" content="{{ SITE_NAME }} · EXIT Realty">
   {% endblock %}
   <meta name="twitter:card" content="summary_large_image">
@@ -23,11 +23,14 @@
   <meta name="twitter:description" content="{% block twitter_description %}{{ SITE_NAME }} — {{ SITE_TAGLINE }}. {{ CONTACT_SERVICE_AREA }}.{% endblock %}">
   <link rel="icon" href="{% static 'brand/favicon-32.png' %}" type="image/png">
   <link rel="apple-touch-icon" href="{% static 'brand/apple-touch-icon.png' %}">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,700,800%7CPoppins:300,400,700">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="{% static 'css/fonts.css' %}">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&family=Poppins:wght@400;700&display=swap">
-  <link rel="stylesheet" href="{% static 'css/style.css' %}" id="main-styles-link">
+  <link rel="stylesheet" href="{% static 'css/public-vendor.css' %}" id="main-styles-link">
   <link rel="stylesheet" href="{% static 'css/theme-overrides.css' %}">
+  {# Icon font pack is large and non-critical for first paint #}
+  <link rel="stylesheet" href="{% static 'css/fonts.css' %}" media="print" onload="this.media='all'">
+  <noscript><link rel="stylesheet" href="{% static 'css/fonts.css' %}"></noscript>
   {% block structured_data %}{% endblock %}
   {% block extra_head %}{% endblock %}
 </head>
@@ -49,13 +52,13 @@
         <div class="rd-navbar-aside-outer">
           <div class="rd-navbar-aside">
             <div class="rd-navbar-panel">
-              <button class="rd-navbar-toggle" data-rd-navbar-toggle="#rd-navbar-nav-wrap-1"><span></span></button>
+              <button class="rd-navbar-toggle" type="button" aria-label="Open menu" data-rd-navbar-toggle="#rd-navbar-nav-wrap-1"><span></span></button>
               <a class="rd-navbar-brand" href="{% url 'public:home' %}" data-tianji-event="nav_home">
                 <img src="{% static 'brand/exit_logo.png' %}" alt="EXIT Realty · {{ SITE_NAME }}" width="151" height="44"/>
               </a>
             </div>
             <div class="rd-navbar-collapse">
-              <button class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle="#rd-navbar-collapse-content-1"><span></span></button>
+              <button class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" type="button" aria-label="Open contact details" data-rd-navbar-toggle="#rd-navbar-collapse-content-1"><span></span></button>
               <div class="rd-navbar-collapse-content" id="rd-navbar-collapse-content-1">
                 {% if CONTACT_PHONE %}
                 <article class="unit align-items-center">
@@ -111,16 +114,16 @@
         <div class="row row-50">
           <div class="col-lg-6">
             <div class="footer-brand-row">
-              <img src="{% static 'brand/exit_logo.png' %}" alt="EXIT Realty">
+              <img src="{% static 'brand/exit_logo.png' %}" alt="EXIT Realty" width="151" height="44">
               <div>
-                <h5 class="font-weight-bold text-uppercase text-white" style="margin:0">{{ SITE_NAME }}</h5>
+                <p class="footer-heading font-weight-bold text-uppercase text-white" style="margin:0">{{ SITE_NAME }}</p>
                 <span style="color:#7dd3da;font-size:12px">{{ SITE_TAGLINE }}</span>
               </div>
             </div>
             <p class="footer-advanced-text">Local expertise, clear communication, and a marketing platform built to bring serious buyers and sellers to you — not to a generic campaign factory.{% if CONTACT_ADDRESS %} {{ CONTACT_ADDRESS }}.{% endif %}</p>
           </div>
           <div class="col-lg-6">
-            <h5 class="font-weight-bold text-uppercase text-white">Navigate</h5>
+            <p class="footer-heading font-weight-bold text-uppercase text-white">Navigate</p>
             <ul class="list-marked list-marked-sm">
               <li><a href="{% url 'public:home' %}">Home</a></li>
               <li><a href="{% url 'public:about' %}">About</a></li>

site/public/templates/public/about.html

@@ -7,9 +7,12 @@
 {% block og_description %}Meet {{ SITE_NAME }}, your real estate partner in Chicago's western suburbs with EXIT Realty Redefined — buyers, sellers, and first-time homebuyers welcome. {{ CONTACT_SERVICE_AREA }}.{% endblock %}
 {% block twitter_description %}Meet {{ SITE_NAME }}, your real estate partner in Chicago's western suburbs with EXIT Realty Redefined — buyers, sellers, and first-time homebuyers welcome. {{ CONTACT_SERVICE_AREA }}.{% endblock %}
 {% block og_image %}
-<meta property="og:image" content="{{ PUBLIC_SITE_URL }}{% static 'images/monica-dhillon-headshot.jpg' %}">
+<meta property="og:image" content="{{ PUBLIC_SITE_URL }}{% static 'images/monica-dhillon-headshot.webp' %}">
 <meta property="og:image:alt" content="Professional headshot of {{ SITE_NAME }}, Real Estate Agent">
 {% endblock %}
+{% block extra_head %}
+<link rel="preload" as="image" type="image/webp" href="{% static 'images/monica-dhillon-headshot-640.webp' %}" imagesrcset="{% static 'images/monica-dhillon-headshot-640.webp' %} 640w, {% static 'images/monica-dhillon-headshot.webp' %} 816w" imagesizes="(max-width: 991px) 90vw, 480px" fetchpriority="high">
+{% endblock %}
 {% block structured_data %}
 <script type="application/ld+json">
 {
@@ -22,7 +25,7 @@
     "@type": "RealEstateAgent",
     "name": "{{ SITE_NAME|escapejs }}",
     "url": "{{ PUBLIC_SITE_URL }}/",
-    "image": "{{ PUBLIC_SITE_URL }}{% static 'images/monica-dhillon-headshot.jpg' %}",
+    "image": "{{ PUBLIC_SITE_URL }}{% static 'images/monica-dhillon-headshot.webp' %}",
     "telephone": "{{ CONTACT_PHONE|escapejs }}",
     "email": "{{ CONTACT_EMAIL|escapejs }}",
     {% if CONTACT_ADDRESS %}"address": "{{ CONTACT_ADDRESS|escapejs }}",{% endif %}
@@ -36,7 +39,7 @@
 </script>
 {% endblock %}
 {% block content %}
-  <section class="breadcrumbs-custom bg-image context-dark" style="background-image: url({% static 'images/breadcrumbs-image-1.jpg' %});">
+  <section class="breadcrumbs-custom bg-image context-dark" style="background-image: url({% static 'images/breadcrumbs-image-1.webp' %});">
     <div class="breadcrumbs-custom-inner">
       <div class="container breadcrumbs-custom-container">
         <div class="breadcrumbs-custom-main">
@@ -62,7 +65,10 @@
           <a class="button button-lg button-primary button-winona" href="{% url 'public:contact' %}" data-tianji-event="about_cta" data-tianji-event-destination="contact">Work with me</a>
         </div>
         <div class="col-md-10 col-lg-6 col-xl-6">
-          <img class="img-responsive" src="{% static 'images/monica-dhillon-headshot.jpg' %}" alt="Professional headshot of Mandeep &quot;Monica&quot; Dhillon, Real Estate Agent, wearing a blue cardigan against a black background." width="816" height="1024"/>
+          <picture>
+            <source type="image/webp" srcset="{% static 'images/monica-dhillon-headshot-640.webp' %} 640w, {% static 'images/monica-dhillon-headshot.webp' %} 816w" sizes="(max-width: 991px) 90vw, 480px">
+            <img class="img-responsive" src="{% static 'images/monica-dhillon-headshot.jpg' %}" alt="Professional headshot of Mandeep &quot;Monica&quot; Dhillon, Real Estate Agent, wearing a blue cardigan against a black background." width="816" height="1024" decoding="async" fetchpriority="high"/>
+          </picture>
         </div>
       </div>
     </div>

site/public/templates/public/contact.html

@@ -35,7 +35,7 @@
 </script>
 {% endblock %}
 {% block content %}
-  <section class="breadcrumbs-custom bg-image context-dark" style="background-image: url({% static 'images/breadcrumbs-image-1.jpg' %});">
+  <section class="breadcrumbs-custom bg-image context-dark" style="background-image: url({% static 'images/breadcrumbs-image-1.webp' %});">
     <div class="breadcrumbs-custom-inner">
       <div class="container breadcrumbs-custom-container">
         <div class="breadcrumbs-custom-main">
@@ -83,7 +83,7 @@
     <div class="container section-lg">
       <div class="row">
         <div class="col-lg-8">
-          <h3 class="text-uppercase">Send a message</h3>
+          <h2 class="text-uppercase contact-form-title">Send a message</h2>
           <form class="rd-form contact-message-form" method="post" action="{% url 'public:contact' %}">
             {% csrf_token %}
             <div class="row row-10">
@@ -116,7 +116,7 @@
                 </div>
               </div>
               <div class="col-12">
-                <p class="form-label-outside" style="margin:8px 0 4px">Mailing address <span style="font-weight:400;color:#6b7280">(optional — for postcards)</span></p>
+                <p class="form-label-outside" style="margin:8px 0 4px">Mailing address <span class="form-hint">(optional — for postcards)</span></p>
               </div>
               <div class="col-12" data-address-autocomplete data-suggest-url="{% url 'address_suggest' %}">
                 <div class="form-wrap address-ac-wrap">
@@ -173,7 +173,7 @@
               <div class="col-12">{{ form.captcha }}{{ form.captcha.errors }}</div>
               {% endif %}
             </div>
-            <p style="font-size:13px;color:#6b7280;margin:12px 0 20px;">By submitting, you agree I may contact you about your inquiry by email and SMS (if you provide a phone number). You can change preferences or unsubscribe anytime from links in messages, or reply STOP to SMS.{% if form.captcha %} Protected by reCAPTCHA.{% endif %}</p>
+            <p class="form-consent-note">By submitting, you agree I may contact you about your inquiry by email and SMS (if you provide a phone number). You can change preferences or unsubscribe anytime from links in messages, or reply STOP to SMS.{% if form.captcha %} Protected by reCAPTCHA.{% endif %}</p>
             <button class="button button-primary button-winona" type="submit" data-tianji-event="contact_form_submit">Send message</button>
           </form>
         </div>
@@ -182,6 +182,7 @@
   </section>
 {% endblock %}
 {% block extra_head %}
+<link rel="preload" as="image" type="image/webp" href="{% static 'images/breadcrumbs-image-1.webp' %}" fetchpriority="high">
 <link rel="stylesheet" href="{% static 'css/address-autocomplete.css' %}">
 {% endblock %}
 {% block tracking_events %}

site/public/templates/public/home.html

@@ -6,6 +6,9 @@
 {% block meta_description %}{{ SITE_NAME }}, EXIT Realty — buying and selling homes with clear advice and multi-channel marketing. {{ CONTACT_SERVICE_AREA }}.{% endblock %}
 {% block og_description %}{{ SITE_NAME }}, EXIT Realty — buying and selling homes with clear advice and multi-channel marketing. {{ CONTACT_SERVICE_AREA }}.{% endblock %}
 {% block twitter_description %}{{ SITE_NAME }}, EXIT Realty — buying and selling homes with clear advice and multi-channel marketing. {{ CONTACT_SERVICE_AREA }}.{% endblock %}
+{% block extra_head %}
+<link rel="preload" as="image" type="image/webp" href="{% static 'images/slider-minimal-slide-1-1920x968.webp' %}" fetchpriority="high">
+{% endblock %}
 {% block structured_data %}
 <script type="application/ld+json">
 {
@@ -13,7 +16,7 @@
   "@type": "RealEstateAgent",
   "name": "{{ SITE_NAME|escapejs }}",
   "url": "{{ PUBLIC_SITE_URL }}/",
-  "image": "{{ PUBLIC_SITE_URL }}{% static 'images/slider-minimal-slide-1-1920x968.jpg' %}",
+  "image": "{{ PUBLIC_SITE_URL }}{% static 'images/slider-minimal-slide-1-1920x968.webp' %}",
   "telephone": "{{ CONTACT_PHONE|escapejs }}",
   "email": "{{ CONTACT_EMAIL|escapejs }}",
   {% if CONTACT_ADDRESS %}"address": "{{ CONTACT_ADDRESS|escapejs }}",{% endif %}
@@ -27,32 +30,28 @@
 </script>
 {% endblock %}
 {% block content %}
-  <div class="swiper-container swiper-slider swiper-slider-minimal" data-loop="true" data-slide-effect="fade" data-autoplay="false" data-simulate-touch="true">
+  <div class="swiper-container swiper-slider swiper-slider-minimal" data-loop="false" data-slide-effect="fade" data-autoplay="false" data-simulate-touch="true">
     <div class="swiper-wrapper">
-      <div class="swiper-slide" data-slide-bg="{% static 'images/slider-minimal-slide-1-1920x968.jpg' %}">
+      <div class="swiper-slide" data-slide-bg="{% static 'images/slider-minimal-slide-1-1920x968.webp' %}">
         <div class="container">
           <div class="jumbotron-classic-content">
-            <div class="wow-outer">
+            <div class="title-docor-text font-weight-bold title-decorated text-uppercase text-white">{{ SITE_NAME }} · MKDRealtor.com</div>
-              <div class="title-docor-text font-weight-bold title-decorated text-uppercase wow slideInLeft text-white">{{ SITE_NAME }} · MKDRealtor.com</div>
+            <h1 class="text-uppercase text-white font-weight-bold">Your Home,<br>Guided Well</h1>
-            </div>
+            <p class="text-white">EXIT Realty Redefined — buying or selling in Chicago's western suburbs with clear advice, strong marketing, and a team that answers the phone.</p>
-            <h1 class="text-uppercase text-white font-weight-bold wow-outer"><span class="wow slideInDown" data-wow-delay=".2s">Your Home,<br>Guided Well</span></h1>
+            <div class="button-outer">
-            <p class="text-white wow-outer"><span class="wow slideInDown" data-wow-delay=".35s">EXIT Realty Redefined — buying or selling in Chicago's western suburbs with clear advice, strong marketing, and a team that answers the phone.</span></p>
+              <a class="button button-md button-primary button-winona" href="{% url 'public:contact' %}" data-tianji-event="hero_cta" data-tianji-event-destination="contact">Start a conversation</a>
-            <div class="wow-outer button-outer">
-              <a class="button button-md button-primary button-winona wow slideInDown" href="{% url 'public:contact' %}" data-wow-delay=".4s" data-tianji-event="hero_cta" data-tianji-event-destination="contact">Start a conversation</a>
             </div>
           </div>
         </div>
       </div>
-      <div class="swiper-slide" data-slide-bg="{% static 'images/slider-minimal-slide-2-1920x968.jpg' %}">
+      <div class="swiper-slide" data-slide-bg="{% static 'images/slider-minimal-slide-2-1920x968.webp' %}">
         <div class="container">
           <div class="jumbotron-classic-content">
-            <div class="wow-outer">
+            <div class="title-docor-text font-weight-bold title-decorated text-uppercase text-white">Local Market Insight</div>
-              <div class="title-docor-text font-weight-bold title-decorated text-uppercase wow slideInLeft text-white">Local Market Insight</div>
+            <h2 class="text-uppercase text-white font-weight-bold">Sell With<br>Confidence</h2>
-            </div>
+            <p class="text-white">Pricing strategy, staging guidance, and multi-channel outreach so the right buyers see your listing.</p>
-            <h2 class="text-uppercase text-white font-weight-bold wow-outer"><span class="wow slideInDown" data-wow-delay=".2s">Sell With<br>Confidence</span></h2>
+            <div class="button-outer">
-            <p class="text-white wow-outer"><span class="wow slideInDown" data-wow-delay=".35s">Pricing strategy, staging guidance, and multi-channel outreach so the right buyers see your listing.</span></p>
+              <a class="button button-md button-primary button-winona" href="{% url 'public:about' %}" data-tianji-event="hero_about">Meet Monica</a>
-            <div class="wow-outer button-outer">
-              <a class="button button-md button-primary button-winona wow slideInDown" href="{% url 'public:about' %}" data-wow-delay=".4s" data-tianji-event="hero_about">Meet Monica</a>
             </div>
           </div>
         </div>

site/public/templates/public/terms.html

@@ -7,7 +7,7 @@
 {% block og_description %}Terms of Service for {{ SITE_NAME }} / MKDRealtor.com — how we use analytics, protect your information, and never sell or share personal data with third parties for marketing.{% endblock %}
 {% block twitter_description %}Terms of Service for {{ SITE_NAME }} / MKDRealtor.com — how we use analytics, protect your information, and never sell or share personal data with third parties for marketing.{% endblock %}
 {% block content %}
-  <section class="breadcrumbs-custom bg-image context-dark" style="background-image: url({% static 'images/breadcrumbs-image-1.jpg' %});">
+  <section class="breadcrumbs-custom bg-image context-dark" style="background-image: url({% static 'images/breadcrumbs-image-1.webp' %});">
     <div class="breadcrumbs-custom-inner">
       <div class="container breadcrumbs-custom-container">
         <div class="breadcrumbs-custom-main">