CSS Shake is a lightweight Magento 2 extension that helps improve page loading speed by reducing render-blocking CSS.
It automatically identifies the CSS used on each page, loads the required styles first, and defers everything else. This helps improve First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Google PageSpeed scores without manually optimizing your stylesheets.
CSS Shake works with Luma, Breeze, Hyvä, and other Magento 2 themes.
Key benefits:
- Automatic, real-time CSS optimization
- Faster page rendering and improved Core Web Vitals
- Compatible with all Magento 2 themes
- Inline and file-based CSS delivery
- Easy configuration and built-in debugging tools
- Free installation
- Activate up to 10 times
- All extensions $79
- Approved on Magento Marketplace
Reduce render-blocking CSS automatically
Magento themes often load large CSS files containing styles that aren't needed for the current page. CSS Shake automatically identifies the CSS used on each page, loads the required styles first, and defers the rest. This real-time optimization helps browsers render pages faster without manually editing your theme's stylesheets.
Improve PageSpeed and Core Web Vitals
By reducing render-blocking CSS, CSS Shake helps improve First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Google PageSpeed scores. In our tests, LCP improved from 2.52s to 2.20s on Breeze Blank, from 2.30s to 2.00s on Hyvä, and from 2.66s to 1.86s on Luma. Even already optimized Magento storefronts can benefit from more efficient CSS delivery. Actual improvements depend on your store's configuration and existing performance.
Works with Luma, Breeze, and Hyvä themes
CSS Shake works with Magento 2 themes, including Luma, Breeze, and Hyvä. It doesn't depend on a particular frontend technology, making it suitable for both traditional Magento stores and modern lightweight storefronts. The extension also includes compatibility improvements for SwissUp themes and modules, including SwissUp PageSpeed.
Choose the best CSS delivery mode for your store
CSS Shake supports two CSS delivery modes. Inline mode adds the required CSS directly to the page and is enabled by default. File mode serves optimized CSS from a separate file and may deliver better results on already fast stores with PageSpeed scores above 95. You can easily switch between modes in Magento Admin and test which works best for your storefront.
Keep important styles and exclude selected pages
CSS Shake gives you control over how CSS is optimized. You can specify selectors whose styles should always be preserved, even when they aren't used by the current page. You can also exclude individual pages from optimization when needed. All settings are available under Stores > Configuration > Swissup > CSS Shake, making it easy to fine-tune the extension for your store.
Monitor CSS optimization with built-in debugging tools
Enable the frontend debug panel to see how CSS Shake affects your pages. It displays the original and optimized CSS sizes, processing time, and memory usage. Debug mode also lets you switch between inline, file, and disabled modes using URL parameters, so you can compare results without changing the main configuration. This makes performance testing and troubleshooting much easier.
CSS Shake 1.2.1
7th of October 2026- Fixed a PHP error on the
robots.txtpage.
CSS Shake 1.2.0
5th of October 2026- Improved loading of deferred CSS when background AJAX requests are running and the visitor starts scrolling.
- Improved compatibility with SwissUp themes and extensions.
CSS Shake 1.1.0
2nd of October 2026- Added File mode for optimized CSS delivery. This mode can provide better performance results on already fast Magento stores.
- Added compatibility with the SwissUp PageSpeed extension.
CSS Shake 1.0.0
1st of October 2026- Initial release of CSS Shake for Magento 2.
- Automatic real-time CSS tree-shaking to reduce render-blocking styles.
- Loads required CSS first and defers remaining styles.
- Supports Magento 2 themes including Luma, Breeze, and Hyvä.