Skip to content

Lighthouse & GA4 updates for srccon.org #428

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tiffehr merged 7 commits into from
Mar 5, 2026
Merged

Lighthouse & GA4 updates for srccon.org #428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
01203ad
add new GA4 `google_analytics_id`
tiffehr Mar 4, 2026
6f3b7f7
add width and height attributes to logo images for better responsiveness
tiffehr Mar 5, 2026
51ebda9
enhance Typekit loading with timeout and fallback handling
tiffehr Mar 5, 2026
69a8a3b
refactor CSS for improved font loading and fallback handling
tiffehr Mar 5, 2026
254e269
update newsletter links to use HTTPS for improved security
tiffehr Mar 5, 2026
2c7b88f
add preload link for logo image to improve loading performance
tiffehr Mar 5, 2026
0dc50f6
Merge pull request #424 from OpenNews/lighthouse_fixes
tiffehr Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ defaults:
latest_srccon_program: https://2026.srccon.org/program/
# google_analytics_id: set this value to your GA4 measurement ID (format: G-XXXXXXXXXX)
# Leave empty to disable Google Analytics tracking
google_analytics_id: ""
google_analytics_id: "G-W7QDZ6VHC9"
- scope:
path: ""
type: "transcripts"
Expand Down
13 changes: 12 additions & 1 deletion _includes/headmeta.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,18 @@
<script src="https://use.typekit.net/mvg8obr.js"></script>
<script>
try {
Typekit.load({ async: true });
Typekit.load({
async: true,
Comment on lines 30 to +34
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

async: true in Typekit.load(...) does not make the kit download non-blocking; the kit is still loaded via a plain <script src=...> tag (no async/deferred loading). If the goal is Lighthouse/perf improvement, consider loading the Typekit kit script asynchronously (e.g., add async to the script tag or use the recommended non-blocking embed pattern) so it doesn’t block HTML parsing.

Copilot uses AI. Check for mistakes.
scriptTimeout: 1200,
classes: true,
events: true,
active: function () {
document.documentElement.classList.remove("fonts-fallback-locked");
},
inactive: function () {
document.documentElement.classList.add("fonts-fallback-locked");
},
});
} catch (e) {}
Copy link

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Typekit failure path doesn’t apply the new fallback-lock behavior. If the Typekit script fails to load (so Typekit is undefined), the catch block runs and currently does nothing, leaving fonts-fallback-locked unset even though the CSS is relying on it. Consider adding fonts-fallback-locked in the catch block (and/or handling the Typekit-undefined case explicitly) so the fallback fonts are consistently applied on hard failures.

Suggested change
} catch (e) {}
} catch (e) {
// If Typekit fails to load or throws before calling inactive, ensure fallback fonts are locked.
document.documentElement.classList.add("fonts-fallback-locked");
}

Copilot uses AI. Check for mistakes.
</script>

Expand Down
46 changes: 40 additions & 6 deletions _layouts/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@
<nav id="header-nav">
<div class="page-container">
<a href="/" id="corner-logo">
<img src="/media/img/srccon_logo_angle_512.png" alt="SRCCON Logo" />
<img
src="/media/img/srccon_logo_angle_512.png"
alt="SRCCON Logo"
width="512"
height="330"
/>
</a>
<ul class="site-nav-links">
<li><a href="https://srccon.org/#about-srccon-events">About</a></li>
Expand Down Expand Up @@ -45,25 +50,44 @@
<h3>Partnership sponsors</h3>
<div class="sponsor-list">
<a href="https://vip.wordpress.com/" class="narrow-logo">
<img src="/media/img/partners/wordpress_vip2.png" alt="WordPress VIP" />
<img
src="/media/img/partners/wordpress_vip2.png"
alt="WordPress VIP"
width="200"
height="82"
/>
</a>
<a href="https://www.nytimes.com/">
<img src="/media/img/partners/nyt.png" alt="The New York Times" />
<img
src="/media/img/partners/nyt.png"
alt="The New York Times"
width="200"
height="50"
/>
</a>
<a href="https://newsinitiative.withgoogle.com/">
<img
src="/media/img/partners/google_news_initiative.png"
alt="Google News Initiative"
width="200"
height="50"
/>
</a>
<a href="https://www.facebookjournalismproject.com" class="wide-logo">
<img
src="/media/img/partners/facebook_journalism.png"
alt="Facebook Journalism Project"
width="200"
height="42"
/>
</a>
<a href="https://craignewmarkphilanthropies.org" class="wide-logo">
<img src="/media/img/partners/newmark.png" alt="Craig Newmark Philanthropies" />
<img
src="/media/img/partners/newmark.png"
alt="Craig Newmark Philanthropies"
width="200"
height="42"
/>
</a>
</div>
</div>
Expand All @@ -73,14 +97,24 @@ <h3>Partnership sponsors</h3>
<div>
<h3>Accessibility sponsor</h3>
<a href="https://www.lenfestinstitute.org/" class="narrow-logo">
<img src="/media/img/partners/lenfest.png" alt="Lenfest Institute" />
<img
src="/media/img/partners/lenfest.png"
alt="Lenfest Institute"
width="420"
height="240"
/>
</a>
</div>
{% endif %} {% if page.section != 'scholarships' %}
<div>
<h3>Scholarship sponsor</h3>
<a href="https://knightfoundation.org/">
<img src="/media/img/partners/knight_foundation.png" alt="Knight Foundation" />
<img
src="/media/img/partners/knight_foundation.png"
alt="Knight Foundation"
width="480"
height="150"
/>
</a>
</div>
{% endif %}
Expand Down
8 changes: 8 additions & 0 deletions _layouts/layout_hub.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
<html lang="en-US">
<head>
{% include headmeta.html %}
<link
rel="preload"
href="{% if page.logo %}{{ page.logo }}{% else %}/media/img/srccon_logo_angle_512.png{% endif %}"
as="image"
fetchpriority="high"
/>
</head>

