O'Reilly logo

Even Faster Web Sites by Steve Souders

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 6. Positioning Inline Scripts

The previous three chapters focused on the impact of external scripts. This chapter focuses on inline scripts (JavaScript included in the HTML document directly). Even though inline scripts don’t introduce additional HTTP requests, they can block resources in the page from being downloaded in parallel. They can also thwart progressive rendering. This chapter explains why the decisions of when and where to inline JavaScript have an impact on page performance.

Inline Scripts Block

Chapter 5 describes how external scripts block parallel downloads and rendering. It’s not surprising that inline scripts have the same behavior for the same reasons (preserving execution order and document.write dependencies). The Inline Scripts Block example demonstrates this behavior.

Figure 6-1 shows the HTTP requests issued for this page. In addition to the HTML document, there are two image requests, each configured to take one second. An inline script is inserted between these two images. The inline script is represented by a line in Figure 6-1. It does not generate an HTTP request, but the impact it has is observable.

Inline scripts block parallel downloads (six seconds)

Figure 6-1. Inline scripts block parallel downloads (six seconds)

The inline script is configured to take five seconds to execute. This is what causes the four seconds ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required