CSS is render blocking. This means that a browser will not start rendering when it finds CSS in the head of the page until all that CSS is parsed. If the browser is required to download one or more external CSS files that might take up precious time. In this article I will show you how to remove those render blocking CSS files in your NextJS app to speed up rendering. This will improve your paint metrics (First Contentful Paint and Largest Contentful Paint)
By default NextJS will create 2 stylesheets for a page. The first is the global stylesheet and the second on a page specific stylesheet. How much time will that cost us? That depends on a lot of factors like the visitors device, the network speed, the network connection protocol, the distance to the server, the size of the stylesheet etc. On average, for all my clients, across all devices I have found this takes about 200ms. On the NextJS website downloading those 2 stylesheets will take 600ms on a fast 3g connection. This will delay all the paint metrics by 600ms. Time to take action and remove these render blocking stylesheets!
Option 1: Generate Critical CSS
The first and fastest option is to generate Critical CSS. Critical CSS is a collection of CSS rules that are needed to render the visible part of the page. Those rules are placed inline in the HEAD of the page. Then, in parallel, the original CSS files are downloaded while the browser will continue to render. Once the original CSS files are downloaded they are injected into the page.
Critical CSS is now available in NextJS as an experimental feature. Generating Critical CSS in NextJS is extremely simple. Just add experimental: { optimizeCss: true } to your next.config.js and add install critters@0.0.7 as a dependency in your project.
If you do not want to enable experimental features in your NextJS app to improve the Core Web Vitals you could consider inlining your CSS. You will need to create a custom head section and reference this in your _document.tsx.
The downside to this method is that the inline CSS will probably be larger then with the first method. However if you keep your stylesheets clean and effective this method will most probably improve the Core Web Vitals for your NextJS app significantly!
Styled Components is a CSS-in-JS tool that lets you write CSS in JavaScript files. This has many advantages. For example, you can repeat class names, easily remove unused CSS code, and manage code more easily compared to traditional CSS files. As for the Core Web Vitals it will mean you will only inject the styles that are needed on that page. Pretty neat right?
As of NextJS version 12.1 it is easier then ever to use styled components in your NextJS app. Add compiler:{styledComponents: true} to your next.config.js, install styled-components (yarn add styled-components and when it’s done installing, run yarn add -D @types/styled-components ), update the file _document.js to support server side rendering for styled components and you are good to go!
Inline critical CSS. Inclining critical CSS simply refers to inserting the CSS code directly into the HTML file — rather than loading it separately. ...
Use media queries to load non-critical CSS (conditional CSS) This is taking on from inlining critical CSS. ...
“Render blocking resources” refers to web page resources, such as CSS and JavaScript files. These resources can block web page rendering if certain conditions are met: If the <script> tag is in the <head> of the HTML document AND does not have a defer or async attribute.
By default, CSS is treated as a render blocking resource, which means that the browser won't render any processed content until the CSSOM is constructed. Make sure to keep your CSS lean, deliver it as quickly as possible, and use media types and queries to unblock rendering.
These resources delay the First Paint - the time at which your browser renders something (i.e., background colours, borders, text or images) for the first time. Eliminating render-blocking resources can help your page load significantly faster and improve the website experience for your visitors.
Simply test a URL in either tool, navigate to “Eliminate render-blocking resources” under “Diagnostics,” and expand the content to see a list of first-party and third-party resources blocking the first paint of your page.
A parser-blocking resource blocks rendering as well, but in addition it prevents the browser from continuing to parse the HTML and processing other resources in the page.
css or mobile. css and link this file in the head of your HTML. Then use the defer attribute in the @media rule to tell the browser to load the responsive.css file when the page is loaded.
Inline JavaScript also blocks rendering until execution is complete. You can stop <script> tags from blocking rendering by placing them directly before the closing </body> tag.
CSS has a similar story — you need to check that your property names are spelled correctly, property values are spelled correctly and are valid for the properties they are used on, you are not missing any curly braces, and so on. The W3C has a CSS Validator available too, for this purpose.
How big should a CSS file be? There's no single number, but I would say that less than 20 kilobytes is very good and I wouldn't worry until a CSS file reaches 50 to 100 kilobytes.
Inline CSS can impact performance negatively as each HTML file must carry its styling information. This redundancy increases page load times, especially for larger websites.
Add compiler:{styledComponents: true} to your next. config. js, install styled-components (yarn add styled-components and when it's done installing, run yarn add -D @types/styled-components ), update the file _document. js to support server side rendering for styled components and you are good to go!
Web fonts don't block rendering of the page, but they can block rendering of the text itself. How text renders before fonts are loaded is specified by the font-display CSS property.
To make text fixed, you can use the CSS position property with a value of fixed . This will position the element relative to the viewport, meaning that it will not move even if the user scrolls down the page.
To optimize Elementor-generated CSS, and avoid render-blocking issues, you can use plugins like WP Rocket or Autoptimize to minify and combine CSS files. You can inline critical CSS, use asynchronous or deferred loading of CSS files, and remove unused CSS and JavaScript.
Address: 743 Stoltenberg Center, Genovevaville, NJ 59925-3119
Phone: +2202978377583
Job: Administration Engineer
Hobby: Surfing, Sailing, Listening to music, Web surfing, Kitesurfing, Geocaching, Backpacking
Introduction: My name is Rubie Ullrich, I am a enthusiastic, perfect, tender, vivacious, talented, famous, delightful person who loves writing and wants to share my knowledge and understanding with you.
We notice you're using an ad blocker
Without advertising income, we can't keep making this site awesome for you.
