The post Hey hey `font-display` appeared first on CSS-Tricks.
Recently, the New Relic Core UI team moved to React v16.0. In support of this move, we’ve had to upgrade a handful of shared UI libraries owned by teams across the company. As most of us know, upgrading cross-company dependencies can be quite the challenge, and it takes a lot of time.
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 …
The post Chrome DevTools “Local Overrides” appeared first on CSS-Tricks.
This article was featured in our first ever DZone Guide to Game Development. Get your free copy for more insightful articles, industry statistics, and more! A game’s user experience starts before a player levers a thumbstick or taps their screen. Game developers have gotten the offline, in-game experience down to a science, but increasing dependence on the internet for exceptional gaming experiences has created new opportunities for developers to win… or for “Game Over.”
There’s a lot of good news in the world of web fonts!
The forthcoming version of Microsoft Edge will finally implement unicode-range, the last modern browser to do so.
Preload and font-display are landing in Safari and Firefox.
Variable fonts are shipping everywhere.
Using custom fonts in a performant way is becoming far easier. Let’s take a peek at some things we can do when using custom fonts to make sure we’re being as performant as we can be.…
Three Techniques for Performant Custom Font Usage is a post from CSS-Tricks
My latest realization is that delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts. No matter how solid I think my prototype is, it doesn’t absolve me from paying attention to what happens during implementation, specifically when it comes to the addition of these third-party scripts.
I recently had a conversation with a friend working on quite a high profile e-commerce site. They were hired to develop …
Third-Party Scripts is a post from CSS-Tricks
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 …
Monitoring unused CSS by unleashing the raw power of the DevTools Protocol is a post from CSS-Tricks
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 …
Front-End Performance Checklist is a post from CSS-Tricks
That said, it isn’t as easy to get started with the API as it is to actually use it. Although I’ve seen extensions of it covered here and there in other posts, the big picture that ties everything together is hard to find.
One look at …
Breaking Down the Performance API is a post from CSS-Tricks