Most studies show that web surfers are very impatient and leave a site if it has not loaded in 4 seconds, or even less. We are in an era where everything has to be fast and users just don’t want to sit in front of their computer waiting for a page to load. This is particularly true for users of mobile devices.

Page Contents

WordPress is a great software that can help you build beautiful websites or blogs easily without having to pay high fees for a web developer. The problem with WordPress is that it can become very slow due to many factors. A fresh WordPress installation using one of the default theme and a minimum of plugins can load very fast and get good Google Page Speed and Yahoo! YSlow scores.

This is an example of a simple blog using the default WordPress theme.

Speed Up WordPress Performance - image  on https://trunk.lyThe value at the left is the Google Page Speed score and the value at the right is the Yahoo! YSlow score. Double A – Green 97% & 87%. Page load time is 0.9 seconds. If you get high scores like these you can be very proud of yourself and your visitors can be very happy!

Unfortunately, 99% of the time we use fancy themes, lots of images and widgets that add heavy codes on our pages, at the wrong place, which considerably slow down our WordPress installation. There are also default WordPress settings that do not help to save server resources.

Have you Checked the Load Time of your Home Page?

If you are reading this guide there is a good chance that you have seen by yourself that there is a speed problem with your blog and if you haven’t, I congratulate you for being proactive. If you don’t see any speed issue, that does not mean that there isn’t. People with slower connections than yours or located in different countries may have issues viewing your blog. The first time you check your Google Page and Yahoo! YSlow speed you will be shocked and helpless on what to do. I certainly was the first time and spent lots of time on other blogs and forums to find solutions, and try different combinations of plugins.

You don’t have to, this guide will show you what you need to do in easy steps. If you only use a couple of optimization Technics you will see an improvement, if you use them all, you will see near perfection.

Save on Hosting Costs

Very few bloggers take speed optimization seriously, most of them just don’t think about it, before it causes serious problems. That’s understandable, bloggers are writers and most of the time nontechnical. I, myself, waited that my hosting bill got bigger before I took an interest. Slow speed is a sign that your blog is using too much CPU power and RAM from your server and your hosting company will be happy to offer you to buy an upgrade. They may kick you out, even if you have a package where everything is unlimited, if you are causing too much CPU trouble. Applying what you learn in this guide will save you the extra cost of an upgrade.

“The Web Should Be Fast” ~ Google, Inc.

Optimizing your blog for speed is not only a good thing for your user experience, but also good for your ranking. Load speed is one of the factor used by the Google algorithm to decide if your site should be ranked higher than another. If your site is slow to load, your ranking suffers and this is a good reason to speed up your WordPress blog today!

How to increase speed of WordPress site

In order to increase the speed performance of our sites, there are usually 3 main categories to focus on:

  1. Hardware
  2. Software
  3. Network

Hardware issues are easy to fix, but expensive. If your server does not provide enough CPU capacity, is overly crowded, or can’t handle the load, then upgrading your server or moving your sites to a virtual private server or dedicated server is the solution. However, this almost always involves additional costs which may or might not be worth it, depending, for example, on how much revenue your website generates.

We will focus on the software side of the equation. Software involves two main aspects: backend, and frontend. Backend includes database optimizations and server side code like PHP and Java. We will put the most effort on frontend optimizations though. These include HTML, Images, JavaScript and CSS files and make 90% of the time it takes to load a website!

Tip: Do not feel intimidated or overloaded if you do not understand the technical aspects contained herein. Simply follow the steps indicated in this guide and you will increase the performance of your sites! Also, I have added a difficulty sensor to each step. If you want to stick to the basic but important techniques, just follow the steps marked as EASY for rapid implementation.

So… Are you ready to make your sites fly? (I hear a big YES! in the background…)

Good, then let’s get started!

BIG NOTE!

Please backup your WordPress before starting this process. Moreover, I highly encourage you to back up your site during the process as well, so you can get back to a working state if anything should go wrong.

Speed Test WordPress

Before you start optimizing the performance of your blog, record your current data, including page-loading times, using the services described below. This will help you compare your results to a baseline and determine how effective the performance tweaks really are.

The free services described below analyze and test your page (not the entire site) and present to you the test results. I prefer testing my pages using several different services because you will notice different results every time. It is not that easy to determine the average loading times with accuracy because many variables can modify the test results each single time.

Getting an overall feel of how your site is performing using several  different test services is the way I like to approach this matter.

Neustar

1. Head over to http:// browsermob.com/ free-website-performance-test

2. Insert your Homepage URL (or other specific pages you want to track)

3. Click on > Run Instant Test >

4. Export results to .PDF
Speed Up WordPress Performance - image  on https://trunk.ly

GT Metrix

1. Head over to http://gtmetrix.com/

2. Insert your Homepage URL (or other specific pages you want to track)

3. Copy your Page load times (or Retest page several times until you can specify an average measure), Average Size, Average Objects and Page Speed and YSlow Grades to the Master Spreadsheet or Notepad File

Speed Up WordPress Performance - image  on https://trunk.lyPage Speed Online

1. Head over to https://developers.google.com/speed/pagespeed/insights

2. Insert your Homepage URL (or other specific pages you want to track)

3. Copy your Page Speed Score to the Master Spreadsheet or Notepad File

Google Webmaster Tools (Optional)

1. If you have a Google Webmaster Tools account, log in to your account.

