MachStyle

MachStyle helps your pages feel faster by loading critical styles first and delaying selected non-critical CSS.

You decide where this happens using simple rules. For many sites, this can help improve Core Web Vitals.

MachStyle is designed for practical, low-risk testing:

• Create rules for specific page groups, post types, or URL patterns.
• Test changes safely in Test Flight before they affect real visitors.
• Compare results in performance tools like PageSpeed Insights before going live.
• Copy tested rules to live settings when ready.

Small, measured changes work best. Test, compare, then roll out.

How to Use

1. Open MachStyle and go to Test Flight.
2. Add one rule for one page group, such as the home page, a post type, or a URL pattern.
3. Add the style handles you want to defer.
4. Check the page on desktop and mobile.
5. Run PageSpeed on the Test Flight URL and compare the result with your normal live URL.
6. If the page looks correct and the metrics improve, copy the rules to Live Settings.
7. Enable live optimization.

What to Defer First

Start with styles that are useful but not needed immediately:

• Footer styles
• Slider and carousel styles
• Form styles on pages that do not show forms right away
• Social share or widget styles below the fold
• Extra builder or block styles not needed at first paint

What Not to Defer

Avoid deferring styles that control first-view layout:

• Main theme layout styles
• Header, menu, and hero section styles
• Checkout and cart critical styles
• Any style that causes visible layout shifts when delayed

Development & Contribution

MachStyle is open source and welcomes contributions!

• GitHub Repository: https://github.com/Utsav-Ladani/MachStyle
• Report Issues: https://github.com/Utsav-Ladani/MachStyle/issues
• Feature Requests: https://github.com/Utsav-Ladani/MachStyle/issues
• Contribute Code: Fork the repository and submit pull requests