WordPress Performance Optimization
This post is done for the community, as the poll results on facebook, you decided that you want a WordPress Performance Optimization guide. I’m here to deliver on that. However, due to the fact it’s a complicated and long subject, it’s going to be long but precise.
some of the subjects I’m going to cover in this WordPress Optimization guide are :
- What Affects Performance: In this chapter, we are going to answer the mentioned question and why do we need to optimize to begin with.
- Enqueuing Scripts and CSS Files the right way. – seem pretty easy right? you will be surprised what I see on projects.
- EXTERNAL Libraries and Scripts – LESS IS MORE
- How Do You Measure Performance? To fully grasp and handle performance issue to the core, and to deal with the real hard problems you need to be a developer. However, there are some tools that help common users and us developers. They help in the sense of getting a feel to the root of some optimization problems.
- How Do You Improve Performance in WordPress: The main event, the reason you are here for.
- EXTRA: What’s a CDN?
Without any further delay, let’s get started!
OUR PARTNERS:
WordPress Performance Optimization – What Affects Performance?
Before we go on in our WordPress Performance Optimization article, let me bust a myth. It’s not unusual to see posts like these:
HELP SITE IS SUPER SLOW ALL THE SUDDEN, WHAT DO I DO, WHATS THE PROBLEM?
You wanna tell me whats the most common response you ee to these kinds of posts? Well, I will tell you.
ITS THE SERVERS PROBLEM, THE HOSTING IS BAD, SWITCH SERVER AND IT WILL ALL GO AWAY.
Seems legit right..? WRONG. a common myth is to automatically assume that the problem to slow loading pages and poor site optimization is the servers fault. But this is a misconception and will get you onto a road of pain. You see, I can expect this from a common user. However, the problem is that I see more and more developers jump on this wagon of “poor hosting” and just blame it all on the Hosting service without even checking anything first.
Let me summarise with this because I can go on forever about it: THE LAST THING YOU CHECK IS THE SERVER.
Simple -> TO -> Hardest. You check everything else before you check the server. (besides the simple check to see what kind of hosting is the site on, exp: Shared, VPS, Cloud, etc)
Lets move on to the bigger question in our Wordpress Performance Optimization article.
So, What Really Effects Performance In WordPress?
Starting Point, A Solid Hosting Plan
You want a solid start for your WordPress platform. Today you have a ton of hosting providers out there. Pick on depending on your goals, site size, crowd, expected volume, reach, etc. Don’t cheap out if you have a big site. pick the most suitable package for your needs. For instance:
THIS IS OK:
BIG SITE -> BIG PACKAGE, SMALL SITE -> SMALL PACKAGE, etc
THIS IS A BIG NO NO:
BIG SITE -> SMALL PACKAGE
As a rule of thumb, naturally, if your site is small-medium you can go with shared hosting plans. However, if you’re bigger you will probably need a VPS/DEDICATED MACHINE.
What is the difference between shared and dedicated hosting?
I wrote a few guides on different hosting providers, read them here:
- Hostinger vs Hostgator MatchUp Article
- WpEngine vs Hostgator Comparison Guide (SECOND FAVORITE! WP ENGINE)
- Hostinger vs Bluehost Comparison MatchUp
- Hostinger vs SiteGround Comparison 2018 (MY FAVORITE! SITEGROUND)
Let’s move on to more reasons, some content here is brought straight from the WordPress codex, in addition to this I’ve added my own commentaries. I’m dividing it to “DO” and “DONT”
WordPress Configuration
Your theme will have a huge impact on the performance of your site. A fast, lightweight theme will perform much more efficiently than a heavy graphic-laden inefficient one. The number of plugins and their performance will also have a huge impact on your site’s performance. Deactivating and deleting unnecessary plugins is a very important way to improve performance.
DO
- Development from scratch is better than picking out a theme from ThemeForest or some other template marketplace.
- If you can’t afford custom development, make sure the theme you buy is highly rated, lightweight, responsive, doesn’t use a lot of external libraries/extensions/plugins of sorts.
DONT
- Purchase a heavy modified theme with tons of options and features.
- Less is more – as mentioned above, pick a theme suited ONLY for your needs with as less junk as possible.
- Buy shady low ranking themes.
- Heavy themes with a lot of Javascript and parallax effects – the stock thems are bad with this in most cases, the theme ends up super slow with content and users.
- Don’t spam install plugins.
Software performance
Making sure you are using the latest software is also important – as software upgrades often fix bugs and enhance performance. Making sure you’re running the latest version of Linux (or Windows), Apache, MySQL/MariaDB, and PHP is very important. Keeping up with WordPress upgrades is also important.
DO
- If your hosting provider supports it, and your template or site is suitable, upgrade to PHP 7
- This is more of your hosting provider responsibility, you can ask them. In most cases, you won’t be able to access the update of these features.
DONT
- Use windows OS on a server with WordPress installation, LINUX ONLY.
- Don’t upgrade to WordPress 5. at the time of writing this article, it’s not ready.
Server Load
The amount of traffic on your server and how its configured to handle the load will have a huge impact as well. For instance, if you don’t use a caching solution, performance will slow to a halt as additional page requests come in and stack up, often crashing your web or database server. If configured properly, most hosting solutions can handle very high traffic. Offloading traffic to other servers can also reduce server load.
Abusive traffic such as login attacks, image leaking (other sites linking to your image files from high traffic pages) or DoS attacks can also increase server load. Identifying and blocking these attacks is very important.
DO
- Make sure your site is secure(developer help, security plugins as iThemes or Wordfence)
- Install a cache plugin(well get to that)
- Check Query execution time(developer help needed)
DONT
- Overload site with plugins
Size of Graphics
Making sure the images in your posts are optimized for the web can save time, bandwidth and increase your search engine ranking.
DO
- Before upload resize the image to the size registered at your site.
- Compress images before upload
DONT
- Forget to resize and compress every single image, I mean EVERY SINGLE ONE! no exceptions.
- If you won’t you will be stuck with an overloaded platform with a necessity of installing a live image optimizer like smush, etc.
Geographical distance
The distance between your server and your website visitors also has an impact on perceived performance. A Content Delivery Network or CDN can mirror static files and images across various geographic regions so that all of your site visitors have optimal performance.
This one is simple. if your site is targeting US users, host the site in a US Location. Europe -> Europe location, etc
Enqueuing Scripts and CSS Files the right way
If you’re not a developer you won’t have to handle this but the way its handled in your theme will affect your loading time. There are several ways to include CSS in WordPress. Some are correct, some will affect loading times If done improperly.
THIS IS THE RIGHT WAY:
*CSSPATH is just a constant to a directory path.
add_action( 'wp_head', 'enqueue__styles' ); function enqueue__styles() {
wp_enqueue_style( 'stylesheet', CSSPATH . '/stylesheet.css', array( 'bootstrap' ) ); }
Above was the right way, Well in most cases these stock themes have soo many options built into them, the developers have to input the extra CSS generated by the user’s choices and customization. This is done by hardcoding in the header. A big no-no and will drop your page score. I don’t have anything against those guys on theme markets. furthermore, I don’t blame em. It’s the easiest way to provide such huge customization. Nevertheless, it’s still wrong.
I will demonstrate this monstrosity:
This is just an example, the Background-Color property. This simple choice box translates to this:
HARD-CODED SECTION OF STYLES IN THE THEME HEADER, the_field() function can be sometimes something else, depends on how they built it.
<style>
body{
background-color:”#<?php echo $the_field(”)”;?>
}
</style>
If you are a developer you can already see the problem. If you don’t let me explain. Think about the tone of features you saw in themes, this is how they do it in almost every case. generating errors you will never be able to efficiently fix on a theme site.
There is a dynamic way, generating CSS from custom user input fields without affecting loading times, furthermore, you won’t get any type of page speed errors! Man it’s remarkable..took me a lot to figure it out but I did, unfortunately, this way is not covered here, kinda like a trade secret reserved for my projects and clients, sorry guys 🙂
To sum things up in this section, Less is more if you’re going with a template, always prefer from scratch development with a qualified and experienced developer, there’s no second to that.
Enqueuing Javascript Files
There’s a simple rule of thumb here, follow it and you will be okay in most cases. Always enqueue scripts t the bottom of your page and not in your header. Unless it’s absolutely necessary. (some scripts require headers implementation to work. Like analytics, etc)
EXTERNAL Libraries and Scripts
This connects to things mentioned earlier in this article. If you see a theme with a lot of features and “sparkles” be warned, I will let my friend here demonstrate:
Most likely its full of various scripts and styles and poorly optimized. Go with your needs only, don’t over do it when you pick a theme from ThemeForest or template monster.
WordPress Performance Optimization – How Do You Measure Performance?
As a developer, I have more tool and insight to pursue and measure performance. However, nowadays we have a few online tools that can help every common user to see things wrong at their site. You guessed right, I’m talking about the Page speed test tools! Be advised, these tools won’t necessarily point out all problems and the ways to fix them. It not a magic wand in contrast to what some people think. Furthermore, it won’t do your job for you.
Let’s cover some of the popular ones:
These 3 are the most major and accurate ones. There are more but I mostly use these 3. All of them perform the same checks. you can use them to check Wordpress Performance Optimization tips and errors.
WordPress Performance Optimization – How Do You Improve Performance in WordPress
The million dollar question, the reason you’re here, pay close attention now, I’m going to list every reasonable action you can take without breaking your head against the wall.
WordPress Performance Optimization – How to make it all go away:
- Optimize Image: Resize, Compress before uploading.
- Call scripts in the footer.
- Install a caching plugin. (super important! there is only one I can recommend doing miracles. We will get to that soon)
- CSS Minify.
- JS Minify.
- HTML Minify.
- CSS FILE COMBINATION – combines all style files into one, reducing the request to 1 on CSS.
- JAVASCRIPT FILE COMBINATION – as mentioned above with the CSS, this one is more likely to break site layout.
- Choose a solid hosting plan according to your needs.
- Don’t overkill if you go with a template. LESS IS MORE.
- leverage browser caching.
- DDOS Protection
- Use a CDN.
- Don’t Install plugins for every single little thing, even if you need to get a developer and pay a few bucks, the long term is better, trust me.
- Check Database queries. here you will need help from a developer. He can check what are the data queries that take the longest and why. Afterwards, he can try to patch things up.
- Limit WordPress Post revisions. If your site is a big content blog, it’s better to limit post revision to a low number. Done with a help of a developer, a very quick fix, one line of code most of the times actually.
- If you can, avoid the use of various page builders. They load a lot of code, styles, scripts and more. all of this impacts your loading time.
- Implement Captcha to reduce server spam calls. Can be huge if your site uses several contact forms, a captcha is a must!
- Enable GZIP Compression- To decrease the size of data that are being transferred between your server and your visitors, you can enable the gzip compression for your images, CSS and JavaScript files.
- Clear unnecessary and old log caches and files.
- Mobile Caching
- Single User Cache
WOW, what a list!
Amazing, think about the fact that WordPress Performance Optimization wasn’t a big deal not long ago. I can go on and add even more things to that list. And yes, i know there are things on that list we didn’t discuss, however, I think its enough for now. You just got bombarded with tons of information! Don’t worry I know it going to take time until this all sinks in and you implement everything on that list to be optimization freaks. Just so you know its a pretty huge list, even for me as a developer. Keeping to it can be tough and frustrating, However, if you do I can promise you it’s going to do wonders to your sites page speed.
Installing a caching plugin
This is the most important thing here for all of you that aren’t developers! Caching plugins can do a lot of things on that list. Keep in mind, they can’t fix everything, you shouldn’t put all hopes on a caching plugin. In some cases one of them can save your life, in extreme cases it can still save your life, however, there are cases that nothing will help besides fine developer work. On this very own blog I covered the major cache plugins out there, despite that there is only 1 I can recommend saving your site.
Check out this guide if you like to know more: Best WordPress Cache Plugin 2019
WP Rocket Plugin – The Life Saver
This is your best solution for these messy situations! WP Rocket comes built in with a ton of features. varying from static resource minification & compression, database optimization, image optimization, lazy loading, revision setup and cleanup, CDN, various cleanup tools and a lot more! this is the none developers only hope for salvation as to speak. If you decide to purchase WP Rocket be sure to visit my guide for its optimal settings with WordPress: Best Wp Rocket Settings For WordPress 2019
GET WP ROCKET!
But, if your site is all messed up, you didn’t know about this guide so you didn’t keep to the list. in addition to that, You tried WP Rocket and it didn’t help you? Well, I guess you need some old fashioned developer work to help you out. Some optimization cases require extensive developer work, but that’s life. Keep your site clean and tidy to avoid this, keep to the list!
WordPress Performance Optimization CRITICAL UPDATE:
*2019 UPDATE: Swift Performance Is The Best WP Caching Plugin. It Surppased WP Rocket. Read More About It Here: Swift Performance vs WP Rocket 2019*
*Moreover, you can get a 40% Discount on all plans with SWIFT Performance, Check Out My Coupon Page here: Swift Performance Coupon 2019 40% OFF
WordPress Performance Optimization EXTRA: What is a CDN?
Let’s quote wiki and then I will explain in short:
A content delivery network or content distribution network (CDN) is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and high performance by distributing the service spatially relative to end-users. CDNs serve a large portion of the Internet content today, including web objects (text, graphics, and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social media sites.
CDNs
are a layer in the internet ecosystem. Content owners such as media companies and e-commerce vendors pay CDN operators to deliver their content to their end users. In turn, a CDN pays ISPs, carriers, and network operators for hosting its servers in their data centers.
CDN is an umbrella term spanning different types of content delivery services: video streaming, software downloads, web and mobile content acceleration, licensed/managed CDN, transparent caching, and services to measure CDN performance, load balancing, multi-CDN switching and analytics, and cloud intelligence. CDN vendors may cross over into other industries like security, with DDoS protection and web application firewalls (WAF), and WAN optimization.
In short
Using a CDN lets us distribute and load our statics resources like CSS, JS, etc by using geolocation to improve loading times. Furthermore using a CDN lets us implement a firewall and DDOS protection that is run by that CDN provider.
IN ADVANCED AND BIG PLATFORMS A CDN IS A MUST!
To sum things up: Wordpress Performance Optimization
Take a breath, make a cup of coffee and lets recap and sum this WordPress Performance Optimization article!
Now, once you know these facts, and its a lot of information, however, its up to you what to do with it. In conclusion, I hope I helped to shed some light on the subject of WordPress Performance Optimization. The article on Wordpress Performance Optimization was written from my point of view in addition to my perspective as a developer and the problems I’ve faced.
Feel free to comment your thoughts and opinions. If something is not clear don’t be shy and post a question in the comment section. I promise to answer 🙂
when i activate any cache or performance plugin , my ttfb increase to 2 or 3s , without any cache plugin , site load faster ! , what a problem is ? i try almost anything , rocket , autoptimize , swift performance , Webcraftic Clearfy, all have same problem ! increasing page speed Score and ttfb together !
Hi Arman, The reasons may vary, it requires a thorough check by a developer. Please feel free to leave me a message via the contact form here and I will help you look into it. furthermore, you can join our facebook group for assistance!
Hello
my wordPress site waiting Time for the initial response TTFB is around 5-6 seconds… running php 7.3 i did disabled plugins almost everything from my side but i can’t figure out the solution any idea?
Hi John, Can you share the link to your website?
Hello lshay Thanks for the quick respond:) https://technigroup.gr/
Sure thing 🙂 Ok, from I can conclude without site access: you can improve image comparison. Furthermore, my guess is there is a lot of JS and CSS bits scattered around your theme in various places they should not be in. Maybe due to improper elementor usage and inline css and js code. The compiling and execution time is too high. In addition to that, I can’t say I know the hosting your on. I took a look at their plans and website and it doesn’t seem promising. You might be influenced by poor web server/hosting configuration. I can see you are using super cache, replace that with WP Rocket or Swift Performance ASAP. if you want something free just use the Swift Performance Lite. It’s the free version of Swift.
I can’t help more without ADMIN Access and without diving into it and performing on-site tests. I hope i gave you a direction.
” my guess is there is a lot of JS and CSS bits scattered around your theme in various places they should not be in”
You are absolutely right we have issue with JS and CSS files scattering around.. my other WordPress site is running smooth on same hosting company but with different page builder , how we can avoid improper Elementor usage also is there a way to contact you directly ?
You can contact me here: ishay@semdev.net
Hello Ishay, any recommendation how to avoid improper elementor usage? i feel i have to build whole page again from scratch .
I Emailed this to you, I’m gonna go ahead and share it here for anybody who might be sharing this problem.
let’s take the long route. If your theme is poorly optimized in this regard, you need to do the following:
Thank you Ishay appreciate it .
My pleasure John, glad I could help.
Hi Ishay,
First, thanks for your sharing.
I always have performance problem with my site. I’m using the A2 hosting (I searched on Google and I see it’s a good host for SEO 🙂 ) and Schema theme from MyThemeShop (again, I searched the themes good for seo). I’m using some plugins such as W3 Total Cache for caching, minify js/css/html, optimize image, use cdn, … but I always have low score and high TTFB when checking with Google PageSpeed Insights (except home page)
Could you have a look on my site https://101tooladvisor.com/ and tell me which is the main problem and how can I improve it?
Thanks a lot,
Ruth
Hello Ruth!, did you try to follow the steps on the article?
I have problem with TTFB. 3 sec . i use Cloudflare.
i study alot but still not find the problem my site speed loads 6.5 sec according to gmatrx. please can someone check my site how can i bring less than 3 second.
Good job, thanks for share nice article.