<body class="hub{% if page.section %} {{ page.section }}{% endif %}">
Expand All @@ -23,6 +29,8 @@
<img
src="{% if page.logo %}{{ page.logo }}{% else %}/media/img/srccon_logo_angle_512.png{% endif %}"
alt="SRCCON Logo"
width="512"
height="330"
/>
</a>
</div>
Expand Down
4 changes: 2 additions & 2 deletions homepage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ permalink: /
<li class="upcoming-event">
<h3>SRCCON 2026</h3>
<div class="when-where">July 8-9 2026, in Minneapolis</div>
<div>Keep an eye on our <a href="http://eepurl.com/czSVTL">newsletter</a> for updates</div>
<div>Keep an eye on our <a href="https://eepurl.com/czSVTL">newsletter</a> for updates</div>
<p class="description">The biggest SRCCON of the year, where 300 people who care deeply about journalism and their communities come together to talk about the technical and cultural changes that can transform our work.</p>
<div class="next-thing">&rarrhk; <strong><a href="https://2026.srccon.org/">Our call for participation is open!</a></strong> Pitch a session or apply for travel support by March 8.</div>
<!-- <div class="next-thing">&rarrhk; <a href="http://eepurl.com/czSVTL">Sign up for our newsletter to get updates on upcoming deadlines.</a></div> -->
<!-- <div class="next-thing">&rarrhk; <a href="https://eepurl.com/czSVTL">Sign up for our newsletter to get updates on upcoming deadlines.</a></div> -->
</li>
</ul>

Expand Down
47 changes: 35 additions & 12 deletions media/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,41 @@ body {
min-height: 100vh;
font-family: freight-text-pro, serif;
}

/* Keep fallback font metrics stable while Typekit loads or fails. */
html.wf-loading body,
html.wf-inactive body,
html.fonts-fallback-locked body {
font-family: Georgia, "Times New Roman", serif;
}

html.wf-loading header,
html.wf-loading footer,
html.wf-loading h1,
html.wf-loading h2,
html.wf-loading h3,
html.wf-loading h4,
html.wf-loading .button,
html.wf-loading .main-footer,
html.wf-inactive header,
html.wf-inactive footer,
html.wf-inactive h1,
html.wf-inactive h2,
html.wf-inactive h3,
html.wf-inactive h4,
html.wf-inactive .button,
html.wf-inactive .main-footer,
html.fonts-fallback-locked header,
html.fonts-fallback-locked footer,
html.fonts-fallback-locked h1,
html.fonts-fallback-locked h2,
html.fonts-fallback-locked h3,
html.fonts-fallback-locked h4,
html.fonts-fallback-locked .button,
html.fonts-fallback-locked .main-footer {
font-family: "Helvetica Neue", Arial, sans-serif;
}

header,
footer,
h1,
Expand Down Expand Up @@ -114,7 +149,6 @@ h4 {
padding-top: 2rem;
z-index: 1;
clear: both;
color: silver;
color: #fc6e1f;
}
.page-divider span {
Expand All @@ -132,8 +166,6 @@ h4 {
margin-bottom: 2em;
}

.hub .upcoming-event h3 {
}
.hub .upcoming-event div {
font-family: sofia-pro, sans-serif;
font-size: 0.9em;
Expand All @@ -143,8 +175,6 @@ h4 {
margin: 0 0 0.4em;
line-height: 1.5;
}
.hub .upcoming-event .when-where {
}
.hub .upcoming-event .next-thing {
font-size: 0.7em;
}
Expand Down Expand Up @@ -203,10 +233,6 @@ header #header-image {
background-image: url(/media/img/backgrounds/lifevests.jpg);
background-position: 0 0;
}
.volunteer #header-image {
background-image: url(/media/img/backgrounds/volunteer.jpg);
background-position: 0 -225px;
}
.sessions #header-image {
background-image: url(/media/img/backgrounds/sessions.jpg);
background-position: 0 -200px;
Expand Down Expand Up @@ -528,9 +554,6 @@ table a.session-transcript {
margin-bottom: 1em;
}

.hub table.time-blocks thead {
}

.hub table.time-blocks ul {
margin: 0 0 0 0;
padding: 0 0 10px 25px;
Expand Down