In the modern web, performance stands out as a crucial aspect, increasingly capturing attention due to its profound impact.
In this article, we will delve into a contemporary method for deferring styles, which can significantly enhance your website’s loading speed, Core Web Vitals and user’s experience.
Render blocking resources"undefined" anchor link
Render blocking resources are the elements within a webpage that prevent the browser from rendering the page until these resources are loaded and processed.
When we manage to reduce their size, we are going to especially impact on Largest Contentful Paint (LCP) and First Contentful Paint (FCP) metrics.
There are two types of resources that are render-blocking:
-
scripttag: when is in the document head and doesn’t presentdeferorasyncattributes. -
<link rel="stylesheet">tag when:- Doesn’t have the
disabledattribute. - The
mediaattribute matches the user’s device. When this attribute isn’t present or is set toall, it will be render-blocking.
- Doesn’t have the
Identify critical CSS"undefined" anchor link
Identify the critical and non-critical CSS.
But… what is this?
-
Critical CSS is the styles classes that the browser needs to render the visible content.
-
Non-critical CSS is the styles classes that are not used in the first web print.
In Google Chrome it is really easy:
- Open Developer tools (
F12). - Open Run command menu. The fastest way is to use a shortcut:
Ctrl + Shift + Pon Windows orCmd + Shift + Pon Mac. - Type
coverageand press into theShow coverageoption. - On the new tab opened in your devtools, click the record button.
- Analyze the results: red represents unused CSS and green represents used.
Summarizing, what CSS code can we defer?
- CSS from external or internal libraries that add styles to our web on user interaction. For example: CSS needed for a JS method that creates a DOM component and append to the body when the user click on a button.
Code implementation"undefined" anchor link
In the <head> tag, add the following HTML code:
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="deferred-styles.css"/><noscript> <link rel="stylesheet" href="deferred-styles.css" /></noscript>How does it works?
-
rel="preload": By not using thestylesheetvalue, this download isn’t render-blocking. Utilizing thepreloadvalue instructs the browser to prioritize this resource. -
as="style": When employingrel="preload", the required attributeasenables the browser to manage resource priority, set appropriate request headers, and adhere to CSP. -
onload: When applied to alinkelement, this attribute triggers a function upon resource download. This consists of two parts:this.onload=null: Nullifying theonloadvalue prevents certain browsers from repeatedly calling this handler during rel attribute updates.this.rel='stylesheet': Changes therelvalue frompreloadtostylesheet, allowing the downloaded CSS resource to be processed as a stylesheet.
-
<noscript>: Fallback for browsers with disabled scripting. In this scenario, the CSS is loaded conventionally, so it will be render-blocking.
Hope these insights into optimizing resource loading in HTML prove helpful.
Leveraging seldom used attributes like rel="preload" as="style" contributes to delivering swifter and more efficient web experiences. Fine-tune your resources, enhance speed, and take your website to new heights!
Catch you in the next post with more tips for elevating user experiences!
Happy coding! 🤖
