[Web] Optimize CSS and JS

Outline
Preconnect
Preload
Completed

Outline

Google Chrome provides a feature named Lighthouse to check the performance of the web page. With this feature, you can check the overall performance of the web page, and you can also see the problems like the following.

Optimization loading Google web font - Lighthouse Eliminate render-blocking resources issue of google web font

In this blog post, I will introduce how to optimize loading CSS and JS to fix Reduce unused JavaScript and Reduce unused CSS issues.

Preconnect

Preconnect helps the web browser to connect to external domains in advance when getting external domain resources from the current page.

Preconnect: https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preconnect

You can use Preconnect like the following.

<link rel="preconnect" href="https://example.com">

By using this, you can improve the speed of loading CSS or JS. To improve loading CSS and JS speed, modify the <head /> like the following. This blog post uses Bootstrap as an example.

<head>
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  ...
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>

Preload

Preload tells the web browser to preload the resources used by the current web page before rendering the page.

Preload: https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/preload

You can use Preload like the following.

<link rel="preload" as="script" href="example.js" />
<link rel="preload" as="style" href="example.css" />

You can use it to improve the speed of laoding CSS and JS. To improve the speed of loading CSS and JS, modify the code like the following.

<head>
  ...
  <link
    rel="preload"
    as="style"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  />
  <link
    rel="preload"
    as="script"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>

Completed

Done! we’ve seen how to optimize the loading CSS and JS to improve the web page performance. It’s a point that often occurs in Lighthouse, so I think it’s good to remember this optimization well this time. If you want to know about executing Lighthouse on the local or the CI environment, please see the following link.

[Code Quality] Lighthouse CI

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.