w3-speedster-for-developers

Installing W3Speedster

CI3

1. Download the Package zip:
   • Download the zip provided on my account page of W3Speedster.
2. Installing:
   • Extract the zip file in the /project_root_directory/application/libraries directory.
3. Add the required files:
   • Then copy W3speedsterOptimizer.php and paste the file into the project_root_directory/application/hooks directory.
4. Config the package:
   • Then go to /project_root_directory/application/config directory find the hooks.php file and add the below code in the file
     $hook['post_controller'][] = [ 'class' => 'W3speedsterOptimizer', 'function' => 'after', 'filename' => 'W3speedsterOptimizer.php', 'filepath' => 'hooks', ];
     $hook['post_controller_constructor'][] = [ 'class' => 'W3speedsterOptimizer', 'function' => 'before', 'filename' => 'W3speedsterOptimizer.php', 'filepath' => 'hooks', ];
5. Verify Installation:
   • Run the Package to verify if everything is working fine.

CI4

1. Download the package zip:
   • Download the zip provided on my account page of W3Speedster.
2. Installing:
   • Extract the zip file in the project_root_directory/app/Libraries directory
3. Add the required files:
   • Copy the Filters/W3speedsterOptimizer.php and paste in the project_root_directory/app/Filters directory
4. Config the Package:
   • Then go to /project_root_directory/app/Config directory find the Filters.php file and add a new array item in the $aliases array
     public array $aliases = [ 'W3speedsterOptimizer' => W3speedsterOptimizer::class, ];
5. Verify Installation:
   • Run the Package to verify if everything is working fine.

Updating W3Speedster

CI3

CI4

Unistalling W3Speedster

CI3

1. Disable the Package:
   • Remove the Package from the /project_root_directory/application/libraries directory.
2. Remove the added files:
   • Remove the 'W3speedsterOptimizer.php' from the project_root_directory/application/hooks directory.
3. Comment the config:
   • Remove or comment the config line added while installing in hooks.php from the /project_root_directory/application/config directory
4. Test application:
   • Verify that your application works correctly without the plugin.

CI4

1. Disable the Package:
   • Remove the Package from the project_root_directory/app/Libraries directory:
2. Remove the added files:
   • Remove the 'Filters/W3speedsterOptimizer.php' from the project_root_directory/app/Filters directory.
3. Comment on the config:
   • Remove or comment on the config line added while installing in Filters.php from the /project_root_directory/app/Config directory.
4. Test application:
   • Verify that your application works correctly without the plugin.

What exactly does W3Speedster do?

W3Speedster is a WordPress performance optimization package with many features:

• CDN Integration
• HTML Caching
• 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

HTML Cache

HTML cache helps us to enable HTML minification, it servers cache via .htaccess and advanced cache files, preloading cache page per minute

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.

Hooks

You can write predefined custom PHP functions to perform the tasks mentioned above. This allows you to automate and customize various aspects of your site's optimization, such as loading resources, excluding elements from optimization, and managing caching. By using PHP, you can tailor these functionalities to fit your specific needs and ensure they are executed efficiently.

Enable HTML Caching

W3Speedster generates and stores static HTML versions of dynamic Website pages. These cached HTML files are served directly to visitors without executing PHP or MySQL queries, thereby reducing server load and speeding up page delivery.

• Upon the first request to a page, the plugin processes the page normally and generates a static HTML version.
• This HTML file is stored in the cache directory.
• Subsequent requests serve this static HTML file directly, bypassing the framework's core processing.

Enable Caching for Logged-in Users

W3Speedster enhances performance for authenticated users by enabling caching during logged-in sessions. This reduces the need to dynamically generate pages with each request:

• Upon login, the plugin continues to cache pages for authenticated sessions if caching for logged-in users is enabled.
• By default, many caching solutions disable this to avoid delivering personalized or sensitive data to unintended users. W3Speedster, however, offers the flexibility to allow it
• When a logged-in user performs an action such as publishing a post or updating their profile, the plugin automatically invalidates the associated cached HTML file. A new cache is then generated on the next request, ensuring users always receive the most recent content.
• For websites displaying role-based content (e.g., different layouts or access for subscribers and editors), W3Speedster supports per-role caching, serving role-specific HTML versions to preserve accuracy and personalization without sacrificing performance.

Serve HTML Cache File by

