The browser strikes back

Modern browsers give us powerful tools for layout, animation, state, storage and more - the kinds of things we once had to reach for JavaScript libraries and frameworks to achieve. Now we need to learn to treat the browser as an ally, rather than an enemy - and discover how leaning into its native capabilities can unlock simpler, faster and more resilient ways to build.

Transcript

1. Jono Alderson Independent technical SEO consultant The Browser Strikes Back Rethinking the modern dev stack
2. Jono Alderson Independent technical SEO consultant
3. Jono Alderson Independent technical SEO consultant Image source: LINK Once upon a time…
4. Jono Alderson Independent technical SEO consultant Image source: LINK LoveFilm, 2002 The pioneers
5. Jono Alderson Independent technical SEO consultant Image source: LINK Netflix, 2007 The revolution
6. Jono Alderson Independent technical SEO consultant Image source: LINK Meanwhile, on the web…
7. Jono Alderson Independent technical SEO consultant Image source: LINK Normalizing the wait
8. Jono Alderson Independent technical SEO consultant Image source: LINK Shipping DVDs made sense
9. Jono Alderson Independent technical SEO consultant Image source: LINK We’ve all shipped DVDs
10. Jono Alderson Independent technical SEO consultant Image source: LINK The browser wasn’t ready
11. Jono Alderson Independent technical SEO consultant Image source: LINK Then everything changed…
12. Jono Alderson Independent technical SEO consultant Image source: LINK
13. Jono Alderson Independent technical SEO consultant Image source: LINK We kept mailing discs
14. Jono Alderson Independent technical SEO consultant Image source: LINK Shut up, SEO nerd
15. Jono Alderson Independent technical SEO consultant Image source: LINK Rebuilding the browser in JavaScript
16. Jono Alderson Independent technical SEO consultant Image source: LINK Reinventing the wheel
17. Jono Alderson Independent technical SEO consultant Image source: LINK We built beautiful machines for a broken world
18. Jono Alderson Independent technical SEO consultant Image source: LINK The infinite framework arms race
19. Jono Alderson Independent technical SEO consultant Image source: LINK Now the back button is broken
20. Jono Alderson Independent technical SEO consultant Image source: LINK The browser is built for delivery
21. Jono Alderson Independent technical SEO consultant Image source: LINK We built the postal service of JavaScript
22. Jono Alderson Independent technical SEO consultant Image source: LINK We created monsters
23. Jono Alderson Independent technical SEO consultant Image source: LINK Meanwhile, the browser caught up
24. Jono Alderson Independent technical SEO consultant Image source: LINK Website or application?
25. Jono Alderson Independent technical SEO consultant The browser strikes back
26. Jono Alderson Independent technical SEO consultant Image source: LINK We used to fake it
27. Jono Alderson Independent technical SEO consultant
28. Jono Alderson Independent technical SEO consultant Image source: LINK Popover API <button popovertarget="mypopover"> Toggle popover </button> <div id="mypopover" popover> Popover content </div>
29. Jono Alderson Independent technical SEO consultant Image source: LINK
30. Jono Alderson Independent technical SEO consultant Image source: LINK Form controls
31. 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; }
32. Jono Alderson Independent technical SEO consultant Image source: LINK CSS Carousels
33. Jono Alderson Independent technical SEO consultant Image source: LINK Images got smart
34. Jono Alderson Independent technical SEO consultant Image source: LINK <picture> <!-- Wide layout --> <source media="(min-width:800px)" type="image/avif" srcset="/img/hero-wide.avif 1x, /img/hero-wide@2x.avif 2x" width="1200" height="600"> <!-- Mobile art direction --> <source media="(max-width:799px)" type="image/webp" srcset="/img/hero-tall.webp 1x, /img/hero-tall@2x.webp 2x" width="600" height="900"> <!-- Fallback --> <img src="/img/hero.jpg" srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w" sizes="(max-width:600px) 100vw, (max-width:1200px) 80vw, 1200px" loading="lazy" decoding="async" fetchpriority="low" alt=""></picture>
35. Jono Alderson Independent technical SEO consultant Image source: LINK <picture> <!-- Wide layout --> <source media="(min-width:800px)" type="image/avif" srcset="/img/hero-wide.avif 1x, /img/hero-wide@2x.avif 2x" width="1200" height="600"> <!-- Mobile art direction --> <source media="(max-width:799px)" type="image/webp" srcset="/img/hero-tall.webp 1x, /img/hero-tall@2x.webp 2x" width="600" height="900"> <!-- Fallback --> <img src="/img/hero.jpg" srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w" sizes="(max-width:600px) 100vw, (max-width:1200px) 80vw, 1200px" loading="lazy" decoding="async" fetchpriority="low" alt=""> </picture>
36. Jono Alderson Independent technical SEO consultant Image source: LINK Predict navigation
37. Jono Alderson Independent technical SEO consultant Image source: LINK <script type="speculationrules"> { "prefetch": [ { "where": { "href_matches": "^/" }, // same-origin navigations "eagerness": "moderate" // hover 200ms or pointerdown } ] } </script> Speculation rules
38. 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" } ]
39. Jono Alderson Independent technical SEO consultant Image source: LINK Native caching Cache-Control: public, max-age=600, s-maxage: 86400, stale-while-revalidate=86400
40. Jono Alderson Independent technical SEO consultant Image source: LINK Native storage <script> 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; }; </script>
41. 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
42. Jono Alderson Independent technical SEO consultant Image source: LINK Scroll-driven everything
43. Jono Alderson Independent technical SEO consultant Image source: LINK <div hidden="until-found"> <!-- hidden content --> </div> Hidden until found
44. Jono Alderson Independent technical SEO consultant Image source: LINK Content visibility
45. Jono Alderson Independent technical SEO consultant Image source: LINK <ul> <li class="card">[...]</li> <!-- many <li> cards ... --> </ul> .card { content-visibility: auto; /* skip layout/paint offscreen */ contain-intrinsic-size: 400px 300px; /* reserve space to avoid CLS */ } Content visibility
46. 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
47. 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
48. Jono Alderson Independent technical SEO consultant Image source: LINK Intersection Observers <footer id="footer">…</footer> <script> const io = new IntersectionObserver(e => { document.body.classList.toggle( 'near-footer', e[0].isIntersecting); }, { rootMargin: '200px' }); io.observe(document.querySelector('#footer')); </script>
49. Jono Alderson Independent technical SEO consultant
50. 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' }); } });
51. Jono Alderson Independent technical SEO consultant View transitions
52. Jono Alderson Independent technical SEO consultant
53. Jono Alderson Independent technical SEO consultant Image source: LINK All of this works together
54. Jono Alderson Independent technical SEO consultant
55. Jono Alderson Independent technical SEO consultant Image source: LINK The code gets simpler
56. Jono Alderson Independent technical SEO consultant Image source: LINK <section class="accordion" id="faq"> <h3 class="acc-item"> <button class="acc-btn" aria-expanded="false" aria-controls="a1">What is X?</button> </h3> <div id="a1" class="acc-panel" role="region" aria-hidden="true">Answer A…</div> <h3 class="acc-item"> <button class="acc-btn" aria-expanded="false" aria-controls="a2">How do I Y?</button> </h3> <div id="a2" class="acc-panel" role="region" aria-hidden="true">Answer B…</div> </section> <style> .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; } </style> <script> (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(); } }); }); })(); </script>
57. Jono Alderson Independent technical SEO consultant Image source: LINK <details class="faq"> <summary>What is X?</summary> <p>Answer A…</p> </details> <style> summary {cursor:pointer;list-style:none} summary::after {content:'▸';float:right;transition:.2s} details[open] summary::after {transform:rotate(90deg)} </style>
58. Jono Alderson Independent technical SEO consultant Image source: LINK Render on the server
59. Jono Alderson Independent technical SEO consultant Image source: LINK Smarter Frameworks, Smaller Footprints
60. Jono Alderson Independent technical SEO consultant Image source: LINK The myths we cling to
61. Jono Alderson Independent technical SEO consultant Image source: LINK Small is the new fast
62. Jono Alderson Independent technical SEO consultant Image source: LINK Semantic HTML is cool again
63. Jono Alderson Independent technical SEO consultant
64. Jono Alderson Independent technical SEO consultant Image source: LINK Stop mailing DVDs
65. Jono Alderson Independent technical SEO consultant Image source: LINK Looking ahead
66. Jono Alderson Independent technical SEO consultant Image source: LINK Structure = Accessibility
67. Jono Alderson Independent technical SEO consultant Image source: LINK Machines are the new users
68. Jono Alderson Independent technical SEO consultant Image source: LINK Browser readiness = AI readiness
69. Jono Alderson Independent technical SEO consultant Image source: LINK Build for humans, Build for machines
70. Jono Alderson Independent technical SEO consultant The Browser Strikes Back Rethinking the modern dev stack