Speed Up Your WordPress Site and Rank Better [How-To-Guide]

Random Stuff On Desk

[Update: I have changed to a different WordPress theme so a lot of this info is out of date]

Here is a guide you can use to speed up your WordPress site and potentially rank better. Optimizing websites using Google’s Page Speed Insightcan be a worth while exercise to cut some fat in your websites file structure. Matt Cutts Says Google Is Incorporating Site Speed In Search Rankings. With over 200 ranking factors, Google doesn’t give up very many freebies for webmasters. Not only does Google tell us they want to see quick sites, but they give us a tool to test our site’s speed and suggestions to fix slow site performance.

Chances are there are a few suggestions that you can implement quickly to help rank better. I will show you which suggestions Google gives me and how I fixed them. There are many ways to speed up your WordPress site and rank better but this post will specifically look at the render blocking JavaScript error message many users are receiving.

Quick note: I know people hip to SEO will pick up on the claim about site speed and ranking. Site speed is only one of hundreds of factors that Google considers when ranking pages. If your page ranks well already and has a slow load time that is okay. In fact, if you look at sites like Facebook, Twitter, Techcrunch, and CNN using Google’s Site Speed Insights they have low site speed scores. If your competition has fast site speed and you make these changes there is a chance you may or may not rank better. However, if you are like me and enjoy optimizing your website and giving yourself the best chance you can to rank better in Google search results, read on.

Let’s see this site’s results.

Google Site Speed Insight Test
Google Site Speed Insight Test

So we can see there is some room for improvement to speed up my WordPress site. Let me quickly talk about how this website is built so we can discuss what we can fix, what we should fix, and what is going to be a little tricky to fix. This site is built using a WordPress theme called Casper. Because it is built with WordPress there are 3 ways in which files are created in the webserver directory.

  • WordPress based files
  • Casper theme files
  • Plugin files

It is important to know which files are coming from where. If you have a plugin that is causing a slow page load, or other issues it might be worth finding another plugin versus fixing it. Also, we know we can use some CDN functionality with large files but if it is a file that we might change often (like a style.css file) it can be quiet annoying. We know for sure that we can compress, resize, and use ajax when possible to help with this speed score. So let’s get into it.

Here are my top priority fixes as suggested by Google

Top Priority Fixes From Google Insight
Top Priority Fixes From Google Insight

Warning: You should always backup all of your files before making any big changes. Here are a few suggestions for plugins you can use if you are using WordPress.

Duplicator

BackUpWordPress

Vault Press

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

We are given the relative path where the JavaScript files are located within our theme. The reason we are getting this error message is because of when and where the JavaScript is being called into the site. If the JavaScript is in the head it must be loaded (unless it is using AJAX) before the rest of the content can be loaded. The obvious solution would be moving it to the bottom. But maybe the file is needed before other elements will show correctly. Perhaps the file is an old fallback and can be moved no problem. It really depends on your theme and file structure. After researching the different ways to eliminate render-blocking JavaScript and CSS from above-the-fold content there appears to be a few ways to do this. So let’s start with the easiest way to speed up your WordPress site and see if that works for us.

Using The W3 Cache Plugin To Remove Render Blocking JavaScript

First let’s download the W3 Cache plugin. You can do this by going to your site’s dashboard then plugins then search for W3 Cache. In the settings I went to general to first enable some services. This is the most common method I have found to speed up your WordPress site.

Enable Manual Minify Service

Go to General Settings and look for the Minify tab. I left everything with the default setting except minify mode. I tried auto and nothing happened when I tried manual it gave me the choice to minify JavaScript for different locations in my HTML and the ability to upload JavaScript files, which we will need in a moment. Select manual.

Enable Minify Mode
Enable Minify Mode

Go To The Minify Settings

Next go to the Minify tab. I changed the Before <head> to non-blocking using “async” and left the <body> tags with their default settings. This settings is minifying our JavaScript in our head using AJAX, meaning it runs in parallel or very close to parallel with our other files. This alone did not work for me and I had to manually add the JavaScript files that are in my head section.

