Improve public Lighthouse scores for accessibility, best practices, and performance.
CI / test (pull_request) Successful in 16s

Closes #7. Fix contrast/labels/headings, serve WebP heroes, trim fonts/CSS blocking, and drop deprecated unload listeners that also blocked bfcache.
This commit is contained in:
2026-08-27 11:24:20 -05:00
parent e8611ef926
commit e4d59a2f18
18 changed files with 118 additions and 307 deletions
+2
View File
@@ -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"
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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,
Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 KiB

File diff suppressed because one or more lines are too long
+17 -4
View File
@@ -1151,10 +1151,15 @@
url;
if (url = $this.attr("data-slide-bg")) {
$this.css({
"background-image": "url(" + url + ")",
"background-size": "cover"
})
// 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 () {
+13 -10
View File
@@ -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="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/fonts.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}" id="main-styles-link">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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/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>
+10 -4
View File
@@ -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>
+5 -4
View File
@@ -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 %}
+17 -18
View File
@@ -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 wow slideInLeft text-white">{{ SITE_NAME }} · MKDRealtor.com</div>
</div>
<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>
<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>
<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 class="title-docor-text font-weight-bold title-decorated text-uppercase text-white">{{ SITE_NAME }} · MKDRealtor.com</div>
<h1 class="text-uppercase text-white font-weight-bold">Your Home,<br>Guided Well</h1>
<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>
<div class="button-outer">
<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>
</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 wow slideInLeft text-white">Local Market Insight</div>
</div>
<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>
<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>
<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 class="title-docor-text font-weight-bold title-decorated text-uppercase text-white">Local Market Insight</div>
<h2 class="text-uppercase text-white font-weight-bold">Sell With<br>Confidence</h2>
<p class="text-white">Pricing strategy, staging guidance, and multi-channel outreach so the right buyers see your listing.</p>
<div class="button-outer">
<a class="button button-md button-primary button-winona" href="{% url 'public:about' %}" data-tianji-event="hero_about">Meet Monica</a>
</div>
</div>
</div>
+1 -1
View File
@@ -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">