class="post-template-default single single-post postid-1352 single-format-standard"
03
Aug

A quick start guide to making your WordPress site run faster

How-to-ake-wordpress-faster[1]

There is a great deal of information out there on site speed and its effect on SEO. Google and other respected sources state that site speed will not only affect your user experience but also your rankings, even so far as if your site loads too slow on mobile then it will be excluded from mobile search results. Many site owners could lose 50-60% of traffic without understanding why.

We’ve written this post to explain what you can do, and what we at DSA do, to technically optimise a WordPress site for SEO, regardless of location or device.


8iV2y[1]

What I want to do first, however, is talk a little about how a browser and the internet work to maybe give you a better idea on what we’re going to be doing to your site, but also so you can understand a little bit about the why it needs to be done. I’m not going to give you a long drawn out technical run down, and if you were in one of my lectures, you wouldn’t be so lucky, but I hope to give you a better understanding on how it all works, in layman’s terms.

Lets say that you want to open your favourite site, you go to your browser and type in the address, what happens next is not only amazing, its fast. So your computer then sends a query to your countries DNS service, asking, what is the numerical address of this site e.g.: You typed in dsa-global.com and then the DNS server has sent your browser this number ‘159.100.176.161″.

Your browser then looks at that number and uses it as an address, as those numbers denote the file location on the computer within the data centre located somewhere within the world. Now your browser knows where the files are located, it starts to request files from that server to make the website. Your browser will ask for the HTML first, and that html will tell the browser where all the other files are located to build, paint or render the website for you.

This is where we start to get the speed issues; firstly a server will only send 6-11 files at any one time and your browser will render the files in the order that they are given to it, so the first think that your browser will get is the header and in that header there will be some html, some CSS style sheets, some JavaScript, maybe a few tracking scripts and potentially some CSS that isn’t on its own style sheet. In some cases I have seen up to 500 lines of code just in the header. All this code, has to requested, sent via a cable (yes the internet is still actually physical cables running under the sea between countries) between connection relays and there may be 15 of them, to your computer browser bits at a time.

For those that don’t know, html is the bare information on a page, the text and the instructions for the browser to be able to make the website look as it should. CSS or cascading style sheets are the instructions on what the site will look like, course to use, placement of images, location of text on a page and so on. JavaScript is instructions that will run maybe an animation on a page, and that execution of the JavaScript is done on your computer, unlike jQuery, which is done on the server, before you get the end product.

html_css_javascript_and_the_awesome_jquery_infographic_header[1]

So, we’ve got the html, and we’re starting to get more code now, a CSS file has come, and then suddenly we see that there are 4 more style sheets, some are on the server with the rest of the site, and some are at a different location on the internet. So your browser has to send off a request to another computer to get that information. Then we get a JavaScript file and this will stop all other files from running, and downloading until that JavaScript instruction has been finished. Then we’re back to downloading, maybe some more CSS, another JavaScript, and some tracking… so you can see that there is a lot going on even before we have got to the actual information on the site.

One thing to remember here, your browser can download and render a great many things at once, but it will only get from one server at any one time a small set of items in batches, meaning, you can only get 6 files from one server at a time but you can get 6 files from 10 different servers at one time. That is called asynchronous loading or sharding.

If I was to give an analogy, its like you want to go to see someone, so you need to look up the address, then once you know where it is, you start to write down all the information, but you need to change the colours of pens, because some information is more important than others, then you need to make sure that you have your keys, so you stop writing down the information to go and get your keys. You come back and continue writing the address, but suddenly you remember you need to start the car first, so you go start the car, and come back and continue writing down the address… Its not a particularly good analogy but I’m sure you understand what I am getting at.

tumblr_mzrkznEyrb1tqcn79o1_r1_500[1]

So, I hope that you have a vaguely better idea on how it works. Let’s talk about some essential tools you will need when doing this sort of stuff. I recommend you look at tools.pingdom.com first, it will give you a waterfall chart on what is loading on your homepage, every time someone goes to your site. Its a great way to see what you have, how long each element takes to load and also, how big your images are.

Now you have run your site in that tool, we can start to speed things up.

hosting[1]
Find a good hosting solution:

This is a very simple one, and one that will do wonders for any site. Where is your main audience? If you are like us then you serve a national market, and that for us, is Thailand. This means we need to have our website as close to our market as we can. We host mostly in Singapore as that is the closest location with servers that are high speed and provide good service.
Simply moving your site closer to your market will have a big effect on speed. If you’re global, then move it to the largest market share you have, and use a CDN for the rest. Ill talk further about CDNs in a bit.

