...

The Ultimate Mega Guide to Speeding Up WordPress

the-ultimate-mega-guide-to-speeding-up-wordpress

It goes without saying that having a site that’s quick and reliable is important — especially when practically everything we do online can be done in an instant. These days, there’s no patience for slow sites.

Luckily, when it comes to improving site speed for WordPress, there’s a ton you can do to increase speed and keep your users, customers, and search engines happy.

In this article, we’ll be covering 24 fixes that will dramatically improve your own site’s loading time, including both general speed and development-related improvements.

This isn’t just another “X tips for speeding up WordPress” tutorial. In this definitive, step-by-step guide we go through every aspect of optimizing and speeding up your WordPress site.

We’ll be looking at:

  • Why Page Speed Matters
  • Why a Website is Slow
  • How to Increase Your Website’s Speed
    • General Speed Increases
      1. Update Your Core Technologies
      2. Update Your CMS
      3. Decrease Requests
      4. Remove Unnecessary and Wasteful Plugins
      5. Remove Unnecessary Eye-Candy
      6. Use a CDN
      7. Enable Caching
      8. Optimize Your Database
      9. Optimize Your Images
      10. Disable Hotlinking
      11. Enable Gzip Compression
      12. Choose a Good Host
      13. Monitor Your Site
      14. Themes
      15. Fonts
    • Development-Related Speed Increases
      1. Know Your Tools
      2. Decrease Requests
      3. Minify Files
      4. Load Scripts in the Footer
      5. Prioritize Content
      6. Use Proper Image Sizes
      7. Decrease and Optimize Queries
      8. Utilize Activation, Deactivation, and Uninstall Hooks
      9. Educate Your Clients
  • Conclusion

Loadstorm merged a few research findings into a nice infographic, which shows that a single second increase in page load times leads to a 7% loss in conversions, 11% fewer page views, and a 16% decrease in customer satisfaction.

Turn that statistic on the end and for all intents and purposes, decreasing your website’s load time by 1 second could earn you an easy 7% increase in profits.

People also seem to forget that the quality of internet service is not uniform across the world, even if you use a CDN and optimize everything.

Your page may load in 2 seconds for you in New York, 2.3 seconds for your friend in Dublin, but it may only load in 4-5 seconds in India.

By optimizing further you may only lower your loading time in the US by 0.3 seconds, but you may decrease it by 1.8 in India which would lead to more sales. Don’t forget that the web is huge and any number you see cited is an average and any number you experience is a single sample of a hugely varied set.

In addition to all the direct benefits, it is a well-known fact that page speed has a big impact on your SEO. Some articles shed light on correlations between Google and a fast site. One thing’s for sure: better speed = higher ranking in Google’s eyes.

If you’re environmentally conscientious you can think of this as an exercise in reducing your carbon footprint. A speedier website is usually the result of less processing, fewer requests, and less data, which means that the computers that handle your website work less, reducing their heat output, which in turn means less cooling needed. The effect is probably unnoticeable on a single server level but would be measurable at scale.

How to Begin

I’ll split this article into three parts. Initially, I’ll talk about some general considerations and try and get the nuances of the speed issues out in the open.

The next two sections will focus on improvements any user can make and improvements coders can make. There will be some overlap in these last two sections. I urge non-coders to look at both sections, many speed-increasing tactics can be implemented by following simple guides, even though they may have some related code.

By the end, I hope everyone will be able to take at least a couple of the ideas and apply them immediately to make the web a faster place for us all!

CMS system will be slower than a properly made static HTML site. While it is true that total page caching can minimize speed differences, caches sometimes need to be purged, logged-in users usually don’t get cached versions, and administering content always takes up more resources.

With that said, a well-built CMS system will do much more good than harm. It will be more secure, you’ll be able to add content a lot more easily and they offer a ton of features you can implement any time. All the well-known CMS systems fall under the “well-made” category so WordPress, Joomla, Drupal, and others are just fine from a speed point of view.

Speed issues may be more common in some systems than others, but this usually has to do with additional code being used such as themes, plugins, extensions, and such. We’ll take a look at these further down.

