Performance Patterns

The simplest possible page consists of just the HTML markup: no CSS, no JavaScript, or other types of resources.

• 1 critical resource
• 1 or more roundtrips for the minimum critical path length
• 5 KB of critical bytes

Now, let’s consider the same page but with an external CSS file.

• 2 critical resources
• 2 or more roundtrips for the minimum critical path length
• 9 KB of critical bytes

Ok, now let’s add an extra JavaScript file into the mix.

• 3 critical resources
• 2 or more roundtrips for the minimum critical path length
• 11 KB of critical bytes

IF the JavaScript file is not needed for the rendering of the page, we can add the async attribute to the script tag to unblock the parser.

• 2 critical resources
• 2 or more roundtrips for the minimum critical path length
• 9 KB of critical bytes