DEV Community

Cover image for Day 50 of #100DaysOfCode: General strategies for optimizing critical render path
Jen-Hsuan Hsieh
Jen-Hsuan Hsieh

Posted on • Updated on

Day 50 of #100DaysOfCode: General strategies for optimizing critical render path

#100daysofcode #css #javascript #html 
<html lang="en">
    <head>
        <link rel="stylesheet" href="css/style.css" type="text/css"></link>
    </head>
    <body>
        <div><img src="photo.jpg"></div>
        <script src="js/app.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

What are the critical resources, critical path length, total size for the above example?

  • 3 number of critical resources
  • 11 total critical KB
  • 2 minimum critical path length(roundtrips)

Alt Text

Tip 1. Minify, compress, cache (for HTML, CSS, JavaScript)

  • (1) Minimize bytes
  • (2) Reduce critical resources
  • (3) Shortten CRP length

Tip 2. Minimize use of render blocking resources (for CSS)

(1) Use Media queries on link to unblock rensering

  • printer.css 
@media print {
    ...
}
Enter fullscreen mode Exit fullscreen mode
  • HTML 
<link rel="stylesheet" media="print" href="printer.css" />
Enter fullscreen mode Exit fullscreen mode

(2) Use inline CSS

Tip 3. Minimize use of parser blocking resources (for JavaScript)

We can use async, defer, and module to avoid blocking.

The following figure shows the difference between the async and the defer. The order is async/blocking, HTML parsing, defer.

Alt Text

In the following code, the order should be test.js, inline script, inline module, test2.js.

//3
<script type="module">   
    addTextToBody("Inline module executed"); 
</script>
//1
<script src="test1.js"></script>
//4
<script defer src="test2.js"></script>
//2
<script defer>   
    console.log("Inline script executed"); 
</script>
Enter fullscreen mode Exit fullscreen mode

(1) Defer JavaScript execution

  1. The browser renders and downloads JavaScript files at the same time. (non-blocking)
  2. The browser will execute JavaScript code after rendering.
  3. The inline script will ignore defer. For the following code, For the following code, the order should be inline script, test.js 
<script defer src="test.js"></script>
Enter fullscreen mode Exit fullscreen mode

The following optimized template is the code I found from the internet with dns-prefetch, preload, and defer.

<!DOCTYPE HTML>
<html>
       <head>
          <meta charset="utf-8">
          <link rel="dns-prefetch" href="//cdn1.com/">
          <link rel="preload" href="//js.cdn1.com/test.js" as="script">
       </head>
       <body>
           <script type="text/javascript" src="//js.cdn1.com/test.js" defer></script>
       </body>
</html>
Enter fullscreen mode Exit fullscreen mode

(2) Use async attribute on script

  1. The browser renders and downloads JavaScript files at the same time. (non-blocking)
  2. The browser will execute JavaScript code before rendering. 
<script async src="test.js"></script>
Enter fullscreen mode Exit fullscreen mode

Articles

There are some of my articles and released projects. Feel free to check if you like!

References

Top comments (0)

Read next

prasetyomuhdwi profile image

Setup path aliases in React + Vite + TS Project 🤓

Muhammad_Dwi_Prasetyo -

thejoernal profile image

How to reset an HTML form on submit using JavaScript

Joseph Ochego -

priyankdeep78 profile image

What is CI/CD Pipelines: A Crucial Skill for Every Software Engineer🔥

Priyank Deep Singh -

dejetem profile image

Rendering( or How to Render) Animation in JSON format with LottieFiles animation in React application

JONATHAN SIMON -