The reason content management systems are slower than static sites is that they need to connect to a server, the server needs to process a request, generate HTML code and send that back to your browser, during the processing there may be many database queries that need to be run which also increase loading times.

Most systems have mechanisms to optimize this process which is why websites tend to load in a couple of seconds – making these systems a viable solution.

3. Extensions

I mean extensions in a completely general sense here: any code that is used on top of your CMS. For WordPress, this means themes and plugins, for Joomla and Drupal they may be called templates and extensions.

More often than not, themes and plugins are not created by the same people who made the CMS itself. This means that if the developers aren’t completely up to speed on current best practices they make errors.

While coding, there are numerous ways you can make sub-optimal code without actually triggering an error.

For example: if you think about your data needs you may get away with querying the database once during an operation.

If you didn’t think things through, you may use three. In fact, depending on your needs three queries can sometimes be faster than one, so carefully choosing your methods is very important.

This is roughly how things go downhill very fast. We’ll take a look at some of the specific coding techniques that slow down your code below. For now, the takeaway is that extensions add a layer of loading time to your site.

With WordPress, the negatives are somewhat magnified by the fact that the community is so open. This is a wonderful aspect of WordPress, which should never be changed, but it does have its drawbacks. It makes it extremely easy to contribute bad code. Nothing can stop you (nor should it) from creating a horribly-coded theme and then selling it if you want.

4. Servers & Hosting

Your server is a big component in determining your website speed, especially during high traffic times. Let’s separate these two terms first and learn some more about how they affect speed.

Your server is a physical computer somewhere that has similar properties to your computer at home. It has memory, CPUs, hard drive space, and other parameters that dictate how it performs.

Your hosting plan is essentially a bundle of services tied to a server. This would include things like automatic backups, server management, and so on.

WPMU DEV hosting.
Good hosting makes a huge difference.

For our purposes, the most important factor of a hosting plan is whether you are on a shared plan, a VPS or a dedicated server.

Shared, VPS and Dedicated Servers

These three terms represent different types of hosting methodologies. Somewhat simplified: they determine how many people use the same server for their website as you do.

  • On a shared service, you might get hundreds of people on the same server. This means that a hundred people share the same hard drive space, memory, CPU speed, and bandwidth. Resources are not shared evenly, a faulty site may use up 80% of a server’s resources, leaving 99 other users with the remaining 20% or worse.
  • A VPS (Virtual Private Server) is still shared, but usually between fewer users, and the resources are evenly distributed. If there are 5 users on the same server, they would each get 20% of memory for example. If one user tries to go above it their website may fail, but the websites of other users will be just fine.
  • On a dedicated server, you are the sole user of the server and all its resources. This completely negates the “bad neighbor” effect that shared services bring to the table and you have more resources at your disposal than with a VPS (usually).

We offer fully dedicated managed WordPress hosting here at WPMU DEV. Our hosting plans all come with dedicated IP, automated updates, WAF, malware scanning, and much more to ensure your site stays up to speed.

Server Parameters

As I mentioned, the server your website is on has some key properties which will determine its speed. Essentially: the higher the performance of your server, the better your website will perform.

There is, of course, a limit to this. If you have a small WordPress website with a view count in the tens of thousands a month it doesn’t really matter if your server has 1 GB of RAM or 8 GB. Further down, when we look at what you can do to increase your speed I’ll talk about when to change hosts and servers, we’ll discuss this issue there.

One more property that will make a difference is your server location. This is fairly logical. If the server is in San Francisco, you will receive data from it faster if you are in San Diego (about 500 miles) than if you are in Melbourne, Australia (about 8000 miles).

Data tends to shake a leg when it gets going in fiber-optic cables – reaching near light-speed – but once it gets close to your house it slows down to the speeds your ISP provides.  It also needs to pass through firewalls, routers, and other magical things that tend to slow things down.

Distance tends to affect the speed at which you make requests most. What I mean by this is that downloading a 1GB file from Melbourne would take very nearly the same amount of time as it does if you download the same file from San Diego. However, downloading 1,024 files which are 1MB in size will take a lot longer if you are further away.

