WordPress gives you an opportunity to build your site with “Drag and Drop”. It does not require technical skills and anyone can create a website easily. But sometimes, it requires a technical person to manage certain issues. While testing the speed of your site, you can get a warning like “eliminate render-blocking JavaScript and CSS”. W3SpeedSter can help you manage this issue along with create critical CSS and setting it up for your WordPress Site to resolve issues.

What is Critical CSS and why it is important?

CSS or Cascading Style Sheet is a computer language for structuring web pages. It sets up the presentation of Web pages so that it gets fit to any device. Whether you are watching content on big screens or small mobile screens, CSS makes your web pages fully responsive on all devices. 

Critical CSS is helpful to extract CSS for above-the-fold content (a viewer mainly sees during page load, before scrolling) in order to render content to the users. The content is needed to load quickly for a better user experience. The term “Critical CSS” describes the process of loading critical CSS inline. 

The major benefit of critical CSS is to speed up the site and resolve the “eliminate render-blocking JavaScript and CSS” warning. Now, you need to understand the importance of Critical CSS.

When you see the error message, it indicates that your site is taking more time to respond due to the loading of the CSS stylesheet – it will make your website slow. Critical CSS is helpful to load pages quickly and display all texts and images properly to satisfy the user. If a page is taking more than 3 seconds to load, then it decreases the conversion rate up to 20%: Speeding up your site is important.

Generating critical CSS in WordPress by W3speedster

Critical CSS is helpful to optimize the speed of your website and assist to improve the loading speed of a page.

The W3Speedster Plugin can help you generate Critical CSS and load in a .css file. Creating critical CSS helps in CSS delivery optimization.

Once you create critical CSS, enable its loading.

At last, click on the save changes button to implement CSS optimization.

Sometimes, there are chances of getting errors while creating critical CSS. The plugin shows this error below the ‘load critical css’ feature.

Whether you are technical or non-technical personnel, you will save a lot of your time to generate critical CSS by W3SpeedSter.

Error while creating critical CSS

There are some instances where you can get an issue while creating CSS. Generally, an error you can get can be related to your theme CSS. In order to fix the error, locate the file on your website and make sure to fix this issue before generating critical CSS. 

Once it’s done, clear your site cache and generate critical CSS. Follow the steps given below to know how to regenerate critical CSS.

How to delete/regenerate critical CSS?

In case you’ve done any changes to your website, you have to delete critical CSS of that page by following these steps:

1. Locate & go to WP file manager in the sidebar of your WordPress dashboard.

2. Open public_html folder
3. Go to wp-content folder

4. Find and open critical-css folder

5. Locate the folder with Your-website-Name and open it. Here you can find the homepage critical CSS file at the bottom of the folder and all other page’s critical CSS files in each of the respective folders6. Delete .css files of the page where you’ve done changes.
7.Once it’s done, Clear all the cache of your website.

8. Now go to the CSS section of the w3speedster plugin, and click on the “Create Critical CSS Now” button to create a new critical CSS for that page.

Online businesses have always been on a never-ending ride. Amidst evolution, we have seen significant changes in the search engine’s ranking factors & needs. WordPress website speed optimization is one of those recent needs.

Users instantly reject slow websites with even a one-second delay in the loading time. That ends up in increased bounce rates, fewer conversions & low traffic.

You see, one factor (here slow web page loading) affects everything.

Sure, you don’t want to create a website to slip away profitable sales and ROI. Do you? 

So, you need to ensure to fulfill the user’s query in the quickest possible time.

This is what our well-known WordPress Speed Optimization Plugin is designed for. It works on automated check-off configurations & a quick save-change system to help you make the site faster with fast yet accurate results.

Let’s roll the music, it’s time to introduce our champion plugin for all those WordPress Business Owners out there. W3Speedster is the name you can call it.

Let it help find a sweet home in your WordPress and it will guide you through problems to success.

It doesn’t believe in a one-fits-all approach. Rather it provides customized help to make sure your WordPress skyrockets speed and performance.

How To Get Desired WordPress Performance Optimization Results with W3speedster?

Seeking an automatic system to speed up your WordPress site? W3speedster is an automatic speed optimization plugin ideally made for you.

Recommended Settings for Optimization:

• You can choose to do speed optimization through our recommended settings.
• After installation, locate the recommended settings on the top of the screen displaying the W3speedster Logo.
• Once you enter into the settings, activate them.
• Now your website will optimize based on the prior settings done in the plugin.

Take a look at how W3speedster produces desired results.

First, start off with:

1. General Settings

• LICENSE KEY:

Enter your unique License key in the box to access the licensed version of the plugin. All the plugin features are now activated & available to you to optimize website speed just by easy checking off configurations.

• CDN Integration:

If you are using any CDN service, you can integrate your CDN by the following steps:

Ø  Fill the CDN URL box with your CDN’s URL

Ø  Make sure the CDN URL must not contain a slash at the end.

CDN is a group of servers distributed around the world to deliver requested web pages to the user from their closely located server. This speeds up a website content delivery 

• Enable Browser Caching