Minify Settings To Remove Render Blocking JavaScript
Minify Settings To Remove Render Blocking JavaScript

Manually Add the Javascript Files In Question

Go back to your Page Speed Insights and find which files Google is asking you to remove. If you hover over them it should give you the file path. Add theses files to your Minify Settings. Make sure the JS file Management option has your current theme. Upload each file and keep the Template option as All Templates, select Embed in <head> and verify it does not wreck your site. I would suggest doing it one by one and seeing if any functionality on your site breaks. If it does. This method will not work. There are some files (like Google Fonts) that you won’t want to minimize.

Manually Add JavaScript Files
Manually Add JavaScript Files

Check Your Google Insights Suggestions

Check to see if it helped remove the blocking JavaScript (you need to wait 30 seconds before refreshing the test and when you make a change). For me it increased my score from 82 to 86 and removed the top priorities for render blocking JavaScript error messages but it is still showing the some error messages about render blocking files. The removal of the render block javascript will help speed up your WordPress site. However, some users have reported this did not work with their theme. Again, it really depends on your WordPress theme and the JavaScript files it uses. I will detail a few other ways to fix the top priority render blocking JavaScript files and then a few ways to fix the other suggestions to help speed up your WordPress site.

 Speed up your WordPress site?
Did this help speed up your WordPress site?

What Else Can We Try?

Google offers PageSpeed service which optimizes your site before a request is made. It stands in the middle of your site and the http requests. This may be a little complex for users who are knew to websites and servers. However, it has been report that this will speed up your WordPress site. You will need to be comfortable with configuring DNS records. Here is a video with a little more information. I already fixed the top priorities but I might be keen to revisit this service at a later date.

How About Moving JavaScript To The Footer?

Try this plugin

I doubt this will be an ideal solution for many users. I say this because if you use Jquery or some other popular JavaScript libraries it is best to load them first so things like sliders, animations and other functions can fire. The solution might work for files that can be called after a page completely loads. Again, you should back up your files, test moving each file to the footer and seeing if it breaks your site functionality. Here is a plugin that is suppose to help do this action for you if you don’t want to attempt it. Fair warning I have not tried this plugin and have no idea how well it works to speed up your WordPress site.

Load Files With Function Reference and WP Enqueue Script

WP Enqueue Codex Screenshot
WP Enqueue Codex Screenshot

If you are more technical and don’t want to rely on a plugin you can edit your themes functions.php file (generally where this stuff is stored). You will need to have an understanding of when your files are being loaded and what their dependencies are. The WP Enqueue script is a file that is ideal for calling functions but I am not as big of a fan of this method because if you add plugins, or don’t fully understand dependencies it can cause more harm than good. At the end of the day having your site viewable is more important than increasing the site speed by .3 milliseconds. So only proceed if you are familiar with php functions, JavaScript, and HTML browser parsing. If you’re a pro in all of these I am sure you can figure this out better than I can explain them. Here is a great Tutsplus article. If you want to take a peak here is the WordPress codex for WP Enqueue functions.

Optimize Images

Another great way to reduce server resources is to make website images sized to exactly the size as they are needed. Often times webmasters take a very large image upload it, don’t add alt tags, or a title tag and add them into their post. This is not how to speed up your WordPress website. The best way to handle images from an SEO stand point is to optimize them. Here is my workflow for handling images in my posts and on my site. This may or may not be best for you. Find the width of your blog’s content region by right clicking and using inspect element.

Optimize Images To Help Speed Up Your WordPress Website
Optimize Images To Help Speed Up Your WordPress Website

When I add photos to a blog I always give it a descriptive title, alt tag, description, and caption. Even if I know I have to go back and edit it later. I want to get as much potential out of the image as possible and I know if I leave it blank I might not come back. Plus it makes organizing pictures easier. I then scale photos to be max-width of the blog, so in my case 700 pixels. This is a good practice so that images aren’t being resized and the reduction is done before they are requested from the server.

Scale Photos Before Inserting To Post
Scale Photos Before Inserting To Post

Further Optimization Efforts To Speed Up Your WordPress Site

