← All courses
20 lessonsبالعربي

Frontend Performance

The full Frontend Performance series — rebuilt as an interactive course. Watch each episode, then feel the problem and the fix in live demos: jank you can stop, a main thread you can unblock, and a 100,000-row list that scrolls like butter. From the critical rendering path to Core Web Vitals, monitoring, and shipping less JavaScript.

Videos in Arabic · Lessons & demos in English

Your progress0 / 20 lessons · 0%
MODULE 1

Foundations — From URL to Pixels

What 'fast' means, and how the browser turns a request into a rendered page.

01IntroductionWhat makes a site feel fast, the two battles (network + the single main thread), and the journey from URL to pixels.12 minInteractive02Critical Rendering PathHow the browser turns HTML, CSS, and JS into pixels — parsing, DOM/CSSOM, render tree, layout, paint, composite.24 minInteractive
MODULE 2

Core Web Vitals

The metrics that measure what users actually feel — and the thresholds Google grades you on.

03Introduction to Web VitalsThe metrics Google uses to score real-world experience — and why the 75th percentile is what counts.14 minInteractive04Largest Contentful Paint (LCP)Measuring perceived load: when the biggest thing on screen finishes painting, and how to make it happen sooner.17 minInteractive05Cumulative Layout Shift (CLS)Why the page jumps under your finger, how the score is computed, and how to pin layout so it never moves.21 minInteractive06Interaction to Next Paint (INP)Responsiveness as a metric: input delay, processing, presentation — and how a busy main thread wrecks it.26 minInteractive
MODULE 3

Monitoring

Knowing your real-world performance: field data, lab data, and the tools that produce them.

07RUM vs. Synthetic MonitoringField data from real users vs. lab data from controlled tests — what each one is good and bad at.22 minInteractive08Real User MonitoringCollecting performance from the people actually using your site, and reading the distribution they produce.15 minInteractive09Synthetic Monitoring — WebPageTestLab testing on demand: reading the waterfall and filmstrip, first vs. repeat view, catching regressions in CI.26 minInteractive10Profiling with Chrome DevToolsRecording a performance trace, reading the flame chart, and hunting down long tasks that block interaction.32 minInteractive
MODULE 4

Loading Less, Sooner

Delivery optimizations: ship less up front, and warm up what you'll need next.

11Bundle SplittingStop shipping the whole app up front. Split by route and on demand so users download only what they need.30 minInteractive12Action on VisibilityDefer work until it's actually seen — IntersectionObserver-driven lazy images, components, and data.28 minInteractive13Resource Hints — dns-prefetch & preconnectWarm up cross-origin connections before you need them so the DNS/TCP/TLS cost is already paid.17 minInteractive14Resource Hints — preloadTell the browser about a critical resource early so it fetches at high priority instead of late.17 minInteractive15Resource Hints — prefetchFetch what the user will probably need next during idle time, so the next navigation feels instant.25 minInteractive
MODULE 5

Shipping Less JavaScript

Cutting bundle size at the source — dead code, dependency weight, and compression.

16Tree ShakingHow bundlers drop the code you never use — and why ESM, named imports, and sideEffects make or break it.24 minInteractive17Bundle AnalyzerOpen up the bundle as a treemap, find the modules eating your budget, and decide what to cut or split.26 minInteractive18BundlePhobiaWeigh a dependency before you install it — size, download time, and picking the lighter alternative.13 minInteractive20Compressing JavaScriptFrom source to wire: minification then gzip/brotli, and how much each step shaves off the transfer.35 minInteractive
MODULE 6

Rendering at Scale

The capstone: keeping huge lists smooth by rendering only what's visible.

19Virtual ScrollingRender a list of 100,000 rows without melting the browser by only mounting the handful that are on screen.45 minInteractive