Five CSS Performance Tools to Speed up Your Website

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

In this article, I'm going to list five CSS performance tools that will help you put your website on a CSS diet for a fast loading experience.

Why Is Page Speed so Important?

A fast loading website is crucial to the success of your website. There are research findings to support the view that users get quickly impatient if they have to wait even a few seconds for web content to appear.

When this happens on your website, their experience degrades noticeably with the consequence that your website gets fewer visits and fewer conversions, which ends up hurting your business.

There are a number of factors that affect web performance, e.g., the number of HTTP requests, bloated code, heavy media files, etc. How you write CSS and how your stylesheet gets loaded in the browser can have significant impact on a few of those precious milliseconds which make the difference between visitors staying on your website and clicking their way toward your competition.

Let's see how the tools below can help to fix your CSS for top-notch web performance.

TestMyCSS

TestMyCSS is a free online optimization tool with tons of features. It checks for redundancy, validation errors, unused CSS, and best practices.

You can start to use it right away, just type the url to a website's CSS file, and TestMyCSS spits out all the items that need improvement. Not only that, you can also find helpful hints on

• How to simplify complex selectors
• Duplicated CSS properties and selectors you need to get rid of
• The number of !important declarations present in the code
• Unecessary class specificity
• Unecessary IE fixes
• Prefixed CSS properties which don't need vendor prefixes any more
• Class or ID rules qualified with tag names, e.g., a.primary-link
• Inappropriate use of universal selectors.

Stylelint

Stylelint is an ambitious CSS linter that works with PostCSS, an open source tool to write state of the art CSS. A linter is a program that goes through your code and catches any potential errors.

Stylelint can

• Flag errors like typos, invalid hex colors, duplicate selectors, etc.
• Enforce best practices
• Enforce coding style conventions like consistent spacing in each CSS rule, etc.
• Provide support for new cutting edge CSS syntax
• Automatically fix some minor warnings using stylefmt, a tool to format CSS rules ...

... and more.

Continue reading %Five CSS Performance Tools to Speed up Your Website%

by Maria Antonietta Perna via SitePoint