16 Steps To Optimize and Speed Up WordPress Websites

As professional web developers, one of the main concerns of any website is its speed. This is because website visitors expect pages to load in of 2-3 seconds at most. It is frustrating when something doesn’t load fast. Users want information as fast as possible and there’s no reason why we can’t make that happen.

People don't return to websites with bad performance. It's a #wasteoftime. Let's fix that! Click To Tweet

Not only does a slow website cause user frustration, a faster website is now a ranking factor. This is huge; and a good move for search engines. More and more people are taking the time to learn how to make their website load as fast as possible and I’m here to help.

Some of these code snippets are for your .htaccess file and only work if you have an Apache server or Apache as a proxy. Let’s dig into some tips on how to optimize and speed up your WordPress website.

WordPress Website Speed: Remove Emoji / Emoticon Scripts

WordPress 4.2 included full support for Emoji’s. If you’re not a fan of Emoji’s in user comments or your content then we can disable Emoji scripts altogether. The code snippet below also prevents the DNS lookup from the TinyMCE editor.

Paste this into your functions.php file.

Get Better Website Hosting

Most people still use the typical slow, shared hosting because it’s cheap. But guess what… cheap means cheap.

It’s 2017 and technology is improving at a fast pace. Getting a Virtual Private Server (VPS) in the cloud with fast SSD storage is a great investment. I provide fully managed, secure, fast VPS hosting to my clients. The best part is that it’s only a few more dollars then your typical cheap, shared hosting. Furthermore, it comes with a FREE SSL certificate.

I started running my own VPS’s in early 2017 and my WordPress website speed increased over 200%! Speed, security, and ease of mind with a WordPress Care Plan. The clients on this setup are very happy because everything is taken care of for them, including security, framework and plugin updates, more speed enhancements, backups, and more!

The downside of a good VPS is that you need to know server management. That’s why I provide it for my clients.

Use A Content Delivery Network

Content Delivery Networks help speed up your website for few reasons. Most of all it delivers your content from one of its many servers. Depending on the location of a visitor, the information has less of a distance to travel.

My favorite CDN is CloudFlare because they also specialize in website security. Consequently, it is a very popular choice. They also have a free subscription too. Awesome.

MaxCDN is a great CDN that increases your website speed. It also comes with lots of options to help the security of your site.

The Correct SSL Certificates

SSL Certificates are a must these days due to the fact that:

• Your website being secure is now a search engine ranking factor!
• Website visitors will trust your site more because it will have the green lock icon in the address bar.
• Your website will be faster with the right SSL Certificate installed.

All SSL Certificates aren’t the same, though.

If you have an SSL Certificate right now on your shared hosting, it is probably using HTTP 1.1. The standard is now HTTP/2. It’s only available with certificates that support it. If you have the right server to go along with it, you will get a huge speed increase in your website.

HTTP/2 supports multiplexing, headers compression, priority, and more intelligent packet streaming management. As a result, there is reduced latency and accelerated content download speeds on web pages. Instead of downloads waiting for assets to finish, HTTP/2 loads more things at one time.

My fully managed, secure, fast VPS hosting includes an SSL Certificate on your site!

Script / HTML Minification

Minification means removing unnecessary characters and combining everything. Therefore, code is compressed and served to your visitors with a file size as small as possible.

Google has some great tips and tools for minification.

If you have a website built with WordPress, speeding up your website with minification is easy to put in place. My favorite plugin to take care of this is Autoptimize.

Along with Javascript minification, you can also minify your HTML and CSS. Autoptimize also comes with some other useful options. Plus it’s free and compliments CDN’s and other caching plugins! Super awesome.

CSS and jQuery Script Concatenation

Concatenation is taking many files of the same language, such as JS or CSS, and combining them into one file.

There are a number of tools that can help you speed up your website with file and script concatenation. You can include them in your NPM, use Apache Ant and YUI Compressor, or you can use one of the many WordPress plugins.

Note: You should only concatenate your scripts if you are running the old HTTP/1 protocol.

