12 Best Calculator Plugins for Your WordPress Site

Are you looking for a calculator plugin for your WordPress website?

There are many types of WordPress plugins to calculate prices, measurements, dates, form fields, and more.

In this article, we have hand-picked some of the best calculator plugins for your WordPress site.

What to Look For in a WordPress Calculator Plugin

There are a lot of different calculator plugins out there that you could use on your WordPress site.

Some calculator plugins can be used to create any calculator of your choice. However, this can be a lot of work. When possible, you want to pick a plugin that has a pre-built calculator template for the type of calculator you want to create.

It’s also important to choose a responsive calculator that looks good on mobiles as well as on computers. You may also want a plugin that lets you change the colors and styles of your calculator so it can match your website’s color scheme and brand.

1. Formidable Forms Calculators

Formidable Forms is a drag and drop form builder that comes with a large range of pre-built calculator templates. These let you easily create different calculators on your WordPress blog or website.

With Formidable Forms calculator templates, you can create and add the following calculators on your site:

• BMI Calculator
• Percentage Calculator Template
• Advanced Mortgage Calculator Template
• Simple Mortgage Calculator Template
• WooCommerce Product Configurator
• Car Payment Calculator Template
• Debt to Income Ratio Calculator Form Template
• Life Insurance Calculator Template
• ROI Calculator Form Template
• Savings and Investment Calculator Form Template
• Order/Billing Form Template
• Age Calculator Form Template
• Compound Interest Calculator Template
• Final Grade Calculator Template
• Pregnancy Due Date Calculator Form Template
• Daily Calorie Intake Calculator Template
• Length Conversion Calculator Form Template
• Paycheck Calculator Form Template
• Tip Calculator Form Template
• Amortization Calculator Template

Some of these are simple, useful tools, like the percentage calculator, the length conversion calculator, the tip calculator, and the age calculator. Others are much more detailed and offer huge value to your users.

For instance, if you’re running a medical or health blog, you might want to offer a BMI (Body Mass Index) calculator or a Daily Calorie Intake calculator. These are really easy to create using Formidable Forms.

If you sell real estate, you could use the simple mortgage calculator or the advanced mortgage calculator on your site. You could even offer tools like the debt to income ratio calculator to help users work out whether the mortgage is affordable for them.

All Formidable Forms’ calculators are responsive so they’ll look great on mobile devices. You can also easily customize them to match your website’s branding.

Formidable Forms is our top calculator pick due to its large range of calculators and ease of use. It’s also one of the best WordPress contact form plugins.

2. Calculated Fields Form

Calculated Fields Form allows you to create forms and perform mathematical calculations among form fields. It comes with a form and logic builder which you can use to add fields, assign values to those fields, and define mathematical operators to run.

Calculated Fields Form comes with 5 built-in sample calculators that you can use or modify:

• Simple Calculator Operations
• Calculation with Dates (bookings with check-in and check-out dates)
• Ideal Weight Calculator
• Pregnancy Calculator
• Lease Calculator

You can easily use Calculated Fields Form with the WordPress content editor (block editor) as well as the old classic editor. It also works with popular page builder plugins.

3. Responsive Mortgage Calculator

Responsive Mortgage Calculator is an easy to use mortgage calculator for real estate websites. It comes with a sidebar widget and shortcode that you can use inside your WordPress posts, pages, and below your listings.

It also comes with light and dark color schemes. However, you can disable plugin styling and use your theme’s colors or add custom CSS to style the calculator.

4. Measurement Price Calculator

Measurement Price Calculator is perfect for running a WooCommerce online store where you sell items of variable sizes. It allows you to add item pricing based on measurements selected by the customer.

It has two different measurement calculation methods so you can choose whichever suits your product best. You can offer unit pricing based on set quantities (such as a box of tiles). Or you can let the user enter dimensions and buy the correct amount for the length, area, or volume they require.

It works well with other top WooCommerce plugins and addons.

5. WooCommerce Product Options and Price Calculation Formulas

WooCommerce Product Options and Price Calculation Formulas provides additional WooCommerce product options and pricing calculation formulas. It comes with a custom product layout builder that allows you to add and display more product options for each item.

It includes conditional logic and formulas to calculate pricing based on selection. You can use it to show, hide, or completely change product pricing based on the customer’s selection. You can also use mathematical formulas to calculate product pricing and other display options.

6. WooCommerce Price Based on Country

The WooCommerce Price Based on Country plugin does exactly what it says. The plugin uses WooCommerce’s geolocation feature to guess the customer’s location. It then displays pricing in the local currency.

