CODEWITHSUNDEEP
javascriptcssbootstrap-4
Jay Jadhav
Jay Jadhav

Reputation: 81

How can I eliminate render-blocking resources with Bootstrap?

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?

Upvotes: 6

Views: 2411

Answers (1)

Konstantinos Gallis
Konstantinos Gallis

Reputation: 1140

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

e.g.

<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.

e.g.

<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/

Upvotes: 0

Related Questions