WordPress Speed Optimization For Beginners

For the record, I cannot guarantee that my configuration is going to work flawlessly on your site (it could though). Consider this tutorial as a set of options for you to try. I recommend Googling “WordPress speed” and go through all the links on the first page at least.

It is important to note that my site is on shared hosting, and all plugins and services mentioned here are free. I am running ads on posts and some pages so load times on those may be a bit slower.

As always, create a backup before making changes to your site. Clear cache or disable existing caching plugins, and temporarily go on development mode (if using a CDN like CloudFlare).

Smush + Jetpack

Smush Image Compression and Optimization or simply Smush is pretty straightforward, a must-have for image optimization. I can confirm it doesn’t break my site when used together with Jetpack’s Site Accelerator. Both plugins offer lazy loading, but it’s not a good idea to activate both. I’m only using the one from Smush.

I’ve disabled Site Stats on Jetpack because it is slowing down my site according to speed tests. Deactivating Jetpack modules that are not being used helped improve my site’s speed. Out of 43 modules, only 7 are active here.

WordPress Speed Combo: Autoptimize + Async Javascript

Depending on how fancy your site is, these two plugins can either work wonders for you or mess everything up. I’ll share my configuration, but please proceed with caution. If items are not listed here, I left those untouched.

Adding exclusions or URLs to preconnect to are entirely up to you.

Autoptimize Settings

Setting up Autoptimize takes a bit more time. Here are my choices:

JavaScript Options
Optimize JavaScript Code? Yes
Aggregate JS-files? Yes
Also aggregate inline JS? Yes

CSS Options
Optimize CSS Code? Yes
Aggregate CSS-files? Yes
Also aggregate inline CSS? Yes
Generate data: URIs for images? Yes
Inline and Defer CSS? Yes*

*Use a Critical Path CSS Generator, copy all the contents from the first box (Critical Path CSS) and paste it in Autoptimize.

HTML Options
Optimize HTML Code? Yes

Misc Options
Save aggregated script/css as static files? Yes

Extra Auto-Optimizations (under the Extra tab)
Google Fonts: Remove Google Fonts
Remove emojis: Yes
Remove query strings from static resources: Yes

Remember to save changes. 🙂

Async Javascript Settings

Now the easier one: Async Javascript. Depending on your needs, select async or defer, I prefer the latter.

Method: Defer
jQuery: Excluded
Autoptimize Status: Enabled
Autoptimize Method: Defer

Google Fonts Typography + Host Google Fonts Locally

Note that I mentioned removing Google fonts via Autoptimize and the reason is to allow hosting the fonts locally. This would make it possible to cache the font files. Doing this manually is not exactly for beginners but thanks to Google Fonts Typography and Host Google Fonts Locally, you can simply install the two plugins and you’re ready to go. Google Fonts can be switched through Appearance > Customize.

Comet Cache + .htaccess

Out of all the caching plugins I’ve tried, Comet Cache is one of the easiest to configure and it’s compatible with Autoptimize. I’ve left everything on default settings except one.

Under Apache Customizations, turn off GZIP Compression and add the following to your .htaccess file:

## ENABLE GZIP COMPRESSION ##
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>
## ENABLE GZIP COMPRESSION ##

Also, add these lines in .htaccess to leverage browser caching:

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType image/svg "access 1 year"
  ExpiresByType text/css "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType application/javascript "access 1 month"
  ExpiresByType application/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 7 days"
</IfModule>
## EXPIRES HEADER CACHING ##

You can specify a different set of values depending on your preference.

Improve WordPress Speed on Shared Hosting

This is where Cloudflare comes into play. I strongly recommend using a CDN especially websites on shared hosting like mine.

But, like is said in my previous post, I’m not using all the defaults set by their plugin. I’ve listed down their settings and added my comments in brackets:

Security level: Medium [leave as is, consider adding a Page Rule*]
Caching level: Standard [leave as is, consider adding a Page Rule*]
Auto Minify: Enable Auto Minify for JS, CSS, and HTML [turn this off if using Autoptimize]
Browser Cache Expiration: 4 hours [change to Respect Existing Headers]
Always Online: On [leave as is]
Development Mode: Disabled [leave as is]
IPV6 Compatibility: Off [turn this on]
WebSockets: On [leave as is]
IP Geolocation: On [leave as is]
Email Address Obfuscation: On [leave as is]
Server-side Excludes: On [leave as is]
Hotlink Protection: Off [turn this on if you like]
Image optimization (Polish and Mirage): Off (unless on Pro or higher plan) [obviously, a broke millennial on a free plan can’t turn this on]
Rocket Loader: Off [turn this off if using Autoptimize and Async Javascript]

*Read more about Cloudflare page rules here.

Other Stuff To Consider

Cleaning up the database with WP-Optimize

Even websites need to detox. This process can be scheduled, however, I prefer doing this manually. I absolutely love how easy this plugin makes database cleaning, particularly the tables that some uninstalled plugins leave behind.

Implementing Accelerated Mobile Pages (AMP)

This part used to intimidate me because not all website owners are supportive of the Google AMP Project. I’ve configured AMP for my site regardless. You’re probably reading the AMP version of this article if you’re coming from a Google search. I’m using AMP for WP. Performance-wise, I think AMP pages are okay, but it’s ridiculous that forms (contact, email opt-in, comment, etc.) don’t work on those. So, optimizing the responsive/mobile version of a website is still important. Simply put, AMP is not a solid replacement for responsive themes yet.

Unless one is willing to pay for Pro AMP features.

I can’t (don’t know how to) convert my non-AMP mobile site into a 100% error-free AMP. The best I can do is design the AMP version to look as close as possible to the non-AMP version. The colors and fonts look kinda similar at least.

WordPress Speed Testing

If you run tests on this site, my page scores are not perfect, I know. Still pretty good though considering I’m not paying for anything else other than domain and hosting.

wordpress-speed

Source: Pingdom – Asia

My go-to sites for testing are GTMetrix (to find specific items slowing down the site) and WebPageTest.org (for precise speed metrics like First Byte and Total Load Times). Pingdom is nice too for quick tests from different locations. I recently discovered a site called Batch Speed and it’s awesome for bulk speed tests.

I’m not a WordPress speed ninja, but all the things I mentioned here worked for me so I hope this article helped you in any way.

Last Updated on

You may also like...

1 Response

  1. dinesh says:

    nice post for me keep it.

Leave a Reply

Your email address will not be published. Required fields are marked *