Well if you are running though this problem or similar problem of slow loading website, there’s a solution for boosting the speed.
And.. This article provides a detailed process to Configure Autoptimize Plugin to make your website blazing fast by implementing various speed optimization techniques that will be discussed in the following section.
Note: Autoptimize is not a Cache Plugin, It is a Plugin that optimizes your website for various factors that contribute to slow loading of a website.
Autoptimize when used with a Cache Plugin, can do wonders.
Autoptimize + Cache Plugin –>> Great combination
This website runs on WP Rocket
Autoptimize WordPress Plugin
What is Autoptimize Plugin?
Autoptimize is one of the coolest plugin using which, you can make your website fast by implementing various speed optimization techniques in a simple manner.
It does so by minifying and combining all of the CSS / JS files, and load it in a proper order to show the maximum effect.The Plugins helps you to
- Minify and combine CSS/ JS files.
- Minify HTML Codes.
- Serve Resources from CDN.
- Optimize Images.
- Optimize Google Fonts.
- Remove emojis
- Remove Query Strings.
- Remove render blocking CSS
Configure Various Autoptimize Settings
1. Installing the Plugin
- Login to your admin dashboard.
- Click on Plugins -> Add new -> Search for Autoptimize.
- Click on Install -> Activate.
2. Optimize HTML Code
Once you installed the autoptimize plugin, Find the plugin on the Plugins page and click on settings.
In order to minify all the HTML code in your website, tick the first box, “optimize HTML code”.
Exclude Scripts from Autoptimize: [ENABLE] – Once you have Enabled the first option, you might see some error, If you do – check the respective JS file causing the problem and include here. OR
If your site uses Sliders or any elements that has any effects such as transition/flash, Some of the elements in the site might break or cause an error, in which it is important that you find the js file causing it and include it in the “Exclude Scripts from Autoptimize”.
3. Optimize CSS Code.
The Stylesheet used by your Theme or Plugin also plays an Important role in optimizing your website for Speed.
In order for this to work you need to tick the “Optimize CSS Code” and follow the Recommended Settings given below.
Aggregate CSS-files: [ENABLE] – Similar to JS, this option will minify and combine all the CSS files.
If not done, the individual CSS will not be combined that tends to Increase the number of request made by the Server and hence more load time.
Also aggregate inline CSS: [ENABLE] – This works the same as JS, will combine the CSS from the HTML of your website.
Inline and Defer CSS: [ENABLE] – Google clearly explains the importance of deferring non essential CSS. It says, “Only load CSS that make up the above the fold content, known as Critical CSS”
You can read about Generating Critical CSS in the section below.
Inline all CSS: [DISABLE] – This is not recommended. Inlining all the CSS tends to make the webpage bigger which is a sign of low performance.
Exclude CSS from Autoptimize: “If you encounter any error” or some of the elements doesn’t show up as it should be, you can find the CSS causing the issue and exclude by including the file name in the “Exclude CSS from Autoptimize”.
CDN is a network of servers that helps to deliver resources to the users based on their geographical region. This helps to improve the load time of a website for every user, irrespective of their location.
Autoptimize provides you with an option to load the autoptimized file (css/ js etc.) through a CDN.
All you need to do is enter the CDN Root URL. If you’re on Cloudfare, you don’t need to enter anything since cloudfare doesn’t provide any CDN URL.
However, If you’re using a premium CDN like ManCDN or Keycdn, you can get the URL from your account and enter the same, here.
Autoptimize Plugin provides few other settings to fine tune the process of Speed optimization.
Save aggregated script/css as static files: Autoptimize optimizes and stores the file (CSS/JS) in a cache folder on your web server and are served from the Cache and every compressed (optimized) file has an expiry.
It says, In case the server cannot handle this function properly, you can Disable this option.
Minify excluded CSS and JS: [DISABLE] – I recommend you to disable this option. CSS and JS files have been excluded because of some errors and you don’t want to mess this up by minifying them.
Also optimize for logged in editors/ administrators: [DISABLE]: Running autoptimize in the admin dasboard/ backend might disturb the work flow, hence not recommended.
Google Fonts: If your website/ theme uses Google Fonts, it might not be a wise idea to remove it. However, an optimum solution would be to enable the Fourth option “Combine and preload in head”.
In this case, the font’s are loaded after rendering the contents of the page.,
Remove emojis: If emojis are not a part of your business, it’s definitely recommended to remove them.
The Browser makes a request to load the emoji file, which definitely increases the load time, hence check this option.
Remove Query Strings from static Resources: CSS/ JS file with version no. at the end of URL with parameter such as “?” is Query Strings.
It’s better to remove these strings since it cannot be cached and lowers the website speed.
Preconnect to 3rd party domains: Files and Resources on your website makes request to several other domains for the required content/resource/data such as Google Fonts, Analytics, Tag manager etc.
Enabling this option makes the browser aware of the 3rd party domains (it has to make connection) before any request is made. In simple terms, the browser initiates the process of connecting to 3rd party domain before the request is made.
Optimize Youtube videos: Videos are heavy elements that needs to be optimized. Check this option to lazy load videos using WP Youtube lyte such that no request are made until and unless the videos comes into the view of the user.
If your Google page speed report suggests to remove the render blocking CSS, this step important. [Critical CSS is also a part of Autoptimize CSS Settings “Inline and Defer CSS”]
Critical CSS – only load the the CSS need to build the above the fold content and defer the load of non-essential CSS.
Once done, the Power-up with the help of criticalcss.com, creates different Critical CSS rules and places the Critical CSS depending upon the type of pages.
This ensures that your website loads very fast and improve the user experience.
Speed is one of the important factor when it comes to improving the User Experience and the visibility on the Search Engines. And Autoptimize, if run correctly, will definetly boost your website speed.
Let us know in the comments below your experience with Autoptimize. Also we’d love to know what are the Plugins you use on your website for speed, apart from Autoptimize?