w3-speedster-for-developers

Installation W3Speedster

Unzip the Magento archive you have and start the installation process of the Magento extension by uploading the complete extension folder using FileZilla Software. Make sure your uploaded folder must go in the /root/app/code.
Once you upload your Magento extension, you’ll now have to run the below commands through the terminal in the extension root directory.

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

php bin/magento cache:flush 

Uninstalling W3Speedster

Identify the Extension

Disable the Extension

• Replace W3Speedster_W3Speedster with the actual module name if it differs.
• This command prevents Magento from loading the extension's files.

Unregister the Extension

Remove Data from Database

• Custom tables (e.g., w3speedster_*).
• core_config_data table for configuration entries.

Clear Cache

Verify Uninstallation

• Verify that your Magento store is functioning correctly.
• Ensure there are no errors related to the W3Speedster module.

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. If this settings is turned off, no settings in w3speedster plugin will apply except html caching.

Optimize pages with Query parameters

This enables the optimization to be shown on the pages with query parameters when the optimization is live. For eg. https://www.example.com?nocache=1 will show optimized page if this setting is turned on. 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. All css and javascript files will have mob.css at the end only for mobile(.css for desktop) and also separate Critical CSS will be created for Mobile and desktop.

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.

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 functionality of site is not hampered, for instance, excluding ‘Font Extensions’ like (.woff, .ttf, .eot, .woff2) might be required because cross origin request for fonts are not allowed in many sites and allowing of fonts from external source has to done manually.

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

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.

Enable JPG Webp support

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

Enable PNG Webp support

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

WebP Image Quality

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 Image lazy Load

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

Enable Iframe lazy Load

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

Enable Video lazy Load

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

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.

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.

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.

Delay google fonts by

Delaying Google Fonts improves initial page load speed by reducing render-blocking requests, enhancing perceived performance and user experience, especially on slower connections.

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.

Loading secondary CSS

Loading secondary CSS after page load prioritizes critical content, speeding up initial rendering. Loading it on page load ensures all styles are immediately available, enhancing the user experience.

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.

Load Combined Javascript

Load the minified and combined js ‘on page load’ or ‘after page load’. Use after page load to score better on google page speed insights or other speed tools. However please use the ‘after page load’ option very carefully.

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 Link Tag CSS from Optimization

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

Force Lazy Load Link Tag CSS

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

Force Lazy Load Javascript

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

Exclude Javascript Tags from Lazyload

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

Exclude Inline JavaScript from Lazy Load

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

Exclude Pages From Optimization

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

Exclude Pages from CSS Optimization

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

Exclude Page from JavaScript Optimization

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

Custom CSS to Load on Page Load

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

Custom JavaScript to Load on Page Load

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

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

Custom JavaScript to Load After Page Load

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

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 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 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 exclude from page CSS optimization

function w3ExcludePagefromCssOptimization($html){
    if(strpos($html,'/*content*/') !== false{
         return true;
    }
    return false;
}

ffunction w3ExcludePagefromCssOptimization($html){
    if(strpos($html,'/*content*/') !== false{
         return true;
    }
    return false;
}

W3speedster exclude page from JS optimization

function w3ExcludePagefromJsOptimization($html){
    if(strpos($html,'/*content*/') !== false{
         return true;
    }
    return false;
}

function w3ExcludePagefromJsOptimization($html){
    if(strpos($html,'/*content*/') !== false{
         return true;
    }
    return false;
}