HTML Course 18.1 Resource loading order (CSS, JS, fonts)

18.1 Resource Loading Order: CSS, JavaScript, and Fonts

Web browsers follow a critical rendering path to convert HTML, CSS, JavaScript, and font resources into pixels on the screen. The order and manner in which these resources load directly impact page performance, perceived speed, and user experience.

1. CSS Loading

• Placement: External <link rel='stylesheet'> tags should go in the <head> to avoid flash of unstyled content (FOUC).
• Parser Blocking: Each CSS file blocks HTML parsing until it’s fetched and processed, because the browser must build the CSSOM (CSS Object Model) before it can render.
• Media Attributes: You can delay non-critical CSS with media='print' or load conditionally.

Example: Linking CSS in the Head

<link rel='stylesheet' href='styles/critical.css'>


<link rel='stylesheet' href='styles/print.css' media='print'>

2. JavaScript Loading

JavaScript can block both HTML parsing and CSSOM construction. You have three main loading strategies:

• Regular <script> (blocking): Stops HTML parsing, downloads script, executes it, then resumes parsing.
• async: Downloads in parallel; executes as soon as it’s ready (out of order).
• defer: Downloads in parallel; executes in document order after HTML parsing completes.

Comparison Table

Example: Loading JavaScript with defer and async

<script src='js/main-blocking.js'></script>


<script src='js/analytics.js' async></script>


<script src='js/util.js' defer></script>
<script src='js/app.js' defer></script>

3. Font Loading

Fonts are often large binary files. Improper loading can cause FOIT (flash of invisible text) or FOUT (flash of unstyled fallback font). Modern strategies include:

• @font-face with font-display: Controls fallback behavior (auto, block, swap, fallback, optional).
• Preconnect: Establish early connection to font origin.
• Preload: Instruct the browser to fetch critical font files early.

Example: @font-face with font-display

<style>
/* Inside a <style> block in head or in critical CSS file */
@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans.woff2') format('woff2'),
       url('/fonts/OpenSans.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Use fallback immediately, swap when ready */
}
</style>

Example: Preconnect and Preload Fonts

<link rel='preconnect' href='https://fonts.googleapis.com'>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>


<link rel='preload'
      href='/fonts/OpenSans.woff2'
      as='font'
      type='font/woff2'
      crossorigin>

4. Optimization Techniques and Best Practices

• Combine and minify CSS and JavaScript to reduce HTTP requests and file size.
• Host fonts on the same origin or use CDNs with preconnect to reduce DNS/TLS handshake time.
• Load non-critical scripts and styles asynchronously or defer them to speed up initial render.
• Use resource hints (preload, prefetch, preconnect) to control the loading priority of assets.
• Audit performance regularly with tools like Lighthouse to spot render-blocking resources.

By carefully ordering and hinting resource loading for CSS, JavaScript, and fonts, you streamline the critical rendering path, minimize blocking, and deliver faster, more polished experiences to your users.