Fumiki Takahashi

TAROSKY INC.

<p>This plugin optimize page rendering of WordPress theme.</p>
<h4>Features</h4>
<ul>
<li>Add <code>loading="lazy"</code> or <code>loading="eager"</code> with your images.</li>
<li>Add <code>defer</code> or <code>async</code> attributes to your scripts.</li>
<li>Add <code>rel="preload"</code> to your stylesheets. Polyfill for old browsers is also available.</li>
<li>Remove default script helper of embeds(twitter, instagram) and load one after user interaction.</li>
</ul>
<p>All of above are selectable and you can customize with white list.</p>
<h4>Case 1. Image Loading</h4>
<p>If you wish header logo(<code>.custom-logo</code>) and main post thumbnail(<code>.post-feature-image</code>) should be load faster because they are in first view.</p>
<p>Just put <code>custom-logo,post-feature-image</code> at <strong>High Priority</strong> section in your setting screen.</p>
<h4>Case 2. Stop Defer</h4>
<p>Defering JavaScripts sometimes breaks your site.<br />
For example, if a script requires just in time operation with inline script tag, it will fail.</p>
<pre><script id="some-script-js" src="somescript.js" defer></script>
<script>
new SomeScript();
</script></pre>
<p>To avoid this, Add <code>some-script</code> handle name in <strong>Deny Defer</strong> section in your setting screen.</p>
<p>Generally speaking, many JavaScripts loaded in your WordPress are issued by WordPress Core, plugins, themes, your custom code, and so on.</p>
<p>To optimize JavaScript loading, try and error approaches works fine.</p>
<h4>Case 3. Critical Stylesheet</h4>
<pre><code>rel="preload" attributes makes your stylesheets loaded asynchrounsely, but FOUC(Flush of Unstyled Content) happens.
</code></pre>
<p>To avoid this, include critical CSS to <strong>Deny List</strong> in your setting screen. Critical CSS are generally your theme’s main stylesheet.</p>


Render Faster

Render the page faster. Enhance your site's load page for Core Web Vital.

Render Faster vs PhastPress