Getting Started
Getting Started
Introduction
Installing W3Speedster
There are two W3Speedster installation options: Automatic or Manual.
Download W3Speedster
Once you have bought W3Speedster, you can download the zip file from your W3Speedster account page. or to use free version you can download it from plugins option in your Dashboard
Disable Automatic Un-Zipping in Safari
If you want to use the Automatic Installation method for W3Speedster, ie. installing the plugin through your WordPress dashboard, you need to start with the zip file of the plugin. If you use Safari, it might be unzipping it for you which causes confusion.
Go to Safari > Preferences and un-check the box labeled ‘Open “safe” files after downloading’:
Now you can download the zip file normally and proceed with the installation.
Automatic Installation
Automatic installation is the easiest way to install W3Speedster.
To do it, log in to your WordPress admin panel and go to Plugin > Add New and click on Upload Plugin. Or just search for w3speedster and click on install.
Select the zip file and click on Install Now. After clicking that link, you will be asked if you are sure you want to install the plugin. Click yes and WordPress will automatically complete the installation process.
Once it’s activated, simply go to the W3speedster panel.
Manual Installation
The manual installation involves uploading all the files to your web server through FTP software. Unzip the archive, then upload the ‘w3speedster’ folder to “wp content/plugins” directory. Finally activate the plugin through your WordPress admin.
Once it’s activated, simply go to the W3speedster panel.
Updating W3Speedster
There are two ways to update W3Speedster: automatic and manual. Remember, if your license has expired, you can renew it on your account page.
Automatic update
Go to the Plugins page in the WordPress Dashboard (that’s {your site URL}/wp-admin/plugins.php)
Find the update notification below the W3Speedster entry, and click ‘Update Now’:
If you don’t see any update notification, you can try it a few hours later.
In your WordPress admin go to Dashboard > Updates and click ‘Check Again’. In some cases, this will cause the notice to appear.
If you still don’t see any update notification, your server may be blocking the requests to our update system, so you should use the manual update instead.
Manual Update
There are two possible ways to update W3Speedster manually.
Update via FTP
- Go to your account and download the latest version of W3Speedster
- Unzip the archive and then upload the ‘w3speedster’ folder to ‘wp-content/plugins’ directory
Update via WP Admin
Once you have downloaded W3Speedster from your account page, log in to WordPress Admin Dashboard of your website and follow these steps:
- Go to the Plugins page, deactivate and delete W3Speedster.
- Go to Plugins > Add new > Upload, upload the new .zip file, and activate your new W3Speedster version.
Update notification is missing
In some cases, you won’t see the update notification for W3Speedster in your WordPress admin panel at all. Luckily, there is a way to force the update notification of W3Speedster.
Visit the Plugins page in WordPress, and add the following query string to the end of the URL:
So it looks like this, with example.com representing your domain here:
Scrolling down to the W3Speedster plugin entry, you should see an update notification now.
Getting Started with W3Speedster
The first thing you’ll want to do once you’ve activated W3Speedster is:
Run an ON/OFF test with W3Speedster’s default settings, and see how much faster your site has become already!
You’ll be able to see the improvement in loading time W3Speedster has achieved just by running in its default configuration. If you have advanced knowledge about how the rendering of a website works in the browser, you can start to further optimize your setup based on recommendations from performance testing tools like GTmetrix, Pingdom Tools, or Google Developers PageSpeed Insights. If you find that your results vary with these tools then it is best to use one tool, consecutively test your website 3 times and take the average of the results.
Are there any recommended settings for W3Speedster?
There isn’t one recommended configuration of W3Speedster that can be used on every site. Themes, plugins, and hosting environments can vary greatly. Therefore, some settings will work differently on different websites.
There are even settings like File optimization that will work perfectly fine on one website, but won’t work at all on another. So sometimes leaving a setting entirely disabled can be your best bet! On the other hand, a number of key features—like CSS Minification, JS Minification, and WebP support are completely automated; you just have to check them and they’ll quietly work their magic under the hood and make your site faster without you having to move a finger.
Automated features
The following features are fully automated in W3Speedster:
- HTML Caching
- Enabling WebP support
- Image Quality control
- Lazy Loading
- CSS Minification
- JS Minification
- Combining of inline and 3rd party scripts
- Combining Google Fonts
Settings panes
Looking for a specific setting? Here’s a quick overview of where’s what in W3Speedster:
HTML Cache
- HTML caching
- Minify HTML
- Cache Preload
- URL Exclusion
‘General’ Tab
- License Key
- CDN URL
- CDN Exclusion
- Leverage Browsing Cache
- Gzip Compression
- Query parameter
- INP Issues
- Cache Path
‘CSS’ Tab
- CSS Minification
- Combine Google Fonts
- Critical Css
- CLS Fixes
‘JavaScript’ Tab
- JavaScript Minification
- Combine (concatenate) JavaScript
- Load URL
‘Exclusion’ Tab
- JavaScript Minification
- Preload Resources
- Exclude Image
- Exclude Pages
- Exclude CSS
- Lazy Load
- Exclude JS
Custom Code
- Custom Css and JS Code
‘Cache’ tab
- HTML Cache
- CSS/JS Cache
- Critical CSS Cache
Image Settings
- Image Optimization
- Image Size Adjustment
- Lazy Loading
- WebP Support
- Image Quality Control
‘Hooks’ Tab
- Predefined PHP function
‘Web Vitals Log’ Tab
- Core Web Vitals Log
Can’t upload/install W3Speedster
There are two ways to update W3Speedster: automatic and manual. Remember, if your license has expired, you can renew it on your account page.
This message means there is a limit on the file size you can upload to your site. This limitation may be set at the site level or by your host. The W3Speedster zip file is just over 2MB so if the limit for your site is 2MB or less you would see this error message.
Quick Fix
To resolve it automatically, install the plugin Increase Max Upload Filesize:
https://wordpress.org/plugins/upload-max-file-size/
If that plugin is not able to fix it automatically, you have the following options:
- You can install W3Speedster by uploading it via FTP.
- Contact your host to increase the upload limit.
- Or, if you’re comfortable editing files you can follow the manual steps below to manually increase the upload limit.
Manual Fix
How to increase the upload_max_filesize limit
It’s possible to increase the defined limit by using one of the directives below. Depending on your server setup and host, the method that works could vary from case to case. You don’t have to edit all these files, just find the one that works for your site.
In each example below, “10M” represents a 10MB file size limit. You may set that number as you wish, but be sensible and don’t set it too high.
Make sure you take a backup of your files before editing them!
.htaccess
php.ini file
If your host allows you to modify your site’s configuration with a custom php.ini file, you may use the following:
wp-config.php
functions.php
If you use a child theme, you may add the following to the functions file:
Check your current upload limit
To verify if your attempt to increase the upload limit was successful you can check the current limit.
Go to: Media > Add New
Underneath the upload area, you will see: Maximum upload file size
After implementing one of the above methods, if the limit hasn’t changed it means your host is controlling this and you’ll have to contact them directly.
What exactly does W3Speedster do?
W3Speedster is a WordPress performance optimization plugin 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
Uninstalling W3Speedster
W3Speedster can be uninstalled in two ways: from the plugins page in WordPress admin, and manually through FTP/File Manager.
From WordPress admin
You can uninstall W3Speedster as any other plugin from the WordPress admin Dashboard. W3Speedster will clean up after itself automatically, removing any files/folders and modifications (in the .htaccess or wp-config.php files for example).
Manually
If you manually remove W3Speedster from the plugins folder in /wp-content/plugins/, you will also have to handle the cleaning yourself. Here is a list of things to remove/edit:
- Delete the /wp-content/cache/ and /wp-content/w3-speedster-config/ folders
- Delete the /wp-content/advanced-cache.php file
- Edit the .htaccess file, removing anything between #BEGIN W3SPEEDSTERand #END W3SPEEDSTER
- Edit the wp-config.php file, setting the define(‘WP_CACHE’, true) to false or removing the line
- Delete the w3speedster_settings entry, and the transients and cronjob in the WordPress options table of your Database
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?”
Every site has a different theme, a different set of plugins, and different content. So the best settings will vary from site to site. In this article, you’ll learn the safest way to experiment with the most commonly used W3Speedster settings. The goal is always to make your site faster. And activating more options doesn’t always result in more speed. So don’t worry if you’re not able to turn everything on. To check if your site is faster, you should use a tool that tests load times. You can make use of tools like GTmetrix, Pingdom Tools, or Google Developers PageSpeed Insights to test the load times of your website and get a detailed report. It’s a good idea to take some benchmark speed tests before you begin configuration, then again after you’re done applying optimizationsBest 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.
You can also enable automatic optimization of images when uploaded and exclude images from optimization if you want to.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.
HTML Cache
Enable HTML Caching
Turning on HTML caching allows the W3Speedster Plugin to store and reuse static versions of your web pages. This reduces the need for generating pages dynamically each time they are requested, resulting in faster page load times and reduced server load. It is especially useful for improving performance and efficiency on high-traffic sites.
Enable Caching for Logged-in Users
Enabling this option allows caching of pages for users who are logged in. This can help improve performance for logged-in users by reducing the time it takes to generate pages dynamically. However, it’s important to ensure that the caching setup properly handles personalized content to avoid displaying incorrect or outdated information to users.
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
This option allows caching of pages that include GET parameters in their URLs. By enabling this, your server will cache and serve different versions of the page based on the parameters provided in the URL, such as example.com/page?param=value. This can improve performance by reusing cached versions for requests with the same parameters, but it’s important to ensure that caching is properly managed to handle dynamic content variations and avoid serving incorrect data.
Minify HTML
Enabling HTML minification reduces the size of your HTML files by removing unnecessary characters, such as whitespace, comments, and line breaks, without affecting the functionality or appearance of the content. This results in faster page load times and improved site performance by decreasing the amount of data that needs to be transferred between the server and the user's browser.
Cache Expiry Time
Set the time for cache expiry by entering a value in seconds. The default expiry time is 3600 seconds (1 hour). This determines how long cached content is stored before it is refreshed or cleared. Adjust this setting based on how frequently your content changes and your performance needs.
Separate Cache for Mobile
Enabling this option allows you to create and manage separate cache files for mobile users. This ensures that mobile-specific versions of your pages are cached and served separately from the desktop versions. This can improve performance and user experience by optimizing content and layout specifically for mobile devices.
Preload Caching
Preload caching involves generating and storing cached versions of your pages or resources before they are requested by users. This proactive approach ensures that cached content is available and served quickly when users access your site, improving page load times and overall performance. Preloading can be scheduled or triggered based on specific criteria, helping to optimize your site’s efficiency.
Preload Page Caching Per Minute
This feature allows you to automatically generate and update cached versions of your pages at regular intervals, such as every minute. By preloading page caching at these intervals, you ensure that the cached content remains fresh and up-to-date, providing users with the most current version of your site while maintaining fast load times. This approach helps balance performance with content accuracy.
URI/URL Exclusions
URI/URL exclusions allow you to specify certain URIs or URLs that should be excluded from caching processes. By listing these URIs or URLs, you can ensure that specific pages, resources, or sections of your site are not affected by caching rules. This can be useful for managing dynamic content, ensuring that personalized or sensitive information is always up-to-date, or preventing caching issues with certain areas of your site.
General Settings
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.
Turn On Optimization
When you turn on this field, the W3Speedster Plugin will optimize your site by applying all the optimization settings.
Optimize pages with Query parameters
This enables the optimization to be shown on the pages with query parameters when the optimization is live. It is recommended only for servers with high performance.
Optimize pages when User Logged In
Enabling this option will optimize pages even when a user is logged in. Use this feature with caution, as it may affect the performance of dynamic or personalized content for logged-in users. Ensure that the optimization does not interfere with user-specific functionalities or content.
Separate javascript and CSS cache for mobile
This will create separate JavaScript and CSS cache for mobile i.e., separate Critical CSS for Mobile and desktop.
CDN URL
Enter the CDN (Content Delivery Network) URL that you have purchased for your site. This URL will be used to serve static assets like images, CSS, and JavaScript files, helping to improve your site's performance and load times by distributing content across multiple servers.
Exclude file extensions from cdn
During the implementation of the CDN, our plugin provides a section to exclude the specific extensions so that the work of the plugin is not hampered, for instance, excluding ‘Font Extensions’ like (.woff, .ttf, .eot, .woff2).
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/’.
Enable leverage browsing cache
Our plugin also provides smart automatic functionality to enable leverage browser cache on your site, the plugin has an in-built response to the leverage cache, which it automatically implements in your site.
Enable Gzip compression
Our plugin offers an automatic feature to enable Gzip compression on your site. When activated, it compresses your site's files to reduce their size and improve load times. This functionality is implemented automatically but will only work on servers running Apache.
Remove query parameters
Our plugin also provides smart automatic functionality to remove Query Parameters from CSS & JS on your site, it automatically gets implemented in your site.
Fix INP Issues
"Fix INP Issues" refers to addressing problems related to the "Interactive Next Paint" metric. By enabling this feature, you can resolve issues identified in Google PageSpeed Insights and/or Google Search Console related to the time it takes for your site to become fully interactive. This helps improve your website's performance and user experience.
Cache Path
The cache of the W3Speedster Plugin is automatically generated inside the cache folder of the WP Content Folder and if you wish to change the path you can change it by putting the full path in this section.
CSS Optimization
Enable CSS Optimization
Enable this to start CSS minification, a feature provided by the W3Speedster Plugin, which helps optimize your site's performance.
Combine Google fonts
The W3Speedster Plugin loads and combines all Google Fonts used on your site, enhancing its performance and reducing load times.
Load Critical CSS
The W3Speedster Plugin generates Critical CSS and loads it in a .css file, improving your site's loading speed and performance.
Load Critical CSS in Style Tag
The W3Speedster Plugin loads Critical CSS directly in a style tag instead of a separate CSS file, improving your site's loading speed.
Start generating critical CSS
This feature creates critical CSS for your website to improve page load performance. To use it, follow these steps:
- Crawl through all the pages of your site.
- Clear all WordPress cache, including server and CDN caches.
- Click on "Create Critical CSS Now."
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.
Javascript Optimization
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.
Exclusions
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 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 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.
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.
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 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 Code
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.
Cache
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.
Image Optimization
Optimize JPG/PNG Images
Enable image optimization by clicking the button. Once activated, images will be optimized in the background through wp-cron, provided the ‘Optimize Images via wp-cron’ option is enabled. This process helps improve your site’s performance by compressing images without losing quality.
JPG/PNG Image Quality
The W3Speedster Plugin maintains a standard image quality of 90% to preserve the clarity of your images. However, you can adjust this setting to meet your preferences, balancing image quality with file size according to your needs.
Convert to WebP
This feature will convert and render your 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 and PNG images, enhancing your site’s performance
WebP Image Quality
The W3Speedster Plugin uses a standard quality of 90% for WebP images to maintain their clarity. You can adjust this setting to suit your needs, balancing image quality with file size.
Enable Lazy Load
The W3Speedster Plugin allows you to lazy load four types of resources that can delay site loading time: Images, Iframes, Videos, and Audio. By enabling this feature, these resources will be loaded only when needed, improving your site's performance and load times.
Pixels to Load Resources Below the Viewport
The W3Speedster Plugin defaults to starting the loading of resources such as images, videos, iframes, background images, and audio when they are 200 pixels below the viewport. You can adjust this setting to start loading these resources earlier, so they appear more quickly as you scroll. For example, you can enter a value like 200 to set the distance from the viewport where loading begins.
Load SVG Inline Tag as URL
Load SVGs as URLs instead of inline tags to avoid creating large DOM elements. This approach helps improve performance by reducing the size of the DOM and simplifying your page structure.
Optimize Images via wp-cron
Enabling this option allows images to be optimized using wp-cron. The plugin will optimize one image attachment per minute to ensure that server performance remains unaffected. If you need faster optimization, click the "Start Optimization" button in the 'Image Optimization' tab to accelerate the process.
Optimize Images on the Go
This feature automatically optimizes images as site pages are crawled. The W3Speedster Plugin captures unconverted and unoptimized images when you visit a page and optimizes them in the background. This ensures that all images used on the site are prioritized for optimization. However, it is recommended to turn off this feature after the initial crawl and optimization to prevent unnecessary server load.
Automatically Optimize Images on Upload
This feature automatically optimizes and converts new images to WebP format as soon as they are uploaded. If you notice that image uploads are taking longer than expected, you may want to turn off this feature. Ensure that the settings for image optimization and WebP conversion are also enabled to use this feature effectively.
Responsive Images
The W3Speedster Plugin creates responsive images that adjust the background image of your webpage based on the user’s screen size, such as mobile, tablet, or desktop. This ensures that your images look optimal on all devices.
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.
Start Image Optimization
By starting image optimization, the plugin will compress and optimize images on your site to enhance performance.
- Free Version: The first 500 images will be optimized.
- Pro Version: Unlimited images will be optimized.
Plugin Hooks
W3speedster Pre Start Optimization
Function: | w3SpeedsterPreStartOptimization |
---|---|
Description: | Modify page content pre optimization. |
Parameter: | $html = Content visible in pages view source. |
Return: | 1 – Reflect the changes done in html of the page. |
function w3SpeedsterPreStartOptimization($html){
$html = str_replace('Existing content','Changed content',$html);
return $html;
}
W3speedster Before Start Optimization
Function: | w3SpeedsterBeforeStartOptimization |
---|---|
Description: | W3Speedster allows you to make changes to the HTML on your site before actually starting the optimization. For instance replace or add in html. |
Parameter: | $html = $html – full html of the page. |
Return: | 1 – Reflect the changes done in html of the page. |
function w3SpeedsterBeforeStartOptimization($html){
$html = str_replace(array(""),array(""), $html);
return $html;
}
W3speedster After Optimization
Function: | w3SpeedsterAfterOptimization |
---|---|
Description: | W3Speedster allows you to make changes to the HTML on your site after the page is optimized by the plugin. For instance replace or add in html. |
Parameter: | $html – full html of the page. |
Return: | 1 – Reflect the changes done in html of the page. |
function w3SpeedsterAfterOptimization($html){
$html = str_replace(array('image.png'),array('image-100x100.png'), $html);
return $html;
}
W3speedster Inner JS Customize
Function: | w3SpeedsterInnerJsCustomize |
---|---|
Description: | If you want to make changes in your inline JavaScript, W3Speedster allows you to make changes in Inline JavaScript (for instance making changes in inline script you have to enter the unique text from the script to identify the script). |
Parameter: | $script_text- The content of the script. |
Return: | $script_text – Content of the script after changes. |
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 |
---|---|
Description: | Exclude the script tag from lazy loading, which is present in the pages view source. |
Parameter: | $inner_js = The script tag s content is visible in the page s view source $exclude_js_bool = 0(default) || 1 |
Return: | 1 |
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 |
---|---|
Description: | If you wish to make changes in JavaScript files, W3Speedster allows you to make changes in JavaScript Files. |
Parameter: | $path- Path of the JS file. $string – javascript you want to make changes in. |
Return: | $string– make changes in the internal JS file. |
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 |
---|---|
Description: | If you want to make changes in your CSS file, W3Speedster allows you to make changes in stylesheet files. |
Parameter: | $css- Css content of the file. $path- path of css file. |
Return: | $css – make the required changes in CSS files. |
function w3SpeedsterInternalCssCustomize($css,$path){
if(strpos($path,' //cssPath // ') !== false){
$css = str_replace(' ',' ',$css);
}
return $css;
}
W3speedster Internal Css Minify
Function: | W3speedup_internal_css_minify |
---|---|
Description: | If you don’t want to minify, W3Speedster allows you to exclude stylesheet files from minify. |
Parameter: | $path- path of css file. $css- Css content of the file. $css_minify- 0 || 1 (default) |
Return: | 1 – it will exclude the entered css file from minification. 0 – it will not exclude the entered css file from minification. |
function w3SpeedsterInternalCssMinify($path,$css,$css_minify){
if(strpos($path,'//cssPath//') !== false){
$css_minify = 0;
}
return $css_minify ;
}
W3speedster No Critical Css
Function: | w3SpeedsterNoCriticalCss |
---|---|
Description: | W3Speedster allows you to exclude the pages from the Critical CSS (like search pages). |
Parameter: | $url- Stores the url of the page. $ignore_critical_css- 0 (default) || 1 |
Return: | 1 – it will exclude the page you do not wish to create 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 |
---|---|
Description: | If you wish to make any changes in Critical CSS, W3Speedster allows you to make changes in generated Critical CSS. For instance if you want to replace/ remove any string/URL from critical CSS (like @font-face { font-family:”Courgette”; to @font-face { ) |
Parameter: | $critical_css- Critical Css of the page. |
Return: | $critical_css – Reflect the changes made in 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 |
---|---|
Description: | Our plugin converts .jpg/.png format to WebP format without changing the URL. it disable webp to render from HTACCESS. |
Parameter: | $disable_htaccess_webp- 0(default) || 1 |
Return: | It will add w3.webp at the end of the url for instance (xyz.jpgw3.webp). |
function w3SpeedsterDisableHtaccessWebp($disable_htaccess_webp){
$disable_htaccess_webp = 1
return $disable_htaccess_webp;
}
W3speedster Customize Add Settings
Function: | w3SpeedsterCustomizeAddSettings |
---|---|
Description: | If you wish to change in variables and paths (URL), W3Speedster allows you to make changes in variables and paths with the help of this plugin function. |
Parameter: | $add_settings- settings of the plugin. |
Return: | :$add_settings – reflect the changes made in variable and path. |
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 |
---|---|
Description: | Customize plugin main settings. |
Parameter: | $settings- Plugin main settings array (like: exclude css, cache path etc ) |
Return: | $settings |
function w3SpeedsterCustomizeMainSettings($settings){
$settings['setting_name'] = value;
return $settings;
}
W3speedster Seprate Critical Css For Post Type
Function: | w3SpeedsterCreateSeprateCssOfPostType |
---|---|
Description: | By default our plugin creates a single critical css for post but If you wish to generate separate critical CSS for post. W3Speedster allows you to create critical CSS separately post-wise. |
Parameter: | $separate_post_css- Array of post types. |
Return: | $separate_post_css – create separate critical css for each post and page. |
function w3SpeedsterCreateSeprateCssOfPostType($separate_post_css){
$separate_post_css = array('page','post','product');
return $separate_post_css;
}
W3speedster Seprate Critical Css For Category
Function: | W3speedsterCriticalCssOfCategory |
---|---|
Description: | W3Speedster Create seprate critical css for categories pages. |
Parameter: | $separate_cat_css- Array of Category. |
Return: | $separate_cat_css – create separate critical css for each category and tag. |
function W3speedsterCriticalCssOfCategory($separate_cat_css){
$separate_cat_css = array('category','tag','custom-category');
return $separate_cat_css;
}
W3speedster Change Video To Videolazy
Function: | w3SpeedsterVideoToVideoLazy |
---|---|
Description: | Change video tag to videolazy tag |
Parameter: | $videolazy- 0(default) || 1 |
Return: | 1 - Change video tag to videolazy tag. |
function w3SpeedsterVideoToVideoLazy($videolazy){
$videolazy= 1;
return $videolazy;
}
W3speedster Change Iframe To Iframlazy
Function: | w3SpeedsterIframetoIframelazy |
---|---|
Description: | Change iframe tag to iframlazy tag. |
Parameter: | $iframelazy- 0(default) || 1 |
Return: | 1 - Change iframe tag to iframlazy tag. |
function w3SpeedsterIframetoIframelazy($iframelazy){
$iframelazy = 1;
return $iframelazy;
}
W3speedster Exclude Image To Lazyload
Function: | w3SpeedsterExcludeImageToLazyload |
---|---|
Description: | W3Speedster allows you to exclude the images from optimization dynamically which you don’t want to lazyload. |
Parameter: | $exclude_image = 0(default) || 1 $img = Image tag with all attributes $imgnn_arr = Image tag |
Return: | 1 – it will lazy load the image. 0 – it will not lazy load the 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 |
---|---|
Description: | Customize image tags. |
Parameter: | $img = Image tag with all attributes $imgnn = Modified image tag by plugin $imgnn_arr = Image tag attributes array |
Return: | $imgnn- Customized image tags |
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. |
---|---|
Description: | Our plugin converts .jpg/.png format to WebP format without changing the URL. it disable webp to render from HTACCESS. |
Parameter: | $preventHtaccess = 0(default) || 1 |
Return: | 1 – It will add w3.webp at the end of the url for instance (xyz.jpgw3.webp). |
function w3SpeedsterPreventHtaccessGeneration($preventHtaccess){
$preventHtaccess = 1;
return $preventHtaccess;
}
W3speedster Exclude CSS Filter
Function: | W3SpeedsterExcludeCssFilter |
---|---|
Description: | If you want to dynamically exclude a CSS file from optimization, W3Speedster allows you to exclude it from optimization (like style.css). |
Parameter: | $exclude_css – 0(default) || 1 $css_obj – link tag in object format. $css – Content of the CSS file you want to make changes in. $html – content of the webpage. |
Return: | $exclude_css – exclude CSS from optimization. |
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. |
---|---|
Description: | If you wish to Force Lazyload CSS files dynamically for a specific page or pages, you can do so with the W3Speedster, it allows you to dynamically force lazyload stylesheet files (for instance font file like awesome, dashicons and css files). |
Parameter: | $force_lazyload_css – Array containing text to force lazyload which you have mentioned in the plugin configuration. |
Return: | $force_lazyload_css – Array containing text to force lazyload. |
function w3SpeedsterCustomizeForceLazyCss($force_lazyload_css){
array_push($force_lazyload_css ,'/fire-css');
return $force_lazyload_css;
}
W3speedster External Javascript Customize
Function: | W3SpeedsterExternalJavascriptCustomize |
---|---|
Description: | If you want to make changes in your external JavaScript tags, W3Speedster allows you to make changes in external JavaScript tags. |
Parameter: | $script_obj – Script in object format. $script – Content of the JS file you want to make changes in |
Return: | $script_obj – Make changes in Js files from an external source. |
function W3SpeedsterExternalJavascriptCustomize($script_obj, $script){
if(strpos($script,'//text//') !== false){
$script = str_replace(' ',' ',$script)
}
return $script_obj;
}
W3speedster External Javascript Filter
Function: | W3SpeedsterExternalJavascriptFilter |
---|---|
Description: | If you want to dynamically exclude a JavaScript file or inline script from optimization, W3Speedster allows you to exclude it from optimization (like revslider). |
Parameter: | $exclude_js – 0(default) || 1 $script_obj – Script in object format. $script – Content of the JS file you want to make changes in. $html – content of the webpage. |
Return: | $exclude_js – exclude JS from optimization. |
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 |
---|---|
Description: | W3Speedster allows you to customize script objects while minifying and combining scripts. |
Parameter: | $script_obj- Script in object format. $script- Content of the JS file you want to make changes in |
Return: | $script_obj– Make changes in Js files. |
function W3SpeedsterCustomizeScriptObject($script_obj, $script){
// your code
return $script_obj;
}
W3speedster Exclude Internal Js W3 Changes
Function: | W3SpeedsterExcludeInternalJsW3Changes |
---|---|
Description: | Our plugin makes changes in JavaScript files for optimization, if you do not want to make any changes in JavaScript file, W3Speedster allows you to exclude JavaScript files from the plugin to make any changes. |
Parameter: | $path- path of your script tags url $string – JavaScript files content. $exclude_from_w3_changes = 0(default) || 1 |
Return: | 1 – Exclude the JS file from making any changes. 0 – It will not exclude the JS file from making any 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 |
---|---|
Description: | W3Speedster allows you to exclude the pages from the Optimization. if you wish to exclude your pages from optimization. (like cart/login pages). |
Parameter: | $html = Page viewsources content. $exclude_page_optimization = 0(default) || 1 |
Return: | 1 – it will exclude the page from optimization. 0 – it will not exclude the page from 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 |
---|---|
Description: | If you wish to make any changes in Critical CSS filename, W3Speedster allows you to change in critical CSS file names. W3Speedster creates file names for critical CSS files but if you wish to change the name according to your preference this function will help. |
Parameter: | $file_name – File name of the critical css. |
Return: | $file_name – New name of the critical css file. |
function W3SpeedsterCustomizeCriticalCssFileName($file_name){
$file_name = str_replace(' ',' ',$file_name);
return $file_name;
}
Enable Core Web Vitals Logs
Enabling Core Web Vitals logs allows you to track and record data related to the Core Web Vitals metrics, which include Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These metrics are essential for assessing your site's performance and user experience. By logging this data, you can analyze performance issues, identify areas for improvement, and make informed optimizations to enhance overall site performance and user satisfaction.Import / Export
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.