8 Ways to Optimize WordPress, get the most from your Hosting

Often, people get hosting accounts and are disappointed with the speed. Selecting a good host is one thing, but it’s still up to you to make your website faster. Sometimes it’s the driver, not the car.

Optimizing WordPress

Getting your site running fast, and optimizing WordPress, is generally easy. Usually, the most significant gains are also the easiest to do, sometimes just time-consuming. While this won’t be a comprehensive guide, you can get your site faster than 90% of the websites out there by following this guide.

There are a lot of things that may be for your specific theme and hosting, so there isn’t a one-size-fits-all solution. But if you understand all the principles, you can fix problems. The following is a list of the things we’ll go over.

Embrace the Waterfall

Embracing the waterfall is the first step in optimization. This is the bread and butter of speeding up websites. Or WordPress optimization. This will tell you exactly what to do and how to fix it.

What is the waterfall?

The water describes how your website loads. Through a waterfall view, you can see how your website loads. You can see each file that loads as well as how long it takes. A good waterfall view will have some important information to go over.
Time to the first byte is one of the more powerful impacts on your load time. It shows how well your server and website are optimized. Your site will have to load and compile the site before it loads, when the browser first gets data, it’s called “time to first byte”.
Next is when your browser starts to render. This is when people can use and look over your website. While things may still load, people can already read text.

There’s a lot more to go over, but it’s best just to look at your website and see what takes the longest to load and work on that. This is what this guide is for. To get started, go to Webpagetest.

Example Waterfall

Plugins

I’ve seen it thousands of times. “Oh, That feature looks nice! I could use that!”

That’s how it starts, anyway. That’s also how websites end up becoming unstable and crashing. I’ve fixed thousands of WordPress sites. The most common issue I see is too many plugins because it only takes one bad one.

The plugins themselves are not bad. But you have to think of it this way, your whole site is a symphony of software. It only takes one bad player to make the entire thing sound bad. Or, if you prefer a house of cards, just remove one. Same with websites, one bad plugin, one bad theme, and the entire thing can become unstable. The more plugins you run, the greater the risk. I try to keep my plugins under 3. I understand that’s not realistic for most people, keep it as few as possible. If your minimum working site is still over 20, you need to reconsider how your site was built.

A lot of people react the same way when they hear this for the first time. “Plugins aren’t that bad, are they?”

Well, consider this. Even if your plugin isn’t active, WordPress will run the code on an occasion. If your plugin is running, it will execute code on every page refresh. When WordPress attempts to put in a page, it will go through the theme first, then all the plugins. If one of them is acting up, this can and will slow down your site. Sometimes optimizing WordPress is just removing plugins.

Waterfall symptoms that may show up are a slow time to first byte or server response. Connections to other websites can be a symptom as well.

Optimizing Images

Of all the things that typically slow down a site, images are the first and foremost issue. Even with experienced developers, I still see a lot of image issues. Either they don’t know any better or they’re lazy, usually both. When it comes to optimizing WordPress, images are the first thing you should look after. People won’t be able to tell at a glance if an image is properly optimized. Image optimizing is easy. Just keep this in mind:
1. Size
2. Format
3. Optimize

The waterfall graph can show how much images slow down your site. If you see long bars on your images, they need to be optimized.

Image Size

The image shouldn’t be bigger than it has to be. If so, you’re wasting space and bandwidth. No one likes you wasting their time, please don’t waste your visitor’s time.

4K isn’t standard yet, so 1920×1080 works fine. It doesn’t look bad on bigger monitors, I know as I test 4k sizes for websites all the time. Besides that, most people use a TINY phone screen anyway.

Aspect Ratio (You can skip this section if you’re in a hurry)
1920×1080 is a pixel measurement. That’s 1920 pixels wide and 1080 pixels tall. Generally, you don’t want to go over those numbers. But the ratio is the relationship of those numbers, this determines the shape. This ratio is a standard “16:9”. So if you want images to be the same ‘shape’ they need to have the same aspect ratio, you can use a calculator here to change and update that.

Image Format

The format is important (type of image). While the web supports a lot of image formats, it’s the devices and browsers that matter.

But there are generally only 4 you’ll ever want to use:
GIF | JPEG/JPG | PNG | WebP

GIF is good for animations, but don’t use it any other time.
JPEG or JPG is good for most images. Complex photos and artwork. JPG is generally the way to go. It has great compression, meaning it will take little space for the quality. However, it has no transparency.
PNG is great for two uses. Transparency since JPG doesn’t support transparency and logos or images with simple colors. PNG has a great compression rate for simple colors. A huge simple 2 color logo will be tiny with PNG.
WebP is fairly new and was just adopted by all major devices/browsers. It has the best of all worlds. Best compression ratio, animation and has transparency. The only drawback is it’s not natively supported by WordPress yet, but that’s an easy fix, well that was until WordPress did an update for that in early 2021. WebP is now fully supported with WordPress! I highly recommend using WebP for all images.
The wrong format can make your image huge and load very slowly. Full PNG photos take up a lot of space, and you can’t compress them well. No image should ever be over 1 MB on a website unless there’s a very good reason to do so.

Optimize the image!

Now for the main event. It’s so good it’s almost like magic. When your image is in the right format and size, load the site ‘tinypng.com‘ and upload it! (Click and drag the image right into the box.)

