From d69ee7af2a26deff0e561d1ef7a3a65983d8358b Mon Sep 17 00:00:00 2001 From: hbar1st <35541470+hbar1st@users.noreply.github.com> Date: Thu, 31 Jul 2025 15:02:02 -0400 Subject: [PATCH] chore(curriculum): rm vids from performance lectures (#61628) --- .../67d1d6af27858c4f487d3f4c.md | 11 ++--------- .../67d2f6a63acd9e781b4b5061.md | 9 +-------- .../67d2f6b17844ae7898583eb3.md | 9 +-------- .../67d2f6cea4916d78d5a27ad3.md | 9 +-------- .../67d2f6e2836565795d789ab7.md | 11 ++--------- .../67d2f70278179479d3eed390.md | 9 +-------- .../67d2f7183a537d7a4908a9ff.md | 9 +-------- .../67d2f738dcef5d7abfe4243a.md | 9 +-------- .../67d2f759154eac7b4d5cb1bf.md | 9 +-------- .../67d2f778a856c37bd31c5022.md | 9 +-------- .../67d2f7a69809807c59a44002.md | 9 +-------- .../67d2f7cf63fafe7d20270498.md | 11 ++--------- .../67d2f7e9d895bf7dcef00408.md | 9 +-------- .../67d2f80313efe77e43182e86.md | 7 +------ 14 files changed, 17 insertions(+), 113 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d1d6af27858c4f487d3f4c.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d1d6af27858c4f487d3f4c.md index 70133f728a9..f73d3edf782 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d1d6af27858c4f487d3f4c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d1d6af27858c4f487d3f4c.md @@ -1,19 +1,12 @@ --- id: 67d1d6af27858c4f487d3f4c title: What Is the Difference Between Real Performance and Perceived Performance? -challengeType: 11 -videoId: oNhPIKleCmo +challengeType: 19 dashedName: what-is-the-difference-between-real-performance-and-perceived-performance --- # --description-- -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. @@ -48,7 +41,7 @@ If your website has custom fonts, you should also try to minimize font loading d 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. +We will go into these techniques in more detail in the next few lectures. 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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6a63acd9e781b4b5061.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6a63acd9e781b4b5061.md index 0b9ae2b0dda..a571d1ed186 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6a63acd9e781b4b5061.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6a63acd9e781b4b5061.md @@ -1,19 +1,12 @@ --- id: 67d2f6a63acd9e781b4b5061 title: What Are the Key Performance Concepts? -challengeType: 11 -videoId: wLaVahHQB44 +challengeType: 19 dashedName: what-are-the-key-performance-concepts --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are the key performance 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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6b17844ae7898583eb3.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6b17844ae7898583eb3.md index 76954c91efa..126cdf56308 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6b17844ae7898583eb3.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6b17844ae7898583eb3.md @@ -1,19 +1,12 @@ --- id: 67d2f6b17844ae7898583eb3 title: What Is INP? -challengeType: 11 -videoId: 9p6a5D2uofk +challengeType: 19 dashedName: what-is-inp --- # --description-- -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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6cea4916d78d5a27ad3.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6cea4916d78d5a27ad3.md index a5e15341a91..54fe6dfb675 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6cea4916d78d5a27ad3.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6cea4916d78d5a27ad3.md @@ -1,19 +1,12 @@ --- id: 67d2f6cea4916d78d5a27ad3 title: How to Measure and Improve INP? -challengeType: 11 -videoId: KLnrGBW0F8M +challengeType: 19 dashedName: how-to-measure-and-improve-inp --- # --description-- -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". diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6e2836565795d789ab7.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6e2836565795d789ab7.md index d9911b00a3c..d368eeed233 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6e2836565795d789ab7.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6e2836565795d789ab7.md @@ -1,24 +1,17 @@ --- id: 67d2f6e2836565795d789ab7 title: How Does a Browser Render a Page? -challengeType: 11 -videoId: Fe2bWQjJS68 +challengeType: 19 dashedName: how-does-a-browser-render-a-page --- # --description-- -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. +In this lecture, we'll demystify the rendering process, breaking it down into clear, digestible steps. First the browser parses the HTML and builds the DOM. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f70278179479d3eed390.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f70278179479d3eed390.md index 847997c273c..25cc04616bc 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f70278179479d3eed390.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f70278179479d3eed390.md @@ -1,19 +1,12 @@ --- id: 67d2f70278179479d3eed390 title: How Does Performance Impact Sustainability? -challengeType: 11 -videoId: lDI5MP59Tn0 +challengeType: 19 dashedName: how-does-performance-impact-sustainability --- # --description-- -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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7183a537d7a4908a9ff.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7183a537d7a4908a9ff.md index b8127a01d7b..a4fd3489484 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7183a537d7a4908a9ff.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7183a537d7a4908a9ff.md @@ -1,19 +1,12 @@ --- id: 67d2f7183a537d7a4908a9ff title: What Are Some Ways to Reduce Page Loading Times? -challengeType: 11 -videoId: FITz3jKCZyI +challengeType: 19 dashedName: what-are-some-ways-to-reduce-page-loading-times --- # --description-- -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: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f738dcef5d7abfe4243a.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f738dcef5d7abfe4243a.md index 3e5397ed406..305a3996b18 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f738dcef5d7abfe4243a.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f738dcef5d7abfe4243a.md @@ -1,19 +1,12 @@ --- id: 67d2f738dcef5d7abfe4243a title: How Do You Improve "Time to Usable"? -challengeType: 11 -videoId: 4Vq6Czl0fJQ +challengeType: 19 dashedName: how-do-you-improve-time-to-usable --- # --description-- -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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f759154eac7b4d5cb1bf.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f759154eac7b4d5cb1bf.md index 7da59dd23da..b14e09f5cf7 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f759154eac7b4d5cb1bf.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f759154eac7b4d5cb1bf.md @@ -1,19 +1,12 @@ --- id: 67d2f759154eac7b4d5cb1bf title: How to Improve the Perceived Performance of Features? -challengeType: 11 -videoId: MDluSIaTrKw +challengeType: 19 dashedName: how-to-improve-the-perceived-performance-of-features --- # --description-- -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! diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f778a856c37bd31c5022.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f778a856c37bd31c5022.md index f1b4380540c..fa4054f937c 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f778a856c37bd31c5022.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f778a856c37bd31c5022.md @@ -1,19 +1,12 @@ --- id: 67d2f778a856c37bd31c5022 title: What Are Some Key Metrics for Measuring Performance? -challengeType: 11 -videoId: Mc1vBYTCO8U +challengeType: 19 dashedName: what-are-some-key-metrics-for-measuring-performance --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -What are some key metrics for measuring performance? - 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: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7a69809807c59a44002.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7a69809807c59a44002.md index 2a1cdd791dd..504fb39414c 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7a69809807c59a44002.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7a69809807c59a44002.md @@ -1,19 +1,12 @@ --- id: 67d2f7a69809807c59a44002 title: What Are Some Common Performance Measurement Tools? -challengeType: 11 -videoId: HJUBj8fiFX8 +challengeType: 19 dashedName: what-are-some-common-performance-measurement-tools --- # --description-- -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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7cf63fafe7d20270498.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7cf63fafe7d20270498.md index b57386fe4a7..e9ce6cd8da5 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7cf63fafe7d20270498.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7cf63fafe7d20270498.md @@ -1,24 +1,17 @@ --- id: 67d2f7cf63fafe7d20270498 title: How Can You Use Performance Web APIs to Create Your Own Performance Measurement Tools? -challengeType: 11 -videoId: sUz4sM4gZZ0 +challengeType: 19 dashedName: how-can-you-use-performance-web-apis-to-create-your-own-performance-measurement-tools --- # --description-- -Watch the video or read the transcript and answer the questions below. - -# --transcript-- - -How can you use performance 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. +In this lecture, 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? diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7e9d895bf7dcef00408.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7e9d895bf7dcef00408.md index baaf35da8ee..a492b203f97 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7e9d895bf7dcef00408.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7e9d895bf7dcef00408.md @@ -1,19 +1,12 @@ --- id: 67d2f7e9d895bf7dcef00408 title: What Are Some Techniques for Improving CSS Performance? -challengeType: 11 -videoId: LmcHZXY1NLw +challengeType: 19 dashedName: what-are-some-techniques-for-improving-css-performance --- # --description-- -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. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f80313efe77e43182e86.md b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f80313efe77e43182e86.md index 610e518a15e..ff2be5df965 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f80313efe77e43182e86.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f80313efe77e43182e86.md @@ -1,17 +1,12 @@ --- id: 67d2f80313efe77e43182e86 title: What Are Some Techniques for Improving JavaScript Performance? -challengeType: 11 -videoId: dQHwpQos4vk +challengeType: 19 dashedName: what-are-some-techniques-for-improving-javascript-performance --- # --description-- -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.