Last CallLast Call Pool

Performance

Effective web performance techniques in 2023

September 5, 2023 10:25 AM

Power Talk

🇬🇧 English

CMYK

About

Discover highly recommended techniques for optimizing web performance, including JS, INP metrics, style recalculation and optimization for JS frameworks.

Talk by

Photo of Bartek Miś, CEO & CTO / Bigger Picture

CEO & CTO / Bigger Picture at Independent

Watch the full talk

Watch this WaysConf session, then continue with related talks or explore the current programme.

Explore the 2026 agenda More WaysConf recordings

From the recording

Talk in brief

In this 2023 WaysConf presentation, Bartek Miś outlines a modernized approach to web performance optimization, shifting focus from single-page lab audits like Lighthouse to full user journey analysis powered by Real User Monitoring (RUM). Miś details actionable techniques for reducing initial page load bottlenecks, including optimizing TTFB, reordering head section resources via tools like KJS, prioritizing critical assets with fetchpriority, and deferring non-essential scripts until user interaction. Addressing runtime performance and Google's Interaction to Next Paint (INP) metric, he demonstrates how island architectures like Astro lower total blocking time compared to heavy client-side frameworks. He further provides practical methods in Chrome DevTools for diagnosing INP delays, refactoring expensive event listeners, minimizing broad CSS style recalculations, and preventing large-scale layout invalidations.

Key takeaways

01
Prioritize Real User Monitoring Over Lab Metrics
Optimization efforts in 2023 must focus on real user monitoring across complete browsing sessions rather than single-page Lighthouse scores. Segmenting field data by page type and mobile device reveals accurate user experience bottlenecks.
Watch from 2:20
02
Reorder Head Section Resources to Improve LCP
Arranging CSS stylesheets and JavaScript tags in the correct order within the HTML head prevents render-blocking delays. Automating this sequence using tools like KJS can significantly decrease Largest Contentful Paint times.
Watch from 4:06
03
Adopt HTML-First and Island Architectures
Frameworks utilizing zero-JavaScript defaults or island architectures, such as Astro, render HTML on the server and defer client component hydration. This drastically reduces JavaScript boilerplate and total blocking time compared to traditional client hydration.
Watch from 9:36
04
Profile and Debug Interaction to Next Paint
Diagnosing Interaction to Next Paint (INP) issues requires analyzing real user interaction data and logging delays in Chrome DevTools with CPU throttling enabled. Separating input delay, processing time, and presentation delay helps isolate specific rendering or script friction.
Watch from 14:49
05
Minimize Layout Invalidations and Expensive Selectors
State changes during interaction can trigger costly style recalculations and layout recalculations across thousands of DOM elements. Developers should write scoped CSS selectors and avoid calling forced synchronous layout operations.
Watch from 18:17

Video chapters

0:18Shift to Real User Monitoring
Bartek Miś explains the transition from Lighthouse lab scores to real user monitoring across complete user journeys.
3:42Initial Load and Head Optimization
The speaker details techniques for TTFB optimization and head section resource reordering with KJS to reduce LCP.
5:24Resource Prioritization and Interaction-Delayed Scripts
Strategies for HTML-first asset loading, fetch priority adjustments, and delaying script execution until user interaction are demonstrated.
8:30Comparing Next.js and Astro Architectures
Miś highlights how island architecture and zero-JS defaults minimize client-side JavaScript bundle sizes and total blocking time.
12:35Diagnosing INP and Main Thread Bottlenecks
The presentation covers methods for capturing interaction metrics using real user monitoring and reproducing INP delays in Chrome DevTools.
16:07Optimizing Event Handlers and DOM Invalidations
Techniques for refactoring script listeners with timeouts and reducing layout recalculations across DOM nodes are explored.
22:40Q&A: Field Data Versus PageSpeed Insights
Bartek Miś addresses whether PageSpeed Insights remains useful when real user monitoring is prioritized.

Read edited transcript highlights

These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.

Transitioning from Lab Tests to Real User Journeys

In recent years, web performance optimization has evolved beyond single-page lab environments like Lighthouse or PageSpeed Insights, which were popularized when Google introduced Core Web Vitals in 2020. Lab tests and metrics like First Input Delay failed to capture authentic user friction because they lacked real device context. By 2023, performance engineering centers on runtime performance and full user journeys—including scrolling, form submissions, and page transitions. Real user monitoring systems provide the necessary field data across diverse browsers and devices to identify exactly which elements degrade user experience.

Watch from 0:18

Optimizing Document Head Resource Sequencing

Server response time and time to first byte represent the initial foundation of web performance, as downstream optimizations depend on fast HTML delivery. Beyond server tuning, optimizing the order of CSS stylesheets and JavaScript files within the document head section is critical. Misordered scripts and styles frequently block browser rendering and inflate Largest Contentful Paint metrics. Utilizing tools such as KJS, which analyzes and reorganizes head section resources automatically, can cut LCP down significantly—in some cases dropping load times from nearly six seconds to optimal levels with zero structural code changes.

Watch from 3:42

Leveraging Island Architecture to Reduce JavaScript

JavaScript remains the dominant performance bottleneck on modern websites, particularly when using popular full-stack frameworks like Next.js that ship substantial hydration boilerplate on every visit. Alternative solutions like Astro adopt an island architecture and HTML-first approach, generating static server-rendered markup while isolating interactive UI components built in React, Vue, or Svelte. By explicitly declaring component hydration directives like client:visible, applications avoid downloading and executing JavaScript until a component enters the viewport, substantially lowering total blocking time.

Watch from 8:30

Deconstructing Interaction to Next Paint Components

Google's Interaction to Next Paint metric evaluates responsiveness across all user interactions during a session. INP consists of three distinct phases: input delay, processing time, and presentation delay. High input delay indicates that background tasks are stalling the main thread when interaction begins, while long processing times point to inefficient JavaScript execution. High presentation delay stems from browser rendering issues. Developers can debug these phases by enabling console logging in the Web Vitals extension, throttling the CPU in Chrome DevTools, and profiling main-thread call trees.

Watch from 14:49

Preventing Widespread Style Recalculations and Layout Shifts

Modifying DOM state during user interactions, such as toggling a mobile navigation menu, often triggers expensive browser layout invalidations and style recalculations. Adding or modifying a single CSS class or inline transform attribute can force the browser to recalculate styles for tens of thousands of elements if selectors are scoped broadly. To prevent interaction freezes, developers should write targeted CSS and JS selectors, avoid calling layout-forcing APIs like getBoundingClientRect during event loops, utilize setImmediate or requestIdleCallback to yield to the main thread, and leverage CSS content-visibility for offscreen sections.

Watch from 18:17

Contextualizing PageSpeed Insights in RUM-Driven Workflows

When evaluating whether lab tools like Google PageSpeed Insights remain relevant alongside real user monitoring, field data must always take precedence as the primary source of truth. RUM pinpoint authentic user friction and field metrics, while lab testing tools serve as a secondary technical diagnostic step. Once field monitoring identifies a problem with a metric like Largest Contentful Paint, developers can use synthetic tools in isolated lab environments to inspect technical sub-components and verify whether code adjustments effectively resolve the issue.

Watch from 22:40

Explore WaysConf 2026

View the agenda

Get tickets