Select Page

Category: Performance

Hey hey `font-display`

Y’all know about font-display? It’s pretty great. It’s a CSS property that you can use within @font-face blocks to control how, visually, that font loads. Font loading is really pretty damn complicated. Here’s a guide from Zach Leatherman to prove it, which includes over 10 font loading strategies, including strategies that involve critical inline CSS of subsets of fonts combined with loading the rest of the fonts later through JavaScript. It ain’t no walk in the park. Using font-display is kinda like a walk in the park though. It’s just a single line of CSS. It doesn’t solve everything that Zach’s more exotic demos do, but it can go a long way with that one line. It’s notable to bring up right now, as support has improved a lot lately. It’s now in Firefox 58+, Chrome 60+, Safari 11.1+, iOS 11.3+, and Chrome on Android 64+. Pretty good. What do you get from it? The ability to control FOUT and FOIT as is right for your project, two things that both kinda suck in regards to font loading. We’ve got a couple posts on it around here: font-display for the Masses by Jeremy Wagner If you really dislike FOUT, font-display: optional might be your jam by me Reminder: FOUT = Flash of Unstyled Text FOIT = Flash of Invisible Text Neither is great. In a perfect world, our custom...

Read More

Chrome DevTools “Local Overrides”

There’s been two really interesting videos released recently that use the “Local Overrides” feature of Chrome DevTools in order to play with web performance without even touching the original source code. Umar Hansa: Improving the performance of Soylent.com with local overrides and font-display Harry Roberts: Using Chrome’s ‘Local Overrides’ to Test Performance Hypotheses The big idea is that you can literally edit CSS and reload the page and your changes stick. Meaning you can use the other performance testing tools inside DevTools to see if your changes had the effect you wanted them to have. Great for showing a client a change without them having to set up a whole dev environment for you. Direct Link to Article — Permalink The post Chrome DevTools “Local Overrides” appeared first on CSS-Tricks....

Read More

Monitoring unused CSS by unleashing the raw power of the DevTools Protocol

From Johnny’s dev blog: The challenge: Calculate the real percentage of unused CSS Our goal is to create a script that will measure the percentage of unused CSS of this page. Notice that the user can interact with the page and navigate using the different tabs. DevTools can be used to measure the amount of unused CSS in the page using the Coverage tab. Notice that the percentage of unused CSS after the page loads is ~55%, but after clicking on each of the tabs, more CSS rules are applied and the percentage drops down to just ~15%. That’s why I’m so skeptical of anything that attempts to measure “unused CSS.” This is an incredibly simple demo (all it does is click some tabs) and the amount of unused CSS changes dramatically. If you are looking for accurate data on how much unused CSS is in your codebase, in an automated fashion, you’ll need to visit every single URL on your site and trigger every possible event on every element and continue doing that until things stop changing. Then do that for every possible state a user could be in—in every possible browser. Here’s another incredibly exotic way I’ve heard of it being done: Wait a random amount of time after the page loads Loop through all the selectors in the CSSOM Put a querySelector on them and see...

Read More

Front-End Performance Checklist

Vitaly Friedman swings wide with a massive list of performance considerations. It’s a well-considered mix of old tactics (cutting the mustard, progressive enhancement, etc.) and newer considerations (tree shaking, prefetching, etc.). I like the inclusion of a quick wins section since so much can be done for little effort; it’s important to do those things before getting buried in more difficult performance tasks. Speaking of considering performance, Philip Walton recently dug into what interactive actually means, in a world where we throw around acronyms like TTI: But what exactly does the term “interactivity” mean? I think most people reading this article probably know what the word “interactivity” means in general. The problem is, in recent years the word has been given a technical meaning (e.g. in the metric “Time to Interactive” or TTI), and unfortunately the specifics of that meaning are rarely explained. One reason is that the page depends on JavaScript and that JavaScript hasn’t downloaded, parsed, and run yet. That reason is well-trod, but there is another one: the “main thread” might be busy doing other stuff. That is a particularly insidious enemy of performance, so definitely read Philip’s article to understand more about that. Also, if you’re into front-end checklists, check out David Dias’ Front-End Checklist. Direct Link to Article — Permalink Front-End Performance Checklist is a post from CSS-Tricks...

Read More

Quick Wins For Improving Performance And Security Of Your Website

When it comes to building and maintaining a website, one has to take a ton of things into consideration. However, in an era when people want to see results fast, while at the same time knowing that their information online is secure, all webmasters should strive for a couple of things: Improving the performance of their website, Increasing their website’s security. Both of these goals are vital in order to run a successful website....

Read More
  • 1
  • 2
000webhost logo