Our plugin can provide automatic browser caching to your site. Check off built-in enable leverage browsing cache feature to automatically activate browser caching.

By browser caching you can ensure to keep images, CSS, and JS stored locally by your browsers.

That way loading speed of your website will be improved as the user’s browser will download less data while navigating through your pages.

• Enable Gzip Compression

Gzip compression helps in optimizing HTML, CSS & JavaScript delivery by compressing the files before sending them to the browser. 

With the use of the W3speedster wordpress plugin, you can get automatic functionality to enable Gzip Compression on your site.

• Remove Query Parameters

To remove query parameters from JS, CSS on your site, ensure to enable query parameters in the general settings of the plugin. 

• Lazy Loading

Lazy loading is one of the most effective ways to speed up website loading time.

W3speedster Plugin comes with a built-in feature to lazy load images, iframe, video, & audio. Here you have an option to choose which files you want to lazy load by checking off.

• Start Lazy Load Images, Videos, Iframes pixels below the screen

Set up lazy loading pixels at standard 200 px quality to keep the quality of your images intact & unscrewed.

• Enable WEBP Support

You can convert your images files formats (.jpg & .png) to WebP format with the help of the Plugin.

Since WebP image format is much smaller than other file formats, your web page will load faster.

• Set WebP Image Quality

By setting your WebP image quality at 90%, you will ensure to keep the quality of your images intact & unscrewed. However, you can change it according to your suitability.

• Optimize JPG/PNG Images

You can optimize JPG/PNG images with our W3speedster plugin. By optimizing website images, your website will load & open much faster. 

• Optimize Images Via WP-Cron

This feature will optimize your images via wp-cron. WP-cron schedules image optimization and optimizes one attachment every minute only so as to ensure server performance does not get impacted.

• Optimize Images on the go

Enable quick image optimization with this feature. By enabling this, the W3speedster plugin will automatically find and start optimizing unoptimized & unconverted images in the background once a web page is opened.

However, it is recommended to turn it off after a couple of days.

• Automatically Optimize Images on Upload

You can enable automatic optimization of images on upload to convert the image formats into WEBP format.

The individual setting to optimize the images and convert them to WebP should also be enabled.

• Preload Resources

W3speedster offers you a preloading feature to preload any resources like images, CSS, JS & fonts. All you need to do is to put the resource URL in the “Preload Resources” section.

On web page loading, only those resources will load first which are included in the section. Enter each URL in a separate line.

• Exclude Pages from Optimization

For all the pages you do not wish to optimize, you can exclude them by adding the page URL in this section.

Example: You can exclude the login page, cart page & checkout page.  

Ø  wp-login.php

Ø  /cart/

Ø  /checkout/

 

• Exclude Images from Lazy Loading

W3speedster has a unique feature for excluding images from lazy loading. If you don’t want some images to lazy load, you can add those in the section:
Ø  base64,
Ø  rev-slidebg,
Ø  no lazy,
Ø  facebook,
Ø  googletagmanger,
 

• Cache Path

The cache of the W3Speedster Plugin has automatically generated insider the cache folder of WP Content Folder and if you wish to change the path you can change it by putting the full path in this section.

2.  CSS Optimization:

CSS optimization is the process of minimizing CSS files and codes for maximum speed. You can employ some of the best techniques to optimize your wordpress CSS with the help of W3speedster ranging from removing whitespace, comments, color values, and embedding code.

Here are the features you get in the plugin for CSS optimization.

• Enable CSS Minification:

CSS has an important role to boost your website speed. The larger the files will be, the longer time it will take to load.

The plugin comes with a feature to minify your CSS files. All you need to do is, check off CSS minification to enable a reduction in the size of CSS files.

Our plugin does deep CSS minification and removes white spaces, line breaks, comments, and block delimiters precisely. It will facilitate faster loading of the site.

• Exclude Link Tag CSS from Minification:

With the help of the W3speedster WordPress speed optimization plugin, you can exclude those pages which you don’t want to go through CSS minification and lazy loading.

It can be done by just putting the CSS URL in the box.

• Force Lazy Load Link Tag CSS:

For all the files that consume excessive data, with the help of the W3Speedster Plugin you can easily Force Lazy load those files, for instance (FontAwesome.CSS or Icon’s CSS).

• Delay and Load Secondary CSS:

Enabling secondary CSS loading allows you to load all the minified CSS after page load. The plugin also allows you to set the delay timing of the secondary CSS loading. It is recommended to load secondary CSS with a 5-10 sec delay.

• Combine and delay Google Fonts:

You can further combine and load all the site google fonts with delay. Enter the number of seconds to Lazy load Google fonts. It is recommended to delay google fonts loading by 0.1 to 0.2 seconds.

• Load Style tag in head to avoid CLS:

W3speedster has an added feature to avoid CLS (cumulative layout shift) on your WordPress by loading style tag in head. All you will need to do is add the style tag text in the box.

• Exclude Page from Load Combined CSS:

The plugin also allows you to exclude certain pages from combined CSS loading. Enter the url or part of the URL where you don’t want to implement CSS optimization. Make sure each url or part of the URL must be entered in a separate line.

