tl;dr

The core of “speed up your WordPress” is to reduce web page loading time. Here are several principles:

  • Choose the “right” web server / hosting service (web host).
  • Reduce the # of HTTP requests.
  • Optimize static resources, including Javascript, CSS, images, fonts, etc.
  • Optimize data transmission over the internet.
  • Optimize delivery of web page contents – above the Fold
  • Do Caching in all levels.
  • Also, always try to use online testing tool to help analyze your WordPress website.

Test Page Loading Time

The world of “website” also has a “2 Second Rule” (“4 Second Rule” for mobile websites) to help guide the design & development of website – if your web page needs more than 2 seconds to load, the visitor tends to leave.

The following infographic (How Loading Time Affects Your Bottom Line) shows the importance of “page loading time”. Page loading time is also becoming a very important factor to search engine ranking.

Infoviz - How Loading Time Affects Your Bottom Line

To know the current “page loading time”, you can use the following online tools.

They are equally powerful, in different aspects. It is recommended to use ALL of them to help get better understanding on the situation of your current WordPress.

Infrastructure

Choosing the underlying infrastructure for WordPress is vital. Apparently, the more powerful the web host is, the faster speed your WordPress can get. However, “more powerful” usually means “more money”. So just make sure you have the right one, depending on your goal on the WordPress website, your budget, as well as your skill level in handling server configuration, etc.

Web Host

There are some types of “web host” to consider:

  • WordPress Hosting – Special web hosting optimized just for WordPress, and not cheap. For example: WP Engine, Synthesis, page.ly, etc.
  • Shared Hosting – Your WordPress site shares the server with other websites.
  • VPS(Virtual Private Server) Hosting – A “upgraded” version of “Shared Hosting”,
  • Dedicated Server – The server you owned only runs your WordPress site.
  • Cloud Server – Just the server without any pre-installed “control panel”.

Usually, a WordPress starter comes with “Shared Hosting” (usually around $5 per month), then “VPS Hosting” (from $20 to $50 per month), and then “Dedicated Server” (at least $90 per month). If you are good in server configuration, you can directly pick “Cloud Server”.

This post can give you a better picture of “Shared Hosting”.

If you are interested in “choosing a right WordPress Hosting”, you can check this post for reference.

Web Server Software Configuration

Besides “Web Host”, the using software on the server as well as its configuration is also critical to affect the overall performance of the infrastructure.

Here are some popular ones:

  • Nginx – It is free and much, much powerful in dealing with “high traffic website”. It ships the fastest server response time when working with PHP comparing to others.
  • Apache – It is also free and most used. The using of it is not that easy – the default install is not the best performer which needs configuration.
  • Litespeed – It offers both free version and paid version.

It is highly recommended to consider “Nginx” when choosing the web host.

Reduce the # of HTTP requests

When user opening a web page by URL, it uses several “HTTP requests” talking with the backend server to download the resources, such as html content, JS, CSS, as well as some other media files. During the entire page loading process, doing HTTP request is always considered as “speed-determining step“. And unfortunately, each of these HTTP requests can only be done separately even if it is just for getting a small “favico” icon.

Apparently, reducing the total number of HTTP requests can help reduce the time that used to communicate with the server. Here are some techniques:

  • Combine multiple files into one, like JS, CSS, icon image, etc. – Several HTTP requests now become just one.
  • Defer the contents not needed for page loading, like JS, CSS, image, etc. – Do not download the contents that are not used to display the initial view of web page.
  • Using browser cache. – Do not need HTTP request if the target content is cached locally.
  • Use CDN (Content Delivery Network) to distribute the contents into multiple places. – It can help spare the bandwidth for doing HTTP requests.

Avoid Bad HTTP Requests

When dealing with the HTTP request, “bad request” also needs to consider. It usually refers to “403“, “404“, “5XX” errors.

Using the online testing tools mentioned above can easily help identify them.

Optimize Static Resources

“Static Resources” refer to the JS, CSS, fonts, image and media. etc. Usually they are the “largest” one among the pieces that web page loads.

The optimization includes the following aspects:

  • Combine multiple files into one, especially for “external files”.
  • Reduce the HTTP requests.
  • Minify the files.
  • Reduce the file size.
  • Optimize image / video in “dimension” as well as “file size”.
  • The basic rule is to “never use larger image than needed”.
  • Reduce the file size.
  • Add “Inline” code into the html page (like JS, CSS, image).
  • Reduce the HTTP requests.
  • Help defer contents.
  • Use Base64 encoding to help inline image.