2. Head over to Labs > Site Performance

3. Google might have tested your site, and you will be able to record your average loading times.

Web Page Test

1. Head over to your Tracking Analytics Software (e.g. Google Analytics)

2. Based on recent data (last couple of months), determine the most popular browsers used by your visitors, their country of origin and the connection types.

Speed Up WordPress Performance - image  on https://trunk.ly

3. Head over to http://www.webpagetest.org/

4. Insert your Homepage URL (or other specific pages you want to track)

5. Determine the best suited Test Location and browser (based on your visitors).

6. On Advanced Settings, select the best suited Connection Type. Change number of tests to run to a number above 1 (up to 10). Try 5 as an example.

7. Start test and wait until completion.

8. Copy your Avg. Size, Avg. Loading Times (Median Runs for First and Repeated Views), and Avg. Objects to a Master Spreadsheet or Notepad File. The difference between First and Repeated View is very important. Once a visitor visits your site, he/ she may build a cache. The next time he/ she visits the site, or the next page he/ she visits within your site might load much faster due to this feature.

Optimizing Your Images

Speed Up WordPress Performance - image  on https://trunk.lyImage optimization is very important to speed up your blog. The images on your blog are certainly too big for desktop and mobile displays. Even if you have carefully saved your images for the web using Photoshop, Gimp, Acorn or other image software, you will be surprised to see how much kilobytes you still can save with the method I am about to show you. Hopefully, you do not have to optimize each image individually again. This would be a daunting work especially if you already have thousands of images in your blog.

You need a solution that can optimize your existing images in your Media Library, but also any new image you upload automatically. How does that sound? The solution is to use a plugin called “EWWW Image Optimizer”.

EWWW Image Optimizer

There are several plugins that do the same thing, but EWWW is excellent in what it does.

The benefits of using EWWW Image Optimizer are:

  • Your pages will load faster because smaller image sizes means faster page loads.
  • Your backups will be faster.
  • You will use less bandwidth.
  • You can optimize hundreds of images in just a few minutes.
  • You can optimize any image in WordPress including those that are not in theMedia Library like theme images.

Now, you may have some concerns about how your images are going to be manipulated. Are they going to look as good as the originals after optimization?

By default, EWWW Image Optimizer uses lossless optimization techniques, so your image quality will be exactly the same before and after the optimization. The only thing that will change is your file size. — Your images will look the same.

Install EWWW Image Optimizer

Go to your“Add plugin”section and search for EWWW Image Optimizer. The plugin will show.

Speed Up WordPress Performance - image  on https://trunk.ly

As you can see this is a very popular plugin with 500,000+ downloads, compatible with the latest WordPress version and updated frequently. Click on the“Install Now” button to install the plugin and activate it.  Then go to the“Settings”menu and click on EWWW Image Optimizer.

Speed Up WordPress Performance - image  on https://trunk.lyIn order for the plugin to work you need to have jpegtran, optipng, pngout and gifsicle installed on your Linux server. If your plugin status is not“All Clear” and you have one of these missing you need to contact your web server company to ask them to install them for you. If problems persists contact the plugin developer.

Let’s have a look at the“Basic Settings”.

Speed Up WordPress Performance - image  on https://trunk.ly

The only two things you need to do is check the“Remove metadata”and enter a“Bulk Delay” that will work for your server. If you are on a share server you may want to be more patient and select 5, 6 or 10 seconds; if you are on a VPS or dedicated server, a pause of 3 seconds between images should be enough.

Ignore“Cloud Settings”, “Advanced Settings” and “Conversion Settings” as leaving them with their default settings will satisfy most users.

Optimize your Images From the Media Library

There are two ways to optimize your existing images. The first way is to go to your “Media Library” and optimize each image one by one. Click on“Library”. Notice that a new section for “Image Optimizer” has been added to your Media Library. In the screen shot above it shows that the original images were not processed and indicates each image’s size. Let’s click on the “Optimize now!” links and see what happens.

Speed Up WordPress Performance - image  on https://trunk.ly

As you can see the images have been reduced by 2.1% , which is a saving of 42.7 kB. Can you imagine how much space will be saved when optimizing the x,XXX images on the blog? The “Re-optimize” link and conversion link “PNG to JPG” can be used in certain occasion, but I prefer not to use them at all and you don’t need to. Another way to optimize images from the Media Library is to select the images you want and select the“Bulk Optimize”option and click “Apply”.

Bulk Optimize your Images

You imagine that optimizing x,XXX images from the Media Library is not the ideal way to do it. Hopefully, EWWW Image Optimizer has a Bulk Optimize feature. From the Media menu, select “Bulk Optimize”. You will see the “Bulk Optimize” page. Enter the pause duration between images and click “Start optimizing”. The optimization starts right away. Each image you have in your Media Library has copies of itself in different sizes and they are all optimized when needed.

Speed Up WordPress Performance - image  on https://trunk.ly

You can see in the image above that previously optimized images are not re-optimized. When you scroll down the page you can see the status of all images as they are optimized.

  • Some of the images are reduced and some are not. Small images are most of the time not reduced because there is nothing to optimize.
  • You can see the progress of your optimization and can stop the process at any time in clicking the “Stop Optimizing” button.

On the same“Bulk Optimize”page, locate this area and click “Scan and optimize”.

Speed Up WordPress Performance - image  on https://trunk.ly

This will look for other images that are not in the Media Library, specifically your Theme images.

