Cascading Style Sheets bring life to a website. CSS controls the appearance of HTML elements such as colors, fonts, layouts, and animations. But CSS can quickly become a tangled web of bloated and outdated styles and redundant rules. The result is often slower load times and complicated troubleshooting.
Optimizing CSS files avoids those snafus.
Verifying CSS
Start by verifying the state of your CSS files.
- Browser tools. Open a website in Chrome or Firefox, right-click anywhere on the page, and select “Inspect.” Under the “Network” tab, filter by “CSS” to see each stylesheet’s size and load time.
PageSpeed Insights identifies speed optimizations such as this example for unused CSS.
Other tools can simplify the cleanup process.
- UnusedCSS is a user-friendly tool that scans your website, identifies unused CSS, and generates a streamlined version. Enter your URL and let the tool do the heavy lifting.
- CleanCSS offers an online CSS minifier and optimizer. It strips out unnecessary spaces and comments and removes redundant code, resulting in a leaner stylesheet.
- CSS Lint doesn’t directly remove unused CSS; it highlights inefficiencies and potential errors. Use it to pinpoint areas where your CSS can be streamlined and improved.
For example, these unused styles for an old banner should be removed:
.banner { background: #f4f4f4; padding: 20px; }
.banner__title { font-size: 2em; }
The active styles remain:
.header { background: #fff; padding: 10px; }
.header__logo { height: 50px; }
Optimizing CSS
Once you’ve removed the unused code, the next step is optimizing what remains. Here are my go-to tactics.
- Minification removes unnecessary characters (e.g., spaces and comments) from your CSS, reducing file size without affecting functionality. Minifier.org is my top tool.
- Combine multiple CSS files into one. Fewer HTTP requests mean faster load times. However, if critical CSS is needed immediately and non-critical CSS can be loaded later, consider splitting them strategically.
- Adopt a naming convention. Structured naming such as BEM helps avoid conflicts and redundancy and makes your CSS more readable and easier to optimize.
Leaner CSS
Comment strategically. Comments are useful for clarity, but excessive or outdated comments can clutter your files. Keep them relevant and update them as your code evolves.
/* This is a comment */
Responsive design. CSS media queries adapt the content to the users’ device resolution (size). However, instead of writing multiple similar queries, consider a mobile-first approach where you define the base styles and then add modifications for larger screens.
/* Base styles for mobile devices */
.container {
padding: 10px;
font-size: 16px;
background-color: #f0f0f0;
}
/* Styles for tablets and larger screens */
@media (min-width: 768px) {
.container {
padding: 20px;
font-size: 18px;
background-color: #e0e0e0;
}
}
/* Styles for desktops */
@media (min-width: 769px) {
.container {
padding: 30px;
font-size: 20px;
background-color: #d0d0d0;
}
}
Accessing CSS Files
Merchants can usually access CSS files in ecommerce platforms via the control panel or an FTP client.
Shopify. Modify CSS by logging into the admin panel, navigating to Online Store > Themes, and clicking Actions > Edit code on your active theme. In the code editor, find the CSS files in the “Assets” folder (e.g., component-discount.css, theme.css). Edit the files and save your changes to see them applied on your storefront.
PrestaShop themes typically store CSS files in the theme directory (often under /themes/your_theme/assets/css). Access and modify these files using an FTP client or via the built-in theme editor in the PrestaShop back office (if accessible). After making changes, remember to clear the cache so updates are reflected on the live site.
Magento 2. CSS is part of your theme’s structure and is usually found in the directory app/design/frontend/[Vendor]/[theme]/web/css (or as .less files under web/css/source) in modules. It’s best to create a child theme or override the default theme’s CSS files rather than editing core files directly. Once you’ve made your changes, run the static content deployment command (bin/magento setup:static-content:deploy) and flush the cache to apply the updates. Note that the static content deploy will temporarily put the website in maintenance mode.
NetSuite SuiteCommerce typically stores CSS files in the theme’s assets folder. Modify these through your local development environment or the NetSuite File Cabinet. If you’re using Sass or another preprocessor, make changes to the source files, compile them, and deploy the updated assets to your site.
WooCommerce’s CSS files typically reside in the active WordPress theme. Edit your theme’s style.css file directly or, preferably, create a child theme to override the default styles without affecting future updates. Alternatively, add custom CSS via the WordPress Customizer under Appearance > Customize > Additional CSS.
For other platforms, head to the documentation and search for “css asset management” or something similar. In my experience, every platform provides guidance on implementing or changing CSS.