Probably, there is no one that does not want his/her website performance optimized to a greater speed. WordPress is a great platform. One weakness that it suffers from, however, is it can be quite slow. Without taking the right precautions, you could end up with a sluggish site.

That’s not only a hassle for your returning visitors but will cause you to lose subscribers and customers.

In this guide, I’ll cover all of the best ways that I’ve found to consistently speed up your WordPress powered website within just some minutes.
Why Website Speed Is Vital

When a person lands on your site for the first time, you only have a few seconds to capture their attention to convince them to hang around. If the person waits for more than 5 seconds and the page is not loaded yet, there is likely a chance that the visitor will close the page immediately.

In fact, if your site takes too long to load, most people are gone and lost before you even had a chance.

Not only has that, but Google now included site speed in its ranking algorithm. That means that your site’s speed affects SEO. So if your site is slow, you’re now losing visitors as a result of reduced ranking in search engines.
How to determine your website performance or speed

If you want to check the speed of your website, you can use the following website performance monitoring methods.

Google Page Speed Insights to view your current score.
Perform Pingdom Website Speed Test on your website.

Now straight to business…
Top Ways To Speed Up Your WordPress Site

1. Disable Hotlinking of Images and Leeching of Your Content

A common way to steal images from websites is by loading them from the original source. The image will load from your servers and will be displayed on third party websites without your permission. This is too bad and it increases your server load and bandwidth usage.

A lot of copy and paste bloggers do this often, and if you are one of those top bloggers that act as role model to others, you are likely to be always copied from. I already know lots of them that copy mine and paste exactly as it was written without any credit. Don’t worry, God is watching you from 3D

Even if the person will give credit back to your website, if you catch him/her, tell the person to download the images and upload themselves. Wait, you know you can’t find and tell all of them right? See what to do…

Here is how you can disable hotlinking of images from your WordPress site.

Simply add this code to the .htaccess file in your WordPress site’s root directory.

#disable hotlinking of images with forbidden or custom image option

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?frankapptech.com [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]

RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

Don’t forget to replace frankapptech.com with your own domain name.

This code blocks hotlinking while still allowing images to be viewed in search results and on your website.

Can’t find the .htaccess file? Refer to this wonderful tutorial on how to find the .htaccess file in WordPress.
2. Image Optimization

This particular issue is a very serious one that can slow down your website to a crawl, especially if you have a large number of images on a page. Use images with the proper size.

Earlier to this post, I have used an image of size 2MB for no just reason. I never knew that it is among the stuffs making my website to load with the speed of a snail. The worst part of it is that I have that type of image twice on my website, and do you know what? They all load up in every page of this website because they are being placed in the sidebar. The dimensions was about 3000 x 2500 px each, while my sidebar needed only 300px wide.

I have to sit down and download all the images(not all the images on my website, just the two and my logo as well) locally to my PC and deleted them from the server, also noting there names on the server as well. I have to open each of the images with Adobe Photoshop(I recommend this for you too) and resized the images to a better size. After that, go to file menu and click save for web, not ordinary save. This option gives you a great result like a magic. You will get a very clear and optimized image at a very small size.

Just imagine the differences. Use my own for an example
Image Before Optimization After Optimization
Image 1 2MB 31kb
Image 2 1.8MB 30kb
Image 3 700kb 15kb

I recommend that you use the image type JPEG instead of PNG for photographic images. It reduces the image size drastically. And also use GIF or PNG-8 for text and images with transparent background.

Having said this, there are lots of WordPress plugins that can do this job for you automatically and the good news there is that once you install them, they will help you optimize all the images in media library, losslessly or lossy depending on your choice.

Among all the Optimization plugins available, there are just two that I can stand to defend because of how excellent I think they are.

WP Smush
EWWW Image Optimizer (I recommend and use this here at FraNKAPPTech)

The EWWW Image Optimizer is a WordPress plugin that will automatically optimize your images as you upload them to your blog. It can optimize the images that you have already uploaded, convert your images automatically to the file format that will produce the smallest image size (make sure you read the WARNINGS), and optionally apply lossy reductions for PNG and JPG images.


See this tutorial to learn more about how to install and configure EWWW Image Optimizer

3. Enable Browser Caching

Another way to speed up a WordPress site is through browser caching. This method can greatly improve your website speed a lot by loading some static contents from the cached version on the users browser rather than requesting for the file again from the server.

The best ways to get this done is to either get your hands dirty and add this little line of code below to your .htaccess file.

## THIS EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/javascript “access 1 month”
ExpiresByType text/x–javascript “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access plus 6 months”
ExpiresByType application/x–javascript “access plus 6 months”
ExpiresByType application/x–shockwave–flash “access 1 month”
ExpiresByType image/x–icon “access 1 year”
ExpiresDefault “access 2 days”
</IfModule>
## EXPIRES CACHING ##
## Cache-Control Headers ##
<IfModule mod_headers.c>
<FilesMatch “\.(js)$”>
Header set Cache–Control “max-age=2592000, private”
</FilesMatch>
</IfModule>
## Cache-Control Headers ##

Or use a plugin to achieve that same fit. By far, my favourite plugin for this caching job is the W3 Total Cache

