Performance

Improving performance is a process that starts with minimizing, or at lease, optimizing the data that users download. Understanding how a browser renders those resources is a prerequisite for improving code efficiency. After improving it, you need a way to test it.

Optimizing Content Efficiency

To deliver great performance you need to optimize delivery of each and every byte of your site.

Get Started

Critical Rendering Path

Do you understanding what happens in the intermediate steps between receiving HTML, CSS, and JavaScript and the processing to turn them into rendered pixels?

Learn More

Rendering Performance

To write performant sites and apps you need to understand how HTML, JavaScript and CSS are handled by the browser, and ensure that the code you write (and third-party code you include) runs as efficiently as possible.

Learn More

Understanding Low Bandwidth and High Latency

It's important to understand what your app or site feels like when connectivity is poor or unreliable, and build accordingly. A range of tools can help.

Learn More

The PRPL Pattern

PRPL (push, render, pre-cache and lazy-load) is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch.

Learn More

Codelabs

Find and Fix Web App Performance Issues
This codelab will help you learn to identify and fix web app performance bottlenecks.

Chrome DevTools

Udacity Courses

Browser Rendering Optimization
Google performance guru Paul Lewis is here to help you destroy jank and create web apps that maintain 60 frames per second performance.

Critical Rendering Path
Learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites.

HTTP/1 to HTTP/2
Surma starts with the basics of HTTP/1 and goes all the way to HTTP/2, how to load assets efficiently and also covers security aspects of these protocols.