w3-speedster-for-developers

Installation W3Speedster

1. Go to Extend:
   • Log in to your Drupal site as an administrator.
   • Navigate to Manage > Extend.
2. Install New Module:
   • Click on the Install new module button.
   • upload it from your computer.
   • Click on Install.
3. Enable the Module:
   • Once installed, you will be redirected back to the Extend page.
   • Find the newly installed module in the list and check the box next to it.
   • Click the Install button at the bottom of the page.

Updating W3Speedster

1. Go to Update:
   • Log in to your Drupal site as an administrator.
   • Navigate to Manage > Reports > Available updates.
2. Check for Updates:
   • Click on the Check manually button to ensure you have the latest update status.
3. Update the Module:
   • If updates are available, click on the Update tab.
   • Select the modules you want to update and click on the Download these updates button.
   • Follow the prompts to complete the update process.

Additional Tips

• Backup: Always backup your database and files before installing or updating modules.
• Maintenance Mode: Consider putting your site in maintenance mode while performing updates to prevent any disruptions to your users.
• Drush: Drush is a powerful command-line tool for managing Drupal. Installing and using Drush can streamline many tasks.

Can’t upload/install W3Speedster

1. Check Compatibility

• Drupal Version: Ensure the module is compatible with your Drupal version.
• PHP Version: Check if the module requires a specific PHP version.

2. Read Error Messages

• Details: Carefully read the error message displayed. It often provides clues about what went wrong.
• Log Messages: Check the log messages by navigating to Reports > Recent log messages.

3. Clear Cache

• Drush: Clear the cache using Drush:
  drush cr
• Drupal UI: Navigate to Configuration > Development > Performance and click Clear all caches.

4. Check File Permissions

• Ensure that the file and directory permissions are set correctly.
  find . -type d -exec chmod 755 {} \;
find . -type f -exec chmod 644 {} \;
• The web server needs write permissions for the sites/default directory.

5. Manually Download and Install the Module

1. Download the Module:
   • Download the module from Drupal.org and extract it to the modules/contrib directory.
2. Enable the Module:
   • Enable it using Drush:
     drush en module_name
   • Or via the Manage > Extend page in the Drupal UI.

6. Check PHP Error Logs

• Inspect the PHP error logs for any issues. The location of the logs depends on your server setup:
  • Apache: /var/log/apache2/error.log
  • Nginx: /var/log/nginx/error.log
  • Local Development: Check the error logs in your development environment (e.g., MAMP, WAMP).

7. Disable Conflicting Modules

• Conflicts with other modules might cause issues. Try disabling other modules that might be interfering.

8. Update Drupal Core and Modules

• Ensure that your Drupal core and all other modules are up-to-date. Use Composer for updates:
  composer update drush updb drush cr

9. Check .htaccess and Settings.php

• Ensure that .htaccess and settings.php are correctly configured and have not been altered incorrectly.

10. Consult the Module’s Issue Queue

• Visit the module's page on Drupal.org and check the issue queue for similar problems and possible solutions.

What exactly does W3Speedster do?

W3Speedster is a WordPress performance optimization plugin with many features:

• CDN Integration
• Optimize images
• Lazy Loading
• WebP Support
• Minify CSS
• Minify JavaScript
• Defer parsing of JavaScript
• Serve scaled images
• Avoid CSS @import
• Exclusions
• Debug Site
• Google Fonts Optimization
• Delay JS

How to find the best settings for your site?

So, you’ve activated W3Speedster. And now you’re wondering, “How do I get the best results for my site?”

Best practices for configuration

When testing options in W3Speedster, please use the following process:

• Activate options one-at-a-time, not everything at once
• After each option that you activate, check your site in a browser window where you are not logged in to WordPress. An incognito/private window works well. By doing this you will be able to see immediately if a particular option causes any issue.
• Check a few types of pages on your site. If anything doesn’t look right, don’t panic! Disable the last option you activated and your site will return to normal.

Getting Started with Configuration

General

You can enable optimization to streamline your site's resources and improve loading times. Separating the cache ensures that different versions of your site, such as mobile and desktop, are stored and served efficiently. Integrating a Content Delivery Network (CDN) helps distribute your site's content across multiple servers, speeding up delivery to users worldwide. Enabling Gzip compression reduces the size of your site's files, further improving load times. Fixing Interactive Next Paint (INP) issues enhances your site's interactivity and responsiveness. Additionally, you can remove query parameters to simplify URLs and improve caching effectiveness.

CSS > CSS Optimization

You can enable CSS Minification so that W3Speedster minifies your CSS files. You can set rules of minification and even exclude CSS files from this minification process. You can also select when to load secondary CSS and whether you want to delay it

Javascript > JS Optimization

You can enable JS Minification from this tab to instruct W3Speedster to minimize JavaScript files. You can also Defer Parsing of JavaScript in this tab and exclude JS from combining. You can also choose when you want to load combined JavaScript and how much time do you want to delay JS tags by.

Exclusion

You can preload resources such as CSS and font files to ensure they load quickly when a user visits your site. You can exclude specific images from lazy loading to ensure they display immediately. Additionally, you have the ability to exclude certain pages, CSS, and JavaScript files from optimization if needed. For resources that consume significant data, you can also force lazy loading of CSS and JavaScript to improve initial page load times.

Custom Code

You can Write custom JS/CSS code which we need to load at the time of site loading. This allows you to apply specific styles and functionalities right from the start, ensuring that your custom code is executed immediately as your website loads.

Image Optimization

You can enable Lazy Loading for images, I-frames, and videos. We recommend activating LazyLoad, because it helps reduce the negative performance impact of images, by loading them only when the visitor scrolls down the page and actually needs to see them.

