Frontend Performance

After this skill you can…

• Achieve a 90+ Lighthouse score
• Implement lazy loading and code splitting
• Measure and improve LCP, FID, and CLS

Prerequisites

Watch (10 videos)

Full Stack Development Tutorial - THE FULL PROCESS!

DesignCourse · beginner hands-on

→ Build a full stack application→ Design UI/UX for a web app

Updating a Slow Website (P3D1) - Live Coding with Jesse

freeCodeCamp.org · beginner hands-on

→ Optimize website load times→ Use live coding for front-end development

JAMstack Tutorial - Full site using Netlify & Hugo

freeCodeCamp.org · beginner hands-on

→ Build a fast and secure client-side application→ Deploy a site to Netlify

Fixing Mobile Layout Issues (P5D25) - Live Coding with Jesse

freeCodeCamp.org · beginner hands-on

→ Fix mobile layout issues in React→ Improve front-end performance

Supercharged Live Live Live! (Polymer Summit 2017)

Chrome for Developers · intermediate hands-on

→ Build a web application with Web Components→ Use Polymer for frontend development

Getting Started with GatsbyJS (P5D2) - Live Coding with Jesse

freeCodeCamp.org · beginner hands-on

→ Build a React project with GatsbyJS→ Create a frontend project from scratch

Optimise your code: load code at the right time

Chrome for Developers · advanced hands-on

→ Optimize website load times→ Load JavaScript at the right time

PWA Tutorial for Beginners #16 - Getting Cached Assets

Net Ninja · beginner hands-on

→ Build a PWA with cached assets→ Enable offline behavior in a web app

Google Hackathon on AIR - Mobile Performance Fundamentals

Google Search Central · advanced hands-on

→ Optimize mobile page loading→ Implement lazy loading→ Test performance with WebpageTest

Angular Projects | Learn How to Build Angular 8 Projects from Scratch | Angular | Edureka Rewind

edureka! · intermediate hands-on

→ Build high-performance web applications→ Optimize frontend code

Read (10 articles)