256 Kilobytes

The Ultimate WordPress Performance Resource

Articles in Content-Management Systems | By Hash Brown

Published 1 week agoMon, 11 Mar 2019 16:43:35 -0700 | Last update 6 days agoThu, 14 Mar 2019 02:19:57 -0700

WordPress can be a cumbersome beast. Things can easily run away from you when building such websites and this causes slow loading speeds which annoys everyone. This is the ultimate guide to speeding up your WordPress website.

378 views, 2 RAMs, and 0 comments

WordPress Speed Optimisation for noobs

Recently I covered my favourite theme in the worlds, GeneratePress and within in that review I briefly touched on some ways to optimise for speed.

I’ve been asked a few times to expand that and I thought that may be a good idea. One of the complaints many people have over WordPress (and other CMS platforms) is how “bloated” it can be, I tend to agree. It’s not something that suits every project and for those not aware of these downsides often end up creating nice looking websites, but they have very poor loading times.

It’s time to fix this.

Fast Websites Matter

No one wants a slow website. A nice lean website gives users the content they want to view without the shitty 3 second load time from your unholy and haram website. Waiting for things to load sucks.

You must also think about how people consume web content. Mobile traffic is growing, 52% of the internet users came from mobile devices in 2018, up from 50.2% in 2017. It’s a trend we have known about for a long time and it’s only going to continue.

Mobile users mean poor 3G/4G internet connections are going to be very common. These slower, high ping connections means any extra “fluff” you’re sending to your users’ browsers is just going to piss your users off even more when compared with users on WiFi or ethernet.

If you’re a good little NPC who loaded spyware onto their website, you probably got some of these emails last year also.

fast websites get more Google search traffic

Google has rolled out “mobile first indexing” after warning SEO’s for 3 years. This means it’s going to be crawling and indexing information with smartphones in mind. If your user experience sucks on these devices you’re going to lose traffic and in the future perhaps not even be indexed at all.

Even on their press release, Google say:

Having fast-loading content is still helpful for those looking at ways to perform better for mobile and desktop users.

But if happy users and more traffic are not enough of a reason to worry about page speed… Do you like money?

If you’re running a website that sells things such as Amazon loading speed has been found to directly impact their bottom line. For every 100ms of latency in loading their pages they lost 1% in sales.

Google (again, sorry) have published some bench marks using data from Analytics that highlights the importance of reducing load times. They offered some fantastic bench marks for mobile users which are worth keeping in mind and show a great reflection of what it is users want.

Google page speed test

The internet is also very competitive, if people get bored waiting for your content to load, they will just go read it somewhere else. This is the modern reality of the web.

Before we begin

Before making any changes to a WordPress website, it’s of course good practice to back up the site or test things locally before rolling out changes to a live installation. 

Backing up WordPress

You can back up WordPress websites with plugins which export a copy of the site for you (which seems stupid as you should back up before installing any plugin). The better method of backing up is to copy all the files from server using FTP to a secure location and backing up/exporting the current database. If anything negative happens you can simply delete everything and reinstall in a relatively pain free manner. 

How to test websites speed

Before “improving” a websites speed it’s worth bench marking the current performance of your website to make sure you actually did something positive.

When optimising a website for speed you have a few options. If you have a small website you may wish to do every page independently and really work your way through manually. For larger sites it makes sense to optimise 1 page for each “type” of page, for WordPress common page types include:

  • Pages
  • Categories
  • Tag pages
  • Archives
  • Posts
  • Media pages

The incorrect way to optimise a website is to simply smash the homepage into Googles page speed test and declare a job well done. Your users are (hopefully) use other pages than the homepage, this is a stupid and thoughtless approach often done by greasy agency workers who hate their job.

Do this with some thought, if page speed on your blog posts is poor then start there or bench mark everything and do things properly. A lot of the changes we will make later will effect your entire site anyway but it’s good to do this properly, not autisticly.

For testing a websites speed there are a few options, some are better than others.

Google PageSpeed Insights

You know what you want in a page speed tool? You want to know how fast your website is right?

What Google have done is instead of give you the actual time it takes for things to load, they look at the technology you use, give you a pointless “speed” metric from 0 to 100 for mobile/desktop then predict what would make things faster by analysing the tech stack you use.

They will also give you a poor score for not doing things like minifying JavaScript on external scripts you may use, like Google Analytics which is clearly retarded.

This is a shit tool.

GT Metrix

GT Metrix will also give you a A to F pointless speed metric, but they also give you the actual time it took to load the page. It will also give you all the beautiful waterfall data and everything you need. It’s a really cool tool, unfortunately the only thing letting it down is unless you sign up to premium you’re going to be using their Canadian server. 

