jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-19 04:00:56 -04:00
Code Issues Projects Releases Wiki Activity

chore(curriculum): rm vids from performance lectures (#61628)

Browse Source
This commit is contained in:
hbar1st
2025-07-31 15:02:02 -04:00
committed by GitHub
parent d6b5369a3b
commit d69ee7af2a
14 changed files with 17 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d1d6af27858c4f487d3f4c.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6a63acd9e781b4b5061.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6b17844ae7898583eb3.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6cea4916d78d5a27ad3.md
View File

@@ -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".

11
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f6e2836565795d789ab7.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f70278179479d3eed390.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7183a537d7a4908a9ff.md
View File

@@ -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:

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f738dcef5d7abfe4243a.md
View File

@@ -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.

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f759154eac7b4d5cb1bf.md
View File

@@ -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!

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f778a856c37bd31c5022.md
View File

@@ -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:

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7a69809807c59a44002.md
View File

@@ -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.

11
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7cf63fafe7d20270498.md
View File

@@ -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?

9
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f7e9d895bf7dcef00408.md
View File

@@ -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.

7
curriculum/challenges/english/25-front-end-development/lecture-understanding-performance-in-web-applications/67d2f80313efe77e43182e86.md
View File

@@ -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.