Turn On Optimization

Feature: Master Control for Performance Enhancements

The "Turn On Optimization" setting in W3Speedster serves as the central control for all available optimization features within the plugin. When enabled, it activates a comprehensive set of performance improvements, including CSS and JavaScript minification and combination, image optimization, Gzip compression, preload caching, lazy loading of images, device-specific caching (separate cache for mobile and desktop), and optimized handling of pages with query parameters.

Default Behavior:

• All Optimization Techniques Applied: When enabled, W3Speedster systematically applies all selected optimization features, improving site speed, reducing server load, enhancing the user experience, and boosting SEO performance.
• When the Toggle is Disabled: When disabled, only basic HTML caching remains active, while advanced optimizations like CSS/JS minification, image compression, Gzip compression, browser caching, preload mechanisms, and lazy loading are paused. This is ideal for development, troubleshooting, or performance testing.

How It Works:

• Enable: Navigate to W3Speedster settings in the dashboard. In the General Settings section, locate the "Turn On Optimization" toggle and enable it to apply all optimization features.
• Disable: If needed, toggle it off to disable the optimizations. Save changes to apply your preferences.

Benefits:

• Maximum Speed and Performance: Enabling optimizations ensures fast load times, reduced server strain, and an improved user experience.
• SEO Benefits: Faster load times contribute to better search engine rankings.

Outcome:

Keeping the "Turn On Optimization" option active ensures that your site operates with maximum efficiency, offering enhanced performance, improved SEO, and a seamless user experience. Disabling it should be reserved for testing or development scenarios where caching and optimizations may interfere.

License Key

To use your licensed plugin, you must enter a license key. This key is unique for each product and is automatically generated when your plugin order is completed. You will find the key in the "Order Completed" email from W3Speedster. Activating the key ensures you receive updates and access to all plugin features.

Optimize pages with Query parameters

Feature:

The "Optimize Pages with Query Parameters" feature in W3Speedster enables the plugin to apply full optimizations (such as minification, compression, etc.) to URLs that include query strings (parameters), enhancing the performance of dynamic pages.

Why It’s Needed:

Many PHP applications, whether custom-built or based on frameworks like Laravel, Symfony, or CodeIgniter, deliver dynamic content based on URL parameters (e.g., ?filter=red, ?page=2). Typically, caching systems ignore or bypass such URLs to prevent serving outdated content. However, for high-performance servers that can handle content validity, optimizing these pages greatly boosts performance for scenarios such as filtered searches, product pages, pagination results, and user-driven listings.

How It Works:

• Enabled: When this setting is enabled, W3Speedster treats URLs with query parameters as unique pages and applies all optimizations to each version of the page with a unique query string.
• Disabled: Without this setting, pages with query parameters are not optimized. They are dynamically generated each time, which can increase server load and slow down response times, especially for filtered or sorted content.

Example:

• Without Optimization: Visiting ‘https://www.example.com/shop?filter=red’ results in a dynamically generated, unoptimized page.
• With Optimization: Visiting the same URL with the "Optimize Pages with Query Parameters" setting enabled loads the optimized, cached version for filter=red, ensuring faster loading times, reduced server resource usage, and improved SEO performance.

Important Notes:

• High-Performance Server Recommended: Each unique combination of query parameters creates a new optimized file. Ensure your server has enough resources to handle the increased number of optimized files without performance degradation.
• Critical for Ecommerce and Directories: This feature is particularly valuable for product filter pages, search results, category listings, and AJAX-based pagination, which are common in ecommerce and directory websites.

Optimize Pages For Logged-In Users

Feature:

The "Optimize Pages When User Logged In" setting in W3Speedster enables the plugin to apply optimization techniques to pages viewed by authenticated (logged-in) users. Optimizing these pages can significantly improve performance in many PHP applications where it is safe and beneficial to do so under controlled conditions.

How It Works:

• Enabled: When this setting is activated, W3Speedster applies all configured optimization techniques — including CSS/JS minification, Gzip compression, and image optimization — to pages viewed by logged-in users.
• Disabled: Without this setting, no optimization is applied for logged-in users. Each page request will result in full PHP execution, database queries, and dynamic content rendering, which can significantly impact performance.

Example:

• When Enabled: A logged-in user visiting their profile or dashboard sees a fast and optimized version of the page, with updates occurring only for dynamic data (like notifications).
• When Disabled: Every page request by logged-in users triggers live PHP execution and database queries, resulting in higher server load and slower performance, especially during high-traffic periods.

How W3Speedster Optimizes Logged-In User Pages:

• CSS/JS Minification and Compression: Like for guest users, CSS and JavaScript files are minified and compressed for faster delivery.
• Optimized Static Resources: Images, fonts, and stylesheets are served in their optimized forms to reduce page weight and improve performance.
• Improved Server Efficiency: By applying optimizations, W3Speedster reduces server processing time, even when users are logged in, ensuring a faster and more responsive user experience.

Separate CSS cache for mobile

Feature:

The "Separate CSS Cache for Mobile" feature in W3Speedster ensures that mobile users receive optimized CSS files specifically tailored for mobile devices, distinct from the desktop version. This is crucial when separate files for mobile and desktop are required. because mobile and desktop layouts typically require different styles for optimal performance and responsiveness.

Why This is Needed:

• Mobile-First Optimization: Mobile devices require lighter, smaller, and more responsive styles compared to desktops.
• Reduce Unnecessary Code: Serving desktop-specific styles to mobile users increases page size unnecessarily, impacting performance.
• Improve Loading Speed: By serving mobile-optimized files, W3Speedster delivers only the necessary assets, reducing download size and improving load time.
• Enhance Core Web Vitals: Faster mobile load times directly contribute to better performance in Google's Page Experience metrics, such as LCP (Largest Contentful Paint) and FID (First Input Delay).

How It Works:

• Enabled: W3Speedster detects the user's device type (mobile or desktop) during the initial request.
  • Two separate cache versions are created:
    • One set optimized for desktop (CSS).
    • A different set optimized for mobile devices.
  • The appropriate version is served based on the device type at runtime.
• Disabled: A shared file is used for both mobile and desktop devices, meaning mobile users will receive desktop-optimized CSS, which may include unnecessary code and increase file sizes, leading to slower load times.

Example:

• When Enabled:
  • Desktop Visitor: Served ‘style.css’.
  • Mobile Visitor: Served ‘stylemob.css’.
• When Disabled:
  • Both mobile and desktop users are served the same style.css, which may be unnecessarily large for mobile.

Important Considerations:

• Device Detection: W3Speedster uses User-Agent detection to differentiate between mobile and desktop devices.
• Additional Cache Storage: Maintaining separate mobile and desktop caches will increase the number of cached files, so ensure your server has sufficient storage space.
• Critical for Responsive Websites: This setting is especially beneficial for websites using different stylesheets, lazy loading behaviors based on screen size.
• SEO Benefit: Faster mobile performance can improve your rankings on Google Mobile-First Indexing.

Fix INP Issues

Feature:

INP (Interaction to Next Paint) is a Core Web Vitals metric introduced by Google to measure a webpage’s responsiveness. It tracks the time it takes for a page to visually respond after a user interaction (e.g., clicking a button or tapping a menu). A lower INP score indicates a faster, smoother user experience. INP issues in modern PHP applications often arise due to heavy JavaScript execution, slow server responses, or unoptimized frontend resources. W3Speedster provides a range of features to address and reduce INP problems.

Why Fixing INP is Important

• Better User Experience: Quick visual feedback ensures websites feel more responsive and user-friendly.
• Reduced Bounce Rate: A fast and responsive site is more likely to retain visitors.
• Compliance with Core Web Vitals Standards: Meeting INP benchmarks is crucial for maintaining competitive performance and user satisfaction.

How W3Speedster Fixes INP Issues

W3Speedster optimizes the INP metric through various performance improvements:

• Minify and Defer JavaScript: Reduces the size of JavaScript files and defers non-critical scripts to prevent render-blocking delays.
• Lazy Load Images and iFrames: Minimizes the main thread's workload by loading images and iframes only when they are about to appear in the viewport.
• Gzip Compression and Browser Caching: Compresses assets and leverages caching to reduce asset sizes and reload times, ensuring quicker interactions.
• Optimized CSS Delivery: Critical CSS is loaded immediately, providing essential styles for the page's first interactions.
• Preloading Key Resources: Fonts, images, and important JavaScript files are preloaded to avoid delays after user actions. Together, these techniques improve overall responsiveness, directly enhancing INP scores.

Example:

• Without Optimization: A visitor taps the "Load More Posts" button, and heavy JavaScript runs on the main thread, causing a delay before the next paint. This results in a spike in INP values.
• With W3Speedster Optimization: Deferred scripts, lazy-loaded content, and reduced file sizes allow the page to respond almost instantly after the click, resulting in a lower INP score.

Important Considerations:

• Heavy Inline JavaScript: Inline JavaScript should be optimized manually, as W3Speedster cannot fully optimize poorly written custom scripts.
• Third-party Scripts: Scripts from third-party services (e.g., live chat widgets, ad networks) may delay INP, even with optimization. Load them conditionally or use them sparingly
• Server Performance: While W3Speedster handles frontend optimizations, underlying server performance (PHP execution speed, database optimization) also affects INP. Server-side slowness must be addressed separately for optimal results.

CDN URL

Feature:

A CDN URL refers to the web address provided by a Content Delivery Network used to serve static files (e.g., CSS, JS, images) from distributed global edge servers instead of your origin server. This approach significantly enhances page speed, reduces server load, and improves global accessibility. In W3Speedster, integrating a CDN URL is a key performance optimization step that ensures all static assets are offloaded to the CDN, allowing them to be served closer to the user.

Benefits of Using a CDN URL in W3Speedster

• Improved Performance: Faster asset delivery by serving files from the geographically closest server.
• Reduced Latency: Minimizes time-to-first-byte (TTFB) for static files.
• Lower Server Load: Frees up your origin server to handle dynamic content by outsourcing static file delivery.
• Enhanced SEO: Faster load speeds lead to higher user satisfaction and improved Core Web Vitals, positively impacting SEO rankings.
• Bandwidth Savings: Offloading large assets to a CDN reduces your hosting provider’s data transfer usage.
• Scalability: CDNs are built to scale, handling traffic spikes without impacting performance.

How W3Speedster Handles CDN URL Integration