It can automatically calculate pricing by the current exchange rate, or you can manually set it for each currency. It also includes a country switcher widget that enables users to change country and currency on their own. This plugin works well with multilingual WordPress sites.

7. WordPress Mortgage Calculator Estatik

WordPress Mortgage Calculator Estatik is a useful real estate plugin to let your users estimate their mortgage payments.

It can be used as a simple calculator, with the purchase price, down payment, and interest rate. Or if you prefer, you can switch on advanced options like home insurance, property taxes, and PMI (private mortgage insurance).

The shortcode lets you add your mortgage calculator to your sidebar or to any post or page. You can display the results in a popup with a graph or with a simple image and text.

8. Mortgage Calculator

Mortgage Calculator is another useful mortgage calculator plugin. It shows a graph for the principal, interest, and remaining balance across the term of the mortgage. It can also handle property tax.

You can easily place the calculator in your website’s sidebar, or on any post or page, using the shortcode. It’s a free plugin, but note that it’s supported by ads.

9. YITH WooCommerce Cost of Goods

YITH WooCcommerce Cost of Goods is a handy plugin that helps you add cost of goods and then calculate profit margins in your WooCommerce reports.

You can include the product cost, cost of shipping, and payment processing costs for each product. The plugin will then calculate and show your profit margin in WooCommerce reports as a separate column.

This allows you to instantly calculate how your business is doing and what you can do to make more sales. For instance, you can offer more discounts for certain products or increase prices for products where you are not making any profit.

10. Loan Repayment Calculator and Application Form

Loan Repayment Calculator and Application Form is a great calculator plugin if you run a financial website or business. You can style it to match your site.

You can use it for fixed-fee payments, regular payments, savings, comparisons, and more. The calculator can handle different types of interest: fixed, simple, compound, and amortized.

The pro version also has features like sliders and the option for the user to select their own currency.

11. CC BMI Calculator

The CC BMI Calculator is a simple body mass index (BMI) calculator that can be used on health and fitness websites. It allows users to enter their height and weight information to see their body mass index score. This indicates whether their weight falls into a healthy range or not.

The plugin allows you to choose different styles by changing colors. However, using this feature requires you to add a link to the plugin author’s website. It is available in both imperial and metric systems, so you can choose which unit will be used as the default option.

12. Stylish Cost Calculator

Stylish Cost Calculator is a great way to provide customized, instant quotes for potential customers and clients. You can use one of the 7 built-in templates to get started quickly.

The calculator can automatically convert between currencies, detecting the user’s location to show the right one. You can customize the cost calculator however you like, adding or removing options, changing colors, and more.

You can also set a bulk discount, create branded invoices, and more. If you have the Pro version, you can create coupons. You can also integrate the Pro version with PayPal so you can take payments.

We hope this article helped you discover the best calculator plugins for WordPress. You may also want to see our list of must have WordPress plugins for business websites, and our comparison of the best email marketing services to grow your sales.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 12 Best Calculator Plugins for Your WordPress Site appeared first on WPBeginner.

August 07, 2020 at 05:19PM

How to Add a Background Image in WordPress

Do you want to add a background image to your WordPress site?

Background images can be used to make your website look more engaging and aesthetically pleasant.

In this article, we will show you how to easily add a background image to your WordPress site.

Video Tutorial

If you’d prefer written instructions, then please continue reading.

Method 1. Add a Background Image Using Your WordPress Theme Settings

Most popular WordPress themes come with custom background support. This feature allows you to easily set a background image to your WordPress site.

If your theme supports the custom background feature, then we recommend using this method to add a background image to your WordPress site.

However, if your theme doesn’t support this feature, or you don’t like how it implements background images, then you can try the other options mentioned in our tutorial.

First you need to visit the Appearance » Customize page in your WordPress admin. This will launch the WordPress theme customizer where you can change different theme settings while viewing a live preview of your website.

Next, you need to click on the ‘Background image’ option. The panel will slide in and show you the options to upload or select a background image for your website.

Click on the select image button to continue.

This will bring up the WordPress media uploader pop-up where you can upload an image from your computer. You can also select a previously uploaded image from the media library.

Next, you need to click on the choose image button after uploading or selecting the image you want to use as background.

This will close the media uploader pop-up, and you will see your selected image’s preview in the theme customizer.

Below the image, you will also be able to see the background image options. Under ‘Preset,’ you can select how you want the background image to be displayed: fill screen, fit screen, repeat, or custom.

