WordPress Performance is a hot topic to talk about and there are companies based on this concept delivering WordPress plugins.
We talked before about the criteria of choosing WordPress theme, and one of those criteria was:
Fast, performant theme:
Why do I need to make WordPress performance better?
- Customer retention
As a customer, I hate opening slow sites and I will leave this slow site with first chance to do that. So you need to keep your customers comfort with your site.
- Search Engine Optimization (SEO)
In addition to customer retention, you need to get new visitors/customers so you have to make your site optimized for search engines like Google and one of these factors is site’s performance.
- Low resources consumption
Lately on this article you will know that our tips will make resources consumption the lowest and this is mainly because caching rules that will eliminate number of calls to resources.
How to make WordPress performance better?
I can make my site’s performance better using one of the following methods:
- Using WordPress performance plugin (Easier way).
- Manually do each step of the followings (Harder way, requires coding skills)
Therefore, on this article we will not mention any code but the main concept behind making site performance better.
WordPress performance concepts
1. Cache
- Serve static cache files
Using advanced-cache.php technique, you can load static HTML files for your site pages instead of loading the WordPress files and connecting to Database.
2. File optimizations
- Minify Stylesheets and scripts
Minifying CSS stylesheets and JS scripts will reduce their size and this is a great opportunity to load them faster.
You can use front-end technologies like gulp and grunt to minify all of your files inside your theme/plugin or using a plugin to do that for you.
- Combine Stylesheets and scripts
Combining JS scripts or CSS stylesheets together into one large file will make number of requests less but it will make a huge file that will block page rendering till loading and parsing it,
Therefore you need to take this decision based on you want to support HTTP 1 or HTTP 2.
In other words, for HTTP 2 the requests happen in parallel ( Imagine ) so it’s better to load multiple small files over one big file otherwise for HTTP 1, resources are grabbed in series so it prefers less number of requests.
In conclusion, if your server supports HTTP 2 and you are aware with HTTP 2 browser compatibility , don’t combine stylesheets and scripts otherwise combine them.
- Preload critical assets
Preload critical assets like CSS, JS, Fonts, images …etc. This preload will help you load those resource quickly by using <link rel=”preload”>
- Load Javascript files on the footer or load them deferred
Load page scripts in the footer not to block the page from being loaded till loading those scripts.
Or at least add `defer` attribute to those scripts to load them after loading the page.
- Delay JS execution
Javascript files are a big headache on loading the page and takes bigger time to load and parse them
In other words, you can use any technique not to load Javascript files once you load the page, so it may load with user interaction only.
3. Media
- Lazyload Images
For images out of fold area or outside the view port, we need to lazyload them not to add headache on the browser to load all images, even the images that will not be needed.
- Lazyload Iframes
Iframes are loading full page inside your page so we don’t want that loading them affecting our main page load therefore lazyload them.
- Use Webp images
This type `webp` is very light and load quicker than normal images so please convert all your images from other types like (jpg, png, bmp, …etc) to use webp.
4. Database cleanup
Database is an important part for any website not only WordPress sites so we need to make it clean and only have the data to be used by our site not more than that.
So we need to remove all not appropriate comments, remove old revisions, empty trash items, clean not used or expired transients, optimize mySql tables from time to time, …etc.
Conclusion
In conclusion, we talked about the main concepts that you need to take care of to enhance WordPress performance in terms of caching, file optimizations, media optimizations and database optimizations.
On next articles we will talk in details about each one of those terms related to WordPress performance.