Why does this matter for us? When a website loads it can make a large number of requests. This includes stylesheets, images, javascript files, and others. By minimizing requests, we can maximize speeds.

The Client Computer

The age of the computer you are using can also greatly affect your perceived connection speed. I have a slightly battered iPad here at home and my connection seems much slower on that device than it does on my iMac.

There could be a number of reasons for this, but I believe the main one is age. The degradation of components has caused the iPad to use memory less efficiently – it processes content slower and is generally less responsive.

Up until recently, this was not a huge issue since most of the computing was done on the server. With the rise of more powerful clients and – more importantly – new web technologies, websites are tapping into client-side processing power.

This will mean a lot faster and smoother animations, for example, but it will also mean that slower devices will suffer.

In conclusion, the speed of any given website is determined by the basic technology of your site, your content management system, your server, and your hosting, and the client computer.

optimize our PHP, but we can make sure it is updated. In my experience, the more expensive your host, the more rigorously they update PHP for you in a managed environment. Many lower-end servers will actually update your PHP version if you ask, but won’t do it automatically.

If you take a look at some PHP benchmarks, for example, you can see why this is important.

As you can see, various updates to PHP itself can make a huge impact.

PHP
Dev Man knows how super PHP is.

How to go about updating your PHP version will be different – depending on your host. If you log in to your host, search for “PHP Configuration”. You may find a select box that allows you to switch to different versions.

Before you make the switch, there are some dangers to updating PHP. The code for your website and your files won’t unexpectedly disappear, but if you have very old code running, you may bump into unexpected issues. If you are uncertain, make sure to ask your host if you can downgrade if things go south.

For more on PHP and using cPanel to update it, check out this brief video.

7 Quick & Easy WordPress Security Vulnerability Fixes.

Pingdom to get a nice overview.

When adding content to your site you increase requests by adding images or other media items. You basically add one request per item.

If you add galleries to your posts and the first 5 images are displayed on your archive pages as well, you could be looking at as many as 60-70 requests on a single page.

If you are a photographer, an artist, or an image loving person you probably don’t want to add fewer images. In these cases decreasing your posts per page settings, or showing fewer images on your archive lists may be a good way to go.

To decrease your posts per page go to the reading settings in WordPress and lower it to 8 or 6.

Consider cutting back on plugins that affect the front-end of the website. Many plugins add their own styles and scripts, disabling them will save you 1-2 requests if the plugin is well-coded or as many as 7-8 if it was a wasteful product.

Switching themes could also save you a lot of requests, although in many cases this is not a viable option. I’ve noticed that premium themes in particular – ones that offer absolutely every feature – tend to load way too many scripts and styles unnecessarily.

Lazy loading images is a powerful tool that can make your site seem faster. In reality, you are not decreasing the requests but you are staggering out the need to load them. The idea behind lazy loading is that images that appear further down the page don’t really need to be shown until the user scrolls near them.

We have a great article comparing 6 lazy load plugins, take a look there for more info.

One of the best methods to decrease requests is concatenation. This is what we will talk about in detail in the coders’ section. Instead of loading 10 JavaScript files, you could essentially copy-paste them one after another into a single file. This would mean that instead of downloading 10 files averaging 20kb, you could download a single 200kb file which is way faster. This is easy enough to do when coding the site, but a lot more difficult after the fact.

A plugin like Merge + Minify + Refresh automate the process somewhat, but I’ve had mixed results. Give it a go, if they work you might see a significant reduction in requests made.

All of this being said, we recommend using our very own lazy load plugin, Smush.

Smush image
Smush is our perfect solution for lazy loading images.

Smush is the most popular all-in-one image optimization plugin, due to her having everything needed to make your images load faster.

Activating lazy loading with Smush is done in one click. Additionally, you can adjust your settings once lazy loading is activated (though it’s not necessary in most cases).

Plus, it’s a free plugin to use.

