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
- Autooptimize. Get the plugin here
- LiteSpeed cache installed on your server (optional)
- PerfMatters. Get plugin here
- 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 Images | Optimize 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 Fonts | Leave 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 emojis | Removes WordPress’ core emojis’ inline CSS, inline JavaScript, and an otherwise un-autoptimized JavaScript file. |
| Remove query strings from static resources | Removing 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.
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.comAlso 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 Emojis | Enable |
|---|---|
| Disable Embeds | Enable |
| Remove Query Strings | Enable |
| Disable XML-RPC | Enable |
| Remove jQuery Migrate | Enable |
| Hide WP Version | Enable |
| Remove wlwmanifest Link | Enable |
| Remove RSD Link | Enable |
| Remove Shortlink | Enable |
| Disable RSS Feeds | Enable |
| Remove RSS Feed Links | Enable |
| Disable Self Pingbacks | Enable |
| Disable REST API | Enable |
| Remove REST API Links | Enable |
| Disable Dashicons | Enable |
| Disable Google Maps | Enable |
| Disable Google Fonts | Enable |
| Disable Password Strength Meter | Enable |
| Disable Comments | Enable |
| Remove Comment URLs | Enable |
| Lazy LoadingBETA | Enable |
| Use Native | Enable |
| Disable Heartbeat | DefaultDisable EverywhereOnly Allow When Editing Posts/Pages |
| Heartbeat Frequency | 15 Seconds (Default)30 Seconds45 Seconds60 Seconds |
| Limit Post Revisions | DefaultDisable Post Revisions123451015202530 |
| Autosave Interval | 1 Minute (Default)2 Minutes3 Minutes4 Minutes5 Minutes |
| Change Login URL | Could 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”
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.
Some will have the following information:
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:
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.