Gisèle Wendl

<p><strong>IndexReloaded</strong> is the ultimate performance plugin, specially designed to tackle slow loading times on your website on both desktop and mobile platforms. This plugin addresses Google PageSpeed Insights issues and significantly improves Core Web Vitals.</p>
<p>This plugin offers a range of features designed to optimize your website’s speed:</p>
<ul>
<li><strong>Resolve Render-Blocking Issues:</strong> Address render-blocking CSS and JavaScript issues to streamline loading.</li>
<li><strong>Enhancing Critical Rendering Path:</strong> Automatically generate critical CSS for above-the-fold content to improve the critical rendering path.</li>
<li><strong>Minification:</strong> Reduce load size by minifying JavaScript, and CSS files.</li>
<li><strong>Resource Bundling:</strong> Combine inline/external JavaScript and inline/external CSS to reduce server requests.</li>
<li><strong>Deferred Loading:</strong> Prioritize content rendering by deferring CSS and JavaScript loading.</li>
<li><strong>Cache Leveraging:</strong> Utilize server-side object-cache for improved performance.</li>
<li><strong>Host external CSS or JS locally:</strong> For improved performance hosting external CSS and JS on your server is a big help.</li>
</ul>
<p>This plugin is your go-to solution for reducing slow loading times, improving SEO and boosting website speed, making it an essential tool for performance optimization and SEO.</p>
<h3>Why Choose IndexReloaded?</h3>
<p>Are you looking to improve your website’s performance? IndexReloaded excels in core web vitals. IndexReloaded represents our expertise gained from optimizing the performance of plenty of websites on mobile devices. We believe you could well find a similar, user-friendly, all-in-one solution for boosting the performance your website. But we do not believe that you find similar honesty and better price-performance relation in similar products.</p>
<p>Benefit from our suite of unique features designed to turbocharge your site’s loading speed. From innovative critical CSS generation for above-the-fold content to implementation of tagged page caching, we ensure lightning-fast load times that improve critical performance metrics such as Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and more.</p>
<h3>Before You Install</h3>
<p>Our statistics indicate that the plugin improves the speed of 4 out of 5 websites. However, certain theme and plugin combinations, especially those related to caching and optimization, may lead to compatibility issues. Therefore, our plugin might not suit every website. To preview how IndexReloaded could benefit your site, there’s a simple tool that allows you to test it before installing it. <strong>We highly recommend</strong> that you visit <a href="https://pagespeed.web.dev/" rel="nofollow ugc">PageSpeed Insights</a> and run a test of your website beforehand. Please note: To accurately test your site on PageSpeed Insights, it’s crucial to temporarily disable any optimizing plugins. This test requires raw data to apply its own optimization.</p>
<h3>Features</h3>
<h4>Licencing</h4>
<p>The free version, run without licence key has everything enabled apart form CCSS (critical CSS) creation. On our website TocToc Internetmanagement (https://www.toctoc.ch/en/getindexloaded) we offer a free licence key valid for one site and one month – which allows to run a full version of the plugin before you decide if it’s worth around 30 CHF a year (for 3 websites).</p>
<p>IndexReloaded offers 3 different licences:<br />
– <strong>Free</strong>: suitable for testing IndexReloaded for one month,<br />
– <strong>Standard</strong>: enables CCSS on 3 sites for a year,<br />
– <strong>Developer</strong>: enables CCSS on 12 sites for a year</p>
<p>Privacy information: The free version of IndexReloaded does not any connection to third party websites, like ours – toctoc.ch. The licenced version connects to our website toctoc.ch for licence validation, the connection is strictly restraint to this purpose and does not send data outside the scope of licence validation to toctoc.ch.</p>
<h4>IndexReloaded Backend</h4>
<p>The backend is divided in two menu items, the “Overview” and the “Settings”.</p>
<p>For correct basic operation of IndexReloaded it will be necessary to identify JavaScript which IndexReloaded should exclude for its operations like regrouping, compression and defered loading). In some cases also CSS must get excluded.<br />
We supply an experience-based database that helps to indentify recommended excludes and – if some are found – adds them to the IndexReloaded Excludes list for your site – based on theme, plugins and elements found in your pages.<br />
This experience-based database is distributed along every release of IndexReloaded and licenced users can download a fresh copy of the experience-based database from our site in the backend of Indexreloaded in Overview->Recommended excludes</p>
<h4>IndexReloaded Overview</h4>
<p>In “Overview” we first focus on the basic operation of the plugin and on the challenge we have to solve to make it work properly.<br />
After this we have 3 tabs where the overall state of the plugin is displayed. You see if it is active and see the licencing state.</p>
<p>In tab “CSS and JS files” you see information on the css and js files produced by indexreloaded. With the “Delete files”-button you can remove all files on disk and force IndexReloaded to recreate the files.<br />
Tab “Licence key” informs on the used licence and its validity.<br />
Tab “Exclude list”, shows the proposed excludes for your settings “CSS and JS processing” setting “Exclude list” and delivers informations for the reasons why the excludes are recommended. These information come from the experience-based database.</p>
<h4>The experience-based database</h4>
<p>As we are on release 1.1.1. and this is valid for all subsequent versions, the experience behind the experience-based database <em>must still grow</em>. It is important to us to get your feedback on excludes you find in your site and which are not part yet of our experience-based database. So please send us your finds, along with plugins or themes concerned, to our moderated e-mail address knowledgebase@toctoc.ch</p>
<h4>IndexReloaded Settings</h4>
<p>IndexReloaded organizes its settings into groups for general settings, settings related to CSS and JS processing, to Critical CSS, HTML-cleanup, preloading and monitoring.</p>
<h4>General settings</h4>
<p>Within General settings, you can add a licence-key and setup some basic behaviors of the plugin, like where to store css and js-files, days generated files stay on disk and more. With setting “Activation” you activate or desactivate the enire frontend processing of IndexReloaded.</p>
<h4>CSS and JS processing</h4>
<p>The first part of these settings concern what IndexReloaded processes regarding CSS and JavaScript. You can turn off everything, turn off CSS or JavaScript-processing individually.<br />
As the core setting, the “Exclude list” allows to identify JavaScript and CSS that must be left intact by IndexReloaded. It’s a core setting because here you can make all possible errors disappear by add correct identifiers.<br />
The identifiers in this comma-separated list can be for example the id of a script or part of a filename, for inline JavaScript even parts of the code may be used as identifier.<br />
Setting “Force new files” is handy when developing the “Excludes list”, alternatively one could delete all files in “Overview”.<br />
With “Production mode” all 3 URL-Parameters we can pass along the request form the frontend, will be disabled.<br />
With “Load last JS file asynchronous” one can either defer or not defer the JavaScript-files created by IndexReloaded.<br />
Even after he grouping of JS by IndexReloaded some JavaScript will remain in HTML. Setting “Defer remaining JS after processing” defers this JavaScript. This is important for the (final) elimination of renderblocking elements.<br />
You got a ‘jquery not found’-errormessage after enabling “Defer remaining JS after processing”? Setting “Do not defer Jquery” allows to exclude jquery from deferal.<br />
The “CSS compression” setting enables or disables minimizing CSS files. By reducing CSS size, the plugin significantly improves page load times.<br />
The “Minify JS” setting enables or disables optimizing website performance by reducing JavaScript file sizes. This feature uses a third-party JavaScript minification tool, run on your site. By enabling Minify JS you reduce JavaScript size, optimize script delivery and boost web page efficiency.<br />
Setting “Minify exclude list” allow to identify JS that must not be minified, if ever this would be needed.</p>
<h4>Critical CSS</h4>
<p>This feature of the IndexReloaded significantly improves page loading speed by focusing on critical aspects of optimization. Above-the-fold Critical CSS adds up to non-blocking JavaScripts to streamline the critical path for fast rendering of essential content. Setting “enable folding” will split the grouped CSS to inline critical CSS and to deferred (asynchronously lazy load) non-essential CSS for improved performance. In addition, if some CSS-part found in original HTML does not sort out any critical CSS, this CSS may be dropped with setting “Remove CSS from CSS below if it doesn’t sort out CCSS”.<br />
Critical CSS is based on the HTML as it is displayed on the client around 2 seconds after page load. With this the urge to specify “Tags to keep above the fold” (or classes or Ids to keep above the fold) is very rare.</p>
<h4>Preloading</h4>
<p>This setting within IndexReloaded focuses on optimizing website load times by proactively preloading critical resources. This feature allows to force preloads of essential assets, such as fonts, scripts, or CSS files that are required for the initial page rendering process. By fetching these key requests ahead of time, it significantly improves page speed.<br />
However as these settings apply to every page of the site use preloading prudently. Apart from font-preloads, a preload will only show up if the filename is present in the HTML of the page.</p>
<h4>HTML Cleanup</h4>
<p>The settings here allow to remove parts of the HTML which are often considered as useless. Note that setting “Remove HTML-comments and generator meta” leaves intact comments by ko.js.<br />
But most HTML clean up is done automatically. For fonts loaded over Google it uses the “swap” mode for web fonts to ensure that a fallback font is displayed immediately, preventing a flash of invisible text (FOIT). Additionally, it optimizes the loading of Google Fonts, ensuring that content remains visible during the font-loading process.<br />
Also it makes sure that all images have alt, width and height attributes.</p>
<h3>Uninstallation</h3>
<p>When you delete the plugin, it will automatically keep all settings. During this process, the directory containing optimized files will be removed and possible cache entries in the database will get deleted. Please note that uninstalling the plugin will not remove the settings of the plugin.</p>
<h3>Feedback, Bug Reports, and Logging Possible Issues</h3>
<p>If you have any questions, suggestions, or encounter issues related to site speed optimization, we encourage you to contact us at contactindexreloaded@toctoc.ch. Whether you’re a user, developer, or tester, your feedback is essential to improving our services.</p>
<p>To facilitate troubleshooting, IndexReloaded offers error logging capabilities. If you encounter any problems, you can help us in resolving them by providing us with the relevant error log file. Your assistance will help us improve your experience with IndexReloaded.</p>


IndexReloaded

Get warp 10 for page speed performance with IndexReloaded: Minify CSS and JS, defer CSS and JS, clean up HTML, generate critical CSS and more!

WordPress.org

<p>This plugin optimizes the loading of images (and videos) with prioritization to improve <a href="https://web.dev/articles/lcp" rel="nofollow ugc">Largest Contentful Paint</a> (LCP), lazy loading, and more accurate image size selection.</p>
<p>The current optimizations include:</p>
<ol>
<li>Add breakpoint-specific <code>fetchpriority=high</code> preload links (both as <code>LINK[rel=preload]</code> elements and <code>Link</code> response headers) for image URLs of LCP elements:
<ol>
<li>An <code>IMG</code> element, including the <code>srcset</code>/<code>sizes</code> attributes supplied as <code>imagesrcset</code>/<code>imagesizes</code> on the <code>LINK</code>.</li>
<li>The first <code>SOURCE</code> element with a <code>type</code> attribute in a <code>PICTURE</code> element. (Art-directed <code>PICTURE</code> elements using media queries are not supported.)</li>
<li>An element with a CSS <code>background-image</code> inline <code>style</code> attribute.</li>
<li>An element with a CSS <code>background-image</code> applied with a stylesheet (when the image is from an allowed origin).</li>
<li>A <code>VIDEO</code> element’s <code>poster</code> image.</li>
</ol>
</li>
<li>Ensure <code>fetchpriority=high</code> is only added to an <code>IMG</code> when it is the LCP element across all responsive breakpoints.</li>
<li>Add <code>fetchpriority=low</code> to <code>IMG</code> tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.</li>
<li>Lazy loading:
<ol>
<li>Apply lazy loading to <code>IMG</code> tags based on whether they appear in any breakpoint’s initial viewport.</li>
<li>Implement lazy loading of CSS background images added via inline <code>style</code> attributes.</li>
<li>Lazy-load <code>VIDEO</code> tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a <code>VIDEO</code> is the LCP element, it gets <code>preload=auto</code>; if it is in an initial viewport, the <code>preload=metadata</code> default is left; if it is not in an initial viewport, it gets <code>preload=none</code>. Lazy-loaded videos also get initial <code>preload</code>, <code>autoplay</code>, and <code>poster</code> attributes restored when the <code>VIDEO</code> is going to enter the viewport.</li>
</ol>
</li>
<li>Responsive image sizes:
<ol>
<li>Compute the <code>sizes</code> attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by <code>sizes=auto</code>).</li>
<li>Ensure <a href="https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/" rel="nofollow ugc"><code>sizes=auto</code></a> is set on <code>IMG</code> tags after setting correct lazy-loading (above).</li>
</ol>
</li>
<li>Reduce the size of the <code>poster</code> image of a <code>VIDEO</code> from full size to the size appropriate for the maximum width of the video (on desktop).</li>
</ol>
<p><strong>This plugin requires the <a href="https://wordpress.org/plugins/optimization-detective/" rel="ugc">Optimization Detective</a> plugin as a dependency.</strong> Please refer to that plugin for additional background on how this plugin works as well as additional developer options.</p>
<p>👉 <strong>Note:</strong> This plugin optimizes pages for actual visitors, and it depends on visitors to optimize pages. As such, you won’t see optimizations applied immediately after activating the plugin. Please wait for URL Metrics to be gathered for both mobile and desktop visits. And since administrator users are not normal visitors typically, optimizations are not applied for admins by default.</p>
<p>Your site must have the <strong>REST API accessible</strong> to unauthenticated frontend visitors since this is how metrics are collected about how a page should be optimized. There are currently <strong>no settings</strong> and no user interface for this plugin since it is designed to work without any configuration.</p>


Image Prioritizer

Prioritizes the loading of images and videos based on how they appear to actual visitors: adds fetchpriority, preloads, lazy-loads, and sets sizes.

IndexReloaded vs Image Prioritizer