There is a lot more to WordPress Optimization than just a clean design. It means optimizing all the things that keep your website tied together to give you a better performance. Optimizing your website includes Aggregate, Minify & Cache Scripts & Styles, Inject CSS in Page Head, Inline CSS, Move & Defer Scripts to Footer, Minify HTML, Optimize Images, Lazy Load Images, and so on.
You won’t be able to optimize and solve the above-mentioned issues unless you are an experienced developer. Even if you are not, there is no need to worry. We have found a very easy solution for you by which you will be able to optimize your WordPress website in just a matter of a few minutes.
WordPress as a platform offers plenty of options for optimizing your site to make it faster and more reliable. In this article, we’ll show how to optimize your WordPress website with the help of the “Autoptimize Plugin”. We will also show you the best setting that you can set in the plugin for the best performance.
Note: Autoptimize does not do any HTML page caching. It is strictly an optimization plugin.
One of the reasons for using the Autoptimize plugin is that it offers a complete set of features free of cost. Also, it is one of the highest-rated plugins in the store and is regularly updated. There are also paid versions of the plugin available i.e. ‘Autoptimize Expert Configuration’ and ‘Complete Speed Optimization’.
Now let’s take a look at the best settings to optimize your website. Before we begin you need to install and activate the Autoptimize plugin from your WordPress dashboard.
On successful installation go to Settings >> Autoptimize Settings which will take you to the settings page of the optimization plugin.
JS, CSS & HTML Settings:
When you arrive to the Autoptimize settings page, you will see (JSS, CSS & HTML), Images, Critical CSS, Extra, and Optimize More tabs. The above category is the first tab and consists of the following blocks:
- CSS Options
- HTML Options
- CDN Options
- Cache Info
- Misc. Options
Aggregate JS Files:
Also aggregate inline JS?:
We recommend you to keep this option disabled. Enabling this option will extract inline JS in your HTML, and combine it with Autoptimize’s optimized JS file which can cause a rapid increase in Autoptimize’s cache size.
We recommend you disable this option. While enabling this option would potentially fix some JS errors but this can result in render-blocking elements which may decrease your page speed.
Exclude scripts from Autoptimize:
Add try-catch wrapping:
We recommend you to enable this option. This option helps you with debugging issues by encasing your JS code in try-catch blocks.
Note: It is recommended to consult a professional if your website only works with this option enabled.
Autoptimize Plugin CSS Options
Optimize CSS Code:
We recommend you to enable this option. Autoptimize will minify your CSS files when this option is enabled. All the other options will open up once you enable this option.
Enabling this option will combine all your CSS files into a single file. The functionality of this option is very similar to the “Aggregate JS Files” option. So even for this option, we recommend you to test your website performance with this option enable and disabled.
Also aggregate inline CSS:
In most cases we recommend you keep this option disabled. By enabling this option, inline CSS will be moved to Autoptimize CSS files which might result in reduced page size.
Generate data: URIs for images:
In simple terms, when this option is enabled, small images are moved into CSS to reduce the number of server requests. In technical terms, Autoptimize will encode base64 format small background images and embed them into CSS. In doing so, it reduces the number of HTTP requests as base64 format files is generally 20-30% larger than their binary equivalents. We recommend testing out your website performance by enabling as well as disabling it.
Inline and Defer CSS:
In simple terms, enabling this option inlines critical “above the fold” CSS and the full CSS file. This options sometimes result in higher speed for some sites, but it can also slow down some sites if it uses an external API. Elements like global font families and sizes, structural elements, and navigation styling are targeted. A “power-up” feature is offered by Autoptimize that automatically generates critical CSS for your WordPress pages. You can also manually extract critical CSS or can use this external tool to generate it.
After the critical CSS is generated, copy it to the Inline and Defer CSS section.
The final step is to test your website’s front-end experience. You need to identify unstyled elements and add the corresponding styles into Autoptimize for inlining if you notice some “flashes of unstyled content (FOUC)”.
Inline all CSS:
This option when enabled in lines all CSS straight into HTML to reduce server requests. This option is not recommended as it can increase the page size.
Exclude CSS from Autoptimize:
This option when enabled excludes certain CSS files from optimization. By default, following scripts are excluded:
Note: Excluded CSS files will still be minified unless “minify excluded CSS and JS files” is unchecked under “Misc Options”.
Optimize HTML Code:
We recommend enabling this option. On enabling, minifies HTML output by removing unnecessary whitespace. We also recommend testing HTML code optimization thoroughly before using it as it can cause issues on some websites.
Autoptimize Plugin Keep HTML comments:
Enable this feature if you want to keep your HTML comments intact during optimization.
Autoptimize Plugin CDN Options
Leave the text area blank if you are not using a CDN or using a proxy-style CDN like Cloudflare. But if you are using a custom CDN then you need to enter its URL for static assets.
The “Cache Info” section displays general information about the Autoptimize Plugin. Users can view Autoptimize’s cache folder, the plugin’s write status, and the number and file sizes of the optimized files. If the plugin’s write status displays “No”, then you need to contact the host to fix the issue.
Autoptimize Plugin Misc Options
We recommend you enable everything in this section.
Save aggregated script/css as static files:
This option when enabled saves optimized files as static files locally. Disable this option if your web server doesn’t properly handle the compression and expiry.
Minify excluded CSS and JS files:
This option when enabled ensures that all the JSS and CSS files are minified. Disable this option if any of your CSS or JS files break even when they are excluded.
Enable 404 fallbacks:
This option when enabled will try to keep your website or web page intact in case of broken sites. In some cases, this will require extra web-server level configuration to ensure “wp-content/autoptimize_404_handler.php” is set to handle 404’s in “wp-content/cache/autoptimize”.
Also optimize for logged in editors/ administrators:
This option when enabled ensures assets are optimized for logged-in editors and administrators.
Autoptimize Plugin Image Optimization
The Image Optimization is the second tab and consist of the following blocks:
- Optimize Images
- Lazy load Images
Note: Checking both these option is totally depends upon the user and on the type of hosting used.
Autoptimize Plugin Optimize Images:
The “Optimize images” option lets you integrate your WordPress with ShortPixel’s image optimization service. If you sign up through the link in Autoptimize, you’ll even get a special offer on ShortPixel’s service. Along with the “Image Optimization quality” setting, it also allows you to serve the “next-gen” WebP image format to any browser that supports it.
Autoptimize Plugin Lazy Load Images:
Autoptimize Plugin Critical CSS
In this tab, the critical CSS for your website is generated using an external API. It is a paid feature.
Autoptimize Plugin Extra Auto Optimizations
In this tab, the user can configure additional optimizations that can improve the performance of your WordPress site. It consists of the following blocks:
- Google Fonts
- Remove emojis
- Remove query strings from static resources
- Preconnect to 3rd party domains
- Preload specific requests
- Optimize YouTube videos
Autoptimize Plugin Google Fonts:
Following Options are available for optimizing google fonts on your website;
- Leave as is.
- Remove Google Fonts.
- Combine and link in head.
- Combine and link deffered in head.
- Combine and load fonts asynchronously with webfont.js.
We recommend users to experiment with different options to find the best options for your website. Although, we don’t recommend selecting the “Leave as is” option as if will not offer any benefit. Also, you can select the “Remove Google Fonts” option if your website is using a system font stack.
Autoptimize Plugin Remove emojis:
Autoptimize Plugin Remove query strings from static resources:
With this option enabled, query string from the URL is removed. Doing so doesn’t result in faster load times, but can improve GTmetrix and Pingdom performance scores.
Autoptimize Plugin Preconnect to 3rd party domains:
This option when enabled is used to instruct the browser to set up DNS, TCP, and TLS negotiations before an HTTP request is made to the origin server. We recommend users to enable this service if your WordPress website calls assets from an external source. Doing so improves the page load speed. For example, I use Google Analytics, which requests assets from https://www.google-analytics.com and https://stats.g.doubleclick.net. By adding these domains to my HTML preconnect list, the web browser will make an early connection to Google’s servers.
Autoptimize Plugin Preload specific requests:
This option downloads a resource that are needed very early in the page load process by giving an instruction to the web browser. We recommend users to consult a developer while using this option. The developer can suggest which assets, if any, to preload on your WordPress website. If this is not done properly it will affect your website performance.
Optimize YouTube videos:
We recommend users to enable this option if they are embedding a lot of YouTube videos on their WordPress website.
This tab is basically an advertisement tab. Users can ignore this tab if they are not looking to use any extra services along with this plugin. By following all the steps of this article, you can easily get a highly optimized site.
Autoptimize Plugin is one of the best options available for beginners as well as professionals for optimizing their WordPress website if they are not looking to spend money on expensive add-ons. If you combine Autoptimzie with a good quality host, your website can break all performance barriers.
We hope this article helps you optimize your website. Please drop your queries in the comment section.
Also, if you want us to cover a specific topic, you can drop that into the comment section as well.