Wordpress Performance

Do-It Yourself - Wordpress & HTML Site Performance

Statistical Studies Have Shown that a User May Leave Your Site if it Hasn't Loaded Within 4 Seconds - With Today’s Dynamic, Database-Driven Wordpress Web Sites Having the Reputation for Loading Slowly, it's Time to Separate Yourself From the Pack and Keep Your Visitors Engaged and Happy by Providing a Fast Performing Website!

Have you tested your Wordpress site using the online performance tools, GTMetrix or Pingdom, to find that you received failing grades in many areas?

Each one of those failing grades indicate a loss in web site performance that can affect your site's speed, response time and search engine rankings.

As you probably know, Google is Obsessed with site speed - Considering today’s dynamic database-driven websites have a reputation for slow loading times, you need to pull out ALL the stops and use each and every tool, at your disposal.

EASY To Do - Add Gzip Compression & Add Expires Headers (Included with Web Hosting)

Add Gzip Compression to Wordpress Site - Reduce Page Size by 78%

Compressing the size of your web page files, before they are sent to your visitor's browser, will result in faster page loading times and give a better user-experience for your visitors.

This will especially be helpful for the first time visitor to your site... the files are less than half their normal size, increasing your web page downloading speeds.

When Gzip compression scripting is placed within the root directory's .htaccess file, the following script directives will tell Apache (server language) to compress all HTML, Text, CSS Sytlesheets and JavaScripts for your entire site.

The sites that choose to use Gzip compression for all of their HTML, JavaScripts and CSS stylesheets, can dramatically reduce their file sizes (by 70% or more), in turn reducing the response times of HTTP requests from the server.

Blog Article - How to Apply Gzip Compression to WordPress to Reduce Page Size by 78%

Add Expires Headers & Optimize Cache Control for WordPress Site

Adding Expires Headers will specify an expiration date for all forms of images, scripts and stylesheets, so that your visitor's browser can cache these files to be used for subsequent page views.

Browsers use this cache to reduce the number of HTTP Requests making web pages load much faster... in many cases, it can reduce the HTTP requests by 80% or more.

A web server uses these Expires Header directives to tell the web browser that it can use the current copy of components that are stored in your visitor's browser’s cache, meaning, it won't need to reload images, scripts and stylesheets again.

Blog Article - How to Apply Expires Headers to WordPress to Optimize Cache-Control

INTERMEDIATE - Do it Yourself - Static or Wordpress Performance Modifications

Move External Scripts to the Bottom of the Page

Scripts are not required to be at the top of a web page. If JavaScripts are put at the TOP of the page, as they usually are with Wordpress plugins, the remainder of information for the website is blocked from downloading images, text, etc., until the script is fully loaded.

You may have seen Google Insight's response... Google ~ "None of the above-the-fold content on your page could be rendered without waiting for the following resources to load."

It's called Render Blocking – Simply put, render blocking is a way of saying that the file or script will not allow any additional information to download to the user's browser until the render blocking file (JavaScript) is completely loaded. This means that if there is a delay for the retrieval of the file, the remainder of the site will have to wait until it is complete.

If for some reason one of your JavaScript files hits a bottleneck (similar to rush-hour traffic - highway merging), the remaining information will need to wait until the JavaScript file has completely loaded before it can move on to the next component, whether it's an image, or the content on your page... simply put, the remainder of your page will have to wait.

The whole idea for moving JavaScript to the footer is to allow everything, above-the-fold, to be seen by the visitor, so they don't hit the back button and leave because the page is taking too long to load.

Blog Article - Quick Fix - How to Move JavaScripts to the Footer in WordPress

ADVANCED - Do it Yourself - Wordpress Performance Modifications

Combine External Plugin JavaScript Files - Combine External Plugin CSS Stylesheets

This one is simple... combining JavaScript files into one or two files will reduce HTTP requests.

The same goes for combining CSS Stylesheets... creating fewer files will reduce the HTTP requests, which in turn will reduce downloading times.

Many will argue that these files can download in parallel (at the same time)... first the CSS stylesheets will download in parallel. Once all stylesheets have downloaded the JavaScript files will begin their parallel downloading process.

But, if one of those files from an outside source gets hung up, known as a bottleneck, it doesn't matter if they download in parallel or not, the remainder of the information will be blocked from downloading until the bottleneck has passed.

Combining CSS stylesheets into one or two files, then combining JavaScripts into one or two files will eliminate the possibility of a bottleneck to the point of non-existence.

Why? Because these one or two files each are on the same server as your site, eliminating the need to rely on outside sources for their information.

NOTE: - Combined JavaScript and CSS files will require modification each time a plugin or the Wordpress Core is updated...

Blog Article - Step by Step Tutorial – How to Combine CSS Stylesheets Into 1 File in WordPress | Part 1 of 2

Blog Article - Step by Step tutorial – How to Combine JavaScripts Into 1 File in WordPress | Part 2 of 2

EASY To Do - Minify Combined External JavaScript Files - Minify Combined External CSS Stylesheets

The minification process is the removing of unnecessary characters and white space from the code to reduce its size, thereby improving load times.

The total file size savings can vary from 10% to 38% depending on the original file size but, every little bit helps!

Blog Article - How to Minify/Compress JavaScript Files and CSS Stylesheets