You can also select the background image position by clicking on the arrows below. Clicking on center will align the image to the center of the screen.

Don’t forget to click on the ‘Save & Publish’ button at the top to store your settings. That’s all, you have successfully added a background image to your WordPress site.

Go ahead and visit your website to see it in action.

Method 2. Add a Custom Background Image in WordPress Using a Plugin

This method is a lot more flexible. It works with any WordPress theme and allows you to set multiple background images.

You can also set different backgrounds for any post, page, category, or any other section of your WordPress site.

It automatically makes all your background images full-screen and mobile-responsive. This means your background image will automatically resize itself on smaller devices.

First, you need to install and activate the Full Screen Background Pro plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Appearance » Full Screen BG Image to configure the plugin settings.

You will be asked to add your license key. You can get this information from the email you received after buying the plugin or from your account on the plugin’s website.

Next, you need to click on the ‘Save Settings’ button to store your changes. You are now ready to start adding background images to your WordPress site.

Go ahead and click on the ‘Add New Image’ button on the plugin’s settings page. This will take you to the background image upload screen.

Click on the ‘Choose Image’ button to upload or select an image. As soon as you select the image, you will be able to see a live preview of the image on your screen.

Next, you need to provide a name for this image. This name will be used internally, so you can use anything here.

Finally, you need to select where you want this image to be used as the background page.

Full Screen Background Pro allows you to set images as a global background, or you can choose from different sections of your website like categories, archives, front or blog page.

Don’t forget to click on the save image button to save your background image.

You can add as many images as you want by visiting the Appearance » Full Screen BG Image page.

If you set more than one image to be used globally, then the plugin will automatically start displaying background images as a slideshow.

You can adjust the time it takes for an image to fade out and the time after which a new background image starts to fade in.

The time you enter here is in milliseconds. If you want a background image to fade out after 20 seconds, then you will need to enter 20000.

Don’t forget to click on the save settings button to store your changes.

Background Images for Posts, Pages, and Categories

Full Screen Background Pro also allows you to set background images for single posts, pages, categories, tags, and more.

Just edit the post/page where you want to display a different background image. On the post edit screen, you will notice the new ‘Full Screen Background Image’ box below the post editor.

To use a background image for a specific category, you need to visit the Appearance » Full Screen BG Image page and then click on the ‘Add New Image’ button.

After uploading your image, you can select ‘Category’ as the context where you want to display the background image.

Now enter the specific category ID or slug where you want to display the image. See our guide on how to find category ID in WordPress.

Don’t forget to save your image to store your settings.

Method 3. Add Background Images using CSS Hero

CSS Hero is a WordPress plugin that allows you to make any changes to your theme without touching a single line of code.

You can add background images quickly in a few simple steps. First, you need to install and activate CSS Hero. Once you’ve done that, it’s time to start customizing your website.

Now open up your homepage in your browser. You’ll see the ‘Customize with CS SHero’ link in your admin bar.

After you click that link, you’ll see the CSS Hero options open up. Hover your mouse over the area you want to add an image to.

In the screenshot below, you’ll see .header-filter-gradient area. When you click this area, you can then choose the background link in the left sidebar.

The background link will open. From there, you can click on ‘Image.’ Now, you can choose an image from Unsplash or from your uploads to create your background.

When you click on the image you want, you’ll see the ‘Apply Image’ button. Then you can choose what size you want your image to be. We chose the large version so it would stretch across the page.

Hit ‘Save and Publish’ at the bottom, and the background image is now saved for your site.

Method 4. Add Custom Background Images Anywhere in WordPress Using CSS Code

By default, WordPress adds several CSS classes to different HTML elements throughout your WordPress site. You can easily add custom background images to individual posts, categories, author, and other pages using these WordPress generated CSS classes.

For example, If you have a category on your website called TV, then WordPress will automatically add these CSS classes to the body tag when someone views the TV category page.

<body class="archive category category-tv category-4"> 

You can use the inspect tool to see exactly which CSS classes are added by WordPress to the body tag.

You can use either category-tv or category-4 CSS class to style just this category page differently.

Let’s add a custom background image to a category archive page. You will need to add this custom CSS to your theme.

