Simply put, faster websites make people happier than slower ones. One way to get your site loading faster and keeping your audience happy is to reduce file size. Smaller CSS files translate to a better user experience - extra bytes add up fast.

Foundation comes with many options, add-ons and settings. A full install of Foundation 6.2.3 CSS from Sass, with all the trimmings, weighs 110 KB. That’s 1/3 of the weight of the Foundation 5’s CSS, but there is still room for improvement. Luckily, few projects need everything that Foundation offers. In this lesson, you’ll learn how to remove unused CSS and optimize your website’s performance.

Disable Components You Don’t Need in app.scss

Accordion, breadcrumbs, forms, clearing, pagination, switches — Foundation 6 offers 42 unique components that your site may, or may not, need. Don't need Tab, Table or Accordion? Then don't add them to your CSS.

Foundation 6’s Sass comes with a file called app.scss. You can use that to control which components load into your production CSS file.

Foundation outputs many classes for its various components. These help you get up and running quickly to prototype a site or app. However, when you move to production, you may want to build your grid semantically, replace our pre-built classes with your own, or remove components entirely.

Each component has an export mixin which prints out the CSS for that component. Removing or commenting out the component @include in app.scss will prevent the component’s Sass from being compiled into CSS.

Above: We turned off several components. In this example, we only want Foundation’s grid, navigation, buttons, and forms. In just a few seconds we reduced the file size: the CSS file drops from 110 KB to 87 KB. If we only included the Grid it drops to 29 KB!

Minify Your CSS For Production

We need spacing and returns in our CSS when we’re building to debug and maintain it. Computers, however, do not. Minifying code removes extra spaces, all hard returns and comments — ideal for production files.

If you’re using the ZURB Stack, you can access all the included production features to optimize your project.

In the command line, run:

foundation build

This starts the production process. Now a lot of magical things happen here in the background:

• Sass gets compiled into CSS
• CSS is minified (spaces and returns removed)
• Images are compressed
• JavaScript is compressed

The resulting file size is just 62 KB! From our starting place of 110 KB, that’s a 56% reduction!

From just a minute of tweaking @include’s we've seen savings of 50-90%. While page weight is not the only culprit of slow loading sites, it’s a huge contributor and it’s something you can control with Foundation’s Sass. This is one technique we teach in our Foundation courses, so if you’re looking for a deep dive, you can start with our Intro to Foundation 6 class. Anything we can do to reduce file size makes for better, faster-loading products.

---