This is just an outline of how to speed up your WordPress site.
Note: Most of the content may still be true. However, I decided to go for the more efficient and more effective way. That is using Nitropack. Read Nitropack Review: Does it Really Work?
Our website is currently using GeneratePress WordPress theme and so far we are very pleased with it. It is lightweight and works pretty well with Nitropack.
Find an excellent web host.
No matter what you do or what plugins you have, if your web host’s performance is poor, you would likely get what you paid for.
These are the web hosts I recommend as per our experience:
- MediaServe (We are very new to this web host company. However, of all that we’ve tried, this is top-notch. It is supported by a biblically minded family company in business since 1999. Therefore, you are dealing with the business owner and support is great.)
- Siteground.com
- GreenGeeks.com for an eco-friendly website; it’s 300% green. (If you want to do something to the environment, use GreenGeeks.)
- Servint.net
Use a clean WP Theme, Frameworks, or a Boilerplate
In the past, I have been using the StudioPress themes (a.k.a Genesis Framework). They are beautiful themes and coded very well.
Recently, because I am more obsessed with PageSpeed Insights Score without the need of spending more money for customized solutions, I begin using HTML5Blank: An open-source boilerplate theme for WordPress and I am very pleased with the result.
Mobile PageSpeed Insights Score
Desktop PageSpeed Insights Score
Just to set expectations, sometimes for some reason, my PageSpeed Insights score varies. However, I have noted that the PageSpeed Insights scores are always above 90.
See my other tests:
Does Google Analytics Affect Your Site’s Google’s PageSpeed Insights Score?
Some things you can do in your WP-Config file:
# Disables all core updates. Added by BrodNeil
define( 'WP_AUTO_UPDATE_CORE', false );Add the line above to disable all core updates.
# Empty trash after 7 days. Added by BrodNeil:
define( 'EMPTY_TRASH_DAYS', 7 );Add the line above to empty trash after 7 days. You can change the value of 7 to 3, that is if you want to empty the trash after 3 days.
# Limit post revisions to 3 by BrodNeil:
define( 'WP_POST_REVISIONS', 3 );Add the line above to limit the post revisions being saved to 3. I think the default is unlimited.
Note that the Added by BrodNeil can be replaced by your name. This just helps me who added the line in our team.
Apply a leverage browser caching in your .htaccess
Go to CPANEL > File Manager.
Look for the .htaccess file. Make sure that you allow to show hidden files.
Add the lines below to your .htaccess file.
# Leverage Browser Caching
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 year"
# Data interchange
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Favicon (cannot be renamed!)
ExpiresByType image/x-icon "access plus 1 year"
# HTML components (HTCs)
ExpiresByType text/x-component "access plus 1 month"
# HTML
ExpiresByType text/html "access plus 0 seconds"
# JavaScript
ExpiresByType application/javascript "access plus 1 year"
# Manifest files
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Media
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
# Web feeds
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Web fonts
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
</IfModule>
# END LBCEnable GZIP in your .htaccess
On the same .htaccess file, apply the following:
# GZIP enabled
<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
</IfModule>
# END GZIPApply GZIP Compression.
Go to your CPANEL, and look for Optimize Website.
Enable Compress Content > Compress All Content by clicking Update Settings.
Have the latest or the recommended PHP version.
Go to your CPANEL.
Look for Select PHP Version or something similar like PHP configuration.
Make sure your plugins can work well with the version you are trying to activate.
Activate Cloudflare.
Go to your CPANEL.
Look for Cloudflare.
Use the FULL set up. You can find instructions in how to set up Cloudflare either from your web host or Cloudflare itself.
Install and activate these plugins:
WP-Optimize
This plugin helps you clean up your database easily without you going through the manual queries. If you are not familiar with how you can find the database, then having the plugin is much safer and easier.
P3 (Plugin Performance Profiler)
Directly, this plugin will not help in speeding up your site’s performance. However, this plugin allows you to check which plugins are slowing down the site. Helping you to take a better-informed decision.
SG Optimizer
SG Optimizer is one of the best easy-to-use performance plugin. It works perfectly well for websites hosted in SiteGround. SG Optimizer is built by SiteGround. SG Optimizer handles caching, system settings, and all the necessary configurations for a blazing-fast website including image optimization.
Autoptimize
Like many other plugins, Autoptimize speeds up your website by optimizing JS, CSS, HTML, Google Fonts and images, async-ing JS, and more. Among the plugins we’ve tried, Autoptimize is best in resolving the Eliminate render-blocking resources in Google PageSpeed Insights.
Inline Critical CSS
What is inlining the critical CSS?
By reducing the amount of CSS the browser has to go through, and by inlining what is considered as the priority CSS (critical CSS) on the page, we can reduce the number of HTTP request and get the page to render much faster.
1. Open your homepage.2. Right+click and select View page Source.
3. Look for your CSS file media=all and click to open it.
4. Copy-page the CSS entries on this Critical Path CSS generator by https://jonassebastianohlsson.com/criticalpathcssgenerator/
5. Tweak as needed.
6. Copy-paste the result on your Autoptimize plugin > JS, CSS, & HTML > CSS Options > Inline and Defer CSS.
If you want to fully automate the inlining of critical CSS on different types of pages. You can use another plugin for it unless you want to do it manually.
7. Click Save Changes and Empty Cache.
Async Javascript
Async Javascript lets you add ‘async’ or ‘defer’ attribute to scripts to exclude. Use this with Autoptimize; it’s a perfect match.
WebP Express EWWW Image Optimizer
Optimize images.
Serves autogenerated WebP images instead of jpeg/png to browsers that support WebP. Works on anything (media library images, galleries, theme images etc).
Lazyloads your images.
Enable Hotlink Protection.
Go to your CPANEL and look for Hotlink Protection.
It prevents other websites from directly linking to files on your website. Therefore, the other sites may seem-like stealing your bandwidth. An example of hotlinking would be using a <img> tag to display an image from your site somewhere else on the net.
Enable it.
I did everything I mentioned above and was still not satisfied with the result. Simply because my benchmark for the loadtime or speed is that of an HTML static site.
Late June 2019, I decided to test Google Cloud Compute Engine and was quite happy with the result. The issues I had was that
- Google support was a bit expensive for small businesses, and
- free support from community or forum may never come or too technical for an average webmaster.
See the Google PageSpeed Insights result below:
After months of testing, I decided to move back out of the Google Cloud Console. There was a bit of learning curve, and I don’t have the time to learn them all.
Fortunately, the HTML5Blank boilerplate has really helped me a lot speed up my WordPress site.
One thing though to remember with HTML5Blank, you need to have a good understanding of HTML and CSS to use it.