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

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

LESS & SASS: Build and Optimize CSS Faster

Coursera · intermediate hands-on

→ Optimize CSS with LESS and SASS→ Build modular and reusable CSS

Make Your React Site 100% Faster With This Amazing FREE Tool

Web Dev Simplified · intermediate hands-on

→ Optimize React site performance→ Use React Scan to detect issues

How to make your webflow website super fast

Flux Academy · beginner hands-on

→ Optimize website loading speed→ Improve Webflow performance

React Router Tutorial | React DOM Tutorial | ReactJS Redux Training | Edureka Rewind

edureka! · beginner hands-on

→ Build a React application with React Router→ Implement routing in a React app

Do Less & Be Lazy: Practical Performance Patterns for Polymer (Polymer Summit 2016)

Chrome for Developers · intermediate hands-on

→ Implement performance patterns for Polymer→ Analyze web application performance

Read (10 articles)