.htaccess: This option allows you to configure your server to serve HTML cache files directly using the .htaccess file. This method can improve page load times by delivering cached versions of your pages more efficiently. Advanced Cache File: The "Advanced Cache File" setting refers to additional configuration options for managing and optimizing cache files. This may include more granular control over caching rules, file expiration, or handling special cases to enhance performance and ensure proper cache management.

Enable Caching Page with GET Parameters

Feature:

This option enables the caching of pages that include GET parameters in their URLs (e.g., example.com/page?param=value).

Functionality:

• When enabled, W3Speedster generates and serves cached versions of pages based on unique GET parameter values.
• Enhances performance for dynamic and content-rich websites, such as:
  • E-commerce platforms
  • Blogs with filters or query-based navigation
  • Dynamic listing directories

W3Speedster Optimization:

• Handles parameter-based caching with precision to avoid excessive or inaccurate cache entries.
• Supports safe caching for parameter variations like:
  • ?utm_source=google
  • ?filter=color

Advantages:

• Maintains content accuracy while leveraging cache efficiency.
• Ensures quick delivery of parameterized pages.
• Prevents bypassing of cache for URLs that differ only by non-personalized query parameters.

Cache Expiry Time

Feature:

Cache Expiry Time, also known as Cache Lifetime, refers to the duration for which a cached HTML version of a page remains valid on the server before it is considered stale and needs to be refreshed or regenerated.

Functionality:

• W3Speedster allows you to configure the cache expiry duration manually.
• Set the duration in seconds (e.g., 3600 seconds = 1 hour).
• Cached HTML files are retained in the cache directory until the expiry time elapses.

W3Speedster Configuration:

• The default expiry time is set to 3600 seconds.
• This value can be adjusted based on:
  • Frequency of website content updates.
  • Desired balance between performance and data freshness.

Advantages:

• Ensures cached pages are served quickly, reducing load time.
• Automatically refreshes outdated cache, keeping content current.
• Provides a customizable approach to cache management tailored to dynamic or static sites.

Separate Cache for Mobile

Feature:

Enables separate caching and optimized content delivery for mobile and desktop users.

Functionality:

• W3Speedster analyzes the User-Agent string from the request header to detect the device type.
• Based on the detection:
  • A dedicated static HTML cache file is generated for desktop users.
  • A separate static HTML cache file is generated for mobile users.

Caching Process:

• Device type is identified server-side before PHP execution.
• The appropriate cached HTML file (mobile or desktop) is served according to the detected device type.

Advantages:

• Ensures optimized performance and layout delivery for different device types.
• Reduces load time by avoiding redundant content generation.
• Improves user experience by serving content specifically tailored for mobile or desktop use cases.

Clear Cache when Page or Post is Updated

Feature:

Ensures cached content stays synchronized with updates to your website.

Functionality:

• When a page, post, or custom post type is updated, published, or deleted, W3Speedster:
  • Automatically removes the corresponding cached HTML file.
  • Generates and stores a fresh cache version upon the next visit.

Extended Cache Clearing:

W3Speedster also clears associated cache files to maintain content consistency:

• Archive pages (e.g., /blog, /category/news)
• Paginated lists affected by content updates
• Homepage, if the updated content appears in recent posts

Advantages:

• Prevents outdated content, summaries, or thumbnails from being displayed.
• Ensures site-wide consistency and content freshness.
• Enhances user experience and site reliability without manual intervention.

Preload Caching

Feature:

Proactively generates static HTML cache files before user requests, improving performance from the first visit.

Functionality:

• W3Speedster automatically crawls and stores static versions of pages in advance.
• Cache generation is scheduled or triggered based on predefined criteria.

How It Differs from Traditional Caching:

• Traditional caching: Generated only on the first user visit, which involves PHP execution and database queries.
• Preload caching: Cache is pre-warmed, eliminating delays for first-time users.

Advantages:

• Instant page load for first-time visitors.
• Improved Time to First Byte (TTFB).
• Reduced server load during peak traffic.
• Better SEO, as search engines receive faster responses.

Preload Page Caching Per Minute

Feature:

Automatically refreshes cached versions of pages at set intervals to maintain content freshness and fast load times.

Functionality:

• W3Speedster supports configurable cache preloading intervals (e.g., every minute).
• Designed for high-traffic or frequently updated sites, such as news portals or live data platforms.

How It Works:

• Automatic Page Preloading: W3Speedster crawls and regenerates cached pages at fixed intervals, even if the page hasn’t been visited recently.