Update WordPress:

Again another easy one; go into your WordPress install and update your WordPress version and its plugins. Old code can slow stuff down badly, and also it’s a massive security risk, so stay on top of that.

Remove old themes:

This isn’t a massive one, but I like to do it anyway, and that is remove all the old themes that WordPress give you. If you are using a custom theme, then there is no need at all to keep the WordPress 2010, 2011 and so on themes in the back end. They serve no purpose and may have a detrimental effect.

Do you need to show 1000 posts on the homepage, reduce the number of calls:

On your homepage, do you have blog posts? if so do you need that many? Reducing how much dynamic content is on your home page will speed the load up as your users browser isn’t trying to load lots of information, and also run a tonne of instructions every time. Try to keep your homepage as lean as you possibly can.

Reduce your image size:

First things first, you need to reduce the size of your images. Under 100kb is good, because if you have 20 -30 images on your site, then your going to be downloading 2 or 3 Meg in images, and that will slow down the render as nothing else will download while an image is downloading. So keep those images small in file size, actual dimensions of the image don’t mean anything.
Also, in the html you need to make sure that you state the dimensions, because a browser will download an image first, then wait for other instructions on sizing it, which can add load time, so if you state the size in the code, next to the image location, you reduce that need for waiting.

Load images from a CDN or sub folder:

Moving images to get them to load from a different location is one of the first major changes I make to any WordPress site as its sometimes very simple, but also very effective. Its reducing the requests to a single server and its spreading the load, so you can load more stuff at any one time. Two options you have are to load all your images from an Amazon S3 bucket (my preference) and that can be done using the W3total cache WordPress plugin, or creating a sub folder e.g.: images.yourdomain.com and loading them from there. You can also configure WordPress to upload all your images to the sub folder, and you will have that function default going forward.

Use lazy loader:

There are a number of good WordPress plugins for this, but essentially, its a way of delaying the loading of an image on a site that has images below the fold. This means that an image will not load on your site unless its viewable by a user. Its good and bad; good because it speeds up the loading of a site, but bad as there can be a visible delay in image loading when a user scrolls down the page quickly. Generally the benefits of lazy load outweigh the negatives, and its as easy to implement as installing a plugin.

Remove all old plugins:

WordPress plugins make life easy for a lot of people that can’t code, and I am one of them, however, plugins can add all sorts of stuff to your site in the header that will just reduce your site load to a crawl. So, go into your plugins area and remove any old plugins that you have there, even if they are disabled, they may still have code running that will slow it all down. Also, remove any plugins that you are not using, think about the functions that a plugin may give you and assess if it’s really needed. if not, get it out of there!

Host video externally:

Pretty simple really, if you’re loading a video then use a third party service to do that for you, like YouTube, Vimeo or Wistia. Loading video from your server is not the best idea, unless your site is all about loading videos. If you can not do it, then use a third party

Combine CSS style sheets:

This will reduce the number of requests to your sever, as if you have 5-6 (Ive even seen 15 once) style sheets that are loading, your going to take up time loading all the CSS files. IF you can compile them all to a single file and update that across your site, its going to reduce the requests to your server and also, your site will have all the styling instructions on hand in its memory, for each page, rather than having to go and find a file, read it, and then execute that instruction over and over.

CSS sprites (replace images with CSS):

This can be as hard or as easy as you like. If you have a solid block colour for your background and it’s an image, replace that image with a CSS instruction. Its not worth loading images and then a CSS to do the same effect that pure CSS can do. Any possible image that can be replaced with CSS should be. Icons, backgrounds, lines, rules and so on. Get it CSS and you make it fast, keep it image, and your making multiple requests to a server, downloading, and then paining them… too slow!

Load bootstrap offsite:

