<!DOCTYPE html>
        <link href="style.css" rel="stylesheet">
        <script src="jquery.js" defer></script>
        <img src="html.png">
        <img src="watch.png">
        <script src="script.js" defer></script>

Characteristics of this page

This is the same pattern as 7.head & bottom but puts defer attributes to both scripts. The key point to lead this pattern to success is to start from 4.bottom as a best practice and put a lightweight and standalone (or asynchronously executable) script into the <head>. For example, this can be turned into the different scenario to improve user experience.

watch.pngObject Event Timeline