body.category-tv { 
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Don’t forget to replace background image URL and the category class with your own category.

You can also add custom backgrounds to individual posts and pages. WordPress adds a CSS class with the post or page ID in the body tag. You can use the same CSS code just replace .category-tv with the post specific CSS class.

We hope this article helped you learn how to add a background image in WordPress. You may also want to see our comparison of the best drag & drop page builder plugins for WordPress, and our tutorial on how to create a custom WordPress theme (without any code).

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Background Image in WordPress appeared first on WPBeginner.

August 06, 2020 at 04:30PM

How to Add Automatically Drip Content in Your WordPress Site

Do you want to automatically drip content in your WordPress members area?

If you are running a WordPress membership website or selling premium content, then you may want to set up drip content instead of showing all course content right away.

In this article, we will show you how easily to add automatic drip content in your WordPress site.

What is Drip Content?

Drip content allows you to gradually release content instead of giving it all away at once.

It enables membership websites to automatically release content at regular intervals to their users. Instead of continuously creating new content, site-owners can efficiently use their existing content.

It is also useful when selling online courses. Instead of giving away your complete online course at once, you can spread your course across a pre-defined training period, so your students or members aren’t overwhelmed.

Why Add Drop Content in WordPress?

Normally, you can simply make a membership website and give away premium content to your paid subscribers.

However, if you are offering monthly subscriptions, then you would want to hold on to your existing customers.

Offering drip content at a regular pace allows you to keep users engaged for a long time. You can reuse your existing content and deliver it sequentially.

Drip feed also allows you to make your content more effective. For example, if you are offering an online classes, then this gives users a chance to submit assignments or quizzes before moving on to the next lesson.

Perhaps the best advantage is that you get the time needed to create new content, promote your business, and increase traffic and sales.

What Do You Need to Offer Drip Content in WordPress

The first thing you need is a WordPress membership plugin that allows you to easily schedule drip content on your website.

This is where MemberPress comes in.

It is the best WordPress membership plugin on the market. It allows you to create paid subscriptions on your website and easily set up automatic drip content in WordPress.

You’ll also need content that you want to deliver to your audiences. You can restrict access to any type of content using the powerful rules feature.

Let’s get started.

Adding Drip Content in WordPress

First, you need to install and activate the MemberPress plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit MemberPress » Settings page to enter your license key. You can find this information under your account on the MemberPress website.

Next, you need to add a payment method to accept payments on your membership website. Simply switch to the Payments tab on the plugin’s Settings page and then click on the ‘+’ icon to add a payment method.

MemberPress supports PayPal and Stripe payments under their basic plan. It also supports Authorize.net, but you’ll need their Plus plan for that.

Simply select your preferred payment gateway from the drop-down menu and enter the required details. You can also add multiple payment methods by clicking on the + icon again and adding another payment method.

Now that you have done the basic set up. It is time to add a membership plan.

Simply go to MemberPress » Memberships page and click on the Add New button at the top.

On the next screen, you need to provide a title for your membership plan and then enter the price. MemberPress allows you to choose different types of pricing including lifetime, expiring, and recurring.

You can provide a description of the plan in the text editor. Below that, you can configure different settings for your membership plan under the membership options box.

Once you are finished setting up your membership plan, don’t forget to click on the Publish button to save your changes.

Repeat the process to create more membership plans if needed.

Scheduling Automatically Drip Content Rules

MemberPress comes with a powerful set of rules. These allow you to restrict access to your content based on a user’s subscription and membership.

These rules also allow you to drip content and schedule any content to be released at your own pace.

Simply head over to the MemberPress » Rules page and click on the Add New button at the top.

On the next screen, you need to choose the rules criteria.

MemberPress offers a whole range of options. You can select posts that match certain tags, categories, pages that are under the same parent page, single posts, or any URL.

For instance, we chose all posts tagged ‘firstweek’. These are the articles that we want to release to the users during their first week of the subscription.

Next, you need to select the membership plan or members that this rule would apply to.

Now that you have selected the content and membership plan, it’s time to set when to drip content.

Scroll down a little and check the box next to ‘Enable Drip’ checkbox. This will reveal the drip rules options.

You can select after how many days the content becomes available to the user. After that, you can match it with criteria like when user buys a specific subscription, registers for an account, buy any product, and so on.

Optionally, you can also enable the drip expiration rule. This allows you to make content available for a limited time after which content will expire and users will not be able to access it.

Below that you can customize how to handle unauthorized access. You can choose to show users a custom excerpt, message, and login form.

Once you are done, don’t forget to click on the Save Rule button to apply these settings.

You can add new rules by visiting MemberPress » Rules page again and repeat the process.

For instance, you may want to set up a rule for the content you want to show to the users during their second week of subscription.

How Drip Content Looks to The Users on Your Site

MemberPress will show the default unauthorized access message to all users, if you don’t set a custom message for each rule.

This is why we recommend setting your own custom message for unauthorized access when setting up your drip content rules.

This is how it looked on our demo site which showed an article excerpt, custom message, and login form.

Note: You can selectively hide these content from being visible entirely using MemberPress filters, so users won’t see this content until it becomes available.

Tips on Managing Drip Content in WordPress

Drip content is a powerful tool to grow your membership website and online community. However, it could easily get messy and may create bad user experience.

The following are a few tips that will help you use drip content more effectively on your site.

1. Plan a Smooth Content Strategy

Plan the content you’ll be releasing way ahead. You don’t want to give away all the content, but it should be enough to satisfy your customers.

You can prepare your content and set it up before launching your campaign. However, make sure your site is under maintenance mode so that your paid content does not get cached by search engines.

2. Create an Email List

Integrate your drip content strategy with your email marketing. This allows you to set up a drip-email campaign that automatically sends users email notifications when new content is available.

We recommend using Constant Contact. It is the best email marketing service for small businesses and comes with easy automation tools that help you set up automated campaigns for new subscribers.

For more powerful marketing automation tools, you can look at Drip or ConvertKit (although they’re more expensive than Constant Contact).

3. Promote Products with On-Site Retargeting

Many membership websites rely on members upgrading their membership plans, buying other products, or renewing their subscriptions.

This is where you’ll need OptinMonster. It is the best conversion optimization tool and helps you convert existing users with on-site retargeting.

You can show users targetted messages with lightbox popups, countdown timers, slide-in boxes, and more.

4. Learn from User Behavior

As your memberships grow, you would want to know what’s encouraging users to sign up for your membership plan and what’s stopping them.

You can easily track that with MonsterInsights. It is the best Google Analytics plugin for WordPress and helps you see where your users are coming from and how they use your site.

With this data, you can make informed decisions and adjust your marketing strategy to grow your business. See our guide on conversion tracking in WordPress for detailed instructions.

We hope this article helped you learn how to add automatically drip content in WordPress. You may also want to see our ultimate WordPress security guide to keep your membership site secure, and our comparison of the best WordPress page builders to customize your site design.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Automatically Drip Content in Your WordPress Site appeared first on WPBeginner.

August 05, 2020 at 04:49PM

How to Fix Render-Blocking JavaScript and CSS in WordPress

Do you want to eliminate render-blocking JavaScript and CSS in WordPress?

If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scripts and CSS. However, it does not provide any details on how to do that on your WordPress site.

In this article, we’ll show you how to easily fix render-blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.

What is Render-Blocking JavaScript and CSS?

Render blocking JavaScript and CSS are files that prevent a website from displaying a web page before loading these files.

Every WordPress site has a theme and plugins that add JavaScript and CSS files to the front-end of your website. These scripts can increase your site’s page load time, and they can also block rendering of the page.

A user’s browser will have to load those scripts and CSS before loading the rest of the HTML on the page. This means that users on a slower connection will have to wait a few milliseconds more to see the page.

These scripts and stylesheets are referred to as render-blocking JavaScript and CSS.

Website owners who are trying to achieve the Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.

What is Google PageSpeed Score?

Google PageSpeed Insights is a website speed test tool created by Google to help website owners optimize and test their websites. This tool tests your website against Google’s guidelines for speed and offers suggestions to improve your site’s page load time.

It shows you a score based on the number of rules that your site passes. Most websites get somewhere between 50-70. However, some website owners feel compelled to achieve 100 (the highest a page can score).

Do You Really Need the Perfect “100” Google PageSpeed Score?

The purpose of Google PageSpeed insights is to provide you guidelines to improve the speed and performance of your website. You are not required to follow these rules strictly.

Remember that speed is only one of the many website SEO metrics that help Google determine how to rank your site. The reason speed is so important is because it improves user experience on your site.

Better user experience requires a lot more than just speed. You also need to offer useful information, a better user interface, and engaging content with text, images, and videos.

Your goal should be to create a fast website that offers a great user experience.

During the last WPBeginner redesign, we kept our focus on speed as well as improving user experience.

We recommend that you use Google Pagespeed rules as suggestions, and if you can implement them easily without ruining user experience, then that’s great. Otherwise, you should strive to do as much as you can, and then don’t worry about the rest.

Having said that, let’s take a look at what you can do to fix render-blocking JavaScript and CSS in WordPress.

We will cover two methods that will fix the render-blocking JavaScript and CSS in WordPress. You can choose the one that works best for your website.

1. Fix Render Blocking Scripts and CSS with WP Rocket

For this method, we’ll be using the WP Rocket plugin. It is the best WordPress caching plugin on the market and allows you to quickly improve your website performance without any technical skills or complicated set up.

First, you need to install and activate the WP Rocket plugin. For more details, see our step by step guide on how to install a WordPress plugin.

WP Rocket works out of the box, and it will turn on caching with optimal settings for your website. You can learn more about it in our complete guide on how to properly install and set up WP Rocket in WordPress.

By default, it does not turn on JavaScript and CSS optimization options. These optimizations can potentially affect your website’s appearance or some features, which is why the plugin allows you to enable these settings optionally.

To do that, you need to visit Settings » WP Rocket page and then switch to the ‘File Optimization’ tab. From here, scroll to the CSS Files section and check the boxes next to Minify CSS, Combine CSS Files, and Optimize CSS Delivery options.

Note: WP Rocket will attempt to minify all your CSS files, combine them, and only load CSS needed for the visible part of your website. This could affect your website’s appearance, so you need to thoroughly test your website on multiple devices and screen sizes.

Next, you need to scroll to the JavaScript Files section. From here, you can check all the options for maximum performance improvement.

You can minify and combine JavaScript files like you did for CSS.

You can also stop WordPress from loading jQuery Migrate file. It is a script that WordPress loads to provide compatibility for plugins and themes using old versions of jQuery.

Most websites don’t need this file, but you would still want to check your website to make sure that removing it does not affect your theme or plugins.

Next, scroll down a little further and check the boxes next to ‘Load JavaScript Defered’ and ‘Safe Mode for jQuery’ options.

These options delay loading non-essential JavaScripts, and the jQuery safe mode allows you to load jQuery for themes that may use it inline. You can leave this option unchecked if you are certain that your theme does not use inline jQuery anywhere.

Don’t forget to click on the Save Changes button to store your settings.

After that, you may also want to clear cache in WP Rocket before testing your website again with Google Page Speed Insights.

On our test site, we were able to achieve 100% score on Desktop and render-blocking issue was solved in both mobile and desktop scores.

2. Fix Render Blocking Scripts and CSS with Autoptimize

For this method, we will be using a separate plugin made specifically for improving delivery of your website’s CSS and JS files. While this plugin gets the job done, it does not have the other powerful features that WP Rocket has.

First thing you need to do is install and activate the Autoptimize plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.

First, you need to check the box next to ‘Optimize JavaScript Code’ option under the JavaScript Options block. Make sure that ‘Aggregate JS-files’ option is unchecked.

Next, scroll down to the CSS Options box and check the ‘Optimize CSS Code’ option. Make sure that ‘Aggregate CSS-files’ option is unchecked.

You can now click on the ‘Save Changes and Empty Cache’ button to store your settings.

Go ahead and test your website with the Page Speed Insights tool. On our demo site, we were able to fix the render-blocking issue with these basic settings.

If there are still render-blocking scripts, then you need to come back to the plugin’s settings page and review options under both JavaScript and CSS options.

For instance, you can allow the plugin to include inline JS and remove scripts that are excluded by default like seal.js or jquery.js.

Click on the ‘Save changes and Empty Cache’ button to save your changes and empty plugin cache.

Once you are done, go ahead and check your website again with the Page Speed tool.

How does it work?

Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScripts files and serves cached copies to your website as async or deferred.

This allows you to fix the render-blocking scripts and styles issue. However, please keep in mind that it can also affect the performance or appearance of your website.

Troubleshooting

Depending on how the plugins and your WordPress theme uses JavaScript and CSS, it could be quite challenging to completely fix all render-blocking JavaScript and CSS issues.

While the above tools can help, your plugins may need certain scripts at a different priority level to work properly. In that case, the above solutions can break the functionality of such plugins, or they could behave unexpectedly.

Google may still show you certain issues like optimizing CSS delivery for above the fold content. WP Rocket allows you to fix that by manually adding Critical CSS required to display the above fold area of your theme.

However, it could be quite difficult to find out what CSS code you will need to display above the fold content.

We hope this article helped you learn how to fix render-blocking JavaScript and CSS in WordPress. You may also want to see our ultimate guide on how to speed up WordPress performance for beginners, and our comparison of the best managed WordPress hosting companies.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix Render-Blocking JavaScript and CSS in WordPress appeared first on WPBeginner.

August 04, 2020 at 05:00PM