WordPress Optimizations

So you have a smashing new WordPress website. You have it hosted on a shared server, which is the economical and practical approach to start with, but performance is lacking now that visitor traffic is on the rise. Still you don’t see the justification for paying extra money for a dedicated server and IP number. Those are not cheap. So what else can be done? In this article we will look at ways to see your site statistical numbers and demand levels through analytical tools. As well, we will then look at ways to alleviate that demand with tips and techniques that, when employed, can make your site more efficient and faster without breaking the bank. I will be using a demo WordPress site that I have installed on my shared hosting server to show both screenshots and the numbers. You will naturally see differences for your own sites but hopefully you will be able to leverage my examples to your own benefits.

We will be covering the following topics in order:
1. Site Analytics
2. Content Caching
3. Site Speed Checking
4. SSL Certificates
5. Image Management
6. Content Delivery
7. Security Options
8. Summary & Plugin

Site Analytics

The first thing you would want to do is connect your site to Google analytics or some similar web statistics tool. We will be using Google analytics for this article because one of the plugins that we will be using connects directly with it. So after you make that connection to your website with Google analytics, you can use the Exact Metrics plugin to bring the statistics into the WordPress admin console. This is a great way to be connected to your statistics and have them all showing on the same platform of the WordPress admin dashboard rather than having to view those numbers in multiple locations.

Locate and install the Exact Metrics plugin and go through the initial setup process then make the connection to the Google analytics numbers via the secret keys. The setup wizard screen should look like that of Figure 1, here we are starting the process for a blog website.

Once you finish the setup process you will be taken to the settings area for the plugin. Here you can see some of the settings and the initial data coming in from Google analytics, if there is anything to report yet. You will see a menu at the top of the page with multiple tabs (General, Engagement, eCommerce, etc.) where you can further fine tune the plugin. Once you get these options set to your liking you can see the dashboard of the statistics that should be coming in over the next few days. It should look something like figure 2 with a summary bar at the top and other display options available as you roll down on this page.

Once you start getting statistics coming in, as mentioned, it may take a week or more to get some valuable numbers, however you can start making some decisions almost right away. You can see how many specific pages are in demand and you can see where your visitors are coming from geographically, the site bounce rate, and so on. These values will help you to determine where some of your demands are the highest and the lowest so that you can target resources and efficiencies if needed. Be sure to dig deep into these numbers as over time they will reveal a lot of valuable information. One drawback to this plugin though is that you can only see the data over a 30 day rolling time span. More detailed reporting and additional features are available in the professional version. You can find more information on the pro version here: https://www.exactmetrics.com/features

Content Caching

Another aspect of making your site more efficient is to make sure your static (non-changing) site data is cached. To do this you can use any of the many caching plugins that are available. We will be using the Autoptimize plugin for this article as it has a few other features built-in that we will be talking about later in the article. Caching generally means that an image or static (non-dynamic) portion of your website’s pages will be served to your visitors if there are no data updates needed. The about page or your contact pages are generally ones that don’t change that often so these pages would benefit from the caching process. Caching saves time from the time of an initial request of a webpage to it eventually being served to the requesting client. If there is no update required in the page content then the page is simply served from a cached imprint of that page. The Autoptimize plugin creates a cache file base over time built on page request counts so speed advantages gained here will increase over time. You may not see great gains right away.

Another great part of this plugin is that it can make your JavaScript and CSS code more efficient by stripping out the unnecessary characters and spaces. This makes websites load faster in general. When you really think about it, all the code that has comments and spacings embedded in it are there only for humans to read more easily. Computers and servers don’t need the spaces, line breaks, or indentations and indeed can access and process this information much faster without all the “fluff” in the way.

Check out the settings page for this plugin found under the settings menu once it is installed and activated. Figure 3 shows the top of this page with its tabs.

This plugin also creates a quick access link at the top of the main admin area so you can access it from anywhere within the admin system. But it only shows your cache size and gives you the option to delete the cache and refresh it.

Getting back to the main plugin settings area; the first tab is called “JS, CSS & HTML”. Here you can fine-tune your JavaScript, CSS, and HTML settings for site loading optimizations. Some of the more important options to enable here are to turn on JavaScript code optimization which is the first checkbox and the next two under that look at figure 3 again. Now scroll down on this page to see the CSS options and turn on the first three check boxes in this section. See figure 4 for these settings.

Read up on the other JavaScript and CSS options that we did not cover here to see if they apply to your situation as it may help to speed up your site that much more.