Now all your images are optimized. The images on all your posts and pages of your blog, not only the Front Page will load faster.

Be Aware when Adding Too Many Images EASY

Too many images on any given web page can drastically increase the page size/ number of requests. Consider deleting unnecessary images or at least making sure you optimize any images before uploading them to your blog.

 Always Determine IMG Width and Height Attributes EASY

1. Whenever you add an image using HTML, you want to make sure you add its dimensions. Otherwise, your browser will not be able to tell the size of the image and will need to reflow the page after downloading that resource. This will affect performance.

2. When adding images through the Media Upload feature inside WordPress, you will not have to worry about this.

3. However, if you are uploading and inserting images manually please consider this. Even if the image is used for tracking purposes (e.g. Piwik), in some cases you can add dimension attributes (e.g. “1”)

4. Your WordPress Theme may have failed to include these attributes

5. Using Notepad ++, go to Find in Files and search all “< img” appearances inside the folder of your theme

6. Revise all insertions to make sure the images include these attributes

7. Given the case, find the image and determine its dimensions. Append the necessary attributes to the code of your theme.

8. Save your modified files and upload them to your server, overwriting the old ones.

Always Serve Resized Images EASY

Instead of trying to make an image appear smaller by scaling it on the fly inside HTML code, resize the image to your desired dimensions. Otherwise, browsers will still have to download the bigger image before scaling it down, thus decreasing the performance of your site.

WordPress does this automatically for you whenever you upload an image via the Media Upload feature within your Admin Panel.

If you are uploading and inserting images manually, do not forget this rule. Some plugins may be doing this. Consider deactivating it

Use the Best File Formats EASY

Before uploading images, make sure you save them as optimized file formats.

The best formats to choose from are: PNG 8/ 24 bits, JPEG, GIF (when the image is really small) Illustrations and graphics with less colors work great with PNG 8 bits. Photos and images that contain more colors should usually be saved as JPEG (determine the JPEG quality by using an Image Editing software like Paint.NET).

There are image-optimizing softwares available for you to use. Consider:

Turn Off Default Gravatar Images

Using default Gravatar avatars such as: whenever a user that does not have a custom avatar posts a comment is not very useful. It will increase the amount of images and therefore the size of your page. It will also add to the amount of server requests which will additionally worsen the load time of your page.

Go to your WordPress Admin Panel, under Settings – Discussion. If you don’t want to use avatars at all, deactivate the display of gravatars. If you want to use avatars, I highly suggest selecting the option “no avatar” under Default Avatar.

Avoid Text Images MODERATE

Adding images that only contain text is not a good practice. In terms of performance, browsers will have to download additional images; the number of requests will increase. In terms of SEO, Search Engines cannot read images. Changing images for text could improve your On Page SEO (use H1, H2,… for example) Change any text images (or even logos) for CSS Stylized text instead.

Go to http://www.w3schools.com/css/css_text.asp if you want to know more about creating CSS Styles. You can also use Google’s web font library to include more creative fonts in your blogs. Read more about that here: http://www.google.com/webfonts

Use a Content Delivery Network

Consider spreading your static resources across a content delivery network. This will help parallelize downloads and decrease loading times.

Read more about how to set up a Content Delivery Network on Step 6

Clean Your Blog

Deactivate / Remove Unnecessary Plugins EASY

  1. Check your active Plugins.
  2. Consider deactivating plugins you are not really using in order to decrease CPU processing.
  3. Consider deleting deactivated plugins in order to save disk space.
  4. Install the plugin( s) (optional):
  • P3-Profiler You’ll be able to see which plugins consume the most memory and have the biggest impact on your server (it may cause conflicts with already installed plugins)
  • Plugin Organizer With plugin organizer you can determine which plugins should be loaded first and in which order. (it may cause conflicts with already installed plugins)

Turn Off Pingbacks and Trackbacks EASY

Even though this step is entirely optional, deactivating the use of pingbacks and trackbacks can improve your site’s performance: server load will be decreased.

Go to your WordPress Admin Panel, under Settings – Discussion . Under default article settings, deactivate: “Allow link notifications from other blogs (pingbacks and trackbacks)” and/ or “Attempt to notify any blogs linked to from the article”

Reduce Spam Comments EASY

Receiving spammy comments is usually useless and will only affect your server. Install and activate one the following plugins to fight spam:

Install These WordPress Plugins EASY

Install the following plugins (based on your personal preference): My Suggestions:

And activate the plugins. We will use them to help us clean and optimize our blog and database.

Database optimization EASY

Your WordPress blog works with a database that contains all your blog’s information. After a time, your database becomes filled with useless entries that are not needed and slow down access to it. This can seriously affect your pages’ loading time. On a Linux server with PHP, MySQL databases are used.

Optimizing the database can be done manually through PhpMyAdmin that you can access from your Host’s Control Panel or WordPress plugins. Why Optimizing the Database? If you are like me, you rarely get a post or page right away. Each time you save a post, a revision is created, and even if you don’t save, it is auto saved for you. Let’s have a look at one of my latest post.

Speed Up WordPress Performance - image  on https://trunk.ly