“Whats wrong with Canada, ay?”

Other then your ladyboy Prime Minister and polar bear rodent problem, I like your country. 

The issue is if you’re in the UK, your website is based in the UK and more importantly your audience is people in the UK… it makes no sense to optimise for speed in Canada.

If you don’t really have a set audience location in mind (for websites like blogs or review sites) then it makes sense to not only test in Canada, but also most other English-speaking locations.

Unfortunately, GT Metrix won’t let you do it without some package. No big deal.

Pingdom

Pingdom is my favourite free online page speed tool. It does all of the above from GT Metrix, but it lets you pick location of the test server.

The only downside is they are using gigabit fibre on their test servers (I think) and the numbers you get are usually better than real world usage with residential ISPs, but if you benchmark and test on the same server/platform you can measure improvement fine.

They limit the number of tests you can do per day and will put you in a queue if they get busy but it’s not a problem.

For our purposes we will be using this.

How to improve WordPress site speed

Unfortunately, as everyone’s websites and tech stacks are different, I can’t do this like a tutorial. 

There is no single best way to go about improving page speed. Instead I am going to list common tips and tricks to help you improve, some points will include multiple methods to attain the same result depending on your skill level. Some of these things will not be relevant to you at all.

Use your brain, test after every change you make and make sure things are going in the correct direction.

Update PHP

Did you know over 70% of the web currently runs on an outdated, no longer supported version of PHP? It’s very stupid.

Because people don’t really understand these things, or they don’t keep up with news in web development millions of website owners have missed this. You can’t even blame your web host either, updating from PHP 5.x to PHP 7.x can break some platforms. Do you think they want to deal with that shit?

But unless you have edited core WordPress files or have custom coded (non-WordPress standard) scripts running you’re not going to have this issue. 

Either manually update your PHP version to the latest release inside cPanel, or ask your host to do this for you via support. PHP 7.3 is more than 40% faster than PHP 5.x and it’s supported/secure.

Depending on your hosting provider you may be able to change this yourself in your control panel, look for something like this icon:

Updating PHP

Avoid Bloated WordPress Themes

To steal some lyrics from Rodger Alan Wade, sing along with me children.

There aint no wings on a pachyderm, you’re too fat to fly
There aint no wings on a barn yard pig, you’re too fat to fly
 and there aint no wings on a 400mb themeforest theme with 28 dependant styling and page formatting plugins, and it aint no wonder why
If you get on, I’m getting’ off
You’re too fat to fly

If the theme you are running is bloated with 1000’s of lines of fluff and logic for options that you will never need you’re going to have a problem.

The best way to test this is to install a blank version of WordPress somewhere and install your theme as it comes (this is called a vanilla install). Run it through pingdom and look at the results. This is a blank canvas of what you have installed before you added your content/images/extra shit on top of it.

Compare it to GeneratePress:

GeneratePress loading speed

This is without caching and other magic we apply later. If you have issues with a huge number of requests or a large total page size then it’s seriously worth considering rebuilding. This will hinder you forever.

Much like children, if your theme is obese kill it. You can’t outrun a bad diet, or a 400mb visual composer “all in one” WordPress disaster in this case.

Images

Images are a huge burden on load time. If you’re new to WordPress or even web development in general I can forgive you for thinking “oh it’s ok, WordPress will handle it…”. That’s not true.

You need to apply common sense when using images, here are some common rules I use when building websites that need images:

  • If the image can be replaced with CSS, use CSS. This is very common when people set background gradients or patterns.
  • Crop and resize images to be the smallest size they can be. Using a 1920x1080px image on a 600x400px div is very stupid.
  • If you’re using UI elements like sliders, limiting the number of images you use is good. I have literally seen websites with 90+ images in a single slider. If you’re going to put your users through this, have a gallery page.
  • Use .png and .gif for images with large blocks of colour such as logos or icons and .jpg for photographs or complicated images.
  • Saving images at a lower quality. You don’t really need perfect quality on every image, you can easily reduce image file sizes by 70% by saving at a lower quality. This adds up quickly.

One thing not on this list is lossless compression, which is compressing the image size without reducing the image quality.

You can go through your website and manually do this, but there are also plugins for this which just make your life a lot easier. My favourite option is Smush by WPMU. It handles everything you need to worry about as you upload your images on the fly, as well as batch process images you may already have on your website.

Other solid options are:

Cache

Caching is a great tool for all websites, when you set it up right. You have a few options, the one you go for should depend on your skill level and knowledge of technical things.

Beginners – WP Rocket

This is a paid plugin, but if you want to click 1 button and have everything done for you it’s pretty good. It removes a lot of the options other plugins have (while still handling these issues on the back end). If you have a limited experience with cache and you just want to do the job with no fucking around, get it.