Benefits:

• Fresh content for first-time visitors: Ensures visitors always access the latest version of the site.
• Improved accuracy: Prevents outdated cache delivery, maintaining content relevance.
• Reduced server load: Keeps cache populated, minimizing PHP/database processing.
• SEO boost: Search engines crawl the most recent content, improving indexing and ranking.

Use Case:

• Ideal for sites with dynamic or real-time content, ensuring accuracy without sacrificing performance.

Enable leverage browsing cache

Feature:

Caches static resources in a visitor's browser to speed up page load times and reduce server load.

Functionality:

• Automatic Cache Control Headers: W3Speedster adds the necessary cache control headers to store static resources (like images, CSS, JS) in the browser cache for a specified duration.
• Optimized Server Configuration: Configures the server to support local caching without manual intervention.

Benefits:

• Faster Page Loads for Returning Visitors: Resources are served from the browser cache, improving load times on subsequent visits.
• Reduced Bandwidth Usage and Server Load: Less server data is transferred, minimizing bandwidth and reducing server load.
• Improved User Experience: Visitors enjoy quicker access to content, especially on repeat visits.
• Enhanced SEO Performance: Faster load times improve search engine rankings, boosting visibility.

Outcome:

• W3Speedster enhances both user experience and SEO performance by implementing leverage browser caching automatically, ensuring efficient content delivery and reduced load on the server.

Enable Gzip compression

Feature:

Reduces the size of files transferred between the server and the visitor’s browser to improve page load times and reduce bandwidth usage.

Functionality:

• Automatic Gzip Compression: When enabled, W3Speedster automatically compresses text-based resources (HTML, CSS, JavaScript, JSON) before they are sent to the browser.
• Requires Apache Server: This feature works only on servers running Apache.
• Compression via .htaccess: Files are compressed before being transmitted, and the browser automatically decompresses them for display.

Benefits:

• Faster Content Delivery: Reduces file sizes, leading to quicker load times for visitors.
• Lower Bandwidth Consumption: Decreases the amount of data transferred, helping to save bandwidth.
• Improved Page Load Speed and SEO Rankings: Faster page load speeds enhance user experience and can improve search engine rankings.

Outcome:

• W3Speedster simplifies enabling Gzip compression, resulting in faster page loads, reduced server load, and better resource efficiency.

Remove query parameters

Feature:

Improves caching and performance by removing unnecessary query parameters from file URLs.

Functionality:

• Interception of File Requests: W3Speedster intercepts browser requests for CSS and JavaScript files.
• URL Normalization: Strips out query parameters (e.g., ?ver=5.7.1) from the file URLs.
• Optimized File Delivery: The resource is served from the cache or CDN without query parameters, improving caching efficiency.

Benefits:

• Enhanced Browser and CDN Caching: Files are easier to cache by browsers and CDNs, leading to faster load times.
• Improved Performance: Reduces redundant requests and minimizes server load, improving site speed.
• Better SEO: Prevents search engines from indexing the same file with different query parameters, avoiding duplicated resources.

Outcome:

• By removing query parameters, W3Speedster optimizes the caching process, reduces network traffic, and boosts overall site performance.

Cache Path

Feature

Defines the location on your server where cached files (static HTML, JavaScript, CSS, etc.) are stored for improved performance.

Default Behavior:

• Cache Path Management: W3Speedster automatically manages the cache path.
• Default Location: Cached files are stored in the wp-content/cache folder.

Custom Cache Path

• Customizable Option: W3Speedster allows you to specify a custom cache path by providing the full directory path.
• Use Case: Useful for storing cached files in different directories or environments (e.g., separate subdomains or servers).

Benefits

• Improved Organization: Store cached files where it best suits your site setup.
• Enhanced Performance Optimization: Better management of cache storage locations can improve server and site performance.

Outcome:

• W3Speedster offers flexibility by supporting both default and custom cache paths, allowing tailored caching setups to meet specific site needs.

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.

Convert to WebP

Feature:

The “Convert to WebP” feature in W3Speedster allows automatic conversion of JPG and PNG images into the WebP format — a modern, high-efficiency image format developed by Google. WebP delivers significant compression advantages while maintaining visual quality, resulting in faster page loads and lower bandwidth consumption without compromising user experience.

Why We Need It