While I particularly hate posts that contain pagination within them, in some cases it may make sense to split a post into multiple pages. Please don’t do it to increase page views, but if you have a hyper-mega-super resource that lists your favorite 500 hotels with images, it may be a good idea to split it into sections of 25 – 50.

P3 (Plugin Performance Profiler) can help you identify the most problematic culprits.

You can also deactivate anything you rarely use. I often use tools like Regenerate Thumbnails, Theme Check, or indeed P3. While these are invaluable when in use, I need each about once a month. When not using them I disable them to make sure they have absolutely zero performance impact.

every single research article points to the same conclusion: sliders are simply horrible. No one uses them, they take up too much space, they decrease your SEO and take a huge toll on your site’s speed.

I want to stress that for a business the goal of your website is not to look pretty.  Looking pretty is a tool that is used to achieve the real goal: making money. If all research points to the fact that you should burn that slider to the ground. If this increases your revenue do you really care?

In an ideal world, you should look at all elements of your site and make some decisions or at least educated guesses. Read up on the topic, do your research, and most of all, measure the outcome.

Also, keep in mind that in some cases total removal is fine, in other cases you’ll want to replace an element. Simply removing your slider may lead to lower conversion rates, but maybe replacing it with simple text and links would increase it way above the level of the slider’s effect.

our own CDN here at WPMU DEV that leverages the StackPath servers. It works extremely well in most key locations.

If you’d like to put this into practice read our roundup on top CDN services to help you get started. Many – such as Amazon Cloudfront – have WordPress integration plugins, which means you can set and forget.

Caching is probably the number one method to use because it can lead to the most drastic improvements. The idea behind caching can be understood with a simple analogy. Remember when you first learned addition in school? You physically needed to count out 5+4. You used your fingers or whatever was at hand (my Mom taught me with sugar cubes) to count it out.

Nowadays I’m betting you just remember the answer and automatically know that it is 9. Your brain has essentially cached the result for you, you no longer need to count up to it.

With websites there is a plot twist – the result of the equation is not always the same!  Here’s why. Imagine a website that has nothing more than your name and the current year displayed. The content of this website only changes once a year. However, each time you load the site the server calculates what the current year is.

What caching can do is essentially save an HTML copy of the website for a given time. In our example above we could set the cache to expire once a day. This means that once a day the website would load normally: it would detect a request, get the server to process the code, and spit back the result as HTML. It would also save the resulting HTML in memory.

The next time someone loads the site the cache would load the HTML from memory, instead of getting the server to process it. This may not be much for an example as simple as this but for an average site, this could shave seconds off the loading time.

What I’ve just described was a full page cache, there are many other types – caching is a profession in itself. Luckily, you can get started very easily if you work with WordPress.

We have an article on The Best WordPress Caching Plugins Compared here on our blog – give the article a read and take your pick!

One of the choices in this article is our very own Hummingbird plugin. 

image of hummingbird.
Hummingbird is here for your caching needs.

Hummingbird is free to use and features an effective browser cache for caching any site. She’ll load pages faster with her full-page, Gravatar, and browser cache tool.

There are a bazillion settings for each plugin, I recommend reading up on each setting to get the best performance.

That said, in my experience, if you use only the basic settings you will achieve at least 80% of the maximum speed gains so it’s worth getting started even if you’re a relative newbie.

You should also be aware that better caching can be achieved on the server level. Some managed WordPress solutions offer caching on a server level which will always be faster. Many of these hosts don’t allow you to install caching plugins, simply because it would just lead to a slower site.

database squeaky clean and I talk about this at length in the “Clean Up And Migrate The Database” section of my How To Rebuild Your Website article on this blog.

For the database level overhead, you can use a tool built into MySQL which takes care of it for you automatically – this is called table optimization. It is very much like disk defragmentation for hard drives. Take a look at the “Optimize Your Tables” section of Jenni’s post to see how this is done.

WP Smush, which is used by over 1 million WordPress installations. You can even resize images automatically.

I personally use Imageoptim for OS X to mass-optimize images or you can use the popular RIOT on Windows.

GTmetrix article for a quick tutorial on how to make this happen.

