📝 CSS-Tricks 202: How to Improve Site Performance & Tricks for Using CSS variables

View this newsletter on the web.

Looking at inline CSS and performance

In this post, Timothy Vernon has a lot of smart things to say about taking your styles out of CSS file and moving them into the HTML for performance reasons:

CSS is treated as a render-blocking resource — that is, if you include any form <link href="style.css" rel="stylesheet"> of in the document’s <head>, the browser will trigger an additional request to the server to retrieve that stylesheet before even beginning to render your page for the user.

While our internet providers, infrastructure, and servers are all getting faster every year, there is no such thing as a free lunch. Every network request to the server has a time cost, and the requests required to complete before the browser begins rendering the page are the most expensive.

There are some trade-offs with this, as Timothy mentions. For example: now those styles are in your HTML, the download is certainly larger than before. It follows then makes to only serve the CSS that’s being used on that page and that’s commonly referred to as Critical CSS. Timothy mentions a few tools to help with that, such as Addy Osmani’s Critical project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s