• Improved Performance: WebP images are up to 30% smaller than their JPG/PNG counterparts, which leads to faster loading, especially on mobile or slow networks.
• Better SEO & Core Web Vitals: Optimized images directly enhance metrics such as Largest Contentful Paint (LCP), contributing to higher PageSpeed Insights scores and better SEO rankings.
• Bandwidth Efficiency: Smaller image sizes reduce server-side bandwidth usage and associated hosting costs.
• Browser Compatibility: WebP is fully supported by all major modern browsers, making it safe for use in live environments.

How It Works in W3Speedster

• Navigate to Dashboard > W3Speedster > Image Optimization.
• Enable the “Convert to WebP” option.
• Start the Image Optimization process.

Once enabled, W3Speedster will:

• Scan the media library for .jpg and .png files.
• Generate .webp for each.
• Automatically serve .webp images to compatible browsers.
• Use fallback formats (original JPG/PNG) for browsers that don’t support WebP.

Note: This process does not overwrite your original files unless you explicitly choose to do so.

Benefits

• Image File Size Reduction: Reduces image sizes by up to 30%, resulting in leaner, more efficient web pages.
• Faster Page Load Speeds: Smaller assets contribute to quicker load times and improved user engagement.
• Lower Bandwidth Usage: Efficient image delivery means reduced data transfer for both the server and the user.
• High Visual Quality: Maintains near-original image clarity despite compression.
• Enhanced SEO & Core Web Vitals: Supports better LCP scores and PageSpeed ratings, improving visibility and performance in search engines.
• Graceful Fallback Support: Ensures backward compatibility by serving original image formats to unsupported browsers.

Notes

• Confirm that your server supports WebP delivery (via .htaccess or server configuration).
• For optimal results, use in combination with:
  • Lazy loading
  • Browser caching
  • Image resizing

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 Lazy Load

Feature:

The Enable Lazy Load feature in W3Speedster defers the loading of images and other non-critical media elements until they are about to enter the user’s viewport. Instead of loading all visual assets (Images, Audio, Video, and Iframe) at once, this approach prioritizes above-the-fold content, leading to significantly faster initial page rendering and optimized server resource usage.

Why This Setting Matters

• Improve Initial Page Load Time: Media below the fold is not fetched during initial page load, allowing users to begin interacting with the page faster.
• Reduce Bandwidth Usage: Assets that are never viewed by the user are not loaded, conserving both server and user data.
• Enhance Mobile Performance: Particularly beneficial for mobile users on slower networks or devices with limited memory and processing power.
• Better SEO and Core Web Vitals: Improves key performance metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP), which directly influence Google PageSpeed scores and search engine rankings.

How It Works

• When the Lazy Load feature is enabled:
  • The plugin modifies “<img> and other media tags by adding the ‘loading="lazy"’ attribute.
  • Non-visible images are initially rendered as placeholders or empty containers.
  • As the user scrolls, W3Speedster detects which media elements are approaching the viewport and loads them on demand.
  • The lazy load logic is compatible with:
    • WebP images
    • Responsive image formats (<picture> and srcset)

Benefits

• Faster Initial Rendering – Prioritizes visible content to minimize perceived load time.
• Optimized Resource Utilization – Reduces unnecessary HTTP requests and server load.
• Improved Mobile UX – Loads only what’s needed, improving performance on mobile networks.
• Higher SEO Scores – Contributes positively to Core Web Vitals and improves Google rankings.
• Seamless Integration – Works well alongside other optimization techniques like WebP conversion and image resizing.

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 via wp-cron

Feature:

The “Optimize Images via wp-cron” setting in W3Speedster leverages WordPress’s built-in cron system to automatically optimize images in the background. This ensures ongoing performance improvements without burdening server resources or requiring manual action.

Why Enable This Feature?

• Automated Optimization: Eliminates the need for manual image processing by scheduling optimization tasks automatically.
• Server Resource Efficiency: Processes one image per minute, minimizing CPU and memory load—ideal for shared or resource-constrained hosting environments.
• Non-Disruptive Workflow: Operates asynchronously, allowing regular site usage and frontend performance to remain unaffected.

How It Works

• When enabled, the plugin integrates with wp-cron, WordPress’s internal task scheduler.
• It checks every minute for image attachments that have not yet been optimized.
• One image is processed per cycle, compressed, and converted as per your configured settings.
• This background process ensures continuous optimization without admin interaction.
• For faster processing (e.g., after uploading multiple images), you can manually trigger bulk optimization from the Image Optimization tab by clicking "Start Optimization".