Experienced – WP Fastest Cache

If you know your Gzip from your Minifys you might want to look at WP Fastest Cache, which unlike WP Rocket is free.

It handles a lot of the cache process without overloading you with options. Quickly letting you set up and enable cache for mobile and desktop users, while handing extras like combining CSS/JS to reduce requests, GZip, enable browser caching and Preloading.

You have all the important stuff handled with tick boxes and everything is explained in fairly easy non-techie English. 

Most of the time I just install this, it’s quick and easy to set up and doesn’t require a comp sci degree to maintain.

Professional – W3 Total Cache

If you’re looking to shave every available millisecond from your load time and you want to control each aspect of the cache layer, this is for you.

For the vast majority of sites I have built it has been overkill and unless you know exactly what you’re doing and what hardware your hosting company is running you could actually be at risk of making your website slower or even break.

An example of this would be to enable disk to store your cache, if you have a standard hard drive on your server it will need to spin up every time a visitor reaches your website which will cause a 100-200ms delay. If your server was rocking a SSD disk cache would actually be an improvement.

W3 won’t tell you when you do things right or wrong, it just gives you all the options and assumes you know what you’re doing. If you want the ultimate control or you’re running a large website with millions of users it’s the best option.

It’s also worth noting some dedicated WordPress hosts such as WPEngine will block installation of cache plugins, you don’t need them on these platforms. They will set up varnish and memcache for you on their stack so adding cache plugins on top of this will make things worse.

If you’re running your website on a VPS or dedicated server and you have control over everything you run, enabling memcache and varnish could be a better solution to any plugin. 

Database Optimisation

The WordPress database can get clogged up quickly with drafts, spam comments, version control on content as well as storing options for themes or plugins you removed later.

Going through your database manually and cleaning it out can be an option, but why do that when you don’t have to. Amirite?

A great plugin I personally use for this is WP Optimize. It handles everything you need to and runs weekly checks to keep on top of things.

Keeping your MySQL tables small with less fluff runs better, if you have a smaller website with limited content you probably won’t notice it. If you have a website that’s many years old which you have clogged up with 400 draft posts you don’t need anymore, use this plugin.

Pruning Plugins

While we’re about plugins that make things better, lets talk about plugins that make things worse.

Over time it’s likely you have installed several plugins for various things, but do you still use them? Go through what you have, remove things you don’t use or need. Get your website to be as lean as possible.

It’s also a security risk, the more code you have from third parties means the more potential gaps and issues you have with site security. Most plugins are free, made by people in their spare time. When they get bored of maintaining these

things lots of plugins don’t get updated and they get forgotten about.

Hackers are all over this and it’s making your website slower so fix it.

Hosting

A large portion of website performance is related to how good your web host is. Things like hardware, network quality, types of storage used and how crowded the servers are has an impact on your website speed.

If you have been using the same shared hosting package for several years, it’s likely that your website is going to be on a server with dated hardware and an over crowded server splitting resources across many more users than perhaps you started out with.

See our review of Dream Host. You don’t need a dedicated server or the latest in cloud technology to have good performance. Just get a decent package that can handle your traffic from a well-respected company.

CDN/Cloudflare

For websites that expect visitors from all over the world, you may want to set up a CDN (content delivery network). A CDN is made up of servers all over the world, when a user visits your website instead of accessing your central server they will connect to a server closest to them, reducing latency on downloads.

Each one of these servers will store static files which make up your website, these could be your CSS files, images, videos, audio, JavaScript files and other things like these.

For beginners who want an easy solution, look at Cloudflare for WordPress. This will handle everything you need with one-click installation and setup.

Gravatar and Comment Pagination

If your blog posts are starting to get some traction and you have a lot of comments there are two things you may want to look at.