This site has awesome optimization software that can often reduce the size of your image by ~68% without any noticeable loss. If you still need to work with it, keep an original.

If you do this for each image, and you’ll be set. They do have a plugin, but it won’t fix images already on your site unless you have the premium version. Even if you have to take the time to manually download then re-upload all the images, it’s still worth it. Optimizing WordPress images is really easy once you get into the flow of it.

Database

One of the most overlooked parts to optimize your site is your database. Every WordPress site looks about the same file-wise, similar structure, and way it operates. The majority of information is contained in a database. Speeding up this process can help your site. Take the 5 seconds it takes to optimize it.

Go to your hosting’s database section, login to PhpMyAdmin. On the left-hand column, you will see the databases. Just click on the one you want to optimize, then scroll down to the very bottom. Press the ‘Check all‘ button and in the drop-down menu ‘with selected‘ find the ‘optimize table‘ option. Then hit the ‘Go‘ button in the lower right.
That’s it, you’re done. Optimizing WordPress databases is quick and easy.

Database issues are difficult to spot in the waterfall graph. They usually help with the time to the first byte.

Browser Caching

Browser caching is simple. Instead of downloading images and content every time a page loads, you can temporarily store those images and the browser can load them locally instead of using precious bandwidth to get them again. That in essence is browser caching when Optimizing WordPress.

You manage the browser caching with the server config. This isn’t something that can be easily done on WordPress directly. Just copy this code into your ‘.htaccess’ file:

# KHH BROWSER CACHING
<Ifmodule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# Others
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>
# KHH BROWSER CACHING

That’s it, if the code doesn’t work or your website goes offline, simply remove the code. Be aware that some plugins add this feature to your ‘.htaccess’ file. So if the plugin claims this feature, it will write to the ‘.htaccess’ file.

GZIP

GZIP is a common compression tool used to save bandwidth. The website code and images are compressed by the server, then sent to the browser, where it is uncompressed. This is called GZIP compression. All browsers support this feature. The drawback is websites will use more processing power to load the site. So you’re trading bandwidth for processing power. So in some rare use cases, GZIP can slow down the site.

Just put this code into your ‘.htaccess’ file.

##KHH GZIP###
# BEGIN Gzip compression htaccess
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
# END Gzip compression htaccess

# BEGIN Connection keep-alive
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
# END Connection keep-alive

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

#GZIP MODULE
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

GZIP won’t show up in the waterfall directly, but it should shorten the load time of the individual files. If the waterfall supports it, you should see a spike in CPU activity.

CDN

CDN stands for a Content Delivery Network. This is a middle man service that can help speed up your site. If your server is slow and content loads slowly, a CDN can help there. It has additional benefits of making your site safer, too. A good CDN service will have servers around the world, loading your content locally.

The general rule is if your wait time for images on your server exceeds your download time, then a CDN is recommended. It can also help with very high traffic volumes. A CDN doesn’t always help and in some instances can make things worse. With public shared hosting, a CDN is usually a good way to optimize WordPress. I recommend optimizing as much as you can first, then and check the Waterfall if a CDN is right for you.

Minify

Minify is a simple tool. It’s just a feature of caching plugins and if you’re lucky, a feature of your theme. What it does is shrink the size of the website code. Generally, you have spaces, tabs, things to organize the website code, so it’s easy to look at and find something. Computers don’t need all of that extra fluff in the code. Minify attempts to remove the fluff, making the code difficult to read, but faster to load.

Combine Files

The other thing is to combine files. A major part of WordPress optimization is shrinking the load time, a large part of that can be the CSS and JavaScript files. Instead of loading 50 files of code from WordPress and the theme, we shrink that down to 3. When you look at a Waterfall, each file will load before the next one does. This can be a large problem when trying to Optimize WordPress, combining files is another feature to look out for.

There are two modes that browsers grab files. The first mode, “HTTP/1.1” loads one file at a time. The newer one, “HTTP/2” loads multiple files at once. When you’re using 1.1 it’s important to combine the files, so there are fewer files to load from. WordPress can easily have 50+ files on a single page load.
However, HTTP/2 is a shortcut there. The number of files doesn’t matter as much.

How do you know which version your host is using? Well, there are a few ways. A plugin in Firefox called “Flagfox” just tells me when I hover over the flag icon that’s displayed in the URL bar. The Web Page Test site can tell you which version the site is on.

Generally, it’s a simple switch to enable if the host supports it. You can ask your host if they can enable it, but you may get some confused people in support. One of the reasons I prefer to set up a custom server myself.

If you’re stuck on 1.1, find a plugin that can combine files for you, it will greatly help with the load times. Hopefully your theme is compatible with it.

Site Caching

Site caching is done with your hosting server or website. It’s essentially the difference between going to a fast-food restaurant where the food is premade versus going to a sit-down restaurant where they have to prepare everything from scratch. To be clear, we’re talking about speed, not quality. This is what caching does.

Some hosts do a good job of doing server-side caching, this means you can skip this step if this is the case. This is where you will have to do a trial and error approach to the website. Make sure you take notes for this one, record your speeds for each plugin and get many samples for an average, optimizing WordPress can be different for every environment, theme and plugin combination.

A plugin can help!

Themes and hosting environment can be radically different when optimizing your website, so don’t be too picky on trying caching plugins. Try them all, test them all. You never know which one will fit well. This is one place where I do recommend using a good plugin.