Ideal Use Cases

• Sites with Large Media Libraries: Ensures steady, non-blocking optimization over time.
• Websites on Limited Hosting Plans: Prevents resource spikes that could lead to timeouts or slowdowns.
• Administrators Seeking Automation: Enables a hands-off workflow for managing image optimization continuously.

How to Enable

• Go to WordPress Dashboard > W3Speedster > Image Optimization
• Locate and enable “Optimize Images via wp-cron”
• Click Save Changes to activate automated background optimization

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.

Create Critical CSS via wp-cron

Enabling this option allows the plugin to generate critical CSS for your WordPress pages using WP-Cron. By leveraging WP-Cron, the plugin can systematically process each page, creating critical CSS at a controlled pace. This method ensures that server performance remains unaffected, as the CSS generation process is spread out over time

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 HTML caching

Excluding specific pages from HTML caching ensures that these pages are always fetched directly from the server rather than from a cache. This approach is particularly useful for pages with dynamic content that changes frequently, user-specific pages, and sections of your site that must always display the most current data.

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 HTML Cache

Delete the HTML cache whenever you make changes to your site to ensure that the latest updates are reflected. This helps maintain accurate and up-to-date content for your visitors.

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.

W3speedster Pre Start Optimization

function w3SpeedsterPreStartOptimization($html){
$html = str_replace('Existing content','Changed content',$html);
return $html;
}

function w3SpeedsterPreStartOptimization($html){
$html = str_replace('Existing content','Changed content',$html);
return $html;
}

W3speedster Before Start Optimization

function w3SpeedsterBeforeStartOptimization($html){
$html = str_replace(array(""),array(""), $html);
return $html;
}

function w3SpeedsterBeforeStartOptimization($html){
$html = str_replace(array(""),array(""), $html);
return $html;
}

W3speedster After Optimization

function w3SpeedsterAfterOptimization($html){
$html = str_replace(array('image.png'),array('image-100x100.png'), $html);
return $html;
}

function w3SpeedsterAfterOptimization($html){
$html = str_replace(array('image.png'),array('image-100x100.png'), $html);
return $html;
}

W3speedster Inner JS Customize

function w3SpeedsterInnerJsCustomize($script_text){
	if(strpos($script_text'//unique word from script//') !== false){
		$script_text = str_replace('jQuery(window)', 'jQuery(document)',$script_text);
	}
	return $script_text;
}

function w3SpeedsterInnerJsCustomize($script_text){
	if(strpos($script_text'//unique word from script//') !== false){
		$script_text = str_replace('jQuery(window)', 'jQuery(document)',$script_text);
	}
	return $script_text;
}

W3speedster Inner JS Exclude

function w3SpeedsterInnerJsExclude($exclude_js_bool,$inner_js){
	if(strpos($inner_js,'Script text') !== false){
		$exclude_js_bool= 1;
	}
return $exclude_js_bool;
}

function w3SpeedsterInnerJsExclude($exclude_js_bool,$inner_js){
	if(strpos($inner_js,'Script text') !== false){
		$exclude_js_bool= 1;
	}
return $exclude_js_bool;
}

W3speedster Internal JS Customize

function w3SpeedsterInternalJsCustomize($string,$path){
	if(strpos($path,'//js path//') !== false){
	$string = str_replace("jQuery(windw)", "jQuery(window)",$string);
	}
	return $string;
}

function w3SpeedsterInternalJsCustomize($string,$path){
	if(strpos($path,'//js path//') !== false){
	$string = str_replace("jQuery(windw)", "jQuery(window)",$string);
	}
	return $string;
}

W3speedster Internal Css Customize

function w3SpeedsterInternalCssCustomize($css,$path){
	if(strpos($path,' //cssPath // ') !== false){
		$css = str_replace(' ',' ',$css);
	}
	return $css;
}

function w3SpeedsterInternalCssCustomize($css,$path){
	if(strpos($path,' //cssPath // ') !== false){
		$css = str_replace(' ',' ',$css);
	}
	return $css;
}

W3speedster Internal Css Minify

function w3SpeedsterInternalCssMinify($path,$css,$css_minify){
if(strpos($path,'//cssPath//') !== false){
	$css_minify = 0;
}
return $css_minify ;
}

function w3SpeedsterInternalCssMinify($path,$css,$css_minify){
if(strpos($path,'//cssPath//') !== false){
	$css_minify = 0;
}
return $css_minify ;
}