Websites with an SSL Certificate that supports HTTP/2 don’t need to concatenate files. HTTP/2 loads more of your assets at once, so your website will actually be faster without concatenation.

Smaller Image Sizes With Compression

Compressing your images will make your website load faster due to the lower file sizes. There are online, offline, and automated ways to do this.

There are a some online image compressors at your disposal. Some can do bulk images while other do one by one. This isn’t ideal, but it’s an option.

A great automated solution on your website is ImageOptim.

For WordPress websites, I have two favorites:

• ShortPixel Image Optimizer is my favorite. It compresses better than any plugin I have tried and has a great set of basic and advanced options, including WebP conversion (more on that later).
• EWWW Image Optimizer comes with many options including WebP format conversion. It’s an amazing plugin and a must have for any fast WordPress instance.

If you use Sketch, you can install the Image Compressor plugin. If you use Photoshop, you can use the TinyPNG extension. Worth it. Finally, if you want a free standalone program for Mac or Windows, you can use the ImageOptim app.

WebP Images

WebP is a new image format. It provides superior lossless and lossy image compression. We can create rich images that make websites faster due to smaller file sizes.

You can learn a lot more about the WebP image format from Google.

Lossless WebP images are 26% smaller than PNGs. Lossy WebP images are around 30% smaller than JPEGs.

Chrome and Opera are the main browsers that have the ability to read WebP images. Hopefully other browsers will start implementing this in new versions.

If you’re using WordPress, install ShortPixel Image Optimizer or EWWW Image Optimizer. They both have the ability to convert and compress to images to WebP.

For ShortPixel Image Optimizer, just go to Advanced Settings and make sure the WebP Conversion checked.

For Ewww Image Optimizer, don’t worry about the rewrite rules that on this page. They aren’t needed. We will be enabling WebP images in browsers that support it with a better solution below.

Next, install the Cache Enabler plugin. Make sure the Create an additional cached version for WebP image support option is checked. I leave the rest unchecked and disabled since I’m using other methods to optimize, minify, and compress my assets.

Note that you will not be served WebP images when you’re logged in to your WordPress website. Open a separate Incognito Tab or a logout.

GZip Compression

Gzip Compression is a method of compressing files and making them smaller. This gives our users information faster.

I only use Apache servers, or Apache as a proxy through NGinx, so I use the .htaccess file for this. WordPress is a framework that utilizes .htaccess. This code snippet is perfect to append.

Use Browser Caching

Browser caching is the ability to cache and reuse previously fetched resources. This is a critical aspect of optimizing for performance. Your users do not have to re-download assets of your website. This will definitely increase the speed of your website.

Again, put the below into your .htaccess file.

Remove ETags: Disable File Validation

By removing the ETag header, you are disabling caches and browsers from being able to validate files. They are forced to rely on your Cache-Control and Expires header. Basically you can remove If-Modified-Since and If-None-Match requests and their 304 Not Modified Responses.

Source: Ask Apache

To make the most out of the last two code snippets, this will help your website speed a lot. It’s a simple one liner. It’s weird. It’s stupid.

Include this in your .htaccess file:

WordPress Website Speed: WP Super Cache

WP Super Cache generates static HTML files from your dynamic PHP files. Processing PHP files is requires more resources than generating basic HTML files. This is a huge speed increase for you website.

Luckily, it’s easy to implement into WordPress. However, for the best results, you need to know how your server works and what options to take advantage of. Enabling the wrong features can hinder your attempts of increasing your website speed.

Async Javascript

Render Blocking means that the browser has to wait for a resource to download before it starts downloading more resources.

When you add async or defer it helps to eliminate render-blocking JavaScript files. This helps increase your Google Pagespeed and Yahoo! YSlow scores. Doing this improves your page ranking and also increases your website speed.

An easy way to do this is with the Async Javascript WordPress plugin.

Protect Against Spam and Brute Force Attacks

Brute Force is a trial and error method of hacking used by programs to decode encrypted data through exhaustive efforts.

