feat(curriculum): add web performance transcripts (#59719)

Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2025-04-21 19:23:08 -05:00
parent 9c8631ad15
commit afd483f082
14 changed files with 675 additions and 31 deletions
@@ -2,13 +2,55 @@
 id: 67d1d6af27858c4f487d3f4c
 title: What Is the Difference Between Real Performance and Perceived Performance?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: M-5LrHfhBnI
 dashedName: what-is-the-difference-between-real-performance-and-perceived-performance
 ---

 # --description--

-Watch the video lecture and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What is the difference between real performance and perceived performance?
+
+When we talk about performance, the term itself can feel a bit subjective, right? What is good performance? What is bad performance?
+
+Is there a standard way to measure performance or is it completely dependent on the user's personal preferences and perception? Let's see. 
+
+We can classify a website's performance into two different categories: perceived performance and real performance.
+
+The perceived performance is how users perceive the performance of a website. It's how they evaluate it in terms of responsiveness and reliability. This is a subjective measurement, so it's hard to quantify it, but it's very important, since the user experience determines the success or failure of a website.
+
+In contrast, real performance is the objective and measurable performance of the website. It's measured using metrics like page load time, server response time, and rendering time. These measurements are influenced by multiple factors related to the network and to the code itself.
+
+Even a website with excellent perceived performance can be further optimized for an even better user experience.
+
+There are several techniques for improving perceived performance.
+
+Reducing the initial load time as much as possible by loading non-essential resources in the background is essential. This technique is known as "lazy loading." That first impression can determine what users will think about your website.
+
+Lazy loading will also impact the real performance of your website. By using this technique, you can reduce the amount of content that has to be loaded upfront, so the page will load faster, which is a real performance metric.
+
+It's also very important to provide quick response and feedback to user interactions. 
+
+For example, showing a loading indicator for a long-running process as soon as the user clicks on an element can help the user feel connected and engaged with the process, making the wait time feel shorter - or at least they'll feel more involved.
+
+Keeping users actively engaged with your website is very important for improving their time perception. Displaying text as soon as it arrives is helpful for keeping users engaged from the start, even if other resources, like images, have not been loaded yet.
+
+If a user is waiting for a long-running task to be completed, keep them informed on the progress and update it regularly.
+
+Another tip is to avoid content reflow and jumping content. For example, when ads or images are being loaded, the website might jump or readjust to make room for these new resources if they don't already have a space in the layout. 
+
+These sudden changes can result in a bad user experience because users may feel like the website is still loading. To avoid this, plan ahead and assign space for these elements from the start.
+
+If your website has custom fonts, you should also try to minimize font loading delays, since this may result in flickering - or showing the fallback font while the custom font is being loaded. A suggestion for this is using a fallback font that is similar to the custom font, so in case this happens, the change will be much more subtle.
+
+Also, be sure that the interface elements are active. The user should be able to interact with them with minimal lag.
+
+We will go into these techniques in more detail in the next few videos.
+
+While real performance is important, perceived performance can have a tremendous impact on user experience. By optimizing for both, you can create websites that are and feel faster, creating a smooth and engaging user experience.

 # --questions--

@@ -38,7 +80,7 @@ Think about how a website can be technically fast but feel slow to a user.

 ---

-Perceived performance is more important than real performance because it is based on objective system metrics, while real performance is based on the user’s subjective experience.
+Perceived performance is more important than real performance because it is based on objective system metrics, while real performance is based on the user's subjective experience.

 ### --feedback--

@@ -2,13 +2,86 @@
 id: 67d2f6a63acd9e781b4b5061
 title: What Are the Key Performance Concepts?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: wLaVahHQB44
 dashedName: what-are-the-key-performance-concepts
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are the key performace concepts?
+
+Why do some websites feel snappy and responsive, while others feel sluggish? The answer lies in key performance concepts that affect how a page loads and renders. Understanding key web performance concepts is essential for building fast, smooth, and user-friendly websites. 
+
+Let's break down source order, the critical rendering path, latency, and more.
+
+Let's look at source order first.
+
+Source order refers to the way HTML elements are structured in the document. This determines what loads first and can significantly impact performance and accessibility.
+
+Some best practices for this include:
+
+- Placing critical content such as headings, navigation or main text higher in the HTML structure.
+
+- Deferring non-essential scripts such as ones for analytics, or third-party widgets, so they don't block rendering.
+
+- Using progressive enhancement, to ensure the core experience works even before styles and scripts load. Progressive enhancement is a way of building websites and applications based on the idea that you should make your page work with HTML first.
+
+Here is an example of good source order, using the best practices we just went through.
+
+```html
+<!-- Good source order: Essential content first -->
+<h1>Welcome to FastSite!</h1>
+<p>Critical information loads first.</p>
+<script src="slow-script.js" defer></script>
+```
+
+By optimizing source order, we make sure users see important content as soon as possible.
+
+Now let's look at critical rendering path.
+
+The critical rendering path is the sequence of steps the browser follows to convert code into pixels on the screen.
+
+Here are the key steps that we will go into later:
+
+1. Parsing HTML: Builds the DOM (Document Object Model)
+
+2. Parsing CSS: Builds the CSSOM (CSS Object Model)
+
+3. JavaScript Execution: Can modify the DOM & CSSOM
+
+4. Render Tree Construction: Combines the DOM & CSSOM
+
+5. Layout & Painting: Determines element sizes & draws pixels
+
+6. Optimizations:
+
+    - Minimize render-blocking resources (e.g., large CSS files, unused JS).
+
+    - Use async and defer attributes for scripts:
+
+    - Load only essential styles first; defer non-critical CSS.
+
+Overall, a shorter critical rendering path equals a faster perceived performance. We will go into this in more detail later on.
+
+And finally, let's look at latency.
+
+Latency is the time it takes for a request to travel between the browser and the server. So in other words, high latency equals slow pages.
+
+Some ways of reducing latency include:
+
+- Using CDNs, or in other words, Content Delivery Networks, to serve files from closer locations.
+
+- Enabling compression using things such as Gzip to reduce file sizes.
+
+- Optimizing images and using lazy loading - which we will also go into later.
+
+By reducing latency, we make interactions feel instant.
+
+So in conclusion, by optimizing source order, reducing the critical path, and cutting down latency, you can make your website feel fast.

 # --questions--

@@ -110,7 +183,7 @@ Think about how long it takes for data to travel between the server and the user

 ---

-The size of a website’s JavaScript files.
+The size of a website's JavaScript files.

 ### --feedback--

@@ -2,13 +2,29 @@
 id: 67d2f6b17844ae7898583eb3
 title: What Is INP?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 9p6a5D2uofk
 dashedName: what-is-inp
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What is INP?
+
+Have you ever clicked on a webpage and felt like nothing happened? This delay impacts user experience and is measured by a metric called Interaction to Next Paint, or INP.
+
+INP assesses a page's overall responsiveness by measuring the time from when a user interacts — like a click or key press — to the next time the browser updates the display. A lower INP indicates a more responsive page.
+
+But why is INP important? A high INP can make users feel that a page is unresponsive, leading to frustration. Optimizing INP ensures that users receive timely feedback, enhancing their experience.
+
+Tools like Chrome's DevTools and web performance APIs can help measure INP by tracking interaction delays.
+
+To improve INP, minimize main thread work, optimize event handlers, and ensure that user interactions trigger timely visual updates.
+
+By understanding and optimizing INP, you can create web experiences that feel fast and responsive, keeping your users satisfied.

 # --questions--

@@ -2,13 +2,35 @@
 id: 67d2f6cea4916d78d5a27ad3
 title: How to Measure and Improve INP?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: KLnrGBW0F8M
 dashedName: how-to-measure-and-improve-inp
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+How to measure INP and improve INP?
+
+Let's walk through a practical way to measure Interaction to Next Paint, or INP, using Chrome DevTools.
+
+First of all, let's open DevTools by pressing "F12" or Right-click and click on "Inspect".
+
+Now, let's say you have a search bar on your webpage.
+
+Imagine a user types a query, but it takes 600ms before the suggestion dropdown appears. Chrome DevTools would mark this high INP value.
+
+You can optimize by deferring heavy JavaScript, reducing long tasks, and improving event handling. The INP would then drop to 150ms, making interactions feel instant.
+
+Cool, right?
+
+Now, let's look at a practical measurement technique that helps identify interaction delays so you can create a faster and smoother user experience!
+
+First, we would open Chrome DevTools. We would do so, once again, by opening Google Chrome, navigating to a webpage that we want to analyze, and pressing "F12" or right-clicking the page and clicking "Inspect". Now, let's head to the "Performance" tab - and there is everything that you need.
+
+Now we are ready to identify the Interaction to Next Paint, or INP. We are going to look for the longest interaction delay recorded. A good INP is generally below 200ms, and a poor INP is above 500ms. And that's it!

 # --questions--

@@ -2,13 +2,65 @@
 id: 67d2f6e2836565795d789ab7
 title: How Does a Browser Render a Page?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: Fe2bWQjJS68
 dashedName: how-does-a-browser-render-a-page
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+How does a browser render a page?
+
+Have you ever wondered what happens behind the scenes when you enter a URL and press enter? How does the browser transform code into the interactive pages we see?
+
+Understanding how a browser renders a web page is essential for developers aiming to optimize performance and enhance user experience.
+
+In this video, we'll demystify the rendering process, breaking it down into clear, digestible steps.
+
+First the browser parses the HTML and builds the DOM.
+
+The process begins with the browser fetching the HTML content of the page. It parses this HTML to construct the Document Object Model, or DOM — a tree-like structure representing the page's content.
+
+Consider this simple HTML snippet:
+
+```html
+<html>
+  <body>
+    <h1>Hello, World!</h1>
+    <p>Welcome to our website.</p>
+  </body>
+</html>
+```
+
+The browser parses this to create a DOM tree with `html` as the root, containing `body`, which in turn contains `h1` and `p` elements.
+
+Next, the browser processes the CSS, constructing the CSS Object Model, or CSSOM. This is another tree structure that dictates how elements should be styled.
+
+Given this CSS:
+
+```css
+h1 {
+  color: blue;
+}
+p {
+  font-size: 16px;
+}
+```
+
+The CSS Object Model specifies that `h1` elements are blue and `p` elements have a font size of 16 pixels.
+
+The browser then combines the DOM and CSS Object Model to form the render tree. This tree includes only the nodes needed to render the page, each paired with its corresponding styles.
+
+For our example, the render tree consists of the `h1` and `p` elements, styled appropriately.
+
+With the render tree in hand, the browser calculates the exact position and size of each element in a process called layout or reflow. This ensures that elements appear in the correct location and dimensions on the screen.
+
+Finally, the browser paints the pixels to the screen, rendering each element based on the calculated styles and layout. In complex pages, this might involve multiple layers that are composited together to form the final visual output.
+
+In conclusion, from parsing HTML and CSS to painting pixels on the screen, the browser's rendering process is a sophisticated sequence of steps.

 # --questions--

@@ -2,13 +2,74 @@
 id: 67d2f70278179479d3eed390
 title: How Does Performance Impact Sustainability?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: lDI5MP59Tn0
 dashedName: how-does-performance-impact-sustainability
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+How does performance impact sustainability?
+
+Improving web performance is crucial for delivering a fast and efficient user experience. But did you know that optimizing your website's performance doesn't just improve speed — it also helps the environment?
+
+Every time a page loads, energy is consumed. And when sites are inefficient, they use more resources, leading to higher carbon emissions.
+
+Let's break down how performance impacts sustainability and show you practical ways to optimize your code for a greener web.
+
+The internet accounts for around 2% of global carbon emissions — that's the same as the airline industry! Every byte transferred requires electricity, from data centers to user devices. Larger files and inefficient scripts mean more power consumption. A high-performance website isn't just faster, it also reduces unnecessary processing and energy use.
+
+Here's an example of inefficient JavaScript:
+
+```js
+// Inefficient JavaScript
+function fetchData() {
+    for (let i = 0; i < 1000000; i++) {
+        console.log("Processing...");
+    }
+    fetch("https://api.example.com/data")
+        .then(response => response.json())
+        .then(data => console.log(data));
+}
+fetchData();
+```
+
+This script runs excessive console logs, wasting CPU cycles and energy.
+
+Now, let's optimize it:
+
+```js
+// Optimized JavaScript
+async function fetchDataOptimized() {
+    const response = await fetch("https://api.example.com/data");
+    const data = await response.json();
+    console.log(data);
+}
+fetchDataOptimized();
+```
+
+By removing unnecessary loops and using `async`/`await`, we lower processing time and energy consumption.
+
+Here are some practical optimization tips you can use in your future projects.
+
+1. Minify Your Assets: Use tools like Terser or UglifyJS to shrink JavaScript and CSS files. Smaller files load faster and require less energy.
+
+2. Optimize Images: Use next-gen formats like WebP instead of PNGs or JPEGs to reduce file size without quality loss.
+
+3. Reduce Network Requests: Each request adds overhead. Combine CSS and JavaScript files and use lazy loading to reduce load times.
+
+4. Use Efficient Algorithms: A poorly optimized loop can increase CPU usage. This is the same as writing inefficient JavaScript that we saw in the example previously.
+
+5. Leverage Caching & CDNs: Caching prevents repeated downloads, and CDNs deliver content closer to users, reducing transmission energy.
+
+And now, what if you want to measure your impact and just how green your site is?
+
+Use tools like Google Lighthouse to analyze performance and estimate energy savings. Or, for a deeper sustainability check, try the Website Carbon Calculator — as it estimates your page's environmental impact.
+
+In conclusion, by understanding and implementing these performance fundamentals, developers can create web applications that are not only faster and more responsive but also more sustainable.

 # --questions--

@@ -2,13 +2,55 @@
 id: 67d2f7183a537d7a4908a9ff
 title: What Are Some Ways to Reduce Page Loading Times?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: FITz3jKCZyI
 dashedName: what-are-some-ways-to-reduce-page-loading-times
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are some ways to reduce page loading times?
+
+Have you ever left a website because it took too long to load? Slow page loading can frustrate users and increase bounce rates. Today, we'll explore practical ways to reduce page loading times, ensuring your audience stays engaged.
+
+Number 1: optimize media assets. Large images and videos are common culprits for slow load times. By optimizing these assets, you can significantly speed up your site:
+
+- Compress Images: Use tools like TinyPNG to reduce image file sizes without compromising quality.
+
+- Use Modern Formats: Implement formats like WebP for images and AV1 for videos to achieve better compression rates.
+
+- Lazy Loading: Defer loading off-screen images and videos until they're needed. In HTML, add the `loading="lazy"` attribute to your media tags.
+
+Next, we have minimize HTTP requests. Each file your website requests adds to the load time. Reducing the number of HTTP requests can lead to faster page loads. You can:
+
+- Combine Files: Merge CSS and JavaScript files to reduce the number of requests.
+
+- Use Inline Critical CSS: Place essential CSS directly in the HTML to speed up initial rendering.
+
+- Use CSS Sprites: Combine multiple images into a single sprite sheet to minimize requests.
+
+And, of course, you can Leverage Browser Caching. Caching allows browsers to store parts of your website locally, reducing load times for returning visitors:
+
+- Set Expiry Headers: Use the `Cache-Control` header to specify how long browsers should keep files.
+
+- Version Assets: When updating files, change their names or use query strings to ensure browsers fetch the latest versions.
+
+You can do this along with minifying and Compressing files, which will reduce the size of your files can lead to quicker downloads:
+
+- Minify CSS and JavaScript: Remove unnecessary whitespace and comments using tools like UglifyJS for JavaScript and cssnano for CSS.
+
+- Enable Compression: Configure your server to use Gzip to reduce the size of transmitted files.
+
+You can also optimize web fonts. Web fonts can enhance design but may also slow down your site if not handled properly:
+
+- Limit Font Variants: Only include the character sets and styles you need.
+
+- Use `font-display`: Control how fonts are displayed during loading by setting the `font-display` property in your CSS.
+
+So in conclusion, by implementing all these strategies, you can significantly reduce your page loading times, leading to a better user experience and improved site performance.

 # --questions--

@@ -2,13 +2,70 @@
 id: 67d2f738dcef5d7abfe4243a
 title: How Do You Improve "Time to Usable"?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 4Vq6Czl0fJQ
 dashedName: how-do-you-improve-time-to-usable
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+How do you improve time to usable?
+
+Improving the "time to usable", or in other words the interval from when a user requests a page to when they can meaningfully interact with it, is crucial for enhancing user experience.
+
+Let's explore effective strategies to achieve a faster time to usable.
+
+Begin by focusing on the content that the user sees first. This means loading essential elements immediately and deferring non-critical components.
+
+For example, you could try to implement lazy loading.
+
+We have already covered lazy loading, but here is an example of lazy load images as a refresher:
+
+```html
+<img src="image.jpg" loading="lazy" alt="Description">
+```
+
+All you need to do is add the `loading="lazy"` attribute to image tags. This defers the loading of images until they are needed, typically when they enter the user's viewport. By loading images and videos only when they enter the viewport, we are conserving bandwidth as well as causing the speed up of initial rendering.
+
+Normally, a webpage loads all images at once, even those not visible on the screen. With lazy loading, images below the fold, or in other words off-screen, they are only loaded when the user scrolls down to them.
+
+And here is an example of lazy load iframes:
+
+```html
+<iframe src="video.html" loading="lazy"></iframe>
+```
+
+You can apply the same attribute that you did before, but this time to iframes, and the same concept will apply.
+
+You can also use the `defer` attribute to delay non-critical JavaScript until after the initial page load. Here is an example of us doing just that:
+
+```html
+<script src="non-critical.js" defer></script>
+```
+
+You could also consider minimizing render-blocking resources.
+
+Render-blocking resources delay the page from becoming interactive.
+
+To avoid this, you could try loading CSS asynchronously. For non-critical CSS, use the `media` attribute to load stylesheets conditionally. Here is an example of us doing just that:
+
+```html
+<link rel="stylesheet" href="print.css" media="print">
+```
+
+By specifying media value as `print`, the `print.css` will only be loaded when the page is printed or previewed on screen. In this next example, by passing `min-width: 800px` as the value to the `media` attribute, we are saying we only want `desktop.css` to load for screens wider than 800px:
+
+```html
+<!-- This stylesheet is only loaded on screens wider than 800px -->
+<link rel="stylesheet" href="desktop.css" media="(min-width: 800px)">
+```
+
+This saves bandwidth by skipping unnecessary styles.
+
+So, in conclusion, by implementing these strategies, you can significantly reduce the "time to usable" for your website, ensuring users can interact with your content promptly.

 # --questions--

@@ -2,13 +2,70 @@
 id: 67d2f759154eac7b4d5cb1bf
 title: How to Improve the Perceived Performance of Features?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: MDluSIaTrKw
 dashedName: how-to-improve-the-perceived-performance-of-features
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+How to improve the perceived performance of features?
+
+As we know, perceived performance isn't just about how fast a site actually is — it's about how fast it feels to users. So, for example, if you have ever used a website that felt slow, even though it wasn't? That's perceived performance — how fast a site feels to the user.
+
+Small tweaks can make a huge difference in the user experience. Let's explore some practical ways to improve perceived performance!
+
+Spinners can make users feel like they're waiting longer than they actually are. Instead, try skeleton screens — gray placeholders that mimic real content and gradually load in:
+
+```html
+<div class="skeleton"></div>
+<script>
+  setTimeout(() => {
+    document.querySelector(".skeleton").innerHTML = "✅ Content Loaded!";
+  }, 2000);
+</script>
+```
+
+Users feel like the page is loading progressively, rather than waiting in the dark.
+
+In addition to this, users shouldn't have to wait for everything to load before they can start interacting. Load important content first, then load the rest in the background. We looked at this previously with lazy loading:
+
+```html
+<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy">
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const lazyImages = document.querySelectorAll("img.lazy");
+    lazyImages.forEach(img => {
+      img.src = img.dataset.src;
+    });
+  });
+</script>
+```
+
+This makes the page feel responsive, even if not everything has loaded yet.
+
+Now - what if your site could predict what the user will click next? With preloading, you can fetch the next page before they request it:
+
+```html
+<link rel="preload" href="next-page.html" as="document">
+```
+
+This reduces perceived loading time to near zero when users navigate.
+
+And finally, users don't like uncertainty. When they click a button, acknowledge their action instantly:
+
+```html
+<button onclick="this.innerText='⏳ Processing...'; setTimeout(() => this.innerText='✅ Done!', 2000);">
+  Click Me
+</button>
+```
+
+This means that, even if there's a delay, the user feels like something is happening.
+
+So, in conclusion, improving perceived performance isn't just about raw speed, it's about how speed feels to the user. Use skeleton screens, prioritize important content, preload smartly, and give instant feedback to make your site feel faster.

 # --questions--

@@ -2,13 +2,49 @@
 id: 67d2f778a856c37bd31c5022
 title: What Are Some Key Metrics for Measuring Performance?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: 8hAnuI_pXqo
 dashedName: what-are-some-key-metrics-for-measuring-performance
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are some key metrics for measuring performace?
+
+To measure and improve web performance, we use key performance metrics like First Contentful Paint (or FCP), Speed Index, Total Blocking Time (or TBT), Bounce Rate, and Unique Users. Let's look at all of these metrics individually.
+
+First Contentful Paint, or FCP. This measures how quickly the first piece of content, like a text or image, appears on the screen. A good FCP is regarded as a time below 1.8 seconds, and a poor FCP is usually above 3 seconds. You can check your FCP using Chrome DevTools like this:
+
+Step 1: Open Chrome DevTools
+
+- Open Google Chrome.
+
+- Go to the webpage you want to test.
+
+- Press "F12" or Right-click and "Inspect".
+
+Step 2: Find and click the "Lighthouse" tab in the DevTools.
+
+Step 3: Click the "Analyze page load" button and wait for the analyzation to finish.
+
+Now we can analyze the results. We do this by scrolling down to the "Metrics" section and looking for the "First Contentful Paint" marker. We can see the exact time in milliseconds or seconds.
+
+FCP and Interaction to Next Paint (or INP), that we looked at previously, are both performance metrics, but they measure different aspects of user experience. It's important not to get them mixed up.
+
+As a reminder, FCP is about how fast users see content after loading, and INP is about how fast users see feedback after clicking or typing.
+
+Next we have the Speed Index.
+
+Speed Index measures how quickly visible parts of the page are painted. Lower scores mean better performance! You can check your Speed Index in the Lighthouse Reports.
+
+We also have Total Blocking Time or TBT. This shows how long the main thread is blocked by heavy JavaScript tasks. If TBT is high, users experience laggy interactions. To improve TBT, break up long tasks and defer non-essential scripts.
+
+Next we have the Bounce Rate. This is the percentage of visitors who leave without interacting. If your site has high bounce rates, it might be because your page is too slow.
+
+And finally we have unique users. This metric tracks how many individual visitors come to your site. To view the bouce rate and unique users, you can use Google Analytics. It will allow you to monitor these metrics and improve engagement.

 # --questions--

@@ -2,13 +2,39 @@
 id: 67d2f7a69809807c59a44002
 title: What Are Some Common Performance Measurement Tools?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: sFj8e9ilwzM
 dashedName: what-are-some-common-performance-measurement-tools
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+What are some common performance measurement tools?
+
+If you want to make your website faster and more responsive, you need the right tools to measure and optimize performance. Let's explore some common performance measurement tools and how they help.
+
+First up, we have Chrome DevTools.
+
+Chrome DevTools is a built-in tool inside Google Chrome that lets you analyze and debug performance in real-time. DevTools will show loading times, CPU usage, and render delays. It's especially useful for measuring First Contentful Paint, or FCP, which we know by now, is how fast a user sees the first visible content. If your website feels slow, DevTools will help you spot the bottlenecks.
+
+Next up, Lighthouse.
+
+Lighthouse is an automated tool that checks performance, SEO, and accessibility. To use it, simply open Chrome DevTools and go to the "Lighthouse" tab. Next, click "Analyze page load" and it will give you a score on how fast and optimized your site is, as well as provide recommendations to improve it. If you want a quick performance audit, Lighthouse is your go-to tool.
+
+Now, let's talk about WebPageTest.
+
+WebPageTest lets you test how your site loads from different locations and devices. All you have to do is visit WebPageTest.org, enter your website URL, choose a test location and browser and click "Start Test". It gives a detailed breakdown of your site's Speed Index, Total Blocking Time, and other key performance metrics. If you want to know how real users experience your site globally, WebPageTest is the tool for that.
+
+Another great tool is Google PageSpeed Insights.
+
+This tool analyzes your website and suggests quick improvements for both mobile and desktop. Just go to PageSpeed Insights, enter your URL, and click "Analyze". It will tell you what's slowing your site down and give specific recommendations — like optimizing images, removing render-blocking scripts, and reducing server response times. PageSpeed Insights is a fast and easy way to check how Google sees your site's performance.
+
+Lastly, let's talk about Real User Monitoring, or RUM tools. Unlike lab tests, RUM tools track actual user behavior, showing how real visitors experience your site. Popular RUM tools include Google Analytics, which tracks page load times and bounce rates. And New Relic or Datadog, which Monitors real-time performance issues. If you want data from actual users, RUM tools are essential.
+
+Each tool has different strengths, so use a combination to get the best insights. Start by testing with Chrome DevTools or Lighthouse, then dive deeper with WebPageTest and RUM tools.

 # --questions--

@@ -2,13 +2,99 @@
 id: 67d2f7cf63fafe7d20270498
 title: How Can You Use Performance Web APIs to Create Your Own Performance Measurement Tools?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: sUz4sM4gZZ0
 dashedName: how-can-you-use-performance-web-apis-to-create-your-own-performance-measurement-tools
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+How can you use performace web APIs to create your own performance measurement tools?
+
+While tools like Lighthouse and Chrome DevTools are great, sometimes you need custom insights tailored to your site.
+
+That's where Performance Web APIs come in!
+
+In this video, we'll break down how to use three key Web APIs to measure and analyze your website's speed.
+
+But first, what are Performance Web APIs? 
+
+Performance Web APIs let developers track how efficiently a webpage loads and responds, directly from code. These APIs allow you to measure page load times, track rendering and interaction delays and analyze JavaScript execution time.
+
+With these APIs, you can build your own performance monitoring tools without relying on third-party software!
+
+Let's explore three powerful Web APIs you can use today.
+
+First up, `performance.now()`.
+
+This API gives you high-precision timestamps (in milliseconds) to measure how long different parts of your site take to load.
+
+Let's say you want to measure how fast a function runs:
+
+```js
+const start = performance.now();  
+// Run some code here  
+const end = performance.now();  
+
+console.log(`Execution time: ${end - start}ms`);
+```
+
+This is more accurate than using `Date.now()` because it measures time in microseconds, avoiding clock drift issues. You can use it to track script execution time, event response delays and animation performance.
+
+Next, the Performance Timing API.
+
+This API gives you a breakdown on every single stage of page loading, from DNS lookup to `DOMContentLoaded`.
+
+Want to measure how long your page takes to fully load?
+
+```js
+let [navigationTiming] = performance.getEntriesByType("navigation");
+
+if (navigationTiming instanceof PerformanceNavigationTiming) {
+  // Calculate time from navigation start to DOM content loaded
+  const pageLoadTime =
+    navigationTiming.domContentLoadedEventEnd - navigationTiming.startTime;
+
+  console.log("DOM Content Loaded Time:", pageLoadTime, "ms");
+}
+```
+
+Key metrics you can track with this API are DNS lookup time - or in other words the connection speed, Time to First Byte (TTFB) - or server response speed, and  `DOMContentLoaded` - or in other words, when the page is ready for interaction.
+
+If your page load times are slow, this API pinpoints exactly where the delay happens!
+
+And finally, let's talk about `PerformanceObserver`.
+
+This API listens for performance events such as layout shifts, long tasks, and user interactions.
+
+Want to monitor long-running JavaScript tasks?
+
+```js
+const observer = new PerformanceObserver((list) => {  
+  list.getEntries().forEach((entry) => {  
+    console.log(`Long task detected: ${entry.duration}ms`);  
+  });  
+});  
+
+observer.observe({ type: "longtask", buffered: true });
+```
+
+And what can this API track? Well, it can track long tasks - or in other words, JavaScript that blocks rendering, layout shifts to detect UI jank, and First Input Delay (FID) - or how fast a page responds to user input.
+
+If you want real-time performance tracking, this API is a game-changer.
+
+So, which API should you use? Here's a quick comparison:
+
+| Performance API        | Best For                                           |
+| :--------------------- | :------------------------------------------------- |
+| `performance.now()`    | Precise timing of functions and scripts            |
+| Performance Timing API | Measuring full page load performance               |
+| Performance Observer   | Real-time monitoring of interactions and rendering |
+
+By combining these APIs, you can build your own performance measurement tools and track exactly what matters for your site most.

 # --questions--

@@ -30,7 +116,7 @@ Think about why precision matters when measuring speed.

 ---

-It measures system memory usage, including the browser’s memory footprint.
+It measures system memory usage, including the browser's memory footprint.

 ### --feedback--

@@ -2,13 +2,51 @@
 id: 67d2f7e9d895bf7dcef00408
 title: What Are Some Techniques for Improving CSS Performance?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: LmcHZXY1NLw
 dashedName: what-are-some-techniques-for-improving-css-performance
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+Let's review some important techniques for improving CSS performance specifically.
+
+Every project is unique and you should carefully consider which ones of these techniques will be most helpful for your web application.
+
+First, since all styles are parsed, you should remove any unnecessary styles from your CSS stylesheets.
+
+You should also split your CSS styles into multiple files. This way, if a file is not required to render a specific web page, it will not be loaded and it won't block the rendering process.
+
+By default, the browser assumes that all stylesheets should block the rendering process. But you can tell the browser when a stylesheet should be loaded by using the `media` attribute and a media query. 
+
+In this example, the `print.css` stylesheet will only be applied when the document is being printed because it has the `media` attribute with the value `print`:
+
+```html
+<link rel="stylesheet" href="print.css" media="print" />
+```
+
+You can also minify your CSS files automatically to reduce their size during the build process and compress these files in the server where you host your web application.
+
+Try to keep your CSS selectors as simple as possible and don't try to select more elements than necessary.
+
+Take advantage of the cascading nature of CSS whenever possible. Some styles will be inherited.
+
+Preloading resources with `rel="preload"` is another important technique. Critical assets should be loaded first.
+
+Remember that CSS animations can have an impact on performance.
+
+Animating certain CSS properties, such as dimensions, position, and layout, triggers a process called "reflow," during which the browser recalculates the position and geometry of certain elements on the page. This requires a repaint, which is computationally expensive.
+
+Therefore, it's recommended to reduce the number of CSS animations as much as possible or at least give the user an option to toggle them on or off.
+
+And even though fonts can enhance the visual presentation of your web application, they can have an impact on performance. Some fonts have large files, up to multiple megabytes. Try to use two or three fonts at most and use web-safe fonts whenever possible.
+
+You may also consider preloading the most important fonts to have them ready for quick use.
+
+These are some of the most important and commonly used techniques for optimizing CSS in web development. By incorporating them, you can optimize your website's performance to create a smooth user experience.

 # --questions--

@@ -2,13 +2,49 @@
 id: 67d2f80313efe77e43182e86
 title: What Are Some Techniques for Improving JavaScript Performance?
 challengeType: 11
-videoId: nVAaxZ34khk
+videoId: dQHwpQos4vk
 dashedName: what-are-some-techniques-for-improving-javascript-performance
 ---

 # --description--

-Watch the lecture video and answer the questions below.
+Watch the video or read the transcript and answer the questions below.
+
+# --transcript--
+
+Let's review some of the most important techniques for improving JavaScript performance specifically.
+
+You may find this surprising, but the first technique is using less JavaScript whenever possible.
+
+If you're developing a simple static website, you may be able to do exactly the same without frameworks that rely on JavaScript.
+
+You should also try to remove any unused JavaScript code and use simpler solutions, if possible.
+
+For example, you may consider using built-in browser features instead of custom ones. These built-in browser features include form validation, the browser's built-in video player, and CSS animations instead of custom JavaScript animations.
+
+Use as few animations as possible.
+
+Reduce the amount of DOM manipulation on your JavaScript code, since this is computationally expensive.
+
+Splitting your JavaScript code into modules that perform critical and non-critical tasks is also helpful. This way, you'll be able to preload the critical ones as soon as possible and defer the non-critical ones to render the page as fast as possible.
+
+Pre-loading files does not guarantee that they will be available when you use them, but the download will start sooner, so the overall waiting time should be shorter.
+
+Once your code is split into multiple files, you can minify them automatically during the build process to reduce their size and optimize their load time.
+
+If an event listener is no longer necessary, you should remove it:
+
+```js
+element.removeEventListener("mousemove", handleMouseMove);
+```
+
+In this example, we remove the event listener for the `mousemove` event, so the `handleMouseMove` function is no longer called when the event is triggered. If you keep the event listener, the program will continue performing calculations that are no longer necessary, affecting the overall performance. This effect will be even more noticeable if you have multiple active event listeners simultaneously.
+
+And since we're on the topic of events, it's recommended to use event delegation whenever possible.
+
+This means that you don't need to set the event listeners on individual child elements. You can set it directly on the parent and the event will bubble up until it finds a parent that can handle it.
+
+Optimizing JavaScript is crucial for developing fast and responsive web applications. In a real-world project, you'll constantly analyze the performance of your website to find areas for improvement.

 # --questions--