For doing “Minify”, you can either choose to do it during “development” manually (using online tools like this one) or automatically (using Grunt or Gulp), or conduct it on-the-fly by using some WordPress plugins (like W3 Total Cache or Autoptimize).

Optimize Data Transmission

Normally, all the pieces of web page need to be downloaded from remote backend server. When doing data transmission via internet, a “smaller” downloading size is always preferable.

The main optimization approach is to do “compression / gzipn” – the contents are “compressed” first at server before returning back and then “uncompressed” at the local machine.

Here is an online tool that can help you detect if your website enables “HTTP Compression”.

Optimize Delivery of Web Page Contents – above the Fold

When browser rendering the web page, due to the “fixed screen size”, usually only a portion of the web page will be shown, as known as “Above-the-fold” contents or “visible contents”. Only focus on this part of contents is also a key strategy to speed up web page loading.

Above The Fold

Image from Google Image.

The optimization includes:

  • Defer the static resources (like JS, CSS, image) which are not needed for showing the “above-the-fold” contents.
  • Use “inline” code (like CSS) to speed up the reddening of HTML page without loading external files.

Defer Static Resources

The core idea of “deferring static resources” is to “load it later as much as possible”.

In HTML page, a very useful trick is to “put content section before sidebar section”. By doing this, the web page can just present the content part without waiting for the loading of “less meaningful” sidebar.

<html>
<body>
    <content>
    </content>
    <sidebar>
    </sidebar>
</body>
</html>

There is also no need to load “all” JS and CSS just for displaying “above-the-fold” contents, especially for individual files. In other words, we need to move all “downloading HTTP request” out of head section.

Specifically for JS, if the HTML page rendering parser encounters a script, it has to stop and execute the script before it can continue the parsing (this is also called Render-Blocking JavaScript). Besides doing deferring, we can also try to “use asynchronous scripts“.

Dealing with image and other media files is the same. Sometimes it does not need to load the entire image for the “initial page load”. Instead, we can firstly load a “smaller” placeholder (or thumbnail) image (or simply displaying a “loading indicator”) for the initial page load and then replace it with the “bigger” real image once it is downloaded in the background.

Use “Inline” Code

The “inline” code can be CSS, JS, or even image. The “core” rule is to “only serve the need of displaying above-the-fole” contents.

For CSS, you can check with this tool to help determine which part of CSS can be done via “incline” code.

Do Caching

Caching” is the king of doing performance optimization on websites.

With caching, you can save the time for “re-doing” the steps that are “unchanged” and “consistent” in returned. “Caching” lives at almost every aspect during the web page rendering process, including:

  • Database Cache
  • Object Cache
  • Page Cache
  • Browser Cache
  • CDN
  • Reverse Proxy

Apparently, enabling “ALL” levels of caching will result in the best performance of website. However, using CDN and Reverse Proxy need extra investment. You may decide it based on your budget.

Using WordPress plugins can easily help achive ths goal. Here are several recommended caching plugins:

  • W3 Total Cache – Most recommanded. It offers a “free” version, but not for beginners.
  • Wp Super Cache – “Free” and easy to use, for beginners.
  • Cachify – Lightweight, suitable for beginners and smaller projects.
  • WP Rocket – The “best” caching plugin in the market, but “not free“.

Here are some good tutorials for using “W3 Total Cache”:

If you can interested in “WP Rocket”, check this post for more compaaring it to other “free” ones.

Other Principles

Bedies the “big” ones mentioned above, there are also some “tricks” that can help improve the performance, such as:

  • Enable “keep-alive” in HTTP header – it enables the capability to deal wiht mutiple HTTP requests in one single server conmmunication.
  • Avaoid CSS “@import” – One of biggest problem of using “@import” is that it makes the downloading of CSS files sequential (the next one needs to wait for the previous one finished) instead of in parallel.
  • Minimize redirects – Apparently it is a waste of time to go to one place just to be redirected to another. However, some of the redirect (like non-www to www) normally can be kept since it provide better SEO optimization. In this case, be sure to use “Server-side redirect” (301, 302) configured in web server software (Nginx or Apache).

My Practice on “5neo.be”

In the following post, I will list out the practices I did for this blog – “5neo.be” which ends up with a very good result.

Google PageSpeed Insights

5neo.be Google Page Speed

Pingdom Tools

5neo.be Pingdom Test - Inside USA

5neo.be Pingdom Test - outside USA

GTmetrix

5neo.be GTmetrix Test

Please leave your comments & questions below, and I will respond to them.

Peace!!!

Featured image source: http://www.dezzain.com/wordpress-tutorials/5-amazing-ways-to-speed-up-your-wordpress-website/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>