W3speedster No Critical Css

function w3SpeedsterNoCriticalCss($url, $ignore_critical_css){
if(strpos($url,'/path/') !==false) {
	$ignore_critical_css = 1;
}	
return $ignore_critical_css;
}

function w3SpeedsterNoCriticalCss($url, $ignore_critical_css){
if(strpos($url,'/path/') !==false) {
	$ignore_critical_css = 1;
}	
return $ignore_critical_css;
}

W3speedster Customize Critical Css

function w3SpeedsterCustomizeCriticalCss($critical_css){
$critical_css = str_replace('@font-face { font-family:"Courgette";', ' ',$critical_css);
	return $critical_css;
}

function w3SpeedsterCustomizeCriticalCss($critical_css){
$critical_css = str_replace('@font-face { font-family:"Courgette";', ' ',$critical_css);
	return $critical_css;
}

W3speedster Disable Htaccess Webp

function w3SpeedsterDisableHtaccessWebp($disable_htaccess_webp){
	$disable_htaccess_webp = 1
return $disable_htaccess_webp;
}

function w3SpeedsterDisableHtaccessWebp($disable_htaccess_webp){
	$disable_htaccess_webp = 1
return $disable_htaccess_webp;
}

W3speedster Customize Add Settings

function w3SpeedsterCustomizeAddSettings($add_settings){
$add_settings = str_replace(array(“mob.css”),array(“mobile.css”), $add_settings);
	return $add_settings;
}

function w3SpeedsterCustomizeAddSettings($add_settings){
$add_settings = str_replace(array(“mob.css”),array(“mobile.css”), $add_settings);
	return $add_settings;
}

W3speedster Customize Main Settings

function w3SpeedsterCustomizeMainSettings($settings){
	$settings['setting_name'] = value;
return $settings;
}

function w3SpeedsterCustomizeMainSettings($settings){
	$settings['setting_name'] = value;
return $settings;
}

W3speedster Seprate Critical Css For Post Type

function w3SpeedsterCreateSeprateCssOfPostType($separate_post_css){
	$separate_post_css = array('page','post','product');
    return $separate_post_css;
}

function w3SpeedsterCreateSeprateCssOfPostType($separate_post_css){
	$separate_post_css = array('page','post','product');
    return $separate_post_css;
}

W3speedster Seprate Critical Css For Category

function W3speedsterCriticalCssOfCategory($separate_cat_css){
	$separate_cat_css = array('category','tag','custom-category');
   return $separate_cat_css;
}

function W3speedsterCriticalCssOfCategory($separate_cat_css){
	$separate_cat_css = array('category','tag','custom-category');
   return $separate_cat_css;
}

W3speedster Change Video To Videolazy

function w3SpeedsterVideoToVideoLazy($videolazy){
	$videolazy= 1;
	return $videolazy;
}

function w3SpeedsterVideoToVideoLazy($videolazy){
	$videolazy= 1;
	return $videolazy;
}

W3speedster Change Iframe To Iframlazy

function w3SpeedsterIframetoIframelazy($iframelazy){
	$iframelazy = 1;
	return $iframelazy;
}

function w3SpeedsterIframetoIframelazy($iframelazy){
	$iframelazy = 1;
	return $iframelazy;
}

W3speedster Exclude Image To Lazyload

function w3SpeedsterExcludeImageToLazyload($exclude_image,$img, $imgnn_arr){
   if(!empty($img) && strpos($img,'logo.png') !== false){
	   $exclude_image = 1
   }
   return $exclude_image;
}

function w3SpeedsterExcludeImageToLazyload($exclude_image,$img, $imgnn_arr){
   if(!empty($img) && strpos($img,'logo.png') !== false){
	   $exclude_image = 1
   }
   return $exclude_image;
}

W3speedster Customize Image

function w3SpeedsterCustomizeImage($imgnn,$img,$imgnn_arr){
	if(strpos($imgnn,'alt') != false){
		$imgnn = str_replace('alt=""','alt="value"',$imgnn);
	}
	return $imgnn;
}

function w3SpeedsterCustomizeImage($imgnn,$img,$imgnn_arr){
	if(strpos($imgnn,'alt') != false){
		$imgnn = str_replace('alt=""','alt="value"',$imgnn);
	}
	return $imgnn;
}

W3speedster Prevent Htaccess Generation

