WordPress as the most popular content management system (CMS) covers 30% of all websites on the internet and while it’s awesome for many things, we would like to focus on 1 specific problem and come up with solutions on how to solve it.
Speed has become a huge factor for all websites and many case studies have found out that a slow website with above 3 seconds of load time is making a direct damage to your business. In fact starting in July 2018, Google will roll-out an update where SPEED is actually a ranking factor, especially for mobile phones.
In short, the faster your website is, the more likely you will keep your visitors, most of them will leave the website before it opens if it takes more than 3 seconds.
How to test website speed?
Before we go into how to optimize it, we need to test the website to find on what exactly is needed for optimizing.
On the websites that we will provide, there is something called a “waterfall” chart and it’s actually very simple. It tells how much time it took for each of the resources on the website to load. For example if you have a 3MB image somewhere, the chart will be wider, meaning it took more time for that resource to be downloaded and shown.
There are few websites where you can test your website speed:
- Pingdom – Pretty Simple with great waterfall that provides useful information and speed analysis
- GTMetrix – Advanced testing, provides detailed info and instructions for improvement. Registered users have more locations to choose from and other options.
- WebPageTest – In depth waterfall, with lots of server locations. The Best for finding the actual loading time for the website.
- Google PageSpeed Insights -Great suggestions and it also provides solutions like minified css/js as well as optimized images.
Important: Your actual web page speed is the most important factor, not the scores that the websites provide. Having a perfect score is awesome because it saves server resources. On websites with too many externaş dependencies, you cannot achieve a perfect score and your speed can suffer. In any case, check the images above to see how your great scores should look like.
We will walk with you on every single step on how to optimize a WordPress website
1. Use a caching plugin for WordPress
Caching is one of the most important factors when web page speed is considered. It will make your web pages faster even on low performing shared hosting plans. There are many caching plugins, here is a list with free and premium versions, in any case all of them will provide great job, the difference is in milliseconds.
What to look for in a caching plugin?
Beside it’s default job to provide caching, you need to look for the following features:
- Minify HTML, CSS
- Combine CSS and JS files separately as a single file.
- Use Gzip
- Preloading (it creates a cached version for all of your posts)
- Use LazyLoad for images
Free WordPress Cache Plugins
- Autoptimize – A Beast often used in combination with other caching plugins for example WP Super Cache or WP Rocket.
- Swift Performance Lite – This new plugin has a promising future, especially the pro version of it. It can provide the absolute BEST speed times but not always works as it should, depends on the website and how it’s set up.
- WP Fastest Cache – Great plugin but the Pro version of it has the options needed to get a great speed results.
- WP Super Cache – Overall Awesome plugin and easy to setup. Since it’s missing few key options, you can combine it with autoptimize for optimal results. Works well on websites with huge traffic.
- W3 Total Cache – It’s one of the most oldest and most downloaded cache plugins for WordPress. We also use this powerful caching plugin on our website but please make sure it is set up by someone who knows what he is doing.
Premium WordPress Cache Plugins
- WP Rocket – Currently the best all in one cache plugin with all the things needed to get the perfect scores and optimal speed. Recommended!
- Swift Performance PRO – or often called “Swiss Knife“. While it can bring the best possible speed times, it can often break the website. Not suggested for someone who does not know how to use its advanced settings. It’s still in development stage where many things will be improved and if it can destroy all other caching plugins at website speed at this stage, I can’t wait to see what the future holds for the next stable releases.
- WP Fastest Cache PRO – Provides lots of new additional options from the free version and it can get crazy speeds, depends on the website and how it’s written. For some websites, this one can provide better results than all other caching plugins.
2. Optimize Images
Optimizing images are one of the most important part for WordPress speed up. It can be done on automation by the following plugins:
- EWWW Image optimizer – My absolute Favorite. Just install, click bulk optimize and that’s it. It has a lot more options as well as paid version but it does very well for a free plugin.
- ShortPixel Image Optimizer – The Best there is but only 100 images per month for Free. It’s compression is the best and can save a lot of server resources.
- Compress JPEG & PNG images – by TinyJPG – This is actually one of the best as well but it has limits, 100 free images per month. If you are not lazy, you can pass that limit and do it manually on their website TinyJPG.com where you upload around 17-20 images at a time. Once they get compressed, you download them, reload the website and upload the next 17-20 images :)
- SmushIT – Great plugin but it can sometimes be slow while uploading images, great while batch optimizing.
There is an awesome image compressing website called Compressor.io. It can compress like crazy, even better than TinyJPG. The only downside is that there is no plugin for it and it only accepts 1 image at a time, so this is useful for images which will always be used on your website (like logo, icons etc).
4. Content Delivery Network
Your hosting location can be far away from your visitors’ location. In a case where your website is hosted in Canada, a visitor from India might need time to access to your website. A Content Delivery Network (CDN) solves this problem since most providers have servers in various countries and your content is served
Recommendations are Cloudflare, Dyn and MaxCDN. We shared Dyn coupons and MaxCDN coupons at our sister website DomainPromo.com. They not only they will improve your website speed by connecting you with the nearest server in the area, but will also protect your website by not allowing bots and DDoS attacks. This is great because your website will be always online. Since this subject alone is huge, setting up your domain with Cloudflare will be explained in details in some other article.
5. Optimizing the Database
WordPress database is awesome but after a while it becomes a chaos. Most of the plugins you have installed and removed leave their tables there, making a mess. There is also a problem with revisions because WordPress auto-saves everything you write for each post and it keeps all versions of it, forever. Each time you update something, WordPress keeps a separate version of that same post and in the end up with thousands of revisions from all your posts in the database. Removing them will greatly improve the performance.
The best plugin for the job is WP Optimize. IMPORTANT: Take a BACKUP before doing anything with it.
To limit post revisions just add the following line at the bottom to your wp-config.php file
define( 'WP_POST_REVISIONS', 3 );
You can do tweaks to the database with some of the caching plugins like Swift performance, WP Fastest Cache and WP Rocket.
6. Use well-optimized themes
There are thousands of WordPress themes but not all are optimized for website speed. Even if you manually minify every file the theme has, it can still be slow because of the way it’s written and it might spend enourmous server resources.
Go for WordPress themes that has great reviews on ThemeForest.net and active support, otherwise you’ll be pointing fingers to the hosting company, assuming it’s their fault that the website is slow :)
Another thing is that if the theme code is poorly written and you have a large database, the slow queries will become a huge problem and will require manual re-coding to solve it.
7. Reduce External Requests
Having too many external HTTP requests will slow down your website. Some of these can be hosted locally like fonts or icons. You will notice that this will slightly improve the speed.
Having ads on your website is not a bad thing but it can be for the speed. If you have custom clients and you are offering them ads on your website, it’s better if you host them locally instead through a separate open-source ad server like Revive or DoubleClick for Publishers.
8. Add security to save server resources
A strong security both on the server and the website can save you a lot of resources if it blocks unwanted traffic. If the server is running smoothly, it can deliver your website faster.
Since security in general is a huge subject, we’ll stick to WordPress
- All In One WP Security & Firewall – (AIOWPS) My absolute favorite, it’s lightweight and has almost all the features needed to keep your website secured. Some of the cool features that will help you speed up your website is actually having a bot blacklist and it blocks them before they can scan your website thousands of times.
- Wordfence – Another favorite but this one can use a lot of server resources. It can block bots and people from it’s own list or it can monitor the activity of each user and block them accordingly if they do some suspicious activities. You can also block people from other countries with it’s premium features which can save a lot of server resources. Personally I use it to find malware on hacked websites.
- Disable REST API – Great way to disable functionalities that you don’t usually need. It’s also great to keep your admin users hidden from the public.
9. Disable hotlinks to your images
If your images are used outside of your website and your server gets burned down, it can affect your WordPress speed and will drain your server resources by exploiting your bandwidth limit. AIOWPS has a neat feature that can help you with that and it works pretty well, no need to install additional plugins. If you have cPanel, there’s also an option to disable hotlinks.
10. Too many plugins
Plugins are written by different developers with different knowledge and coding styles. While their features may be awesome, some plugins actually slow down your page load time. To detect which plugins have an effect on your load time, you need to spend some time analyzing plugin behaviors with a free plugin named Query Monitor.
After determining which queries take longer, you can either disable those plugin, change the loading order of the them or change when those plugins load (only when needed, not always). To change the loading order of the plugins, there are few plugins but the best one is Plugin Organizer. You can reorder them and it can greatly improve the speed of your WordPress.
Another great technique is to load the plugins only when they are needed (for example contact forms). By default they are being loaded for every visitor even if the “contact form” is not present on that page. To limit that, check out this great free plugin WP Asset CleanUP.
11. Lazy Load Images
Many caching plugins will provide this option but it’s important to mention it on it’s own. This can greatly improve your WordPress speed by loading only the images needed. It will load the others as you scroll down after the website is loaded with great speed.
There are a couple of separate lazy load plugins available at WordPress plugin directory. You can install one of the most installed plugins there.
12. Disable Trackbacks and Pings
This will save great amount of server resources because many spammers use this feature to be seen on your WordPress admin dashboard.
To disable it go to Settings -> Discussion and UNCHECK -> “Allow link notifications from other blogs (pingbacks and trackbacks) on new articles”.
13. Disabling / Limiting WordPress Functions
Want to disable emojis in WordPress? How about Gravatar? or XML-RPC and RSS? These two plugins will provide you everything you need to simply your WordPress installation and remove un-used features that loads in the background and slows your website down.
- WP Disable – An awesome all in one plugin to disable tons of stuff not needed for general users.
- Heartbeat Control – An awesome but advanced way to save server resources and speed up your website.
14. Don’t rely on plugins for adding simple features
Let’s say you want to add Facebook, Twitter, Google+ on your website, you don’t have to install a plugin to add these social network buttons. For example, here is a simple code to display a Facebook share button without loading their API:
<div style="padding-right: 10px;display:inline-flex" class="fb-share-button" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u&src=sdkpreparse">Share</a></div>
If you want to add Twitter and Google+ along with Facebook buttons, here’s a complete code. Simply add these lines after
in your theme's single.php file and it will work. Please note that this might require some CSS tweaks depending on the theme you use, but still worth the try.
<div style="width: 100%;display: inline-block;margin-top: 15px;" class="socijalnimrezi"> <div style="padding-right: 10px;display:inline-flex;" class="fb-like" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div> <div style="padding-right: 10px;display:inline-flex" class="fb-share-button" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u&src=sdkpreparse">Share</a></div> <div style="display:inline-flex;margin-top: 6px;margin-right: 10px;"> <script src="https://apis.google.com/js/platform.js" async defer></script> <g:plusone size="medium"></g:plusone> </div> <div style="display:inline-flex;margin-top: 6px;width: 70px;"> <a style="display:inline-block;padding-right: 10px;width:30px" href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> </div>
Thanks for reading! We hope you find these information useful and if you have some suggestions on your own, feel free to write them down in the comment section :)