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.

I wrote a few guides on different hosting providers, read them here:

1. Hostinger vs Hostgator MatchUp Article
2. WpEngine vs Hostgator Comparison Guide (SECOND FAVORITE! WP ENGINE)
3. Hostinger vs Bluehost Comparison MatchUp
4. 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:

• Google Page Insights
• Pingdom
• GTmatrix

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 🙂