It has most of the features you need and is extremely easy to install and use. It is also recommended by web hosts like: Page.ly, Synthesis, DreamHost, MediaTemple, Go Daddy, Host Gator and countless more.

Install and activate it, do the necessary little configuration and watch your site load as fast as you can’t imagine.

Refer to this tutorial for a better understanding of how to install and configure W3 Total Cache

4. Eliminate render-blocking JavaScript and CSS in above-the-fold content

When you hear above the fold, most peeps don’t understand it. It simply means the area of a website page that shows up or that you see first on your browser before scrolling up and down.
If your page has some blocking script resources and blocking CSS resources. This causes a delay in rendering your page.
And none of the above-the-fold content on your page could be rendered without waiting for the blocking resources to load. At this juncture, we need to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
To do this, simply add the following lines of code to the end of your theme’s functions.php.

add_filter( ‘script_loader_tag’, function ( $tag, $handle ) {
if (is_admin()) {
return $tag;
}
return str_replace( ‘ src’, ‘ async src’, $tag );
}, 10, 2 );

I advice you to always create a child theme and copy the parent’s functions.php file to the child theme directory and edit. This will protect you from loosing any changes or customization made to the theme in the event of parent theme update.
5. Control the amount of post revisions stored

You can restrict the number of post revisions stored by WordPress. By default, WordPress tracks every change you make in your pages and posts. By doing this, it is preserving too many legacy files which you don’t need and can drag down your website causing it to be slow.

To do this…

Locate your “wp-config.php” file in the root directory of the WordPress installation. Add below line of code to “wp-config.php” file.

/**Reduce Post Revisions**/
define( ‘WP_POST_REVISIONS’, 3);

Note: 3 is the number of revisions you want it to store. I also recommend using 3 in case you want to revert back to your old post before it was updated.

Also, you can direct WordPress to not maintain revisions at all. You would then change your code as shown below.

define( ‘WP_POST_REVISIONS’, false);

Alternatively, for those that can’t get there hands dirty with codes, you can use a WordPress plugin called Revision Control
Make sure you keep your post revisions to a minimum, set it to 2 or 3 so you have something to fall back on in case you make a mistake, but not too high that you clutter your backend with unnecessary amounts of drafted posts.
6. Add an expires header to static resources

An Expires header is a way to specify a time far enough in the future so that the clients (browsers) don’t have to re-fetch any static content (such as css file, javascript, images etc).

This way, you can cut your load time significantly for your regular users.

To do this, you only need to copy and paste the following code in your .htaccess file:

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000

7. Turn off pingbacks and trackbacks

Traditionally, WordPress interacts with other blogs that are equipped with pingbacks and trackbacks.

Every time another blog mentions you, it notifies your site, which in turn updates data on the post. Disabling these notifications will not ruin the backlinks to your site. It will just invalidate the setting that generates unnecessary load on your site.

To do this…

Just Visit your site’s dashboard, then goto Settings>>Discussion Settings property page.

When you get there you just need to un-check the checkbox with label as “Allow link notifications from other blogs (pingbacks and trackbacks) on new articles”.


Voila all is done… Just sit and watch your website speed improve.

8. Optimize Jquery JS

It’s very simple to apply this method. You just need to modify your WordPress theme’s “functions.php” file. Remember, always do this for child themes.

Append this code into the end of your theme’s “funcions.php” file and save it.

// Optimizing your Jquery JavaScript.
function optimize_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_deregister_script(‘jquery-migrate.min’);
wp_deregister_script(‘comment-reply.min’);
$protocol = ‘http:’;
if ($_SERVER[‘HTTPS’] == ‘on’) {
$protocol = ‘https:’;
}
wp_register_script(‘jquery’, $protocol.‘//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js’, false, ‘2.1.3’, true);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘template_redirect’, ‘optimize_jquery’);

9. Enable gZIP compression

To decrease the size of data that’s being transferred between your server and your visitors, you can enable the gZIP compression for your images, CSS and JavaScript files. The easiest way to enable the gZIP compression for your images, CSS and JS files is to add these lines to your .htaccess file in the root WordPress folder:

## ENABLING GZIP COMPRESSION BEGIN##
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
## ENABLING GZIP COMPRESSION END##

10. Replace PHP with static HTML, when necessary

This method is a little bit advanced, but can drastically cut down your website’s load time.

Happily go on and read this great post beacuase it taught me how to easily do this myself, in a few minutes.

11. Use a CDN (Content Delivery Network)

Content delivery networks (CDN) are server networks that clone your site on all of their location nodes. This means that when your visitors request your site, it will be served by the closest server location, rather than the main datacenter of your hosting provider.

Most of the big guys in the industry today like wpbeginner, shoutmeloud etc use CDN.

To put it bluntly, CloudFlare, along with the W3 Total Cache plugin discussed above, are a really potent combination (they integrate with each other) that will greatly improve not only the speed, but the security of your site. Did you hear the latest?

Both are free!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

I wish that you now know a bit more about the Website Performance and some superb ways to speed up your WordPress powered website. I advice you to go on and try out all these tips above. I want to assure you, after doing some of these, you will call me to serve me some coffee.

If you enjoyed this guide, share it with others to learn as well.

Do you have other ways to speed up WordPress website? Use the comment box below.


Cc: lalasticlala

http://frankapptech.com/979-2/

hmm.. Ok thanks