Worst Case: Scripts at the Top

At this point, the effects that scripts can have on web pages are clear:

  • Content below the script is blocked from rendering.

  • Components below the script are blocked from being downloaded.

If scripts are put at the top of the page, as they usually are, everything in the page is below the script, and the entire page is blocked from rendering and downloading until the script is loaded. Try out the following example.

Because this entire page is blocked from rendering, it results in the blank white screen phenomenon described in Chapter 7. Progressive rendering is critical for a good user experience, but slow scripts delay the feedback users crave. Also, the reduction of parallelized downloads delays how quickly images are displayed in the page. Figure 8-5 shows how the components in the page are downloaded later than desired.

Script at the top blocks the entire page

Figure 8-5. Script at the top blocks the entire page

Get High Performance Web Sites now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.