How can you speed up your WordPress website? There are different methods. I have written about optimizing CSS and Javascript with Autoptimize before. This plugin quickly gives very good results!
The primary goal of Autoptimize is to combine and optimize (compress) the CSS and Javascript files your website uses. Also the HTML can be optimized for even better performance.
In this article you can learn how to get the most out of Autoptimize.
Options of Autoptimize
Autoptimize has two general settings: basic and advanced. You open the advanced settings by clicking on that option.
By selecting the desired options, the plugin will immediately start optimizing your website. In most cases, this will work out of the box. You will have to check the design and functionality and make sure everything works and looks like before. If so, basically you’re done!
It is possible your website doesn’t work and look like before activating the plugin anymore. Or it does, but you still want to go all the way. Then you can use the advanced settings. They appear after selecting the option. You can see the basic options you had before now have some additional options. Only when you checked the basic options, you can also use the advanced options.
HTML options
As you may have noticed, there are no advanced options for optimizing HTML. Nothing to be done here. I left the option “Keep HTML comments” checked. By unchecking this, all comments will be removed from the HTML. The difference will be marginal.
Javascript options
The “JavaScript options” require a little more explanation. Javascript is being used for many sorts of functionality. If you can open images in Lightbox, Javascript is being used. Do you have a “Return to top” button with smooth scroll? That also is done by Javascript. There are many more examples.
Most of the themes and plugins use their own specific Javascript. To make your website function as you want it, all these Javascript files will have to be loaded to the browser. Just take a look in the source code of your homepage and search for the ?????.js files. How many did you find?
Autoptimize will put all these Javascript files into one file, if possible. This way all the needed functionality will be supported by much less Javascript files! Even inline Javascript will be optimized. Because of the limited number of Javascript files to be loaded, your website will load much faster!
Not all scripts will still function well when combined into one single file. The only way to figure out which Javascript doesn’t like to be combined, you will have to test every single file. In the image above you can see that I excluded a few files from being combined. After some tests I figured out that these were the files that should be loaded separately to function.
The combined Javascript file will be loaded in the footer. This way it doesn’t block the content loading process. Your website will load much faster!
The option “Force JavaScript in?” is best to leave unchecked. You want the Javascript to be loaded in the footer. That way it won’t block the loading of the content. Some Javascript doesn’t like to be loaded in the footer. You have to test for those scripts. After you figured out which scripts have to be loaded in the header, you can use the option “Exclude scripts from Autoptimize:” to exclude them from being optimized.
CSS options
Optimization of CSS works just like the optimization of Javascript. All CSS will be combined into one CSS file, if possible.
WordPress itself, the theme and plugins all use their own stylesheets. Putting them all in one stylesheet may cause some design to break. You will have to exclude that particular CSS file to be combined with the option “Exclude CSS from Autoptimize:”.
Do you want to use Google fonts? If not, but your theme loads them anyway, you can check the option “Remove Google Fonts?” That saves another HTTP-request!
Attention: Autoptimize only optimizes CSS and Javascript that is loaded from your own domain. Third party scripts, like Google Fonts, Facebook, Twitter will not be optimized and will be loading separately. Try to limit the use of these external sources as much as possible. Your theme and plugins can use those external resources without you knowing…
It can make a difference to check the option “Save aggregated script/css as static files?”. This way the stylesheets and Javascript won’t have te be combined time after time. Keep in mind that when you make changes to the design or the functionality, you will have to empty the cache.
CDN Options
You can have your optimized files served from a CDN. Just fill in the base URL of your CDN!
Extra
On the Extra tab you can find Extra auto-optimization options. You can use these to your likings, but always test the results!
The difference
In the pictures below you can see the difference when you have configured Autoptimize in the best way possible. Note the decrease the number of HTTP-requests!
Before:
And after:
Conclusion
By using this plugin the right way, you can make your website a lot better and faster. Your visitors will notice also!
Tip: Take a look at the style sheets and scripts that load before you activated Autoptimize. And compare it with the style sheets and scripts after you activated and configured it.
Tip: for support by the plugin developer, please visit the support section of the plugin on WordPress.org.
Tip: Need a pro to set up Autoptimize? You can get it here!
Do you have any questions? Or would you like to tell how you made your website faster? Please use the comment form below!
very informative article. i think Autoptimize wordpress plugin best for page speed.
Thanks for sharing 🙂
Be careful. Optimizing HTML will push hyperlinks as secure (https://..). If the site to which you are linking has not upgraded to SSL, the link will not work. But, yeah, the plugin does what it says it will do. Nice!
but you know what, the plugin break down my CSS
Have you tried all different options? If it still breaks up your site, this is not your plugin.
You said “The only way to figure out which Javascript doesn’t like to be combined, you will have to test every single file. In the image above you can see that I excluded a few files from being combined.” But I can’t see this in the image. The main issue I always get and I just wish there was more info is regarding Sliders such as Rev which most people use. Every time I activate defer JS it effects the slider. and I can never work out which JS I need to excluded and where to put it to keep the slider working but improve the load speed, so in the end, I end up leaving this option which I don’t want to do.
Hi Mark,
You’re right, I didn’t make a screenshot with excluded Javascript files! But I guess it is clear what the purpose of this option is.
Have you tried to contact the developers of Rev about compatibility with caching and optimization plugins? They should keep the use of this kind of plugins in mind when they develop a plugin. But even then, it is possible it doesn’t work out for your website.
Another possibility is trying some other slider.
I was testing my subdomain website, and created a sub.subdomain.domain.com as my CDN. But when putting //sub.subdomain.domain.com/ in the CDN section, my website breaks. What wrong am I doing?
Hi Pagula,
Sorry for the very late reply. This question is more subdomain related. I can’t answer that for you, sorry. Maybe this helps: https://www.gulshankumar.net/serve-static-content-from-a-cookieless-sub-domain/
Regards,
Ronald
I use Auto Minify in Cloudflare. What are then the settings in Autoptimize?
Hi Aman,
None. Cloudflare minifies already by Autoptimize minified files. As far as I know, there are no conflicts.
Regards,
Ronald
Hello I am currently using the autoptimize plugin to optimize my website. However, when I check the css options, it messes up my homepage design. Do you have any idea on what specific css files I should exclude to solve such an issue. Your response will be highly appreciated.
Hi Jeremy,
The only way to find out, is by exclude css one by one. After excluding css, check the front end.
Good luck!
Ronald
Hello, could you elaborate a little on what google fonts are? I just removed them with autoptimize, and I noticed in certain areas my text looks less bold. Not necessarily in a bad way though. Will this help speed?
Thanks for a great article!
Hi Trey,
Thanks for your response!
Google fonts are fonts made available by Google and used by your theme and/or plugins. These fonts are loaded from an external source every time you visit your site. This can be bad for the website speed. Turning them off means your theme and/or plugins will fall back to there own fonts, which can result in different fonts on parts of your website. If this doesn’t bother you and your visitors, you can remove these Google fonts without harming the website itself.
Regards,
Ronald
I Set’s all the settings properly but where i can found my CDN url
Hi Rakesh,
You use a CDN? Then they can provide you your url. But I noticed you use Jetpack, and your images are served by their image CDN. And you are using Autoptimize in combination with W3 Total Cache. Looks like you have all the optimization you can get!
Regards,
Ronald
Great and very usefull article, As per my experience autoptimize is one of the best plugin created for optimizing website to increase speed. While there are various setting you can optimize, catch, css, html, javascript, fixing rendering-block issue etc but make sure to backup your all original files incase any thing break so you should have the restore files. I am using this plugin from quite long time for my website https://www.wishtomore.com/ and quite happy.
Hi Celina,
Thanks for your comment! Very nice to have a comment from a satisfied long time user of the plugin. It can be challenge to set it up well, but it definitely can speed up your site.. Making a backup is always good advice!
Regards,
Ronald