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.

Peter Wilson

<p>Many browsers will not render your webpage until the print.css is loaded. Delay Print CSS prevents this from happening. Once your page has fully rendered (including JavaScript, images, etc) your print stylesheets will be loaded.</p>
<p>Using the methods described in a <a href="http://bigredtin.com/behind-the-websites/delay-loading-of-print-css/" rel="nofollow ugc">recent blog post</a> this plugin uses JavaScript, with a non JavaScript fallback, to load your stylesheets last.</p>
<p>If your WordPress site uses jQuery then it is used to load the stylesheets, otherwise the plugin outputs its own JavaScript.</p>


Delay Print CSS

Prevent your print stylesheets from delaying rendering of your website

MachStyle vs Delay Print CSS