Optimizing WordPress might seem like a daunting task. Placing plugins breaks everything. It can become a mess very quickly. Some image quality plugins make images ugly, small, unusable. You end up losing website quality for performance. Do not worry, we will teach you step by step on how to optimize wordpress and where to be careful.

Requirements

  1. Autooptimize. Get the plugin here
  2. LiteSpeed cache installed on your server (optional)
  3. PerfMatters. Get plugin here
  4. ShortPixel (You can use Litespeed to replace this plugin)

I strongly suggest you use this plugins to optimize your WordPress site. They can be extremely useful and optimize your website pages for a cheap cost.

WARNING: This might break your WordPress site. Please create a sandbox to try this settings before applying into a running website.

Autoptimize

Autooptimize is the best plugin to generate critical CSS, that means, it will remove most of the useless parts in css codes. It also optimizes JS codes and minifies them.

JavaScript Options

Some options might break your website. I have placed with colors which settings you will likely want to apply to your website. The green ones are less likely to break your website and the red ones are more likely to. If you know your website breaks, look the .js that is broken and try to add it to “exclude from autoptimize”. This will fix most of the issues.

Also aggregate inline JS?
Aggregate JS-files? Aggregate all linked JS-files to have them loaded non-render blocking? If this option is off, the individual JS-files will remain in place but will be minified.
Also aggregate inline JS? Let Autoptimize also extract JS from the HTML. Warning: this can make Autoptimize’s cache size grow quickly, so only enable this if you know what you’re doing.
Force JavaScript in <head>? Load JavaScript early, this can potentially fix some JS-errors, but makes the JS render blocking.
Exclude scripts from Autoptimize:
A comma-separated list of scripts you want to exclude from being optimized, for example ‘whatever.js, another.js’ (without the quotes) to exclude those scripts from being aggregated by Autoptimize. Important: excluded non-minified files are still minified by Autoptimize unless that option under “misc” is disabled.
Add try-catch wrapping? If your scripts break because of a JS-error, you might want to try this.

CSS Options

CSS Options

Inline and Defer CSS?
Aggregate CSS-files? Aggregate all linked CSS-files? If this option is off, the individual CSS-files will remain in place but will be minified.
Also aggregate inline CSS? Check this option for Autoptimize to also aggregate CSS in the HTML.
Generate data: URIs for images? Enable this to include small background-images in the CSS itself instead of as separate downloads.
Inline and Defer CSS? Inline “above the fold CSS” while loading the main autoptimized CSS only after page load. Check the FAQ for more info. This can be fully automated for different types of pages on the CriticalCSS tab.
Inline all CSS? Inlining all CSS is an easy way to stop the CSS from being render-blocking, but is generally not recommended because the size of the HTML increases significantly. Additionally it might push meta-tags down to a position where e.g. Facebook and Whatsapp will not find them any more, breaking thumbnails when sharing.

The “inline all css” is not recommended because it increases load times. While it could be loaded “async” it loads on the page and it can delay the time to first paint.

HTML Optimization

Optimize HTML Code?
Keep HTML comments? Enable this if you want HTML comments to remain in the page.

I do not suggest you do not keep html comments, because they tend not to have any functionality.

Image Optimization

Make your site significantly faster by just ticking a couple of checkboxes to optimize and lazy load your images, WebP support included!

Optimize ImagesOptimize images on the fly and serve them from Shortpixel’s global CDN.Get more Google love and improve your website’s loading speed by having your publicly available images optimized on the fly (also in the “next-gen” WebP image format) by ShortPixel and then cached and served fast from Shortpixel’s global CDN. Sign-up now to receive a 1 000 bonus + 50% more image optimization credits regardless of the traffic used. More image optimizations can be purchased starting with $4.99.Questions? Have a look at the ShortPixel FAQ! Only works for sites/ images that are publicly available. Usage of this feature is subject to Shortpixel’s Terms of Use and Privacy policy.
Lazy-load images?Image lazy-loading will delay the loading of non-visible images to allow the browser to optimally load all resources for the “above the fold”-page first.

This should get you setup for your website. Easy and not much trouble. This plugin is also free.

As I said, be sure to test thoroughly. This might break some functionality.

Extra Optimizations

Google FontsLeave as is
Remove Google Fonts
Combine and link in head (fonts load fast but are render-blocking), includes display:swap.
Combine and preload in head (fonts load late, but are not render-blocking), includes display:swap.
Combine and load fonts asynchronously with webfont.js
Remove emojisRemoves WordPress’ core emojis’ inline CSS, inline JavaScript, and an otherwise un-autoptimized JavaScript file.
Remove query strings from static resourcesRemoving query strings (or more specifically the ver parameter) will not improve load time, but might improve performance scores.

Now, comes the tricky part. This part should only be done if you are sure about what you are doing.

Go to tools.pingdom.com and test your website.

Easy guide to optimize Wordpress under 1 hour. 1

You will see something like that. Now, this will tell you which links if any you should reconnect or dns prefetch. This is a good example, because our website only reconnects to google fonts. This means less time will be used in making DNS Lookups to other websites. In this case, it is not very relevant but in this example I could put:

