shawfactor

<p>Javascript has a HTML based method for deferring and asynchronously loading files, namely script Defer and script Async. Unfortunately these HTML solutions do not work for CSS files.</p>
<p>But do not worry, this plugin allows you to lazy load yous css files. Thus speeding up your initial view experience for visitors and search engines.</p>


LH CSS Lazy Load

Javascript has a HTML based method for deferring and asynchronously loading files, namely script Defer and script Async. Unfortunately these HTML solu …

ensemblebd

<h3>Deprecated</h3>
<p>This plugin is deprecated and will be removed in the future.<br />
It was coded back in 2019 when WpRocket did not have asynchronous support for CSS.<br />
Although this plugin operates at a lower level (main php buffer), which helps apply loadsCSS to ALL styles regardless of whether they conform to wp_enqueue or not, <strong>we recommend</strong> instead using WpRocket’s system: <a href="https://docs.wp-rocket.me/article/1266-load-css-asynchronously" rel="nofollow ugc">Load CSS Asynchronously</a>.</p>
<h3>Description</h3>
<p>Simple high performance plugin to enhance WP Rocket’s css output to use the loadCSS preload polyfill.<br />
This will ensure <strong>any css</strong> being loaded via the page output <strong>is deferred</strong>, and utilizing a preload [rel] attribute.<br />
Note: This will not affect admin pages. It’s designed only to process front-end pages.</p>
<p>It is recommended to enable the WP Rocket setting for “Optimize CSS”, which will provide your pages with inline Critical-CSS.<br />
That way an unstyled flash is not seen on page load (if properly configured of course).</p>
<p><strong>This plugin will boost your <a href="https://developers.google.com/web/tools/lighthouse/" rel="nofollow ugc">Lighthouse</a> and <a href="https://developers.google.com/speed/pagespeed/insights/" rel="nofollow ugc">PageSpeed Insight</a> scores.</strong></p>
<h3>Plugin Mission</h3>
<p>We hope that <a href="https://wp-rocket.me/" rel="nofollow ugc">WP Rocket</a> will implement this as a <strong>feature</strong> of their plugin.<br />
The existing <a href="https://docs.wp-rocket.me/article/1266-load-css-asynchronously" rel="nofollow ugc">Load CSS Asynchronously</a> only works for supported wp_enqueue styles, which not all plugins/themes properly utilize.<br />
For normal users, we recommend using WP Rocket’s system instead of this plugin.</p>
<h3>Requirements:</h3>
<ul>
<li>If you intend for logged-in users to see the effect, you must enable WP-Rocket’s setting called “caching for Logged-In Users”</li>
<li>Alternatively, you can run the plugin without WP-Rocket, despite it’s intended purpose.    (>^.^)></li>
</ul>
<h3>Features:</h3>
<ul>
<li><a href="https://github.com/filamentgroup/loadCSS/tree/v2.0.1" rel="nofollow ugc">FilamentGroup’s LoadCSS(v2.0.1)</a> inline injector<br />
(optional – see settings page next to WP Rocket), <em>triggered via wp_head</em>  </li>
<li>High performance Regular Expression approach to process WP Rocket’s (php’s) output buffer, to replace stylesheets with the appropriate loadCSS syntax  </li>
<li>Option to enable the buffer processor when you don’t have WP Rocket installed.<br />
** This will respect AMP pages, and Yoast Sitemap output (by not executing). No other considerations have been implemented.  </li>
</ul>
<p>No fluff. Just a robust loadCSS implementation.</p>
<p>You can see how it works, & measure the performance, with this(via repl.it): <a href="https://repl.it/@ensemblebd/WPRocketLoadCSSMeasurement" rel="nofollow ugc">Run the Plugin’s code</a><br />
Just paste your own page’s url or html into the appropriate variable @ the top.</p>
<p>And you can test this plugin’s regex as well: <a href="https://regex101.com/r/xsugT7/1/" rel="nofollow ugc">WordPress.com html – links filtered by regex</a></p>
<p>Github link is here: <a href="https://github.com/ensemblebd/wp-rocket-loadcss" rel="nofollow ugc">Click</a></p>
<h3>Last tested with:</h3>
<ul>
<li>WP Rocket 3.13.x</li>
<li>WordPress 6.2.x</li>
</ul>
<h3>Dependencies</h3>
<ul>
<li>WP Rocket  (optional via settings)  </li>
<li>file_get_contents() php function  (if included loadCSS lib is used via options — default = yes)</li>
</ul>


LH CSS Lazy Load vs WP Rocket | Simple LoadCSS Preloader