Further down the page of initial options you will find the HTML section. Be sure to turn on the optimize HTML code checkbox and save all your settings. Even further down on that page you will see a section called “Misc Options” be sure to also review these as there are some good features here as well. For example, the first one listed is called “Save aggregated script/css as static files?”. This is typically turned on by default as it stores the aggregated code to a static non-changing file; with all the compressed code stored in this way your server doesn’t have to build your JavaScript or CSS on the Fly and can therefore load your pages much faster. Check all other miscellaneous options to see if they can help lend any further assistance. This was just the first tab of this plugin that we covered so far; Autoptimize can also speed up your sights images — see the image tab. Since this is not Autoptimize’s key feature, the only option I use on this tab is called “Lazy-load images?”. This effectively saves the server from displaying images in the browser if they are “below the fold”. This term — above or below the fold — comes from the olden days of newspapers (remember them?) where the content that could be seen before the fold in the paper — essentially the top half of the paper — the headlines and the first few pictures. In browser terms “above or below the fold” refers to the visible area of your website before any scrolling is done. The first thing your site visitors will see. So, to delay loading any images into the browser if they are below the fold simply makes any content above the fold load that much faster. We will be talking more about this image management later in this article as well.

So check out all the other tabs of options for this plugin to see if there are any other settings that may be helpful in your particular circumstances.

Site Speed Checking

One way to test these and other speed improvements for your site is to run it through a speed checking website. There are a number of these on the web but the one I use the most is called GT Metrix and it can be reached at https://gtmetrix.com. Here you can enter in your web URL and have your site tested on all levels for speed and efficiency. This would be a great before / after experiment with the features of Autoptimize or any other improvements we cover in this article. Test your site before making changes and then again after the changes are in place to see how speed is improved. The interface for GT Metrix is shown in figure 5 after doing a test on one of my sample sites that I know will score poorly.

You can see where it scored low and the details of how poorly optimized the JavaScript and CSS code is if you look under the “Structure” tab [1]. The area where this is described is called “Eliminate render-blocking resources”. You can see more details on each impact area by pulling down the expansion arrows for each category [2]. Just by turning on the code optimization features mentioned in the previous section on Autoptimize my review score changes my grade from an “F” to an “E”. With performance going from 30% up to 49% and my “Eliminate render-blocking resources” impact being lowered to “Medium”. As you can see just some of the initial changes are already providing improvements and benefits.

Continue to use the reports from this website and their recommendations to move your website up in its gradings and ultimately allow your site to perform better. The site has lots of guides / pointers to help get your speed and performance levels higher so be sure to read the results of your tests and follow all the recommendations and guidelines on improvements where you can.

Note that some tweaks that are recommended may only improve speed marginally so you should judge whether the effort to make these changes is worth the performance dividend. Be sure to check your site on this, or other testing sites, for performance levels on a regular basis to ensure your site visitors always get to see your content as fast and efficiently as possible.

SSL Certificates

Another aspect of your website that has an effect on performance is the existence of an SSL (Secure Socket Layer) certificate. Most hosting companies now provide at least an entry-level SSL for free so be sure to use those if they are available to you. Since Google recently made it “mandatory” for a site to have a valid SSL certificate in order for it to show well on their search engine results it is basically now a non-starter to a website that doesn’t have one. But just having a valid SSL certificate on your side is not all there is. You may occasionally see a non-secure padlock on a poorly built site even if it does have a valid SSL in place. This means that some of the content of the site itself is not fully secure. You will often find that the culprits here are embedded URLs with “HTTP” as the prefix to the location address. This can be seen most often in an image reference or a file / link reference. The typical remedy for this is to simply add the “s” to the URL making it “HTTPS”. This directs the reference resources through the SSL before it is served to the client.

Figure 6 shows the expansion of a site’s URL that shows the broken padlock even though it has an SSL in place. To bring this up in Chrome or Firefox just click on the padlock icon itself.

