Bootstrap，消除渲染阻塞资源

Question

Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles

css/bootsrtap.min.css css/main.css

I am getting this message while checking my website loading speed on GTmetrix, PageSpeed Insights. It is slowing my website down. How can I solve this issue? Please help, Thank you.

Answer 1

Deliver critical CSS by extracting the class definitions and put those classes inside a <style> block at the head of the page:

eg

<style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}
</style>

Deferring all non-critical CSS.

eg

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

For more details, refer to this guide: https://web.dev/defer-non-critical-css/