Use Gulp to automate your critical path CSS

Take a brief look at the process behind generating critical path CSS. Although it can seem daunting when first learning about it, the tools are surprisingly simple. Read on for a brief intro plus a code example that you can use today.

Use Gulp and UnCSS to slim down your CSS framework

CSS frameworks are a nice way to get started with a project. You can tell by the name of many popular frameworks: Bootstrap, Foundation, and Skeleton just to name a few. All of these names evoke a starting point — problem is, unless you take time to eliminate the pieces you did not use, you’ll ship bloated code to your users. Read on to learn how to eliminate the unused CSS from your frameworks when it is time to go live.

Fix scrolling performance with CSS will-change property

I recently saw Paul Lewis’ screencast demonstrating how trivial it can be to fix a particular kind of performance issue caused by scrolling. I knew the problem looked familiar and I realized it was happening right in my front yard, on the Four Kitchens homepage. Read on to see how easy it was to diagnose and fix.

Webfonts and performance

I recently had a significant webfont problem on some client work and had to really sink my teeth into the problem to resolve it properly. I found some great resources that helped me fix it in no time. Hopefully they’re as useful to you as they were to me.

Frontend performance training kit

Two weeks ago web chef emeritus Ian Carrico and myself had the pleasure of of both training and speaking about frontend performance at DrupalCon LA. I’d like to describe our free, open source training materials a bit to entice you to try them, and perhaps start building awareness of performance within your team.

Throttled Thursdays

I really enjoy the process of making websites faster. It’s my job, so I bring it up whenever I can. But it’s not everyone’s job. It can be a tough problem to keep at the top of your mind when fast internet is always available. I want to encourage everyone to slow their connections down every thursday and experience the web as a mobile user. Read on to find tools to help you do the same!

Automating critical CSS without blocking rendering

This week let’s talk about the critical rendering path and how to avoid render-blocking CSS. This technique is widely hailed an essential method to reduce your time to render, but sometimes using automated tools to generate this CSS can cause the exact problem you’re trying to solve. Don’t worry though, it’s easy to prevent.

How to set a performance budget

Tim Kadlec recently teamed up with Akamai to create a short, informative video about defining and maintaining a performance budget. It's a great introduction to the concept, clearly explaining both the technical and organizational challenges of including performance within the development process. Watch video.

A practical guide for 1000ms renders

Howdy perfers! This week we’ve got a good one for you. Web chef Ian Carrico has written an extensive how-to documenting his journey to the mythical 1000ms render. The post is featured on his own blog where he worked the magic, and it’s accompanied by both the code that powers his site along with a full Ansible script allowing you to set up a similarly-configured server on your own. Read on to find out more.