Bootstrap CSS is pretty common nowadays, and its a pretty standard format, so go into your theme and look for what version of bootstrap is being loaded, and then update the location from your server to the Google servers (http://getbootstrap.com/getting-started/).

Load .js offsite:

Just like bootstrap, .js is a standard library, so instead of loading it from your own server, slowing it down and increasing the number of requests, load it from https://cdnjs.com/

Move JavaScript to the footer:

This one is pretty important but also easy to break. In your websites headers will you see “SCRIPT” files, and sometimes you will see lots of them. One by one, cut and copy the scripts from the header and put them into your footer. I say one by one, as that can totally destroy a site if a script NEEDS to be in the head, but it’s moved.

The idea is that JavaScript will block all rendering of the site, and run an operation. This is called render blocking. if your site requires a user to run 6 different scripts before it will allow the loading of the rest of the site, then you can slow your site down to almost unusable.

What you can do is delay that script to run last. Once all the site has loaded, then it will run. This will speed it all up and make your site run fast.

So, cut, paste and test your site, then do the next one and so on. Things like a gallery or slider will require running in the header, and you can’t get around that, but move everything else that you can.

Page Caching:

There is tones of stuff on-line about caching, so I wont go into detail here, but simply put, install W3total cache and follow the caching instructions. It basically puts a rendered version of a site at the front of the server, as you have said to the caching software that nothing will change on my site often. Then when the server starts to offer up the files to the users browser, the server knows that it wont need to run any operations, so it give the exact same files it did to the last viewer, to your next user.

Gzip:

This is a compression format, that will reduce the size of files and make them transfer faster from server to browser, as less data needs to be transferred. Gzip is an industry standard so you will not have an issue in browsers not recognising the compression algo. Again simple as pie to do, as you can use W3total cache to enable it.

DNS Prefetch:

I have spoken about loading content from other domains, like bootstrap, CDNs and so on, but there is a little trick to make that happen a little faster. In the header of your site, put in code that will instruct your browser to go off to the sites now, as its going to use them later. It can do that while loading other stuff on the page, but it prepares your users browser for what’s coming up.

First you need to turn it on with this code, which is added to the header of the site:

<meta http-equiv="x-dns-prefetch-control" content="on">

Then all you need to do is list out the domains where all your other content is to be found like this. (we’ve added a few of the most common), and they are all added under the “content=”on”” section:

<!– Amazon S3 –>
<link rel=”dns-prefetch” href=”//s3.amazonaws.com”>
<!– Google CDN –>
<link rel=”dns-prefetch” href=”//ajax.googleapis.com”>
<!– Microsoft CDN –>
<link rel=”dns-prefetch” href=”//ajax.microsoft.com”>
<link rel=”dns-prefetch” href=”//ajax.aspnetcdn.com”>
<!– CDN JS –>
<link rel=”dns-prefetch” href=”//cdnjs.cloudflare.com”>
<!– Bootstrap CDN –>
<link rel=”dns-prefetch” href=”//netdna.bootstrapcdn.com”>
<!– Google Tag Manager –>
<link rel=”dns-prefetch” href=”//www.googletagmanager.com”>
<!– Google Analytics –>
<link rel=”dns-prefetch” href=”//www.google-analytics.com”>
<!– Google Fonts –>
<link rel=”dns-prefetch” href=”//fonts.googleapis.com”>
<!– Facebook –>
<link rel=”dns-prefetch” href=”//connect.facebook.net”>
<!– Google+ –>
<link rel=”dns-prefetch” href=”//apis.google.com”>
<!– Linkedin –>
<link rel=”dns-prefetch” href=”//platform.linkedin.com”>
<!– Twitter –>
<link rel=”dns-prefetch” href=”//platform.twitter.com”>

Use CDN:

This is again a very simple one to do, but can speed up a site loading time in different areas around the word. A CDN or content delivery network, will take a snapshot of your website and then host it in different locations around the world, that way, if a user is in the UK, and your site is hosted in Singapore, the version they will see is the London CDN version, this will load far faster as it’s closer to them.

Amazon have a great CDN, and it’s what I use most of the time, however, CloudFlare also provide a great service and they are have a free version.

Remove unnecessary PHP for HTML (does your homepage change that much?):

This one is a little more complex, and you may need your developer to do it, but you take stock of your site, and see if you need to have a site that is dynamically loaded all the time. Does your home page need to change that much? If not, maybe think about updating the home page from php to static html. That will change the load speed to insane levels, and also reduce the work your server needs to do, to provide your site.

Prerender:

This last one requires you to have access to your server. What prerendering will do is create HTML versions on every page of your site, and then it will server the Static HTML versions to your user, rather than a PHP version. This is similar to the last point, but done on a site wide and automatic scale. Its possibly the method that will make your site the fastest, but also one of the more complex and expensive to install, as you need to have your own dedicated server.

There you have it! A list of things you can do on your website to speed it up, and get it running as fast as possible for your users. Also, its a road map for what we at DSA do for you in the first month of working with us, as page speed is an essential element to on page technical SEO. If you would like DSA to do this for you, please feel free to contact us. Or to check out more of our Global SEO methodologies, click here.

The following two tabs change content below.

Benjamin S Powell

CEO & founder at DSA global
A Digital Marketing expert and CEO & founder of DSA Global. Ben has over 10 years experience solving complex business problems in both client and agency-side roles.

Latest posts by Benjamin S Powell (see all)