Performance Icon

Performance

10 Stories
All Topics

CSS-Tricks Icon CSS-Tricks

Hey hey `font-display`

Chris Coyier: 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. … 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. Font loading strategy is pretty important. It's one of the reasons I searched far and wide to improve the performance of fonts on Brightly Colored. Fortunately, if you're using @font-face, using font-display is as easy as using one line of CSS, and you'll see the performance improvements immediately. Unfortunately, as Chris points out, there's no performant way to get around either FOUT or FOIT.

read more...

link Icon calendar.perfplanet.com

The Evolution of <img>: Gif without the GIF

Colin Bendell tells the technical history of GIFs and how we've slowly moved to this place where we can have Gif-like experiences without the terrible performance and quality costs. Unfortunately, we're not quite there yet: Safari Technology Preview is paving the way ... Here’s hoping the other browsers will soon follow. Google? Microsoft? Mozilla? Samsung? Your move!

read more...

Slack Engineering Icon Slack Engineering

Keep webpack Fast: A Field Guide for Better Build Performance

Slack chose webpack as their build tool, but it wasn't fast enough. Our build took minutes, not seconds: a far cry from the sub-second concatenation we were used to. Slack’s web teams deploy up to 100 times on any given work day, so we felt this increase acutely. Let's just say they went to work and came up with several techniques to speed up the build process. webpack is a fantastic, versatile, tool that does not need to cost the earth. These techniques have helped us reduce our median build time from 170 to 17 seconds and, while they have done much to improve the deployment experience for our engineers, they are by no means a complete work.

read more...
0:00 / 0:00