Getting Your head Straight: A New CSS Performance Diagnostics Snippet
source link: https://www.smashingmagazine.com/2021/09/css-head-tag/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Getting Your head
Straight: A New CSS Performance Diagnostics Snippet
There are plenty of ways to detect performance bottlenecks and audit CSS. We can look into common performance bottlenecks and the complexity of stylesheets, the way we load assets, and the order in which it happens.
One helpful way to spot common problems easily is to use some sort of a performance diagnostics CSS — a dedicated stylesheet that highlights potential problems and errors.
Today, during his talk at Webexpo Prague 2021, Harry Roberts, a web performance consultant and front-end engineer, introduced a little helper that helps him spot common performance bottlenecks easily. And that is mostly related to the order of how assets are loaded in the <head>
.
As Harry says,
“I spend a lot of my time looking through clients’
<head>
tags to ensure everything in there is in the best possible shape it can be. There are a lot of complex and often conflicting rules that constitute ‘good’<head>
tags, and cross-referencing everything can soon grow unwieldy, so to make my life easier, I developed ct.css — a quick and dirty way of seeing inside of your<head>
.”
ct.css
is a little diagnostic snippet, named after Computed Tomography (CT) scans, that exposes potential performance issues in your page’s <head>
tags, and will disappear as soon as you’ve fixed them.
The tool in action. In his session, Get Your Head Straight, Harry explains what exactly makes good or bad <head>
tags. (Large preview)
Harry has put all the insights he’s learned from his performance work to a perfect <head>
order, and the tool exposes some of the issues that often result from a suboptimal arrangement of <head>
tags.
csswizardry.com/ct is a simple bookmarket that you can drag into your browser’s toolbar. Each color and border style represent critical and intermediate warnings as well as a reassuring hint that everything is done well. (Large preview)
With the bookmarklet in the browser’s toolbar, browse to a website of your choice, click or activate the bookmarklet, and the tool highlights useful pointers for you to double-check when working around performance bottlenecks. Just a little helper to make your work a bit easier, and find all those hidden issues faster.
If you just want to play with the snippet, you can get it at csswizardry.com/ct. Happy debugging, everyone!
Meet Smashing Online Workshops on front-end & UX, with practical takeaways, live sessions, video recordings and a friendly Q&A. On design systems, CSS/JS and UX. With Carie Fisher, Stefan Baumgartner and so many others.
Jump to online workshops ↬Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK