Last Updated on January 20, 2021 by BrodNeil
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:
- GreenGeeks.com for an eco-friendly website; it’s 300% green. (If you want to do something to the environment, use GreenGeeks.)
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:
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.
Enable GZIP in your .htaccess
On the same .htaccess file, apply the following:
Apply 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.
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.
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.
WebP Express EWWW Image Optimizer
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.
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.