Skip to content

Example website used in Frontend Masters course "Fundamentals of Web Performance"

Notifications You must be signed in to change notification settings

toddhgardner/fundametals-of-web-performance

Repository files navigation

Fundamentals of Web Performance Workshop

Example Online store Developer Stickers Online for the Fundamentals of Web Performance Workshop.

Getting Started

This is a webserver built on NodeJS and Express that servers plain HTML, CSS, JavaScript and Images. You need to have Node ~20.0 to run this project.

  1. Install Dependencies npm install
  2. Launch the Dev Server npm start
  3. Open the website at http://localhost:3000/

For demonstration purposes, the website is also hosted:

Instructor Setup

To do deploys, you need to create the .env file from the .env.template. You'll also need to enable execute on the script, chmod +x ./tools/deploy.sh

Workshop Info

In this one-day training, you'll learn how to make your website fast, and keep it that way.You'll learn how to set performance goals for your project, how to measure them, and improve your website performance.  

Benefits

  • Know why website performance is important for your project and business success on the web.
  • Understand the Core Web Vitals and other performance metrics, and the behavior being measured.
  • Linking the business goals of your website to performance metrics.
  • Technology and tactics to improve your metrics and the user experience of your website.

Summary

Build faster websites and web applications by learning the current metrics and techniques for improving web performance. We’ll look at the psychology of web performance and how users see wait time on your site. Then learn about the new Core Web Vitals that Google uses to measure your page, like Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interation to Next Paint (INP). Finally, we’ll discuss building a performance culture in your organization to start your applications fast from the beginning!

Course Slides