1. Configure the CDN URL
   • Choose a CDN provider (e.g., Cloudflare, BunnyCDN, KeyCDN, CloudFront).
   • Obtain your CDN endpoint (e.g., https://cdn.example.com).
   • Navigate to W3Speedster > General Settings > CDN URL.
   • Enter your CDN URL in the input field.
   • To add more than one CDN URL, click on add rule and enter another URL
2. Automatic URL Rewriting
   • Once configured, W3Speedster rewrites all eligible static resource URLs across your website.
   • Example:
     • Original: https://www.example.com/wp-content/themes/style.css
     • Rewritten: https://cdn.example.com/wp-content/themes/style.css
   • This rewriting is done on-the-fly during page caching and asset processing.
3. Static Files Redirection
   • CSS, JavaScript, fonts, and image URLs are routed to the CDN domain.
   • This happens transparently for both logged-in and guest users.
4. CDN Cache Management
   • When files are updated, W3Speedster ensures the CDN cache is cleared (if the CDN supports API-based purging).
   • This avoids stale content being served.
5. Verification
   • Open the frontend of your site in a browser.
   • Use Inspect Element to verify that all static resources load from the CDN URL.
   • Use performance tools like:
     • PageSpeed Insights
     • GTmetrix
     • WebPageTest

Exclude file extensions from cdn

Feature:

During the implementation of a Content Delivery Network (CDN), not all files are suitable for delivery via an external domain. Certain file types, especially fonts and sensitive scripts, can cause cross-origin resource sharing (CORS) issues or functionality conflicts when loaded from a different origin. To manage this, W3Speedster provides a feature to exclude specific file extensions from being served through the CDN.

This ensures that only safe and compatible file types are delivered via the CDN, while critical or sensitive files continue to load from the origin server.

Why We Need It

• Prevent CORS Issues: Fonts like .woff, .woff2, .ttf, and .eot are often blocked by browsers if served from a different domain without appropriate CORS headers. Excluding them avoids the need for complex server-side CORS configurations.
• Preserve Site Functionality: Certain scripts or file types may rely on origin-specific behavior or session-based requests. Serving these files through a CDN could break functionalities like login systems, font rendering, or AJAX-based features.
• Improved Debugging and Control: By selectively excluding files from CDN delivery, developers gain more control over how assets are served, making it easier to troubleshoot and fine-tune performance.

How It Works in W3Speedster

1. File Extension Filter Field
   • W3Speedster offers a dedicated input field in the CDN settings where you can list file extensions that should be excluded from CDN rewriting. You can define patterns like: .woff, .woff2, .ttf, .eot, .map
2. Once added, these extensions will not be rewritten to the CDN URL.
3. Request Handling The plugin ensures that files matching the excluded extensions are served directly from the origin server, preserving full compatibility and avoiding any cross-domain issues.

Benefits

• Avoids font loading issues on browsers that block cross-origin font files.
• Prevents broken functionality on forms, APIs, or dynamic modules.
• Ensures full compatibility across environments without needing CORS header adjustments.
• Offers flexibility for developers and site administrators to tailor CDN usage.

Exclude path from cdn

During the implementation of the CDN, our plugin provides a section to exclude the specific paths so that the work of the plugin is not hampered, for instance, excluding ‘/wp-includes/’.

Optimize JPG/PNG Images

Feature:

Image optimization is an essential element of web performance, as images often contribute significantly to a page's total load size. W3Speedster includes an automatic image optimization feature specifically designed for JPG and PNG formats, the most commonly used image types on the web. This feature reduces image file sizes without compromising visual quality, leading to faster page loads, lower bandwidth usage, and an improved user experience.

Why We Need It

• Large Images Slow Down Pages: High-resolution JPG/PNG files can greatly increase page load times, especially for users on mobile networks or slower connections.
• Affects Core Web Vitals: Metrics like Largest Contentful Paint (LCP) and Total Blocking Time (TBT) are significantly impacted by unoptimized images, potentially hurting your site's performance.
• Mobile Optimization: Optimized images load faster on mobile devices, helping reduce bounce rates and improving user engagement.
• Bandwidth Efficiency: Smaller image file sizes reduce data transfer, benefiting both hosting resources and users with limited data plans.

How It Works in W3Speedster

• Automatic Compression: When you upload a JPG or PNG image to the media library (or during bulk processing), W3Speedster automatically compresses it using smart algorithms that preserve visual quality.
• Bulk Optimization Tool: The plugin provides a bulk optimizer for previously uploaded media, ensuring that all your media, including historical images, are optimized.
• Integration with wp-cron (Optional): Image optimization can be scheduled using wp-cron, allowing large media libraries to be processed in the background without impacting performance.

Benefits of Image Optimization

• Faster Load Times: By compressing image-heavy content, the average page size is reduced, resulting in faster page load times.
• Improved SEO: Search engines consider page speed as a ranking factor, particularly for mobile searches. Optimized images contribute to better rankings.
• Better User Experience: Faster-loading, visually identical images improve user retention and overall satisfaction.
• Lower Server Load: Reduced image sizes mean less server bandwidth is required and faster delivery times.
• CDN-Friendly: Optimized images are better suited for CDN delivery, as their smaller sizes make them more efficient to serve across different locations.

How to Enable Image Optimization in W3Speedster

1. Go to your WordPress Dashboard.
2. Navigate to W3Speedster > Image Optimization.
3. Enable Optimize JPG/PNG Images.
4. Click Save Changes.

Example

• Original Image: 1.2 MB (uncompressed PNG)
• After Optimization: 350 KB (visually identical, optimized PNG)
• Load Time Reduction: Approximately 2.5 seconds faster on mobile devices.

JPG/PNG Image Quality

Feature:

The “JPG/PNG Image Quality” setting in W3Speedster allows you to fine-tune the balance between image visual clarity and file size. By default, the plugin maintains a high-quality threshold of 90%, ensuring that your site’s images remain sharp and visually appealing while still achieving meaningful reductions in file size.

Why We Need It

• Performance vs. Quality Trade-Off: Web optimization requires smaller image sizes for faster loading. However, overly compressed images may appear pixelated or blurry. This setting allows you to strike the right balance.
• Custom Control: Different websites have varying needs. For example, e-commerce, portfolios, and photography sites may prioritize clarity, while blogs may prioritize faster performance.
• SEO and Core Web Vitals: Google favors fast-loading pages. Optimizing image quality directly impacts Core Web Vitals, including metrics like LCP (Largest Contentful Paint), ultimately improving your site’s PageSpeed score.

How It Works in W3Speedster

• The image quality setting is applied during optimization, whether during image uploads or bulk optimization processes.
• A quality percentage (e.g., 90%) determines how much compression is applied:
  • 100%: No compression (maximum clarity).
  • 90%: Visually lossless and optimized (default setting).
  • 70%-80%: Noticeable compression but still acceptable for most use cases.
  • <70%: Aggressive compression, suitable for thumbnails or low-priority visuals.
• This setting applies to both JPG and PNG.

How to Enable "Keep Original Images"

1. Go to Dashboard > W3Speedster > Image Optimization.
2. Locate the “JPG/PNG Image Quality” setting.
3. Enter the desired quality value (e.g., 90).
4. Click Save Changes.

Benefits

• Improved Site Speed: Smaller image sizes reduce load times.
• Maintained Visual Appeal: Ensures high enough quality for user satisfaction.
• SEO Boost: Better Core Web Vitals scores lead to improved search engine rankings.
• Bandwidth Efficiency: Lighter image files reduce server load and data usage.

Enable JPG Webp support

This feature will convert and render your JPG images in the WebP format. To use it, make sure to start image optimization in the Image Optimization tab. The W3Speedster Plugin will handle the optimization for all JPG images, enhancing your site’s performance

Enable PNG Webp support

This feature will convert and render your PNG images in the WebP format. To use it, make sure to start image optimization in the Image Optimization tab. The W3Speedster Plugin will handle the optimization for all PNG images, enhancing your site’s performance

WebP Image Quality

Feature:

The WebP Image Quality setting in W3Speedster determines the compression level applied when converting JPG and PNG images into the WebP format. As a next-generation image format developed by Google, WebP provides significant file size reduction while maintaining strong visual quality. W3Speedster defaults this value to 90%, offering a near-lossless balance between clarity and performance.

Why This Setting Matters

• Performance vs. Visual Clarity
  • Lower quality values yield smaller file sizes and faster load times.
  • Higher values retain more detail but generate larger files.
• Bandwidth Optimization
  • Smaller WebP images result in reduced server bandwidth usage.
  • Beneficial for mobile users and high-traffic websites.
• Customizable Control
  • Site owners can fine-tune quality levels depending on content type.
  • Ideal for websites prioritizing either speed or image detail (e.g., blogs vs. photography portfolios).

How It Works

• When WebP conversion is enabled via W3Speedster > Image Optimization, the plugin:
  • Scans JPG and PNG images.
  • Converts them to .webp using the specified quality value (default: 90%).
  • Serves WebP images to compatible browsers while maintaining the original files for fallback use.
• You can customize the quality level:
  • Go to Dashboard > W3Speedster > Image Optimization.
  • Locate the WebP Image Quality field.
  • Enter a value between 0 (lowest quality) and 100 (no compression).
  • Click Save Changes.
  • If necessary, re-optimize existing images to apply the updated setting.

Benefits

• Faster Page Loads – Efficient image delivery improves load speed and user experience.
• Controlled Visual Output – Maintain brand consistency with high-quality visuals when needed.
• Better Core Web Vitals – Enhances LCP (Largest Contentful Paint) by serving leaner images.
• Optimized Data Usage – Reduced image sizes lower data consumption for both users and servers.

Enable Image lazy Load

The W3Speedster Plugin allows you to enable lazy loading for images. This feature ensures that images are loaded only as they come into the user's viewport, significantly improving your site's performance and reducing initial load times.

Enable Iframe lazy Load

With the W3Speedster Plugin, you can also enable lazy loading for iframes. By delaying the loading of iframes until they are needed, your site can load faster, offering a smoother and more efficient user experience.

Enable Video lazy Load

Enable lazy loading for videos using the W3Speedster Plugin. This feature loads video content only when it becomes necessary, helping to speed up your site's initial load time and provide a better performance overall.

Enable Audio lazy Load

Enable lazy loading for audio using the W3Speedster Plugin. This feature loads audio content only when it becomes necessary, helping to speed up your site's initial load time and provide a better performance overall.

Pixels to Load Resources Below the Viewport

Feature:

The "Pixel to Load Resources Below the Viewport" setting in W3Speedster determines how far below the visible viewport deferred resources begin loading. The default threshold is 200 pixels, which ensures images, videos, iframes, background images, and audio start loading just before they enter view, resulting in a smooth and uninterrupted user experience.

Why This Setting is Important

• Improves Perceived Performance: Preloading media just before it appears on screen avoids flickering or delays during scroll.
• Reduces Initial Page Load: Off-screen content is deferred, improving metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
• Enhances User Experience: Users scrolling down the page experience fluid transitions and seamless media loading.

How It Works

• W3Speedster continuously monitors scroll position against the location of each media element.
• When an element is detected within the defined pixel range (e.g., 200px) below the viewport, it is queued for loading.
• Applies to:
  • <img> elements
  • <video> and <audio> tags
  • <iframe> embeds (e.g., YouTube, Google Maps)

Customization Instructions

• Go to Dashboard > W3Speedster > Image Optimization (or General Settings)
• Locate the setting named "Pixel to Load Resources Below the Viewport."
• Enter a numeric value (e.g., 100, 200, 300) to define the threshold
• Click Save Changes

Example Configuration

• Value: 200: Loads content when it is 200px below the visible screen—ideal balance between performance and UX.
• Value: 50: Defers loading until the asset is much closer to view—better performance, but may cause visible load delay.
• Value: 300: Loads content earlier—ensures smoother scroll, but increases initial bandwidth use.

Load SVG Inline Tag as URL

Feature:

The "Load SVG Inline Tag as URL" option in W3Speedster determines how SVG images are rendered. Instead of embedding the full SVG code inline in the HTML (which increases DOM complexity), this setting enables loading SVGs as external files via standard <img> tags.

Why This Setting is Important

• Improved Page Performance: Prevents HTML bloat by avoiding complex inline SVG markup, leading to faster DOM parsing.
• Simplified Document Structure: Reduces the number of nodes in the DOM, making the HTML cleaner and easier to manage.
• Optimized for Rendering and Caching: Externally loaded SVGs are easier for browsers to cache and render, especially when reused across multiple pages.
• Better Support for Lazy Loading & CDN: SVGs loaded as URLs are compatible with lazy loading plugins and content delivery networks, improving load times globally.

How It Works

• Without the Setting Enabled
  • SVGs are directly embedded into the HTML using <svg>...</svg> tags.
  • This increases DOM size and page load time, particularly for complex SVGs.
• Applies to:
  • SVGs are referenced externally via <img src="image.svg">.
  • This results in lighter HTML, better caching, and improved rendering performance.

How to Enable

• Navigate to Dashboard > W3Speedster > Image Optimization or General Settings
• Locate the setting labeled "Load SVG Inline Tag as URL"
• Enable the toggle
• Click Save Changes

Optimize Images on the Go

Feature:

The "Optimize Images on the Go" feature in W3Speedster allows for real-time, automatic image optimization during live page views or when pages are crawled. This ensures that unoptimized images are progressively enhanced without manual intervention, enhancing overall site performance.

Why Enable This Feature?

• Real-Time Image Detection and Optimization: As users access pages, W3Speedster scans them for unoptimized images (JPG, PNG) and automatically queues them for background optimization.
• No Manual Input Needed: Removes the need to identify or trigger optimization manually. Every image encountered during page loads is handled automatically.
• Ideal for Dynamic or Media-Heavy Sites: Perfect for websites that frequently add content, such as eCommerce platforms, blogs, or news sites, ensuring all images remain optimized over time.

How It Works

• When a page is visited, the plugin scans for image files present in the content.
• It determines if each image has already been optimized or converted to WebP.
• Unoptimized images are queued silently and processed in the background.
• This does not delay the user experience, ensuring frontend performance remains unaffected.
• The optimization continues in the background, allowing the site to become faster progressively with each page visit.

Recommended Workflow:

• Enable the feature.
• Manually crawl or use an SEO bot (like Screaming Frog or a sitemap pinger) to visit key pages.
• Disable the feature once the optimization of discovered images is complete.

Ideal Use Cases

• New Website Launch: Ensures all image assets are optimized from the start.
• Sites with Large or Growing Media Libraries: Automates the process of detecting and optimizing older or newly added content.
• Content-Driven Platforms (e.g., Blogs, News, e-commerce): Adapts to continuous image uploads and optimizes them in real-time.

How to Enable

• Navigate to Dashboard > W3Speedster > Image Optimization
• Find the setting labeled "Optimize Images on the Go."
• Toggle the setting to Enabled
• Click Save Changes

Important Note

• This feature is best used temporarily.
  • While useful during the initial optimization phase or for bulk detection, continuous use on high-traffic sites may increase server load.

Automatically Optimize Images on Upload

Feature:

The "Automatically Optimize Images on Upload" feature in W3Speedster ensures that every image uploaded to your website—whether on WordPress or any PHP-based platform—is immediately optimized and, if enabled, converted to the WebP format. This proactive approach maintains performance and visual consistency across all content from the moment it's added.

Why We Need It

• Performance-First Workflow: Automatically compresses and converts images during the upload process, eliminating the need for delayed or background optimization.
• Consistency Across Media Files: Ensures all new media follow the same optimization settings, preventing quality mismatches and format inconsistencies.
• Improved Page Load Speeds: By reducing the size of uploaded images instantly, this feature contributes directly to better Core Web Vitals and faster rendering.

Potential Problems Without This Feature

• Unoptimized Media Usage: Large or uncompressed files could be served directly, negatively affecting loading speed and user experience.
• Mixed Format Output: If WebP conversion is not applied uniformly, users may experience inconsistent formats depending on the image or browser.
• Manual Processing Overhead: Admins must remember to manually trigger optimization processes for each new upload, adding to the operational burden.

What W3Speedster Does

Once this feature is enabled:

• Every newly uploaded image is automatically optimized according to your predefined image quality settings.
• If WebP conversion is also activated, the plugin simultaneously generates .webp versions.
• The appropriate image format is then served based on the end-user’s browser compatibility, ensuring optimal speed and visual quality.

Important Consideration

If you're on a shared hosting plan or a low-resource server, enabling this feature might slightly delay the media upload process due to real-time optimization.

Recommended Alternative:

For high-volume uploads or constrained servers, you may prefer disabling this feature and using the “Start Optimization” bulk tool periodically to process all new media files.

How to Enable

• Navigate to Dashboard > W3Speedster > Image Optimization
• Locate and enable the toggle for "Automatically Optimize Images on Upload"
• Make sure both “Convert to WebP” and “Optimize JPG/PNG” are also enabled for full functionality
• Click Save Changes

Responsive Images

Feature:

The Responsive Images feature in W3Speedster allows your website to serve device-appropriate background images based on the visitor’s screen size—desktop, tablet, or mobile. This adaptive image delivery ensures faster page loads, efficient bandwidth usage, and visually consistent experiences across all devices.

Why This Feature Matters

• Device-Specific Optimization: Large images intended for desktops are unnecessary on mobile devices. This feature ensures each device only receives the image size it truly needs.
• Enhanced User Experience: Images are always displayed with correct dimensions and quality, avoiding distortion, cropping issues, or low resolution.
• Improved Performance: By delivering lightweight versions on smaller screens, the plugin reduces data consumption and speeds up page rendering, especially over mobile networks.

Issues Without Responsive Background Images

• Slower Load Times on Mobile: Downloading full-size desktop background images on a mobile device results in wasted bandwidth and sluggish performance.
• Inconsistent Visual Quality: Without size-specific images, background visuals may stretch, pixelate, or display improperly across various screen sizes.
• Higher Bounce Rates: Slow-loading or misaligned visuals can frustrate users and lead to faster page abandonment.

How W3Speedster Solves This

When the Responsive Images setting is enabled:

• The plugin automatically generates background image variants optimized for different breakpoints (e.g., 595px for mobile, 768px for tablets, 1024px+ for desktops).
• These variants are dynamically loaded using CSS or JavaScript, depending on the screen width of the user’s device.
• Each version is compressed according to your configured image quality settings, ensuring speed without sacrificing visual fidelity.

This responsive strategy guarantees that your background images load quickly and look perfect on every device.

Important Consideration

If you're on a shared hosting plan or a low-resource server, enabling this feature might slightly delay the media upload process due to real-time optimization.

How to Enable This Feature

• Navigate to Dashboard > W3Speedster > Image Optimization
• Locate the “Responsive Images” option
• Make sure both “Separate Cache for Mobile” and “Separate CSS Cache for Mobile” are also enabled for full functionality
• Toggle it ON
• Click Save Changes

Insert Aspect Ratio in img Tag

This feature allows you to specify the aspect ratio for images directly within the img tag. By including the aspect ratio, you ensure that the space for the image is reserved on the page even before the image is fully loaded. This helps prevent layout shifts and improves the overall user experience by maintaining consistent image dimensions across different devices and screen sizes.

Upload Directory Path for Images

Please enter the folder path where you have the images you want to optimize. Once you enter the folder path, all images in the directory will be processed and optimized automatically. This way, images are reduced in size without any loss of quality, making them more efficient for use in web or other applications.

Calculate Image

The module will analyze and identify the images within the specified directory that require optimization. Once the directory path is provided, it will evaluate all images contained in the directory to determine which ones can be optimized for better performance. This process ensures that only relevant images are selected for optimization, streamlining the workflow and enhancing efficiency.

Start Image Optimization

Feature:

The “Start Image Optimization” feature in W3Speedster triggers the on-demand compression and enhancement of all existing images within your website's media library. This process helps reduce image file sizes without sacrificing quality, resulting in faster page loads, lower bandwidth consumption, and improved SEO performance.

How It Works

Once the feature is activated:

• W3Speedster scans your media library for image files in supported formats such as JPG and PNG.
• Each image is optimized using advanced compression techniques.
• If enabled, images are also converted to the WebP format, improving efficiency for modern browsers.
• Depending on your configuration, optimized images can either replace the originals or coexist alongside them.
• Image quality is maintained at the preset threshold (default is 90%, adjustable in settings).

This process runs in the background, ensuring minimal interruption to your regular site operations.

Free vs Pro Capabilities

• Free Version: Allows the optimization of up to 500 images, making it suitable for new or small-scale websites.
• Pro Version: Lifts all limits, supporting unlimited image optimization. This is essential for larger websites, blogs, and e-commerce platforms.

Upgrading to Pro ensures your entire image library is optimized efficiently and automatically, especially as your content grows.

How to Use the Feature

• Navigate to W3Speedster > Image Optimization
• Click on the “Start Optimization” button
• The plugin will begin processing your images asynchronously

You can monitor the optimization status within the same interface. Pause or resume as needed.

Benefits of Image Optimization

• Faster Page Loads: Smaller file sizes improve load times on both desktop and mobile.
• Better SEO and Core Web Vitals: Optimized images directly enhance scores in tools like Google PageSpeed Insights.
• Reduced Bandwidth Usage: Especially beneficial for high-traffic websites or those on limited hosting plans.
• Improved User Experience: Faster media rendering leads to higher engagement and lower bounce rates.

Enable CSS Optimization

Enable this to start CSS optimiation. All css optimization like minification, critical css generation, custom css etc will show only when this option is turned on.

Combine Google fonts

The W3Speedster Plugin loads and combines all Google Fonts used on your site and loads it together preventing multiple requests. If critical css is generated, all required google fonts are loaded instantly and rest are lazyloaded ie. loads on user interaction. If you still want to load any font upfront and then you can write its css in custom css code section provided by the plugin.

Load Critical CSS

The W3Speedster Plugin generates Critical CSS which loads upfront and let all css files to load to user interaction enabling faster loading of the page.

Load Critical CSS in Style Tag

This option will load critical css in style tag instead of link tag. This option is not recommended for site with large page size. Implementing CDN will help a lot in speeding of site if this option is not enabled.

Start generating critical CSS

This feature creates critical CSS for your website to improve page load performance. Just click on the button, it will automatically crawl almost all the pages and create critical css on its own. Critical css generation is pretty fast like 10-15 mins but may take more time with site with thousand of pages. In the Free Version, critical CSS will be generated only for the homepage. With the Pro Version (activated license key), unlimited critical CSS can be generated for your entire site.

Load Style Tag in Head to Avoid CLS

This feature allows style tags to load in the head section, fixing the Cumulative Layout Shift (CLS) of the page. To use it, simply add the ID of each style tag in the provided box and save your changes. Ensure that each style tag ID is entered on a new line.

Enable Javascript Optimization

Enable this box to start JavaScript minification, a feature provided by the W3Speedster Plugin that optimizes your site's performance.

Lazyload Javascript

This option allows you to choose when to load JavaScript on your site. Enabling lazy loading for JavaScript can improve your site's initial loading speed by deferring the loading of JavaScript files until they are needed. Select "Yes" to enable lazy loading, or "No" to load JavaScript files immediately with the rest of your site's content. This helps balance performance and functionality based on your site's needs.

Load Javascript Inline Script as URL

Enter the matching text of the inline script URLs that you want to exclude from deferring JavaScript. Each exclusion should be entered on a new line. This allows you to specify which inline scripts should not be deferred, ensuring they load immediately to maintain essential functionality.

Preload Resources

If you want to preload resources such as images, CSS, JavaScript, or fonts, simply enter the complete URL of each resource in the 'Preload Resources' section. Each URL should be on a separate line. This ensures that the specified resources are loaded ahead of time, which can improve your site's performance.

Exclude Images from Lazy Loading

To prevent specific images from being lazy-loaded, you can exclude them by providing their URL, class name, ID, or alt attribute in the designated section. For example, you can enter "xyz.png" for a specific image or "nolazy" for images with a particular class name. This allows those images to load normally while others benefit from lazy loading.

Exclude Background Images from Lazy Loading

Enabling this option ensures that background images are excluded from lazy loading. This allows background images to load immediately, ensuring they are displayed without delay, which is especially important for maintaining visual consistency and providing a seamless user experience. This feature is ideal for pages where background images play a critical role in design or content presentation.

Exclude Link Tag CSS from Optimization

With the W3Speedster Plugin, you can exclude specific CSS files from lazy loading and minification by entering their URLs in the relevant section. For example, if you have a CSS file like xyz.css that you do not want to optimize, simply provide its URL to ensure it is left out of the optimization process.

Force Lazy Load Link Tag CSS

To optimize files that consume excessive data, you can use the W3Speedster Plugin to force lazy loading for those CSS files. For example, you might want to lazy load files like FontAwesome.css or Icons.css. This helps improve performance by delaying the loading of these large CSS files until they are needed.

Force Lazy Load Javascript

To improve performance, you can force lazy loading for JavaScript which takes a long time to load. Enter specific words, IDs from inline script tags, or parts of script URLs in the provided section. For example, you might use identifiers like "Facebook" or "Instagram" to target and lazy load those scripts. This helps reduce loading times and improves your performance score.

Exclude Javascript Tags from Lazyload

With the W3Speedster Plugin, you can exclude specific JavaScript files from lazy loading and minification by entering their URLs in the relevant section. For example, if you have a JavaScript file like xyz.js that you do not want to lazy load or minify, simply provide its URL. This ensures those scripts are loaded normally while other scripts benefit from optimization.

Exclude Inline JavaScript from Lazy Load

This feature allows you to exclude specific inline JavaScript from being lazy-loaded. For example, you might want to exclude scripts like ‘Google Analytics’ to ensure they load immediately and function correctly without delay. This helps maintain essential functionalities while still benefiting from lazy loading for other scripts.

Exclude Pages From Optimization

To exclude specific pages from optimization, simply enter their URLs in the designated section. For example, you can list pages like /cart or /login that you do not wish to optimize. This ensures that these pages are left out of the optimization process while the rest of your site benefits from performance improvements.

Exclude Pages from CSS Optimization

To exclude specific pages from CSS optimization, enter the URL or a part of the URL where you do not want the CSS optimization to be applied. List each URL or URL fragment on a separate line to ensure those pages are excluded from the optimization process.

Exclude Page from JavaScript Optimization

With the W3Speedster Plugin, you can exclude specific pages from JavaScript minification and lazy loading by entering the script URLs or parts of the script URLs. Simply list each URL or URL fragment on a separate line. This allows you to ensure that certain pages or scripts are not affected by the optimization process.

Custom CSS to Load on Page Load

If you wish to preload any custom CSS that should be applied immediately when the page loads, add it in this section without including the <style> tags. This CSS will only take effect when CSS optimization is enabled, ensuring that your custom styles are loaded efficiently along with the optimized CSS.

Custom JavaScript to Load on Page Load

If you wish to preload any JavaScript, add the code in this section without including the <script> tags. Enter the JavaScript code that needs to be loaded before the page fully loads. You have two options for loading:

• As File: Loads the script as a file.
• Defer: Defers loading of the script until after the initial page load.

Custom JavaScript to Load After Page Load

If you wish to load any JavaScript after the page has fully loaded or based on user interaction, add the code in this section without including the <script> tags. This JavaScript will be executed after the page load, ensuring it does not interfere with the initial rendering of the page. Enter the JavaScript code that should run post-page load in this section.

Delete JS/CSS Cache

The plugin lets you delete the combined and minified cache for JavaScript and CSS. This ensures that any changes made to your theme or plugin files are updated and reflected on your site.

Delete Critical CSS

The W3Speedster WordPress plugin allows you to delete Critical CSS. This should be done only when you make changes to the styles used in the upper part of your webpage. Deleting Critical CSS will clear the cache and require regeneration, which may take some time depending on the number of pages on your site.