These are useful to have when writing the post in case you want to reverse back to an earlier version, but in fact it is rarely used. There are a lot of posts on my blog and I have never reversed back to an earlier version. If the post is long with many images, you get the post in 8 more versions. That’s a huge number of kilobytes on your MySQL overhead. If you multiply 8 by 525 posts, you have 4,200 revisions sitting there in your database! Depending on how you deal with Spam comments, you might have thousands of them waiting for moderation or deletion. With the spam robots out there, you may have 3,000 spam comments cluttering your database.

Back-up your Database

Modifying the database can be potentially dangerous and before I give you the plugin to use to optimize your database, you absolutely need to know how to back-up your database. Instead of installing yet another database management plugin, I am going to show you how to do it from your Control Panel.

If you have installed your blog yourself, you should be familiar withCpanel. The first step is to log in your Cpanel and locate the“Databases” section. Click on “phpMyAdmin”.

phpMyAdmin will open in a new window. In the left margin, locate your database. If you have installed it automatically fromF antastico or another installer, you should have“wp” in the name. Click on the entry to display the database at the right. Click the“Export” tab.

The file will download in the “Download” folder of your computer. I hope you will do this step before using the plugin I am about to show you. It’s better to be covered than sorry.

WP-Optimize Plugin

Now the fun begins! This plugin will help you get rid of the junk in your database in just a few clicks. Go to your plugin section and look for: “WP-Optimize”

Speed Up WordPress Performance - image  on https://trunk.ly

Click the“Install Now” button. Activate the plugin. Locate“WP-Optimize” in your left menu.

You will see this page.

Speed Up WordPress Performance - image  on https://trunk.ly

Let’s go to the“Settings” section first. You may choose to keep 2 weeks data to be safe.

You can Disable your trackbacks and Enable your comments in this section. WordPress interacts with other blogs that have pingbacks and trackbacks. Each time another blog mentions your blog post in their own post, it notifies your blog, which updates data on the post mentioned. That’s better to have this off. In the contrary, that’s better to have all posts opened for comments. Click “Save Settings”. Now, you can set up your “Auto Clean-Up Settings” on the same page.

Optimizing the database every week seems good. Click the “Save Auto Clean-Up Settings” button.

Note: Transients options are created by WordPress automatically, so it is good to remove them on schedule as well. It is red because there is a potential danger to remove them from the database.

Let’s go now to the“Tables” tab.

Speed Up WordPress Performance - image  on https://trunk.ly

In this example there is no spam comments, no unapproved comments, no auto-draft posts, no pingbacks and no trackbacks, so it is not necessary to select these options. It might be necessary for you.

In the right column, check “Optimize database tables”. Notice the value of your current database and what can be save and click the“Process” button.

Five seconds later, your database is optimized! You can see the result of your optimization with the date of the next automatic database optimization, which is a week later. You can congratulate yourself on the data you have saved! One last thing to do is to navigate your blog to see if everything is working fine.

Note: If you check the speed of your blog with GTmetrix after the image and database optimization, you may not see a significant improvement in the load time and your scores. The whole blog is now working better and you have saved space and bandwidth, which will help for the next steps.

Minify and Implement a Cache System

Limit DNS Lookups to 1-5 Different Hostnames MODERATE

Google Says: Before a browser can establish a network connection to a web server, it must resolve the DNS name of the web server to an IP address. Since DNS resolutions can be cached by the client’s browser and operating system, if a valid record is still available in the client’s cache, there is no latency introduced. However, if the client needs to perform a DNS lookup over the network, the latency can vary greatly depending on the proximity of a DNS name server that can provide a valid response. […]. It is therefore important to reduce DNS lookups more than any other kinds of requests.

Every time you serve resources (images, CSS files, JavaScript files, etc.) from other hostnames, you increase the number of DNS lookups for your visitors. A hostname can be either another domain or subdomain. Limit the amount of resources you serve from other hostnames to about 4-5.

To achieve this you can store external images/ resources locally by uploading them to your server and then serving that image/ resource from your own domain. The downside of this is that it could increase your bandwidth usage.

In some cases you will not be able to reduce the amount of DNS lookups or store the image locally (e.g. when inserting ads on your page). In order to see what external resources you are serving on your blog, open up the Firebug console within your blog and go to NET > ALL. Alternatively, you can also analyze your page using tools.pingdom.com and analyzing the timeline to find out.

Read more about this rule here:

Make JavaScript and CSS External MODERATE

Avoid inlining JavaScript or CSS whenever possible and whenever it makes sense. Use External CSS and JavaScript Files instead.

Inline Scripts and Styling could look like this (the script is written directly on the page):

Stylesheet

