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