Slide 1
Slide 1 text
Jono Alderson
Independent technical SEO consultant
The Browser Strikes Back
Rethinking the modern dev stack
Slide 2
Slide 2 text
Jono Alderson
Independent technical SEO consultant
Slide 3
Slide 3 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Once upon
a time…
Slide 4
Slide 4 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
LoveFilm, 2002
The pioneers
Slide 5
Slide 5 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Netflix, 2007
The revolution
Slide 6
Slide 6 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Meanwhile,
on the web…
Slide 7
Slide 7 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Normalizing
the wait
Slide 8
Slide 8 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Shipping DVDs
made sense
Slide 9
Slide 9 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
We’ve all
shipped
DVDs
Slide 10
Slide 10 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
The browser
wasn’t ready
Slide 11
Slide 11 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Then everything
changed…
Slide 12
Slide 12 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Slide 13
Slide 13 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
We kept
mailing discs
Slide 14
Slide 14 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Shut up,
SEO nerd
Slide 15
Slide 15 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Rebuilding the
browser in
JavaScript
Slide 16
Slide 16 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Reinventing
the wheel
Slide 17
Slide 17 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
We built beautiful
machines for a
broken world
Slide 18
Slide 18 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
The infinite
framework
arms race
Slide 19
Slide 19 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Now the
back button
is broken
Slide 20
Slide 20 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
The browser is
built for delivery
Slide 21
Slide 21 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
We built the
postal service
of JavaScript
Slide 22
Slide 22 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
We created
monsters
Slide 23
Slide 23 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Meanwhile,
the browser
caught up
Slide 24
Slide 24 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Website or
application?
Slide 25
Slide 25 text
Jono Alderson
Independent technical SEO consultant
The browser strikes back
Slide 26
Slide 26 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
We used to
fake it
Slide 27
Slide 27 text
Jono Alderson
Independent technical SEO consultant
Slide 28
Slide 28 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Popover API
Toggle popover
Popover content
Slide 29
Slide 29 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Slide 30
Slide 30 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Form controls
Slide 31
Slide 31 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
form:has(:invalid) {
outline: 1px solid red;
}
.field:has(input:invalid) label {
color: red;
}
.field.password:has(input:focus) .strength-hint {
opacity: 1;
}
Slide 32
Slide 32 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
CSS Carousels
Slide 33
Slide 33 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Images got
smart
Slide 34
Slide 34 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Slide 35
Slide 35 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Slide 36
Slide 36 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Predict
navigation
Slide 37
Slide 37 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
{
"prefetch": [
{
"where": { "href_matches": "^/" }, // same-origin navigations
"eagerness": "moderate" // hover 200ms or pointerdown
}
]
}
Speculation rules
Slide 38
Slide 38 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
"prerender": [
{ // Only prerender links you explicitly opt-in
"where": { "selector_matches": "a[data-prefetch='prerender']" },
"eagerness": "immediate"
},
{ // Or prerender highly likely next pages (e.g., paginated articles)
"where": {
"and": [
{ "href_matches": "^/article/[^#?]+$" },
{ "selector_matches": "a[rel='next']" }
]
},
"eagerness": "conservative" // on pointer/touch down
}
]
Speculation rules
"prefetch": [
{ // High-value links you’ve explicitly marked up
"where": { "selector_matches": "a[data-prefetch]" },
"eagerness": "immediate"
},
{ // Fallback for most internal links, but exclude sensitive routes
"where": {
"and": [
{ "href_matches": "^/" },
{ "not": { "href_matches": "^/(logout|cart|checkout|admin)" } },
{ "not": { "selector_matches": "a[data-prefetch='off']" } }
]
},
"eagerness": "moderate"
}
]
Slide 39
Slide 39 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Native
caching
Cache-Control: public,
max-age=600,
s-maxage: 86400,
stale-while-revalidate=86400
Slide 40
Slide 40 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Native
storage
const b=document.body, k='theme';
b.dataset.theme = localStorage[k] || 'light';
theme.onclick=()=>{
b.dataset.theme = b.dataset.theme==='light'?'dark':'light';
localStorage[k]=b.dataset.theme;
};
Slide 41
Slide 41 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
“In our experiment with popular
web pages, 17 out of 20
showed improvements, and the
average foreground parse and
compile times reduction was
630ms”
//# allFunctionsCalledOnLoad
Compile hints
Slide 42
Slide 42 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Scroll-driven
everything
Slide 43
Slide 43 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Hidden until found
Slide 44
Slide 44 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Content visibility
Slide 45
Slide 45 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
- [...]
Slide 46
Slide 46 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
.card {
contain: layout paint style; /* or: contain: content; */
/* content = layout+paint+style+size (in most engines) */
}
Containment
Slide 47
Slide 47 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
.hero img {
transition: transform .3s ease;
will-change: transform; /* pre-promotes layer */
}
.hero img:hover {
transform: scale(1.05);
}
Change management
Slide 48
Slide 48 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Intersection Observers
…
const io = new IntersectionObserver(e => {
document.body.classList.toggle(
'near-footer', e[0].isIntersecting);
}, { rootMargin: '200px' });
io.observe(document.querySelector('#footer'));
Slide 49
Slide 49 text
Jono Alderson
Independent technical SEO consultant
Slide 50
Slide 50 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
BFcache & business logic
window.addEventListener('pageshow', function (event) {
if (event.persisted) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'bfcache_restore'
});
}
});
Slide 51
Slide 51 text
Jono Alderson
Independent technical SEO consultant
View transitions
Slide 52
Slide 52 text
Jono Alderson
Independent technical SEO consultant
Slide 53
Slide 53 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
All of this
works together
Slide 54
Slide 54 text
Jono Alderson
Independent technical SEO consultant
Slide 55
Slide 55 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
The code
gets simpler
Slide 56
Slide 56 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
What is X?
Answer A…
How do I Y?
Answer B…
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.acc-btn[aria-expanded="true"] + .acc-panel { max-height: 20rem; }
.acc-btn { width: 100%; text-align: left; }
(function () {
const acc = document.querySelector('#faq');
const buttons = acc.querySelectorAll('.acc-btn');
function closeAll() {
buttons.forEach(btn => {
btn.setAttribute('aria-expanded', 'false');
const panel = document.getElementById(btn.getAttribute('aria-controls'));
panel.setAttribute('aria-hidden', 'true');
});
}
function toggle(btn) {
const expanded = btn.getAttribute('aria-expanded') === 'true';
closeAll(); // one-at-a-time behavior; remove if multi-open
btn.setAttribute('aria-expanded', String(!expanded));
const panel = document.getElementById(btn.getAttribute('aria-controls'));
panel.setAttribute('aria-hidden', String(expanded));
}
buttons.forEach(btn => {
btn.addEventListener('click', () => toggle(btn));
btn.addEventListener('keydown', e => {
if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggle(btn); }
if (e.key === 'ArrowDown') { e.preventDefault(); btn.closest('.acc-item').nextElementSibling?.nextElementSibling?.previousElementSibling?.querySelector('.acc-btn')?.focus(); }
if (e.key === 'ArrowUp') { e.preventDefault(); btn.closest('.acc-item').previousElementSibling?.previousElementSibling?.querySelector('.acc-btn')?.focus(); }
});
});
})();
Slide 57
Slide 57 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
What is X?
Answer A…
summary {cursor:pointer;list-style:none} summary::after {content:'▸';float:right;transition:.2s} details[open] summary::after {transform:rotate(90deg)}Slide 58
Slide 58 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Render on
the server
Slide 59
Slide 59 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Smarter Frameworks,
Smaller Footprints
Slide 60
Slide 60 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
The myths
we cling to
Slide 61
Slide 61 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Small is the
new fast
Slide 62
Slide 62 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Semantic
HTML is
cool again
Slide 63
Slide 63 text
Jono Alderson
Independent technical SEO consultant
Slide 64
Slide 64 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Stop mailing
DVDs
Slide 65
Slide 65 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Looking
ahead
Slide 66
Slide 66 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Structure =
Accessibility
Slide 67
Slide 67 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Machines are
the new users
Slide 68
Slide 68 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Browser readiness =
AI readiness
Slide 69
Slide 69 text
Jono Alderson
Independent technical SEO consultant
Image source: LINK
Build for humans,
Build for machines
Slide 70
Slide 70 text
Jono Alderson
Independent technical SEO consultant
The Browser Strikes Back
Rethinking the modern dev stack