function w3SpeedsterPreventHtaccessGeneration($preventHtaccess){
	$preventHtaccess = 1;
   return $preventHtaccess;
}

function w3SpeedsterPreventHtaccessGeneration($preventHtaccess){
	$preventHtaccess = 1;
   return $preventHtaccess;
}

W3speedster Exclude CSS Filter

function W3SpeedsterExcludeCssFilter($exclude_css,$css_obj,$css,$html){
	if(wp_is_mobile()){
		if(strpos($css,'style.css') !== false){
			$exclude_css = 1 ;
		}
	}
	return $exclude_css;
}

function W3SpeedsterExcludeCssFilter($exclude_css,$css_obj,$css,$html){
	if(wp_is_mobile()){
		if(strpos($css,'style.css') !== false){
			$exclude_css = 1 ;
		}
	}
	return $exclude_css;
}

W3speedster Customize Force Lazyload Css

function w3SpeedsterCustomizeForceLazyCss($force_lazyload_css){
   array_push($force_lazyload_css ,'/fire-css');
   return $force_lazyload_css;
}

function w3SpeedsterCustomizeForceLazyCss($force_lazyload_css){
   array_push($force_lazyload_css ,'/fire-css');
   return $force_lazyload_css;
}

W3speedster External Javascript Customize

function W3SpeedsterExternalJavascriptCustomize($script_obj, $script){
if(strpos($script,'//text//') !== false){
	$script = str_replace(' ',' ',$script)
}
return $script_obj;
}

function W3SpeedsterExternalJavascriptCustomize($script_obj, $script){
if(strpos($script,'//text//') !== false){
	$script = str_replace(' ',' ',$script)
}
return $script_obj;
}

W3speedster External Javascript Filter

function W3SpeedsterExternalJavascriptFilter($exclude_js,$script_obj,$script,$html){
	if(wp_is_mobile()){
		if(strpos($script,'jquery-core-js') !== false || strpos($script,'/revslider/') !== false){
			$exclude_js = 1 ;
		}
	}
	return $exclude_js;
}

function W3SpeedsterExternalJavascriptFilter($exclude_js,$script_obj,$script,$html){
	if(wp_is_mobile()){
		if(strpos($script,'jquery-core-js') !== false || strpos($script,'/revslider/') !== false){
			$exclude_js = 1 ;
		}
	}
	return $exclude_js;
}

W3speedster Customize Script Object

function W3SpeedsterCustomizeScriptObject($script_obj, $script){
// your code
return $script_obj;
}

function W3SpeedsterCustomizeScriptObject($script_obj, $script){
// your code
return $script_obj;
}

W3speedster Exclude Internal Js W3 Changes

function W3SpeedsterExcludeInternalJsW3Changes($exclude_from_w3_changes,$string,$path){
   if(strpos($path,'//js path//') !== false){
	$exclude_from_w3_changes = 1;
   }
   return $exclude_from_w3_changes;
}

function W3SpeedsterExcludeInternalJsW3Changes($exclude_from_w3_changes,$string,$path){
   if(strpos($path,'//js path//') !== false){
	$exclude_from_w3_changes = 1;
   }
   return $exclude_from_w3_changes;
}

W3speedster Exclude Page Optimization

function W3SpeedsterExcludePageOptimization($html,$exclude_page_optimization){
   if(!empty($_REQUEST['//Path//'])){
	$exclude_page_optimization = 1;
   }
   return $exclude_page_optimization;
}

function W3SpeedsterExcludePageOptimization($html,$exclude_page_optimization){
   if(!empty($_REQUEST['//Path//'])){
	$exclude_page_optimization = 1;
   }
   return $exclude_page_optimization;
}

W3speedster Customize Critical Css File Name

function W3SpeedsterCustomizeCriticalCssFileName($file_name){
$file_name = str_replace(' ',' ',$file_name);
	return $file_name;
}

function W3SpeedsterCustomizeCriticalCssFileName($file_name){
$file_name = str_replace(' ',' ',$file_name);
	return $file_name;
}

Import Settings

To import settings into the W3Speedster Plugin, enter the exported JSON code from the plugin's import/export page. This allows you to apply previously saved configuration settings to your current setup, ensuring consistency and saving time when transferring settings between different sites or environments.

Export Settings

To export your settings, copy the code provided on the W3Speedster Plugin’s export page and save it in a file. This allows you to back up your configuration or transfer it to another site, ensuring that your settings can be easily restored or applied in the future.