The first is disabling Gravatar images. The loading time this can add is significant in any real quantity and because you have no control over how this is delivered (it's an external source) you have no room to improve things.

The easist way to do this is in the WP admin panel, head to settings > discussion, head to the avatar section and untick the "Show Avatars" box.

disable gravatar wordpress

Next, scroll up that page to the "other comment settings" section.

Enabling pagination for comments is a great way to load less data, reducing page load times.

Splitting huge comments sections into paginated pages can be great for this. If you're worried about comments adding latency to page load times I'd split pages into 10 comments per page and show the latest content.

Do you really expect users to read 100's of comments after reading your content? For most sites I think the answer is no.

Comment pagination wordpress

Cute JS Libraries

There are a number of JavaScript libraries that help increase speed.

what the fuck man I thought you have spent all this time telling us to take this shit out?

Yeah, but what if I told you these libraries will load content for your users before they even click it?

When a user hovers over a link for over 65ms this JavaScript library will begin to load that page before the click even happens.

This lets your website get a head start on loading files and elements and can easily shave off 100ms or more in page speed. 

You're going to need a little skill to add this to your theme as well as properly test to make sure it doesn't break anything. But if you have these skills (or money) you can make this happen.

Static HTML

If you are using plugins and extensions for simple things like social network share icons you may want to investigate swapping out your PHP plugin for static code. 
It’s surprising how much junk plugins can add to a website. Unless you’re investigating them all and you have the ability to understand the code and realise what they are doing you’re probably not going to understand what is going on.

Emojis

WordPress4.2+ added default support for Emojis into WordPress Core.

These can be used for many great things. I myself have been trying them out in meta titles and descriptions to boost click through rate in search engines:

Emojis in WordPress

However, if you're not a smart white man like me you may want to think about disabling them.

The JavaScript and CSS files they add are dead weight unless you use emojis, and it's probably that you don't.

The easiest way to disable emojis is adding this block of code to your functions.php file:

remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); 
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); 
remove_action( 'wp_print_styles', 'print_emoji_styles' ); 
remove_action( 'admin_print_styles', 'print_emoji_styles' );

If you're adverse to such things you can also use a plugin in like this one.

Minify All The Things

Minifying is the process of removing unessessary whitespace from HTML, CSS and JS.

Spaces, line breaks and tabs all add size to a file. For a complex website this can quickly add up. Minifying comes at a cost where the files will now be difficult to read with human eyes but you will make files smaller and therefore they will download quickly.

If you're running WP Fastest Cache as your cache plugin, there is a tickbox for this and it will handle everything for you.

It's also worth considering combining all these files where possible, 1 CSS file will download quicker than 15.

Defer JavaScript

You will have scripts that you need to keep, we can't get rid of everything.

Some JavaScript files will try and load before the page begins to render in your browser. This creates and illusion that your website is slower to the human eye, but in the real world it doesn't actually make things load faster.

Even so, if people think it's faster that's a good thing.To defer these scripts so they load after content begins to render we need to add some code to our functions.php file.

# exclude these scripts
$scripts_to_exclude = array('script1.js', 'script2.js', 'script3.js');

foreach($scripts_to_exclude as $exclude_script){
 if(true == strpos($tag, $exclude_script ) )
 return $tag; 
}

# Defer or async all remaining scripts not excluded above
return str_replace( ' src', ' defer="defer" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Scripts that need to load first (such as analytics) can be excluded in the first line of the function.

Everything else will be deferred.

Remove Query Strings from static files

This is something that is flagged up during a lot of page speed analysis tools, adding query strings can prevent caching on browsers which is bad.

This is super easy to fix, simply add this snippet to your functions.php file.

function remove_cssjs_ver( $src ) {
 if( strpos( $src, '?ver=' ) )
 $src = remove_query_arg( 'ver', $src );
 return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );

Other Performance Optimisation Tips

This wonderful website also covers many tips which are not WordPress specific which will help move the loading time needle in the right direction.

Enable GZip Compression

You probably already did this when you added a cache plugin, but just in case you can actually do this through .htaccess and it should cause no issues with WordPress.

Add Expires Headers to Static Content

This super simple tip helps cut page loading speed and is wonderful, but again you may have already done this with your cache plugin. Test and make sure.

Preventing Hot Linking

Hotlinking can hog your server resources and it's theft, in a EU way. It's very simple to disable also.

Users Who Have Downloaded More RAM:
August R. Garcia (6 days ago)
yottabyte (6 days ago)
🐏 ⨉ 2
Posted by Hash Brown 1 week ago

Edit History

• [2019-03-11 16:43 PDT] Hash Brown (1 week ago)
• [2019-03-11 16:43 PDT] Hash Brown (1 week ago)
• [2019-03-11 16:43 PDT] Hash Brown (1 week ago)
• [2019-03-11 16:43 PDT] Hash Brown (1 week ago)
• [2019-03-11 16:43 PDT] Hash Brown (1 week ago)
🕓 Posted at 11 March, 2019 16:43 PM PDT

Profile Photo - Hash Brown Hash Brown
🗎 37 🗨 247 🐏 72
Staff

I'm Hash Brown, I've done "computer stuff" for all my life.

Here are some of my latest articles:

Marketing:

Development:

Programming:

Misc:


Account created 3 months ago.
37 posts, 247 comments, and 72 RAMs.

Last active 18 hours ago:
Commented in thread How do I disable file editing in WordPress?

Learn more about goods that are plausibly relevant to your interests. [info]

GeneratePress Review

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.