Here are a few other ideas if you are looking to squeeze a little more performance out of some available resources to speed up your WordPress site. These options may or may not be a good idea based on your theme or comfort level with code and websites.

Check Out CDN Options To Speed Up Your WordPress Site

I use a CDN for a few single page sites but they are built with a bootstrap like theme and were fairly straightforward to set up. A CDN is a (content delivery network) way to host files on servers all across the World. When a user visit a site they are served the files from the nearest server available. A CDN network reduces strain on a server’s bandwidth and allows a user to be served files quicker. Here are a few suggestions for popular, well supported, and stable CDN’s. Also, the W3 Cache Plugin from above has the ability to configure a CDN.

CloudFlare – One of the most popular CDNs

Amazon CloudFront – Amazon is spending a lot to bring users resources and tools for the web. Definitely worth a look.

MaxCDN – This is my recommendation, I really like their user interface and documentation

 How Much Load Are Your Plugins Putting On Your WordPress Site Speed?

I love looking at how plugins are constructed. Nerdy yes, time consuming definitely. One thing I have learned is a lot of issues can arise from a poorly coded plugin, or a handful of plugins stepping on each others toes. It can be very frustrating to deactivate all your plugins one at a time to find a culprit that is breaking something on your website. Maybe it is time to see if you actually need all your plugins or if some can be deactivated in order to help speed up your WordPress site. The P3 plugin is great for looking at performance and load. I quickly noticed a big issue with Jetpack when I scanned my site for the first time. At first I realized just how many resources Jetpack was using. For me it was totally not worth it because I use Jetpack for very little, I only installed it because I enjoy a few features I could get elsewhere. So I was keen to uninstall Jetpack. But I did a little digging and I am glad I did.

Not So Fast JetPack Isn't Slowing Down My Site Like I Thought
Not So Fast JetPack Isn’t Slowing Down My Site Like I Thought

Jetpack actually doesn’t hurt my site’s performance like I thought.

P3 scans your site as a logged in user. Some plugins enable more functionality when you are logged in. When P3 detects a plugin which could be a false positive, such as Jetpack, you’ll see a notice. The authors of these plugins have put a focus on performance and you should feel safe leaving them enabled on your site if you need the functionality they provide. -via P3

If I uninstall JetPack yes it would help my sites performance but not enough only shaving a couple milliseconds per visit off of my time. For me I will look to optimize elsewhere. However, this plugin would be ideal for someone who has old plugins that may be poorly coded, not maintained, or otherwise useless and causing your WordPress site to slow down. Speed up your WordPress site by checking plugins and evaluating if you really need all of them.

Basically Look To Minimize Resources Any Way You Can

If you can resize an image, move a file to the footer, or zip a folder and compress files then do it. Look for CDN options when looking at stylesheet and boilerplate templates. Also consider using a theme that talks about these as a best practice and coded into the theme. Lastly, I want to just point out a well known, well used resource. This is probably not helpful to anyone reading this post because if you know how to use these chances are you are already using them but in the off chance you have lived under a rock your whole life here is Google’s hosted library collection.

Quick Overview Of How To Speed Up Your WordPress Site and Rank Better

It can be tough to rank for content these days. It seems the market is cornered by big name brands pushing out massive amounts of filler content. SEOs are continually talking about engagement, page authority, and how content is truly king. Your best bet to rank well is to build solid backlinks from content authorities, do everything you can to make a user’s experience awesome, and deliver highly relevant content. Using a tool like Google’s Page Speed Insight is a great way to get ahead of some well written blog posts that are suffering from slow site speeds. Again, this may or may not help you rank higher if the competition is ahead of you but it can’t hurt. Really, as sad as it is to admit to yourself, if you can’t rank for a keyword phrase by having a nice blog with good content because there are others doing it better you have to find a way to stand out. So keep working, keep learning, and keep trying to find the perfect blend of content, marketing, and technology.

You might also like...

Subscribe To My Blog

Stay up to date with my latest lessons and writing
  • This field is for validation purposes and should be left unchanged.