<!DOCTYPE html> <html> <head> <link href="style.css" rel="stylesheet"> <script src="jquery.js" defer></script> </head> <body> <img src="html.png"> <img src="watch.png"> <script src="script.js" defer></script> </body> </html>
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.