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.

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.
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.
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.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku
.Deku
created the applications with Flutter.If you have interested, please try to download them for free.