Utsav Ladani

<p>MachStyle helps your pages feel faster by loading critical styles first and delaying selected non-critical CSS.</p>
<p>You decide where this happens using simple rules. For many sites, this can help improve Core Web Vitals.</p>
<p>MachStyle is designed for practical, low-risk testing:</p>
<ul>
<li>Create rules for specific page groups, post types, or URL patterns.</li>
<li>Test changes safely in Test Flight before they affect real visitors.</li>
<li>Compare results in performance tools like PageSpeed Insights before going live.</li>
<li>Copy tested rules to live settings when ready.</li>
</ul>
<p>Small, measured changes work best. Test, compare, then roll out.</p>
<h3>How to Use</h3>
<ol>
<li>Open MachStyle and go to <code>Test Flight</code>.</li>
<li>Add one rule for one page group, such as the home page, a post type, or a URL pattern.</li>
<li>Add the style handles you want to defer. Use the Audit Panel to find style handles.</li>
<li>Check the page on desktop and mobile.</li>
<li>Run PageSpeed on the Test Flight URL and compare the result with your normal live URL.</li>
<li>If the page looks correct and the metrics improve, copy the rules to <code>Live Settings</code>.</li>
<li>Enable live optimization.</li>
</ol>
<h3>How to Use Audit Panel</h3>
<p>Audit Panel is a tool that helps you find style handles to defer.</p>
<ol>
<li>Open the frontend of your website and open Audit Panel from MachStyle menu in admin bar.</li>
<li>Click on any stylesheet to temporarily remove its styling. This shows you what the page looks like for a fraction of second during load.</li>
<li>Look at the top of your site. If it still looks readable and organized without that style, it’s a great candidate to stay deferred.</li>
<li>If the page looks messy or the header breaks, that style is important for the first impression. Click it again to turn it back on.</li>
<li>Once finished, click <strong>Copy Handles</strong> button to get your optimized list and add it to your MachStyle settings.</li>
</ol>
<h3>What to Defer First</h3>
<p>Start with styles that are useful but not needed immediately:</p>
<ul>
<li>Footer styles</li>
<li>Slider and carousel styles</li>
<li>Form styles on pages that do not show forms right away</li>
<li>Social share or widget styles below the fold</li>
<li>Extra builder or block styles not needed at first paint</li>
</ul>
<h3>What Not to Defer</h3>
<p>Avoid deferring styles that control first-view layout:</p>
<ul>
<li>Main theme layout styles</li>
<li>Header, menu, and hero section styles</li>
<li>Checkout and cart critical styles</li>
<li>Any style that causes visible layout shifts when delayed</li>
</ul>
<h3>Development & Contribution</h3>
<p>MachStyle is open source and welcomes contributions!</p>
<ul>
<li><strong>GitHub Repository</strong>: https://github.com/Utsav-Ladani/MachStyle</li>
<li><strong>Report Issues</strong>: https://github.com/Utsav-Ladani/MachStyle/issues</li>
<li><strong>Feature Requests</strong>: https://github.com/Utsav-Ladani/MachStyle/issues</li>
<li><strong>Contribute Code</strong>: Fork the repository and submit pull requests</li>
</ul>


MachStyle

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

Sajjad Hossain Sagor

<p>Compile Sass (.scss) files to css files on runtime. No need to compile it on local & upload it online… Now you can compile your direct scss source code into css code easily with a minute…</p>
<h4>Features:</h4>
<ul>
<li>Toggle Compilation On or Off Anytime</li>
<li>Add Sass Stylesheets by Filename</li>
<li>Choose from 5 Compilation Modes</li>
<li>Enable Caching for Faster Processing</li>
</ul>


Sass To CSS Compiler

Compile Your Theme-Plugin Sass (.scss) files to .css on the fly.

MachStyle vs Sass To CSS Compiler