< style type =" text/ css" > .hjh { font-size: 18px; font-weight: bold; } .style5 {font-size: 14px} .style71 { color: #cc0000; font-family: impact;  font-size: medium; } </ style > Javascript < script type =" text/ javascript" > jQuery( document). ready( function() { jQuery('# commentform'). submit( function() { _gaq.push( ['_setAccount',' UA-7411577-9'], ['_trackEvent',' comment'] ); }); }); </ script > External CSS

External CSS and JavaScript Files could look like this (the script is located on an external file; the page only contains the link to this file):

Stylesheet

< link rel =" stylesheet" href =" http:// domain.com/ style.css" type =" text/ css" media =" screen" />

Javascript

< script type =' text/ javascript' src =' http:// www.misanillos.com.ar/ wp-includes/ js/ l10n.js? ver = 20101110' > </ script >

External is usually better because you can then combine those external files into a single CSS and a single/ two JavaScript file( s).

Put Scripts at the Bottom, CSS Files at the Top MODERATE

Most browsers will parse and execute JavaScript files before they load any other resources, since JavaScript can change the functionalities of the page. This can affect download parallelization. If you put scripts at the top of the page, your visitors could end up seeing a blank page for a while until the JavaScript is loaded. This can affect performance.

In order to load the content first, place JavaScript at the bottom of the page, or just before the script is actually needed. If your content depends on certain scripts to display correctly, consider separating your scripts into two categories: The critical ones that need to be placed at the top of the page for the page to load correctly, and the ones that can be executed once the content has been loaded. Make sure your CSS files are placed at the top of the page, inside the header. This is usually the case. If that is not the case, it may avoid  download parallelization.

The plugins we install later on will normally deal with this issue. However, it is worth mentioning it here if the plugin does not do a perfect job.

Loading JavaScript Asynchronously ADVANCED

An advanced and great way to improve the perceived performance of your site is to load scripts asynchronously instead. With the help of a plugin, we can ensure that all scripts are being rendered in parallel, and in a way that does not affect or block the loading of the page. This is usually done with the help of Head JS.

On the next chapter, we will put this to use automatically. If you want to include this manually to your websites, please inform yourself at http://headjs.com/ or follow the steps described below.

JS, CSS and HTML Optimization

A very important step in your efforts to speed-up WordPress is to optimize all JS, CSS and HTML of your blog. Modern WordPress blogs are built with Java Scripts (JS) to create interactive effects within web browsers and Cascading Style Sheets (CSS) used for rendering the look and formatting of your blog.

Each page of your blog is coded in Hyper Text Markup Language (HTML), which is the standardized system on the World Wide Web. How to See your Source Code. First of all, there are two parts

How to See your Source Code

First of all, there are two parts on a page, the head, and the body. The head contains all the invisible elements that the user can’t see in their browser and add interactivity, effects, and looks. It is delimited by the tags <head> … </head>. The body contains the content that users see, text, images, links, but also some interactive effects and cosmetics for your blog. It is delimited by the tags <body> … </body> If you want to see the code of one of your page, click the right button of your mouse and select View Page Source (in Chrome).

A new tab will open that let you see the HTML code. You will see the code in a new tab. Notice that you can also type“view-source:” before the URL to see the source code.

Identify JS, CSS and HTML

Java Scripts are added into your pages by plugins: SEO plugin, Analytics plugin and many other plugins that add functionality to your blog. Some Java Scripts work only in the HEAD at the top of the page, some others at the bottom of the page just before the </body> tag. Some may work in both positions and it all depends on how they were designed to work. You may have lots of them in your HEAD. This one is from

Some may work in both positions and it all depends on how they were designed to work. You may have lots of them in your HEAD. Each time the page loads, that’s a dozen of connections that are slowing down yourWordPress’ load speed. Later in this chapter, I am going to show you how you can group them, minimize them and move them to the bottom of your pages.

Don’t worry, you won’t have to touch any pieces of code. Cascading Style Sheets are mostly located in the HEAD of your blog. They are part of your theme and the number of styles you have depends on the design of your theme. They have to load quickly in order for the blog to look the way it should look. Have you ever seen a site that looks broken? That’s because the CCS failed to load. The CSS looks like this in the code.

Speed Up WordPress Performance - image  on https://trunk.ly

There is a way to optimize your HTML so your pages load faster. The JS, CSS and HTML optimization can easily be done with a single plugin called “Autoptimize”.

Autoptimize Plugin

Ready to auto-optimize your blog? I bet you are. Go to your plugin section and look for “Autoptimize”.

Speed Up WordPress Performance - image  on https://trunk.ly

In the main menu, go to the “Settings” section and you will see “Autoptimize”.

Speed Up WordPress Performance - image  on https://trunk.ly

Check the box for

  • Optimize HTML Code
  • Optimize JavaScript Code
  • Optimize CSS Code

The fourth section is for your “CDN Options”, which you are going to leave blank for now.

Click the “Save Changes” button.

Now, you should go to yourFront Page and browse a few pages of your blog to see if everything is alright. It might happen that something in your blog gets broken due to the optimization you have just done. If this is the case, uncheck one option and click the “Save Changes and Empty Cache” button so you can see a new version of your settings.

Do this for all options one by one until you find the option that is causing the problem. A certain optimization may mess-up with your theme or a particular plugin. In this case, you can replace the faulty plugin by another, which will be more compatible, try one of the advanced settings, or just don’t optimize.

Autoptimize Advanced Settings

If everything is alright with the basic settings shown earlier there is no need to go further, but if something is broken on your blog, you may want to try the different advanced options and see if that solves your problem. Unselecting the different options one by one earlier should have shown you if the problem is for JavaScripts or CSS. Use the advanced settings only for the one that is causing the problem.

If the problem is JavaScripts related, it is more likely due to a script that should not be moved to the bottom of the page. You may try the following options.

Check the box for “Force JavaScript in <head>?” and all yourJava Scripts will stay in the HEAD section. Checking the second option might be useful as well. Notice that there is a list of excluded Java Scripts auto-populated by the plugin, more on this section later.

You have to click the “Save Changes and Empty Cache” button at the bottom of the page. Navigate your pages to see if this works. Now, this is a compromise as performance will not be as good as if the Java Scripts were at the bottom. When you navigate your site and see something that’s broken, identify if this is a theme or plugin problem. It might be your special comment box or related posts that are broken and you can then identify the faulty Java Scripts this way.

Automatic WordPress Cache Implementation EASY

There are several different plugins available when it comes to implementing a cache system. The one you select will depend on the capabilities of your server (Shared Hosting vs. Virtual Private Server / Dedicated Server), your level of expertise, and your personal preference.

Caching is a very important step to speed-up your WordPress blog. If your blog is new and you just have few visitors, you may not need to cache it. Later down the road and if your blog becomes successful, this is something you will have to do.

Normally, each time a visitor reaches a page on your blog, it has to be rendered with PHP and My SQL. It is done very easily, but when you have a dozen visitors accessing at the same time, the server uses more CPU and RAM and it slows down your blog. When you get 3 dozen visitors accessing a page at the same time, it can become critical, even crash the server or display an error page, especially if you are on a basic share hosting package.

The solution is to change your dynamic WordPress pages by static HTML pages. This is done with the help of caching plugins. This means that an HTML page will be accessed by your visitors instead of the original PHP page. The PHP parser and the MySQL database won’t be needed and the page will load fast, even with a hundred visitors to your site in any given time.

There are several very good caching plugins such as “Total Cache” or “Ultimate Cache”, but you need a degree to make them run, seriously. I have been using“Quick Cache”, which is a fairly easy to use plugin, but the simplest and fastest by far is “WP Fastest Cache”.

Go to your plugin section and look for:“WP Fastest Cache”.

Speed Up WordPress Performance - image  on https://trunk.ly317,945 users are using this excellent plugin. Click on the“Install Now” button and activate “WP Fastest Cache”. In the menu, you will see an entry for the cache plugin.

In the menu, you will see an entry for the cache plugin. Click on the link to access the plugin’s page and set the options below.

Speed Up WordPress Performance - image  on https://trunk.lyLet’s have a look at the settings:

  • Cache System:Enable(Checked)
  • Logged-in Users:Don’t show the cached version for logged-in users.(Checked)

If you are the only admin of the blog, it is better to have this checked so when you update your blog, you can actually see your updates and not a cache version. If you have multiple authors or contributors that have to be logged-in, it might be worth to show the cache version, and uncheck this option. Mobile:Don’t show the cached version for desktop to mobile devices.(Checked)

This is an option when unchecked that you will want to test on a mobile device. Depending on your theme, showing the cache version may be a disaster or work just fine.

  • New Post:Clear all cache files when a post or page is published.(Checked)

When a post is published, things change on multiple pages like the“last posts” section in your blog’s sidebar, so it’s better to have the cache cleared. When setting the plugin for the first time, I advise you not to check the options:Minify HTML, Minify CSS, Combine CSSandCombine JS.

The reason for this is that this is already being done by the “Autoptimize” plugin.
Gzip: Reduce the size of files sent from your server. This will increase the speed to which the files related to your page are transferred to the user’s browser.
Browser Caching: Reduce page load times for repeat visitors. Commonly used files from your website are stored on your visitor’s browser so they do not have to load every time. Click the“Submit” blue button to save your settings.

How to Check if Fastest Cache is Working

If you have selected the option not to show the cache page to logged-in users, you have then to log yourself out. Then go to your Front Page and refresh twice. If you’re using Chrome browser, in the URL bar, write: view-source:http://yourdomain.com , scroll down to the end and you will see

</html><!-- WP Fastest Cache file was created in 0.47094488143921 seconds, on 07-05-17 11:54:55 --><!-- need to refresh to see cached version -->

Offer a Mobile Alternative EASY

When looking at statistics, you will notice that, even if the number is growing, there are still a lot of websites that are not prepared for mobile devices. Having a specific mobile web theme is a great way to increase the performance of your blog and improve user experience, because you will distinguish yourself from the rest.

Luckily, there are easy to use mobile plugins that can instantly create a mobile theme out of our blog. The only tricky part sometimes can be the fact that we have to configure our caching plugins in order to make this work.

Alternative 1. WP Touch EASY

Install the following plugin:

WP Touch

Inside the WP Touch settings page, configure it to suit your needs. However, make sure your “Custom User Agents” remains empty.

  • To configure W3 Total Cache, head over to “User Agent Groups”, inside W3 Total Cache settings, and make sure you enable both high and low group, and select the option “Pass through”
  • To configure WP Super Cache, make sure you enable the option “Mobile Device Support”
  • To configure Hyper Cache Extended, make sure you enable the option “Detect Mobile Devices” and include the list of supported user agents provided by WP Touch User Agents supported by WPTouch

Alternative 2. WordPress Mobile Pack EASY

Install either WordPress Mobile Pack (practically the same) You can configure the theme the way you like it. In “Mobile Switcher”, select: Browser detection To configure W3 Total Cache, follow the same steps as in Alternative 1. To configure WP Super Cache, follow the same steps as in Alternative 1.

Server Tweaking

Notice: This step will not talk for everybody, unfortunately. I cannot teach and do not know how to “tweak” all different server combinations. These differ based on your own hosting company, control panel, VPS vs. Dedicated Server vs. Cloud Server vs. Shared Server, etc.

I will stick with some simple configurations for a shared hosting environment with CPanel, since I believe that will be the case for most of the readers.

CPU Throttling ADVANCED

Inside your CPanel, you may find a Log Tool called “CPU Throttling”. Go check it out. Once there you will be able to tell if your server experienced any CPU limiting factors (too much CPU processor overload) in the past hours.

Any number below 600 seconds in a given hour should not represent a problem for your visitors (number taken from BlueHost’s suggestions).

If you experience frequent and high levels of CPU Throttling, these could be some steps to improve performance:

  • Optimizing Databases
  • Removing plugins that may cause your blog to perform slowly (more into this in a sec)
  • Deleting Cron Jobs that use too much RAM
  • Upgrading your hardware (moving to a more robust Virtual Private Server for example)

To check out if you have any unoptimized scripts or queries that may cause your blog to underperform, your server may have a log for slow MySQL queries. Using BlueHost as an example (ask Support if you cannot find it this way), you would have to:

  1. Login into cPanel.
  2. Look for the section called “Files” and click the icon called “File Manager”.
  3. Start in the “Home Directory”, choose Show Hidden Files, and then click Go.
  4. Once in the File Manager, look on the right side for a folder called “tmp” and navigate into that folder.
  5. Once inside the tmp folder, find a folder called “mysql_slow_queries”.
  6. Navigate inside that folder.

Look for the files with recent dates and right-click on one of those files and choose “Code Edit”. This will show the log details.

Look for the logs where the Query_time is over 2 seconds. Do not freak out if you do not understand most of the code, I don’t understand anything either. Instead of trying to decode each part of the shown log, try to find any hints that could point to things you may recognize, especially plugins.

In the following example, I spotted a plugin, “SEO Autolinks & Related Posts” that was causing unnecessary server load (since I wasn’t really using it), by seeing “100” and remembering that the Plugin was comparing 100 posts to each other in order to display related posts.

If you find something similar, consider deleting the plugin (if unnecessary) or trying to reconfigure it.

Hotlink Protection EASY

As stated by BlueHost, Hotlink protection can prevent users and other webmasters from using your own bandwidth.

In most cases, enabling Hotlink protection is a good thing, because it will prevent users from posting images from your own site on other sites and using your own bandwidth in the process.

However, for certain services to work, Hotlink has to remain disabled. More specifically, disable Hotlink Protection before using the SpriteMe.org service, since SpriteMe needs to have public access to your images.

To enable Hotlink protection, go to your CPanel (if that is the case) and find Hotlink Protection inside Security. Otherwise, ask your hosting provider if your host supports this feature. Inside Hotlink Protection, you are able to allow URLs to have access to certain file types specified below.

Using a CDN for WordPress

A CDN is a Content Distribution Network composed of servers located in multiple data centers all over the world. The purpose of a CDN is to distribute content the closest to the user’s location. A CDN may be used for your image or video files or a cache of your blog.

Just like you need hosting for your blog, you will need to buy a package with one of the numerous CDN companies. The reason few bloggers are using this method to speed-up their blog is because it can be intimidating and also add an extra cost to a blogger’s small budget. It doesn’t have to be that way and in this chapter, I am going to show you an easy and free solution.

CloudFlare CDN

CloudFlare is a popular fremium service that helps accelerate websites, reduce server load, and improve security. Using a free account, you can

  • Take advantage of Cloudflare’s CDN
  • Enable auto minification of files Determine caching levels
  • Improve website access security
  • Add asynchronous loading of JavaScript files

I’ve had good experiences using CloudFlare and would recommend it, especially if:

  • You don’t use your own CDN
  • You care about improving website security
  • You are able to take advantage of CloudFlare’s Rocket Loader (asynchronous loading of scripts)

First, create an account at: https://www.cloudflare.com/sign-up and Complete the registration form.

In the next step add your blog’s URL.

Speed Up WordPress Performance - image  on https://trunk.ly

There might be some plugins that you will want to deactivate, since CloudFlare already deals with these optimizations.

Click the “Add website” green button. While CloudFlare is scanning your DNS records, you will be shown a video that explains what to do in the next steps. When the scan is completed, click the “Continue” green button. You will be shown this screen to configure your DNS records.

Speed Up WordPress Performance - image  on https://trunk.lyChoose what you want to go through CloudFlare and what goes through your regular hosting company. Just click on the cloud to enable it. Click again to disable it.

What you need basically is the blog with and without the www. You do not necessarily need to have Cpanel and Mailgoing through CloudFlare.

Click on “I’ve added all missing records, continue” green button. On the next screen you will have to select the plan you want and your options. You can later on change your settings and even upgrade to a paid plan for more benefits. Click the“Continue” green button.

Speed Up WordPress Performance - image  on https://trunk.ly

The name servers you have for the domain of your blog have now to be changed with the CloudFlare name servers given on this screen. This can be done on your domain registrar:Go Daddy, NameCheap or any other company. When the name servers are changed, you will have to click the “I’ve updated my name servers, continue” green button.

Speed Up WordPress Performance - image  on https://trunk.lyHow to Change Name Servers

Depending on your domain registrar the navigation to the page where you can change your name servers will be different. Look for a link to “DNS servers” or “Custom DNS servers”. This is a video from NameCheap.com. Enter your new DNS server names.

DNS servers updates usually take 24 hours to propagate all other the world, but you may see the changes come into effect much earlier than this for your location.

Back to CloudFlare. Now you can click the “I’ve updated my name servers, continue”green button on the CloudFlare screen.

Around 12 hours later, you may log back into CloudFlare and see the magic happens. Click on the “Analytics” link for your domain. Now you can see if CloudFlare has started to pick up some traffic.

There is one optimization setting that is working very well for me and it might for you too. Go to the setting icon for your domain and select “CloudFlare settings

Select the“Performance settings” tab on the page.

In the Individual performance settings select the following:

  • Caching Level: Aggressive
  • Minimum expire TTL: 4 hours
  • Auto Minify (Web optimization): All off
  • Rocket Loader (Web optimization): Automatic

Note: If for some reasons you couldn’t make one of the plugins in the previous chapters work for you, this is another chance to optimize your blog with CloudFlare. You may try the options: CDN + Basic Optimizations and CDN + Full Optimizations. I will not explain in this guide all the details of CloudFlare and I let you explore the possibilities of this great service by yourself 😉

WordPress Hacks & Tricks

You have now reached the last chapter of this guide and already enjoy a double A score with a very fast page load time if you have applied all technics shown. Unfortunately there are a few more issues I’d like to bring your attention to: WordPress is vulnerable and there are a couple of things you can do to prevent or minimize attacks from hackers trying to access your dashboard through the login page.

When this happens, your blog can slow down due to the numerous requests made to the database during several hours. WordPress has a few default settings that are not ideal and can at times burn a lot of CPU power and RAM, and slow down your blog, despite all the efforts you have done to optimize it. WordPress is the target of Spammers who use software to Spam comment your blog.

If you allow this to happen, these junk comments can jam your database and affect performance greatly. Ping Backs & Trackbacks can also be a real issue and your blog may be used to DDOS attack other sites. This too will considerably slow down your blog

I strongly advice you to read our WordPress Security Guide

Tweak Remaining Suggestions EASY

Head over to GTMetrix.com once again

  1. Insert your homepage or any other type of page (single post, single page, etc.)
  2. Check your Page Speed and YSlow grades.
  3. Use the breakdown in order to analyze what suggestions PageSpeed and YSlow have for you

You may find that you can still optimize certain specific things, such as small image improvements, forgotten image attribute specifications, or else. This step is an advanced way to see what things you could improve on your blog.

However, do not freak out and try to get 100% at any cost. In most cases, you will not be able to achieve perfect Page Speed scores and YSlow grades. In fact, you will not want to, because you may have certain external scripts, that you cannot or don’t want to host locally, even if they increase the amount of recommended DNS lookups

Measure Your Optimized Blog EASY

  1. Once you have gone through all of the possible tweaks, repeat step number one.
  2. Go to the different web page test sites to be able to track your results.
  3. Consider using the free service: http://www.showslow.com to be able to get Page Speed, Yahoo Slow, and Dynatrace scores over time.
  4. Installing the following plugin: GT-Metrix for WordPress will display the loading times of your blog within your dashboard.
  5. If you determine that your blog is not performing the way it should even after having done all of these improvements, then it is time to consider upgrading your hardware and considering a more powerful hosting solution
  6. If you are running on a shared hosting environment, in some cases certain hosts are not well optimized for WordPress. On the other hand, your server may be too crowded or is not able to handle the amount of server load you need.
  7. Shared Hosting servers recommended for WordPress include: Siteground 
  8. Check the next step for an introduction to upgrading your hardware

Hardware Upgrades

At a given point, if you are hosting too many sites, or your website has become much more popular and is receiving much more traffic, you will want to consider upgrading your server in order to be able to handle the extra load.

This will increase server reliability, better user experience, a wider range of performance tweaking possibilities, better customizations, and more security, among others. The downside is the extra cost involved in purchasing (and maintaining a virtual private server or a dedicated server).

A great alternative is to move your blogs to a virtual private server. Basically, a VPS is also a server that is being shared amongst different websites. However, the server is being “split” and you are given a certain CPU power, memory capacity, etc. just for you. This means, even if the website being hosted on the same server receives a big spike in traffic, it won’t necessarily affect you since you have “reserved” your share of the server just for yourself (if your server crashes then it will affect both of you though).

In terms of price, a Virtual Private Server is obviously much more expensive, but it will grant you much more CPU capacity and the possibility of configuring your server to your needs. It also offers good scalability, which means you can increase your server power to meet your needs.

The extra of having a VPS instead of a shared server is being able to customize the server to your needs. You will be able to take advantage of certain functions such as Opcode (APC, Memcached) for better caching performance.

Reputable companies to choose from are:

  1. Siteground
  • To be updated.

You can decide how much CPU, RAM, and Bandwidth you need and scale your server as you see fit. Note: A future advanced edition will cover deep customization options for websites running on virtual private servers or dedicated servers. Stay tuned.

Troubleshooting

If you ever experience a blank admin panel after having activated a recently installed plugin, the most common reason for this is the plugin conflicts with another plugin you had installed already.

Another reason might be the fact you have exhausted all available memory. There is a very simple way to deactivate a recent plugin you installed and recover access to your admin panel

  1. Via FTP, go to the folder where your blog is installed and search for the directory: “wp-content/ plugins”
  2. Find the folder of the plugin that caused it.
  3. Rename the folder to for example: “PLUGIN-NAME.hold”

Now access to your WordPress Admin Panel once again. The plugin will be deactivated automatically since the location has been changed.

Resources and Bibliography

Web Page Test Sites

Image Optimization

WordPress Performance Plugins

Image Optimization

Cleaning Your Blog

CDN

Page Speed Tools

Server Software