As far as helpfulness goes on this padlock icon there is very little here other than to let you know there are potential problems with your website in the security sense. Enter the “Why No Padlock” website (https://www.whynopadlock.com). Here you can enter your website URL and have a great report built showing you just why the padlock is not 100%. Figure 7 shows the results of a page scan. At the top are all the good things and towards the bottom of the report are listed the items where it fails. In this case we have 2 images that are not using the https prefix in their URL references.

As far as images that you control on your own WordPress site a simple fix is generally achieved by deleting the image, logging into the admin area with the HTTPS URL and re-uploading the image to the media library. Then all you have to do is update the place(s) on your site where the image was being used. Other issues that may come up as far as security are concerned with this report will have similar content and some guidance as to how to alleviate the issue.

Image Management

The next major drain on WordPress site performance is the area of image management. Not many WordPress developers know this but every time you upload an image to the media library WordPress actually makes up to 17 copies of the original image! Figure 8 shows this in the file listing of an uploaded image with an FTP file viewer. WordPress is attempting to help with resolution and file sizes for each image depending on the context with which it is displayed. However, the assistance is not all that helpful on space requirements and loading speed when you have to sift through a site that may have thousands of images like a travel site or foodie site.

Also keep in mind that with modern cameras and phone based cameras especially there is a lot of additional information added to the file itself. Phones with GPS enabled even try to add in the latitude and longitude of where the image was taken. See figure 9 for a file property look at an image taken with a GPS enabled iPhone.

The point here is that there is a lot of extraneous data that comes with each file that is uploaded to WordPress and then when WordPress duplicates it up to 17 times for each file the load on the server can grow exponentially. There is an option to manage each image file individually by changing its scale and stripping out the extra file meta-data but who has the time for that and WordPress still replicates it many times.

Thankfully, there are a few plugins that can help with this. Just type in “Image Optimizer” in the Add New Plugin area and you will be offered a few possibilities. We will look at the “EWW Image Optimizer” in this article. After installation and activation you can go to the settings page under the Settings menu. It will look like that shown in figure 10 (with the Premium offer advertisement removed).

Here you will see a series of tabs that control the actions of this plugin. Check that you have the compression settings that you want (some are only available in the Premium version). You can even affect images based on their file type. One set of options to look at are on the “Resize” tab; here you can turn off the creation of the extra files that WordPress creates so you can selectively control the number of duplicates. This is a great feature for saving file count. Save your changes.

The big advantage of this plugin is that it will scan all of your existing images on your WordPress site and optimize them in bulk (there is a link at the top of the settings page for this). Depending on how many images you have it could take a while to go through them all but the savings will be worth it. Be sure to have your options set before you do this bulk process though as you only really want to do this one time. Also, keep in mind that any newly uploaded images will be optimized as they are uploaded.

Figure 11 now shows the results of the file upload with some of the settings that were in place prior to the upload. You can see that the file size of the original image has been reduced from ~487,000 to ~469,000 bytes and only 5 additional images have been created. When you think about image files in the thousands on a site this will definitely be a big savings and also a load time saver as well.

Content Delivery

The next optimization topic is that of using a CDN where possible. CDN stands for “Content Delivery Network”. This is merely a site replication feature that some hosting companies are starting to use more prevalently. The concept is that websites (sometimes only images) are replicated on servers all over the world so that loading time for sites will be faster based on geographical location. So for example if you have a hosting company that stores your main site content in San Francisco, California and you have web visitors accessing your site from Europe then they may replicate your site on a server in London to better serve your European clients. The loading time for a site would be slightly faster since the geographical location of the requested content doesn’t not have to travel over a continent and an ocean to reach the customer. Look for hosting companies that offer this as a feature and follow their guidelines for implementation and optimization as each one can be slightly different.

Security Options

The last item that we will look at is that of site security. This does not technically impact on site response time unless your site is hacked or attacked with denial of service type of activity or overloaded with spam comments. Two separate plugins can be used for these security types of issues. The first one is generally installed with WordPress by default and it is called Akismet. Be sure that you have this installed and activated and that you have the settings set to your liking. You will need an activation key from the akismet people but it is free and can be used on multiple sites so there is no drawback on this point. Akismet is the plugin that helps to keep spam comments out of your site where it is possible to comment on blog posts or pages. You can turn this commenting feature off altogether if you want to but for those sites that like or depend on reader comments and feedback it is a requirement to help keep the bloating to a minimum.

The second plugin to look at in this regard is called WordFence and it is one of the best site security plugins on the WordPress ecosystem. There are a ton of settings that can be used here for site security so be sure to explore them. The main feature to get is a daily summary (you can adjust how often this is sent) of all activity on your site. You can be alerted in email of any spikes in attempts at password guessing, failed login attempts, higher than usual site access (domain attack attempts), and so on.

Figure 12 shows a portion of the page where you can set your security options.

Another great feature of this plugin is that it can email you whenever a plugin is ready for an update. So you don’t have to constantly check your website admin area for required plugin updates, you can wait for an email to let you know when these are ready. There is even a dashboard panel that you can access to get a bird’s eye view of your site security and any attacking activity that may need some extra attention from you.

Summary

There are many more small ways to optimize your WordPress site and the ways and means are changing every day. I hope that I have provided you some useful tips and directions on how to improve your site on both the performance and security fronts so that your clients can be served with your information both quickly and accurately. Be sure to check out your site over time on the GT Metrics site so that you can always have your site humming along at light speed!

Lastly, I’ve built a plugin with the RingCentral APIs which you can utilize to easily let people subscribe to receive sms notifications or to request an automated call back. Go here to get it: https://www.ringcentral.com/apps/rccp-free-wordpress-plugin

To learn even more about other features you can use with RingCentral make sure to visit the developer site and if you’re ever stuck make sure to go to the developer forum.

Want to stay up to date and in the know about new APIs and features? Join the Game Changer Program and earn great rewards for building your skills and learning more about RingCentral!