Not only are Brute Force attacks dangerous, they tend to give servers a run for their money. They tax your servers’ RAM.

Making sure that these attacks don’t get through should be a number one priority. There are four solutions I recommend depending on your setup:

1. Cloudflare For Security and Site Speed
   Cloudflare is also a CDN (mentioned above). One of their specialties, however, is website security and stopping Brute Force attacks.
2. HeathShield.io Server Firewall
   HeatShield is a network firewall management service for Linux servers. The firewall is configured by HeatShield and prevents unauthorized access to services running on your servers, such as SSH and MySQL. This enables you to easily restrict access to these services so that only IP addresses you trust are allowed to communicate with your servers.Additionally, HeatShield dynamically updates your servers’ firewalls to block IP addresses that have attempted brute force SSH login attacks on any of your servers. Source: Heatshield.io
3. WordPress: JetPack Protect
   The Jetpack Protect module allows you to protect your WordPress powered website against traditional Brute Force attacks. It’s an easy must for your website.
4. Fail2Ban
   Fail2Ban scans log files and bans IPs that show the malicious signs of Brute Force attacks. Fail2Ban then updates firewall rules to reject those IP addresses for a specified amount of time. This can be useful, but the options above are better.

Stop The Spam

Everyone hates it. Spam sucks. Let’s prevent this crap from showing up on our websites. WordPress is a huge target for spam since it controls such a large part of the web.

Not only is it annoying, but it can lead to hacks and hinder performance.

There are a few WordPress plugins to help stop spammers. My favorite is AntiSpam Bee. It’s free and amazing. It helps cut spam ensuring that my site stays secure and speedy.

Another alternative is the popular paid service from the engineers of JetPack called Akismet. It’s the best. If you’re serious and can afford it, get Akismet.

AMP (Accelerated Mobile Pages) & Facebook Instant Articles

The AMP Project is an open-source initiative from Google. It aims to help users get information faster, stripping away a lot of images and scripts, focusing on the content.

You have undoubtedly viewed AMPs or Facebook Instant Articles before. They are fast. It’s kind of sexy.

But why are they so fast?

AMP and Facebook Instant Articles speed up your website while viewed on mobile devices because it focuses on HTML, optimized Ads, and a cache. The scripts, images, and ads that load on these pages are limited. Thus the quick load times and greater user experience.

WordPress users have many options to turn to for utilizing Accelerated Mobile Pages. One of the plugins is called AMP and built by the makers of WordPress, Automattic.

I have not implemented AMP on my website yet because there is not much support for code snippets like Gists. They don’t display at all. Make sure you check your pages when integrating this into your website.

The folks over at Kinsta have written an in-depth article all about AMP and how to implement AMP with WordPress. They have a wealth of information about what AMP is, how it works, and plugins to install to make it happen.

Database Optimization

I build custom websites using WordPress, which uses databases to store and access content, data, and other great stuff. Sometimes these become bloated. It’s fixable with a plugin called WP Optimize.

Not only can you optimize with the click of a button, but you can optimize your database on a set schedule. An optimized database will increase the site speed for your users.

Also, it’s free. So, there’s no reason not to.

Bonus WordPress Speed Tips

Use Google’s CDN For Packaged Scripts

There are a handful of scripts that come packaged with WordPress. Some of them are also hosted on Google’s AJAX Libraries API. The Use Google Libraries plugin makes your WordPress site use the content distribution
network side of Google’s AJAX Library API instead of from your server where is WordPress installed.

By doing this, you gain:

• an increase that your site visitor already has a file or script cached on their machine
• it takes load off of your server
• most likely uses compressed versions of scripts
• and Google’s servers are set up to negotiate HTTP compression with browsers

Note that you should look at the plugin page as there is a list of Incompatible Plugins and Themes.

Shout out to Wayne Stratton for mentioning this tip in the comments. He uses it for his website with good performance gains.

More Speed and Optimization Tricks?

What else would you add to this list? Do you have a trick up your sleeve you’d like to share? We’d love to hear it!

---