• Custom CSS To load with preload CSS:

This section is made for the developers who want to add additional CSS to load with preload CSS. However, if you are not from a technical background, you can leave this section blank. 

If you wish to preload any CSS, add in this section without a style tag. CSS Preloading ensures CSS files to be loaded when the page loads.

• Create and Load Critical CSS:

The W3Speedster Plugin can help you generate Critical CSS and load in a .css file. Creating critical CSS helps in CSS delivery optimization.

Once you create critical CSS, enable its loading.

At last, click on the save changes button to implement CSS optimization.

Sometimes, there are chances of getting errors while creating critical CSS. Plugin shows this error below ‘load critical css’ feature. Know more about ‘How to fix errors while generating critical css’.

3. JavaScript Optimization

JavaScript Optimization by W3speedster is the process of minifying JS, lazy loading JS, preloading custom JavaScript, and much more. Here is the step-by-step process to do it:

• Enable JavaScript Optimization:

The first step towards JS optimization is to enable minification.

Minification is the process of minimizing code and script files in your web pages. It’s one of the main methods used to reduce load times and bandwidth usage on WordPress websites.

• Exclude JavaScript Tags from Combine:

W3Speedster allows you to exclude JavaScript files of the pages you do not wish to Lazy Load and JS Minify by putting JS URL (eg: xyz.js) in the pertaining section. You can leave defer box unchecked.

• Preload Custom JavaScript:

Apart from deferring, you also get an option to choose files to preload by adding custom javascript. The plugin allows you to preload any JavaScript you wish by adding in this section without a script tag. However, this feature can only benefit developers who have a thorough knowledge of adding customized JS. 

Preloading ensures the media file to be loaded when the page loads.

Don’t forget to enable Load as a file and defer once you enter the custom JavaScript. With this, JavaScript files that are allowed to load with page loading will get lazy-loaded.

• Exclude inline JavaScript from combine:

Enter the script or part of the script url to exclude it from optimization. With recommended settings, the plugin will automatically fill the section with certain files.

Moreover, you can also add the “defer” attribute to the excluded files with a space. For eg. “jquery.min.js defer”. If you wish to not minify it then add “full” after a space. For eg. “jquery.min.js full”.

• Force Lazy Load JavaSript:

Put the specific word from the inline script tag, script URL, or part of the script URL to Force Lazy Load JavaScript which takes a lot of time to load (Eg. Facebook/Instagram).

• Load Combined JavaScript:

W3speedster plugin allows you to load minified and combined js on page load or after page load. It is recommended to use after page load to score better on google page speed insights or other speed tools. This will load all your minified javascript once the page loading will be completely done to make your web page load faster.

Be careful while enabling this option as it can also break your site. For best practice, use load combined JS in combination with ‘exclude javascript from optimization’ to keep a quality user experience when the page loads.

Moreover, the plugin has various hooks which can help you in customizing javascript minification and lazy loading features. Checkout the plugin documentation for more info.

• Delay Internal Javascript Tags:

The next step is the delay of internal javascript tags by a few seconds. This option can be used when ‘after page load’ is selected in ‘Load combined JavaScript’. Enter the seconds in the box you wish to delay the load of combined and minified javascript. It is recommended to delay script tags by 10 seconds.

• Exclude Page from JavaScript Optimization:

With W3Speedster Plugin, you can easily exclude pages from JS Minification which you do not wish to Lazy Load and JS Minify by putting page script URL or part of the script URL.

Please enter each script url or part of the script url in a separate line.

• Custom JavaScript

You also have an option to add custom JavaScript in this section.

Save all the changes and updates. Remember, Custom JavaScript will load after all internal minified javascript is loaded.

4.  Image Optimization

 

Image optimization is one of the important techniques to get a high page speed score. If you use lots of images on your WordPress, the plugin will help you optimize them. W3speedster has a unique feature of JPEG/PNG conversion to WebP image formats for better quality in a smaller size.

Make sure to enable all the image optimization functions mentioned in the general settings such as ‘optimize images via wp-cron’, ‘Enable WebP support, ‘Enable lazy load’ & more.

Once you have ensured all the settings, you are now ready to click on the start optimization button. While images are optimizing in the background, the percentage bar will show you the completion of the optimization process.

 

5.  Clear Cache

The cache saves the data of the last visited page in the browser. Thus, deleting the cache data helps you troubleshoot cache-related issues and increase the loading time of web pages and the performance of your website.

There are two types of cache you can clear from WordPress with the help of the plugin i.e., “Delete CSS/JS cache” and “Delete critical CSS cache” by clicking on the delete now button.

Click on “Delete CSS/JS cache” button, if you want to delete CSS & JS minified cache & files for all pages.

To delete Critical CSS Cache for a specific page, go to that page, hover on W3speedster cache in the top menu bar, and click on “delete critical CSS cache for this page only”. Make sure to click on “delete critical CSS cache for all pages” or “Delete Critical CSS cache” button in the plugin only if you’ve made any changes to web page design.