The reason this helps so much is that CSS and HTML uses a lot of repeated content. The more patterns you have in your content the better it can be compressed. A very rudimentary example:

If you have “Daniel is Awesome” 100 times in your website’s code (and why wouldn’t you?!) you could replace that text with “12d” saving a ton of space. This is the essence of any compression and the more (and longer) patterns you have the higher compression you can achieve.

Our own Hummingbird can help with Gzip compression — for free. Be sure to check out our article on how to optimize Hummingbird for more information.

JavascriptKit.

we offer the best hosting on the planet). However, you do have options.

My very short, oversimplified guide is the following: do not use shared hosting unless you absolutely have to, or you have a lot of sites you don’t really use at all. These cost around $4/month and that’s about what you get. Unreliable service is prone to going down due to others overusing resources.

Another option is managed WordPress hosting (like we have). This type of hosting offers a more WordPress-centric approach. On a VPS you could run any application you like, managed WP hosting obviously only allows WordPress.

As a result, the servers are built specifically with WordPress in mind, offer server-level caching and other goodies that will make your WordPress site run like the blazes.

On the flip-side, there may be some restrictions on what you can and can not do. The host may disable some plugins and themes due to speed or security concerns. At the end of the day, these all serve a good purpose but may be off-putting to some.

If you’re looking for a good host we have a WPMU DEV hosting review, where you can take a look around and choose the one you like best after seeing the comparisons. I recommend talking to customer service and explaining your exact needs, they’ll help you decide what you need and you’ll also get a feel for the level of support you can expect.

Pingdom and others can automatically test your site regularly and automatically.

If you’re a WPMU DEV member, your site status is measured in the Performance tab of The Hub. Plus, you can set up performance tests and uptime reports.

Elementor, WPBakery, Divi, etc. which add additional code that can slow down your page loading speeds.

Google fonts, they also have to be requested and loaded. That goes for every font on the page — which can make your site lag.

WP Rocket has a feature for optimizing Google fonts. Another option is Swap Google Fonts Display, which can also help.

Additionally, it’s recommended to use one font for your entire site.

Hummingbird can help again with handling requests.

Another powerful tool you have at your disposal is sprites. Sprites are concatenated images. Instead of loading all your social icons separately you can combine them into a single image and use that image as the background, positioning it just right so that only the area you need is visible. Twitter uses sprites, as do many, many other large websites due to their request-friendly properties.

When I need a sprite I usually use the excellent online tool Stitches. This tool allows you to upload images and arranges these for you optimally, generating the styles you need automatically.

Hummingbird for this, but there are other build tools like Grunt and web-based tools for specific tasks like linting, image optimization, modification, and so on.

find out more here.

the WPDB class, for maximum safety and efficiency. Try to avoid joining tables or other complex things, in many cases, it is better to use two separate but far faster queries.

There are tons of tools to figure out if your queries are well written and to see all queries run during a request.

You can use the Query Monitor plugin or use define('SAVEQUERIES', true) in your config file and print all queries via $wpdb->queries.

You also have the option to log slow MySQL queries. This is turned on for many hosts or you can turn it on yourself, or ask your host to do it for you. You can find more information on this topic on the MySQL website.

how he sped up his site from 4.23s to 1.33s. It’s especially interesting because Mike is not a WordPress guru, he’s approaching it from an advanced user’s point of view.

For more information, be sure to check out our Performance Optimization Guide. It will show you how to adjust all of your settings for peak performance with our plugins Smush Pro and Hummingbird Pro.

Also, be sure to read about how to check your WordPress site’s speed with the new GTmetrix.

Contributors

This article was written in collaboration with:

Jared Schweers –  Key Element Media.

Key Element Media is a full-service digital marketing firm, specializing in Web Design, SEO, and PPC ad management.

***

Note: We do not accept articles from external sources. WPMU DEV members, however, may contribute ideas and suggestions for tutorials and articles on our blog.

Source: wpmudev.com

Discover more from WIREDGORILLA

Subscribe now to keep reading and get access to the full archive.

Continue reading