html.pngHTML

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

Characteristics of this page

This pattern seems almost the same as 8.head & bottom (defer) but has some difficulties to apply. Tracking snippet code of GA is a good practice for this pattern.

Some browsers can load resources more smoothly and rendering starts even more earlier if the Above the fold related script (in this case script.js) is placed alone with async attribute in <head>.

watch.pngObject Event Timeline