fonts.gstatic.com,fonts.googleapis.com

Also make sure to listen to google speed insights as it will tell you if any request needs to be preloaded. If they suggest you preload any .js or .css then put it in “Preload specific requests” and type it in. In my case, I will put the font as they suggest it is loaded first to improve time to first render.

One of the added advantages of using auto-optimize is that it gives you the opportunity to generate cache files. This can create a lot of files, so be sure it is being useful for your website. Added, every time you delete the cache, it will take more to load your website. If you have a lot of visits in your website, this can make it crash and use abnormal quantities of CPU.

Perfmatters

This plugin costs. But it is absolutely worth it.

Options

Select which performance options you would like to enable.

Disable EmojisEnable
Disable EmbedsEnable
Remove Query StringsEnable
Disable XML-RPCEnable
Remove jQuery MigrateEnable
Hide WP VersionEnable
Remove wlwmanifest LinkEnable
Remove RSD LinkEnable
Remove ShortlinkEnable
Disable RSS FeedsEnable
Remove RSS Feed LinksEnable
Disable Self PingbacksEnable
Disable REST APIEnable
Remove REST API LinksEnable
Disable DashiconsEnable
Disable Google MapsEnable
Disable Google FontsEnable
Disable Password Strength MeterEnable
Disable CommentsEnable
Remove Comment URLsEnable
Lazy LoadingBETAEnable
Use NativeEnable
Disable HeartbeatDefaultDisable EverywhereOnly Allow When Editing Posts/Pages
Heartbeat Frequency15 Seconds (Default)30 Seconds45 Seconds60 Seconds
Limit Post RevisionsDefaultDisable Post Revisions123451015202530
Autosave Interval1 Minute (Default)2 Minutes3 Minutes4 Minutes5 Minutes
Change Login URLCould be useful for security purposes.

This will very much depend on your website. If you have google maps or you don’t need google fonts, then do as how it is best for your website. Equally test thoroughly and make sure it does not affect any functionality.

On the tab Extras enable the “script manager”.

This part is very useful, because in google you often get an alert saying “remove css files that are not used” or “remove js files that are not used”

Easy guide to optimize Wordpress under 1 hour. 2

In this example, you see some files that are almost totally unused. They say it has a possible saving of 10.3 out of 10.6 KB, this means it is probably safe to remove. Test thoroughly when doing so. Perfmatters help us here because you can directly disable them.

Go to http://yourwpdomain.com/yourwpdirectory/fileyouwanttoedit?perfmatters

or just add ?perfmatters to the page you wish to optimize.

Here you will see the scripts that are loading.

Easy guide to optimize Wordpress under 1 hour. 3

Some will have the following information:

Easy guide to optimize Wordpress under 1 hour. 4

There you can match it with the google suggestions of unused .css. Disable all the unused css that you consider will not affect your website. Also do that with the .js files. But as I said before, you pretty much have to check setting by setting and page by page to see which one works and which one does not. This plugin will remove all unused .js and .css files which will dramatically increase your performance.

Shortpixel – Image optimization

Shortpixel is one of the best image optimizers on the market. This are my settings:

shortpixel-image-optimization

In my personal case, I care a lot about image quality. Consequently, I decide to resize my images to 1025×1024. Most of the settings presented here will be extremely useful for your website.

On the advanced page settings I suggest you enable this options:

CMYK to RGB conversion Adjust your images’ colours for computer and mobile screen display.Images for the web only need RGB format and converting them from CMYK to RGB makes them smaller.
WebP Images:Deliver the WebP versions of the images in the front-end:
Also create WebP versions of the images, for free.
 Using the <PICTURE> tag syntax
 Global (processes the whole output buffer before sending the HTML to the browser)
Optimize Retina images Also optimize the Retina images (@2x) if they exist.If you have a Retina plugin that generates Retina-specific images (@2x), ShortPixel can optimize them too, alongside the regular Media Library images and thumbnails.  More info 
Optimize other thumbs Also optimize the unlisted thumbs if found.Some plugins create thumbnails which are not registered in the metadata but instead only create them alongside the other thumbnails. Let ShortPixel optimize them as well. 
Optimize PDFs Automatically optimize PDF documents.

You should be very careful if you want to enable “Convert PNG images to JPEG” because it can sometimes tamper with images that you want with a transparent background.

You should also enable these:

Optimize media on upload Automatically optimize Media Library items after they are uploaded (recommended).By default, ShortPixel will automatically optimize all the freshly uploaded image and PDF files. If you uncheck this you’ll need to either run Bulk ShortPixel or go to Media Library (in list view) and click on the right side “Optimize now” button(s). 
Process in front-end Automatically optimize images added by users in front end.Check this if you have users that add images or PDF documents from custom forms in the front-end. This could increase the load on your server if you have a lot of users simultaneously connected.

LiteSpeed Cache

This plugin should only be used if you have a Litespeed server. It dramatically reduces response times.

Go to Cache and enable all the settings on “cache control settings”. Equally enable cache control settings. For more information you should go to the Litespeed website.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
In this article: