WordPress Speed Optimisation – The Complete Guide

WordPress Speed Optimisation – The Complete Guide

We live in the age of now! everything is at your fingertips thanks to technology. Browsing a website is no different and when you think of why you browse a website its usually to find information, feed a secret habit, buy something, stalk someone and so on and so on. When you browse or stalk what ever tickles your fancy, you have a subliminal time allocated to the task. The exception for this is FaceBook and the social media, like where you can be lured with flashy images and click bait titles to lose hours of your day. When the target website you want to visit has a loading  time over 3 seconds, you generally like me lose interest in watching the little page loader spin in circles waiting for the website to load.

In this guide we will cover some tips and techniques that you can use to optimize your website for speed.​

Google made it clear that having a fast loading website was one of 200 ranking factors. This is something that should not be ignored with the way we are heading with a mobile first browsing habit. Imagine your customers visit your web store to buy those brand new Nike KD9’s and your site takes 7.5 seconds to load but Larry’s most best nike store loads in 2 seconds. The truth is 9 times out of 10 you lose that customer to damn Larry for having a sucky slow website that takes forever to load. Larry on the other hand is balling thanks to his speed first website taking all the orders. Having a problem like this can kill a business that depends on online orders and that is the hard truth.

In order to perform surgery a doctor must know what is wrong with the patient, we will be taking the same approach. Firstly you need to know whats wrong with your website before you can fix it. This WordPress website speed optimisation guide will show how to take steps to make your website load faster.

 

Execute a Website Audit

First lets identify your targets, use this speed testing tool to calculate your performance optimisation budget, just input your desired load speed and connection type. All credit to Jonathon Fielding​ for this neat tool for planning out our performance budget. The tool is a little off but it is also very handy and gives you a guide of where you need to be focusing on for improvements.

Now we need to measure how far off you are from your target load speed. Use all six of these testing tools to identify your website speed problems, we will want to work on these with the techniques and tips outlined below. Use the tabs below to begin your website audit.

Below are x6 tools to test the page load speed of your webpages:

When you execute your speed tests with Pingdom, 90% of people who use this for this exact test only measure the home page. Understanding you also have other pages that need to be tested is website auditing 101, Now check your product and category pages make sure you dissect that report so that you know just what is slowing down your site and where it is. The data you will get returned by Pingdom will contain page size, page display load time and the overall performance grade. You will have the option to see what areas require action for improvement and a very handy page analysis feature that tells you in summary content type browsed, time spent per website and the domain, very useful for data nerds like me.

Next run your site through the other toolsets and record the data, some results may be different from different tools. If you have a competitor website that you want to see where they are and what the difference is between the two websites use Which Loads Faster for a side by side display of the two websites. This is very handy for competitor analysis.

Now you have your website speed optimization to do list, and you can work alongside this guide to fix the problems. For those that are more SEO inclined and looking for a beefy test tool to showcase problems to potential clients during video audits a popular website for this is GTMetrix very detailed reporting and easy to understand where the problems are. Another very popular tool for this is SEMrush, you can point out client and competitor traffic stats and some site problems if you have set projects up. 

Firstly this is a guide for WordPress websites and not shopify stores or magneto or other CMS websites. The information is applicable to websites developed on WordPress only some may work with other platforms so use at your discretion.

Read our WordPress SEO Guide

I wrote a EPIC guide for anyone that wanted to take SEO into their own hands and give their website the solid foundation to really make a move and get noticed by Google and potential customers.

Page Load Speed

Getting 100 on the Google page speed testing tool is like catching a unicorn, extremely rare! but just how close can you get to 100? I haven’t seen a perfect 100 score from anyone in my communities that was legit and not photoshopped. If you have proof of a perfect 100 score with the Google page speed testing tool please post in the comments Id love to see this unicorn.

​Kissmetrics conducted a case study where they asked specifically about page speed load times and they found that 51% of users with mobile internet say that they’ve had a website that crashed, froze, or received an error while going to make a purchase. Every second past the ideal loading time of three seconds costs you a seven percent reduction in sales! If an e-commerce site is making $100,000 per day, a 1 second page delay can potentially cost your store $2.5 million in missed opportunity revenue each year.

Page Load Speed Key Points:​

  • Better UX
  • Lower bounce rates
  • Load speed is a ranking factor
  • Increase in organic traffic and conversions​

Look at your website speed score from your tests, If you have a score of 50 and above that average standard with a lot of room to improve. If you have a website score of 70 and above well done you are a Wiley web head but don’t get ahead of yourself you can still improve your score. 

​how many resources will a browser download from a given domain at a time? This all depends on your resource set up and the drain your website will be putting up to load. For an isight into browser resource requests visit this site for a sneaky tip.

Now you know page load speed is important enough but how do you measure the good speed from the bad apart from the obvious, ​

Use this as a guideline:​

  • Below 1 second perfect
  • Below 2 seconds above average
  • From 2-3 seconds decent
  • From 3 to 7 seconds is average
  • Above 7 seconds call a doctor

 The above guidelines came about from a case study carried out by university students on peoples expectations regarding website load times and the amount of time that passes before they would bounce from that website. The study revels that 47% of people expected the websites to load within 2 seconds, and 57% of people said that they would bounce from a website if it took longer than 3 seconds to load and fair call on that. 

For everyone with slow loading websites now is your chance to target those 43% that were not phased with the 3 second load time.

​John Mueller a webmaster trend analyst for Google stated on Twitter that his benchmark for page speed load times is around 2 to 3 seconds. He also stated his go to testing tool was Google’s page speed insights test tool.

Google has a speed index

If you read this guide and action the items that you found as errors or warnings on your tests , you are going to have a head start. Your competitors might be web saavy but chances are they are not as web smart as you. Getting all your ducks lined up so that you can put the best website forward to Google for consideration as having a fast loading website​ puts you in a good place for getting those page 1 listings.

To understand where you sit and where your competitor sits on the speed dial a popular competitor research tool is WhichLoadsFaster 

Neil Patel completed a case study on Walmart, in the case study they uncovered that customers would abandon cart when load times jumped from 1 second to a 4 second load. They also found that for every 1 second of increased page load speed that the conversion rate increased by 2%​.

Just think of what 2% of sales for Walmart means, Walmart was recorded to have operational a total of 6,300 stores in March 2016.

Slow websites affect website visitors as shown in this example, if you optimize for speed you must include often overlooked association factors for your overall website speed optimization plan.

A wise habit to implement is weekly checks on not only the website but on your analytics. Measure and record the bounce rates and decrease in page views, that could indicate a problem.​

Why Ecommerce Store owners should read this guide

Why Speed Matters for Ecommerce?
  • People dont like to wait
  • Load screens kill conversions
  • People are impatient
  • Social referral traffic has the back button
  • We live in a “I want it now” age

The biggest killer of conversions is website and shopping cart load speeds. Fix the load speed fix the conversion problems.

Hosting Success

To have a fast loading web page you need solid foundations, by this I mean having premium hosting helps considerably. Fun fact we actually recommend several hosting options right here on SerpWolf.​ 

If like me you have more than a couple of websites for whatever reason you will know the headache of increasing your hosting plan or managing multiple hosting plans. Ive tested a dozen or more hosting services and I can tell you the stand out’s for adding speed to your load times have been covered in our Top 10 Reviews.

Hosting issues rocked a few boats

Hosting Tips:

  • Cheaper hosting services will have down time
  • More expensive hosting services are up 100% of the time.
  • When Hostgator is down so is the support.
  • ​The more you can do to reduce server requests the better.
  • You have to spend money to make money.

When I took the dive into making a full time living from web marketing it was all about the budget making sure I didn’t spend to much on hosting and splurging on a premium hosting plan so I could have a lot of test sites for trying new techniques, themes and plugins. ​My point is the $2.95 monthly hosting fee and those 12 months free when we build your website plans are not up to scratch for helping your website and may be hurting your website.

 

Caching

A quick win for cutting load times in half is leveraging the power of caching. To set this up you can use one of many WordPress plugins that do this well, I recommend free downloads WP 3, WP Comet Cache, WP Total Cache and finally WP Super Cache.

When you utilize a caching plugin you don’t just get browser caching functionality if you have one of the good ones.​ Once installed it pays to actually visit the plugin settings section of the caching plugin to se what other hidden features they offer.

HTTP Cache Headers

Header caches work on freshness and by validating the content delivery. A cache will utilize a fresh replica of available content assets but a validated representation will send snippets of the entire representation if it is unchanged. 

Server Cache

Server side caching varies in performance based on the overall traffic of the websites it would be more common on higher traffic sites than smaller more local orientated websites.  When setup to respond like so cache control directives will control who caches the responses, how long for and on what conditions. Using a server side caching method allows for every resource to establish its own caching policy from the HTTP cache control header.

As the image to the right states, I was casually checking out some competitor blogs and came across a website where a guy was speaking about optimizing for speed and gave some props to his friend Matt who has a beast of a speedster website. I took the chance to check out this intriguing speed demon of a website and the below image is what I arrived to and I refreshed the browser twice.​

​I don’t know who Matt is and sorry Matt but that actually happened as I was writing this article. Timing is impeccable and I gave an extra chance to see if the website would reload but it took me all of 6 seconds to bounce off the website. 

If anyone wants to reach out to ​Matt by all means, go fourth and help a brother out.

Get to know more about Cache Control.

One of the most important HTTP cache headers is probably Cache-Control which is a header comprised of a set of directives that allow you define when / how a response should be cached and for how long. HTTP caching occurs when a browser stores copies of resources for faster access. This can be used with your HTTPS implementation

Content Delivery Networks 

You might not of heard of a content delivery network in its entirety before as it is more commonly known as a CDN. What a CDN does is hosting of your media files across global servers all connected to the CDN. When your website is loaded the server nearest to the  geo location of the web page visitor​ is used to action the request therefore removing the strain on your website to load those media files. This type of delivery system is excellent at increasing web page load speeds by reducing the load that a single server would of endured. 

What kind of speed reduction could I see when I use a CDN? You can see a reduction in 40 to 60% of load times that alone is worth looking at. Some of the popular CDN’s are MaxCDN and Cloud flare.​

Another positive about using a CDN is they are handy at helping protect your website against sudden spikes in traffic for example your photo of you in a spiderman costume goes viral and 2 million people visit your website to see this picture your normal server may not be set up to handle that kind of traffic. Using a CDN you have the access to multiple servers that can spread out the load and handle large surges in website traffic.

You can add to the benefits of using a CDN protection against DDoS attacks ​

Load Testing

You should test your website stress load by checking to see what may be causing problems and forcing your site to react slow. This can also be used for testing your backend of your website especially on a WordPress website you should test your plugins and deactivate any that you do not use. 

WP Performance Profiler is very good at locking onto to plugin hogs that slow down your website.

Blitz is a good performance testing tool

  • Load Impact – Three things LI is good at 1 API testing, 2 Web & App testing, 3 Automated testing
  • Blaze Meter – Open source performance based testing, real user testing captures real mobile traffic.
  • Blitz – Test web apps, APIs and website performance

For load testing tools these websites have various testing features just pick the one that has the features you need to test away. 

Reduce Your HTTP Requests

The fancier you make your website with plugins and interactive media the more you call on your stylesheet and the build up of dependancy requests are made. These slow your page load speed considerably, every time you install a plugin or add an image to gallery that boosts the beefiness of the layers needed to display your web pages. Lightweight wins every time, 

How can we minimize HTTP and dependancy requests? well let us leverage CSS sprites, image compression, minify everything and utilize SVG (scalable Vector Graphics). Exhaust all methods of scaling down the requests, Using a CDN is another great way to remove some of the strain and we covered that in the above paragraph.

Checking unused requests

For the corporate and ultra professional websites you might want to remove a well known more suited to mobile texting friends feature. Emoji’s should be kept to the mobile phone text to text basis and not have a place on websites that are all about business. ​

To remove emoji’s from your website requests you can use this WordPress plugin to make it an easy actionable task.​

For those DIY types that love getting their keyboards dirty here is an excerpt for the removal of emoji’s from your functions.php file. Look in your header for the default, javascript file wp-emoji-release.min.js?ver=4.3.1 this should be in your header section, if you don’t see it you don’t have it.  

/**

* Disable the emoji’s

*/

function disable_emojis() {

remove_action( ‘wp_head’, ‘print_emoji_detection_script’, 7 );

remove_action( ‘admin_print_scripts’, ‘print_emoji_detection_script’ );

remove_action( ‘wp_print_styles’, ‘print_emoji_styles’ );

remove_action( ‘admin_print_styles’, ‘print_emoji_styles’ );

remove_filter( ‘the_content_feed’, ‘wp_staticize_emoji’ );

remove_filter( ‘comment_text_rss’, ‘wp_staticize_emoji’ );

remove_filter( ‘wp_mail’, ‘wp_staticize_emoji_for_email’ );

add_filter( ‘tiny_mce_plugins’, ‘disable_emojis_tinymce’ );

}

add_action( ‘init’, ‘disable_emojis’ );

/**

* Filter function used to remove the tinymce emoji plugin.

*

* @param array $plugins

* @return array Difference betwen the two arrays

*/

function disable_emojis_tinymce( $plugins ) {

if ( is_array( $plugins ) ) {

return array_diff( $plugins, array( ‘wpemoji’ ) );

} else {

return array();

}

}

​Take charge of your website and put a hold on requests for resources that are not being used and as outlined above do not work with the websites profile. Go through each page on your website and look at the code, as delightful as that sounds you could hire someone to do that for you and provide a report back.

Image source: Moz

Minify CSS and Javascript.

When I started web design it was like an Alice in wonderland trip, all this new information and a new world had opened up to me. That new world came with some scary terminology JS files and CSS. At the time I didn’t know what these were or how they interacted in web pages, it was a little scary going head first into the technical side of web design. There is no point and click web builder were we are going.

I managed multiple websites and a common problem regardless of the type or design of the website was the JS and CSS files. WordPress a serial pest with hoarding defunct information would hold onto chunks of unwanted javascript files and CSS files loading like dial up internet. I can touch on compression of files again to fix this issue, but there was a plugin made just for this called WP Minify.​

Minify will compress both the Javascript and the CSS files into one single file that reduces the load times instead of having the default setting that installs chunks of JS and CSS every time you instal a new plugin, and holds onto it.​ Use Minify to delete old files while reducing the load time, what a  genius.

What is CSS?

CSS stands for Cascading Style Sheets a language for describing how web pages should be presented. The description covers all design elements including including how colors, layout, and fonts should display. This language can be used to change the adaptiveness of the presentation to different types of device sizes and screen lengths. The language used to identify fonts, color, spaces and all style elements so that web pages can be properly interpreted and correctly displayed. The markup of CSS can be used when styling HTML, XML and XHTML.

What is Java Script?

​an object-oriented computer programming language commonly used to create interactive effects within web browsers.

​Best practice for using JS and CSS is to have CSS sitting at the top of your page and then add Javascript near the bottom of your web page. The reason behind this is for loading, a browser needs the CSS file to begin loading the page. Javascript is placed lower as its mechanism is to prevent parsing of the browser before its loaded and after the tag.

Where you can use a CSS sprite, a sprite is a large image file that contains all of your web pages images. They work by being one image with 100 images within them and by hiding the other images. The usefulness of CSS sprites are that loading one item while a large size is faster than loading 50 items of smaller sizes. Think of it like this, One browser request one image item load request and you have a page load on one request while showing 50 images. The key is to minify the JS & CSS requests, Harness the Sprites to use one file instead of 50 and to cut out the need for a request heavy browser.

Word of advice is to check on requests that you don’t need. When I say this I mean why does your contact form need to be called on when on your blog pages, or why does your blog commenting system need to be called on while browsing the about us page. Reduce requests that are unrelated and help reduce the overall request profile.​

The website Spriteme.org is great for taking care of sprite business.​

RTT’s Optimize Your Round Trip Times

Round trip times are amount of time it takes for the client request to send and the server to answer with a response. When you really narrow down and think about what happens here the exchange it can be quite fascinating, in short if the requests are light then the response time is fast but if there are lots of requests then the response time is affected. Always minimize requests and minify files.

Monitor the use of any redirects with total RTT, if the total time is lacking measure the importance of the redirect verse page load speed.​

  • Minimize redirects
  • Combine all JS files into one. Tech heads read this.​
  • Change CSS @import to <link> tag for each stylesheet.
  • Combine CSS Sprites with your images. Merge smaller images into one request.

Render Blocking Resources JS

You may find some of you javascript interrupts content above the fold, that will be affecting how the web page loads. The javascript coding sends unclear messages during the download that slows down rendering. To correct this problem check your JS code for the “jQuery” from the header of the web page in HTML.

Move the location of where the jQuery  snippet appears in the HTML of the web page.

Database Management

Databases can sound organized ​but even the most structured of storage can get out of line occasionally. WordPress is known for hoarding expired information, imagine holding onto all the update information, deleted themes, deleted plugins, post drafts, saves, image uploads and code snippets. One super handy and reliable plugin that whips databases into shape is WP Optimize, what it does is scheduled maintenance and clearance of your WordPress database.

​When you reduce the pressure of collecting and returning files to and from the database you can expect to save a couple of megabytes depending on how big and how untidy your database is. Code Like a Boss or source someone that speaks code in their sleep. Messy code can add dead weight to your load speed, not like adding fat Albert onto your website load time but the devil is in the details.

Compression Session

Ill state the obvious here, if you want to speed things up you need to compress file sizes simple science. Large heavy loads make slow movements while smaller compact loads are faster. ​

Understanding why we need to be compressing helps us understand other aspects of optimizing for speed. Take the second sentence of this section and read it again that is your optimize for speed mantra. ​

One plugin you need to be using is Gzip to compress website files. Speeding up the load time of your web pages is our goal and by saving any bandwidth we can will help us reach our goals. ​The process of Gzip is when you activate the plugin it zip’s your websites files into a zip file, when a browser loads the web pages they unzip form your zip file its an effective way to to transfer information fast.

Feeling a bit nerdy? You can add the same code to your .htaccess file here:

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

​AddOutputFilterByType DEFLATE text/xml

​AddOutputFilterByType DEFLATE text/css

​AddOutputFilterByType DEFLATE application/xml

​AddOutputFilterByType DEFLATE application/xhtml+xml

​AddOutputFilterByType DEFLATE application/rss+xml

​AddOutputFilterByType DEFLATE application/javascript

​AddOutputFilterByType DEFLATE application/x-javascript

​# Or, compress certain file types by extension:

​SetOutputFilter DEFLATE

​Unsure if you nailed it? not a problem, use this website to test your skills to pay the bills. In english this website will test if your website has Gzip enabled.

WordPress Theme Selection

Before you think about your WordPress theme you should of already had your website hosting setup for optimal speeds, along with using a CDN and now you are ready to add the theme elements into the mix. Optimising for speed is the goal of this guide but important factors to keep in mind is mobile responsive design & user experience. 

The problem comes into play when you need a beautifully designed, functional website that caters to speed, takes care of the responsive design and allows maximum UX. How do you combine each of these elements into one theme? you search long and hard looking for your own preferences. 

There is a disclaimer and this is for all those in web design if you are presenting to the public as a web designer please do yourself some justice and have a website that is amazing. 

My own personal dilemma is my website theme, I was 14 theme changes in before I reached out for support and asked for someone to choose a theme and set it up for me, I even had the password changed so i couldn’t tinker with the design while they were setting it up. Yes it was that bad a sucker for design punishment but the end result I loved it. My weakness was seeking improvement for my website weekly changing themes looking for the ultimate theme, It exists but if like me you have this problem get a friend to set you up with a theme and run with it.

 

WordPress Plugins

Yes bloating your website with plugins is more common than you think. We have an obsession with shiny objects and one trip to the WordPress plugin repository can wind up adding 5 new plugins to your CMS dashboard. 

What is plugin bloating?​

Im guilty of plugin bloating at some stage we have all been there. Having a plugin that does one set task and not a plugin that handles 5 specific tasks. Always revisit your dashboard each week and review your plugin settings what you actually use and what you don’t use. Deactivating plugins that you don’t use often can help reduce your overall load times and is also a good habit to get into.

Plugins that are notorious for slowing down websites:

  • Google Analytics plugin 
  • Heatmap plugins
  • In Dashboard analytics

Using Images

What is the right way to upload images to WordPress? Read this guide top to bottom and then ask yourself that question again. This is a guide for helping you optimise for speed there is 101 ways to do it but use this as your measuring stick and you will be on the right path. Your website multimedia will be your number one drain on the load times of your web pages, if you optimise the images you can cut your weight problem in half.

What image file size is a good measurement to aim for? Peoples opinion differ’s but I want to keep my images under 100 Kb.​

The creative team I work with live inside Photoshop. When they save their work they save it oblivious to file size, I had to educate them that there is an option that enables image compress called “Save for Web” a simple solution to those crazy 9 Mb file sizes they usually produce. ​

Why bother editing them? Imagine Ronnie Coleman is your website first thoughts he is a beast of a man. Ronnie is a very big man, bulky, heavy and a authority on building muscles.

Ecommerce store owners will come across this more so as the product pages tend to grow and grow before you know it, your website is a beast of a website a couple hundred pages deep.​ 

Imagine Ronnie trying to adapt to speed as the determining factor in the Arnold classic tournament, how do you think big Ronnie will do with speed? ​He wont win that battle.

How can you use Ronnie’s supreme bulk and optimize for page load speed? You minify images, compress files and make everything you have on your website smaller in size and use less resources. ​

For the people using Shopify I think this will help Shopify Image Guide.​

I have used WordPress plugin Lazy Load to help with reducing the load time of images and found it useful on sites not using a CDN.​

Imagine that Mr Olympia Ronnie Coleman is your website he is a big bulky and slow bodybuilder with HUGE mass. Lets look at how we can work with Mr Coleman to make our website less bulky and more slimline.

Do they really slow down a site that much?

YES large images can slow down a website. Multimedia files are the biggest drain on a website load time, by reducing the size of these multimedia files you can shave seconds off your load times. Plus if you have an athletic website like Mr Coleman you might need to bring in the big guns…FAT BURNERS! 

Ronnie’s going to need to burn some fat.

Fat Burning for Images!

Our Fat Burners are plugins that reduce image file sizes and compress data into smaller more easily accessible bite sizes. How do you do this? You can take charge of your compression session by using any of the plugins and browser add ons mentioned above. When you smush it you reduce the file size but not the image quality.  Compressing the image will save space and result in savings of requests on the server. When you upload images to the media gallery of WordPress the plugin reads the files in the background and when you go to use the image at the bottom of the right info panel of the media section is an option to smush it! you should always smush it.

Auto Scaling your images is bad practise for the reasons that with everything automated they need to checked over by human eyes. The automation isn’t broken its the human settings that control the automation, example auto scaled images may show smaller than intended or stretched further ending up looking distorted and not like the original uploaded image. Using auto scale functions for larger images often triggers the error with the image being minimised in display size, while helpful for the content creators its not the best practise. 

Tip: Always be thinking about mobile viewers.​ The world is turning to their smart devices to browse the web, think mobile and device for your websites as well. I would also add that AMP the accelerated mobile pages is a real thing here is the details on it and here is a testing tool on how to check your AMP.

One common problem I come across working with web designers is the lazy upload. I refer to the lazy upload method when a content creator or the designer uploads an image and instead of uploading the variant sizes they use auto scale for the image and this is ok in some instances but for the serious craftsmen reading this it is not ok! The example is your header image is also being used for a side banner and when the large header image is being loaded in the sidebar that file is loading as the larger header image to be auto scaled into a smaller sidebar image if that makes sense, a shortcut by design but a negative to your page load speed. 

You should be using responsive themes for the benefit of display flexibility, but if you are not then you need to be. Not using responsive design practises means having your images set for desktop, mobile and tablet. Do you know what is the most enjoyable thing to do after you have set up a website and gone live? It most definitely is NOT having to look at the site through a responsive view tester to see you need to edit multiple images.

Be responsive and use themes that take the manual work out of your hands.​ Reducing image sizes wont improve your site alone it is a combination of these techniques that will improve the overall score but the attention to detail splits you and your competitor apart.

Web Fonts

Using a theme called EasyWeb I noticed the Fonts were using a higher than normal allocation of resources and upon a closer look into other websites in that heavy digital design space it appeared to be the standard that because of race for the competitive edge most websites that looked decent enough to take a enterprise web design contract were using excessive font requests. Over 68% of these firms websites were also running slower than those websites that had opted to take a slimline approach and focus on speed over flashy design.  Heavy Fonts add extra HTTP requests and slow down the system, look at compromising on either design or speed to work your way around this one.

  1. Choose only the styles you need
  2. Keep character sets down to a minimum
  3. Prioritize based on browser support
  4. Your preference but host fonts locally or on CDN

Google fonts perhaps the heavier of the most used font family drains the request line, but a smart man would offload this strain to his CDN for an improved delivery. You can download the fonts that you need from Googles Fonts Helper site. Use this open source application to help extract what you need and then hit the download button to get your goodies. Fonts Helper will zip file the font package for you so you have everything stored together.

You will need to be semi organized here with your FTP readily available for the font upload. ​ Hit the fonts folder with your zip file and then you will need to begin the CSS update. Now this can get confusing and people will get lost, to avoid this use a plugin called Simple Custom JS and CSS. The CSS custom copy will need to be added to the header. You will need to update and point source URLs  to your CDN. Test this and see if you have Google fonts working from your CDN and also test your website speed with Pingdom.

google-webfonts-helper

Look at your Link Profile

Take a good look at your link profile to see if you have any broken links, using 404 error code. How does link profile affect speed optimisation? great question. Have you ever been to a website where they had a 404 page and if they did what did you do? bounced right off that website didn’t you, I know I do.

Notice those 404 errors

I used screaming frog on this website to check on some broken links I noticed while filling my head with information, Ive since contacted the site owner  and let him know that there were several 404 errors and that SERPWolf is kick ass, so please don’t bombard him with cold outreach scripts for broken link replacements you savvy marketing beasts :).

Digital Marketer has a very clever 404 page tactic that they use where they say something funny and then direct you back to a page they want you to go to right back into their strategic little hands. ​Why didn’t you bounce off their website when you hit that 404 page? because of the way the page was constructed they hit you with humour, very smart indeed.

When you decrease page load speed you are doing the right thing but if you can limit the 404 error pages at the same time then you will be eliminating the potential for a high bounce rate from your website. ​ Fixing these small items can help add up to an improved load speed and lower bounce rate.

Ive left some tools in the resources section at the bottom of this page that will simplify this part of the process for you.​ 

​Avoid Redirects.

Limiting the number of redirects on your website can have a slight impact on your page load speed.​ If you have read the Ultimate DIY WordPress SEO Guide I mentioned using 301’s was a good thing and it is, it can also be not so good for optimising for speed. Using a 301 is much preferred than having a 404 error on your website and 404 is horrible for your visitors unless you are as clever as Ryan Deiss. When you place a 301 on a web page thats great for SEO usefulness, but a browser still needs to hit that page understand the redirection and then locate and connect with the 301 end page.

If you have missing files you are going to have a 404 page generated and this is when they start building up can start to put a load tax on your server.​I used to use broken link checker on my website but I pinpointed one of the main vein drains to be that plugin so I deleted it and did manual checks, a little bit more time consuming but I think you should get to know your website enough to know how many pages you have off the top of your head. When I have to check other peoples website there is no questions, I use screaming frog every time. 

Redirects contribute to the total RTT and should be used with caution.​

​Time to First Byte (TTFB)

​This is the measuring of the time duration from the client making the HTTP request to the time the first data byte of the web page is received by the clients browser. Another measure that TTFB is used is for is measuring the responsiveness of a web server and other network resources.

Use these 5 tips to minimise your TTFB​

  1. Reduce your HTTP requests​
  2. Use a CDN
  3. Organise & Optimise your database
  4. Use RFPL (respond first and process later) caching method
  5. Monitor your server response time and make improvements outlined in this guide

The SERPWolf Random Website Speed Testing Case Study coming soon.

Resources

Here are the tools mentioned in this guide feel free to use them and provide feedback on your results I’d love to see your speed increases as a result of this guide.

Speed Testing

  • Which-Loads-Faster​ – Compare your website speed against a competitor’s.
  • Pingdom – The most popular speed testing website.
  • Web Page Test – The presentation looks out dated but this is a sold test site.
  • Gift of Speed – Uses 16 elements to test web pages for speed.

Websites Mentioned:

  • CSS Sprites – ​Use this to combine your requests into one request.

Plugins Mentioned:

  • WP Minify – Combines JS and CSS files into a compressed single file.​
  • WP Smush it – WordPress plugin that helps you minify image sizes without losing quality.

Responsive WordPress Themes:

  • The Retailer – $55.00 powerful ecommerce focused theme, complete tracking for sales of products. Built in tax, shipping and product reviews.​
  • Bellaina – $75.00 Great for Real Estate websites giving you power to add filtered search functions and add multiple display options.  Map display previews and property submissions the perfect theme for Real Estate’s.
  • Salient – $55.00  A very smooth theme offering support for video background, plug and play for WooCommerce and set for SEO.
  • Porto – $45.00 Premium WordPress multipurpose theme comes with the revolution slider, pricing tables and drag n drop builder, Custom layouts and parallax design options.
  • Medicenter – $45.00 Designed for medical professional services websites comes with six pre-defined colour sets, 

    Site Health Checks

    • Screaming Frog – Use screaming frog to scan websites (Free for 500 links per site) find 404’s and unoptimized pages
    • SEMRush​ – Identify website traffic, website health reports and keywords
    •  Ahrefs – Backlink analysis and crawl reports, paid membership
    • Google Webmaster Tools – Search Console – Crawl Errors 

    ​For the lazy, time poor and people who skipped to the bottom of the page, just do these 3 things for an increase.

    1. ​Compress your images
    2. Instal a caching plugin
    3. Utilize a CDN

    Conclusion

    The race to be the fastest will continue and the rules will change as Google updates processes and algorithms. The list is extensive and doing half of these will help you improve your website page load speed optimization. Take your speed report from the first task you did and work your way through those errors, post your end results in the comments. I would like to see an improvement in web browsers and Im watching this space right now for movement. Having a good looking website is only one part of the puzzle optimize for speed and you optimize for success.

    Making It Online What Does It Look Like?

    We have all been shown how easy it is to make money online, push button simple, passive money doller doller bills yall. The pitch is perfect but who is pitching you? marketers of course der so no wonder the targeting works so well. When I was starting to drift towards...

    read more

    Why You Shouldnt Do Free Work

    Why you should never work for free and I can highlight the why. This happens all the time and usually its no big deal but the amount of requests for free work has increased ten fold. Having been helping some close friends I had a bit of a moment where I was up late...

    read more

    I See Business Obstacles Like Video Games

    When you understand how gamers think you can see that they solve micro problems all day to get to small milestones before completing something bigger like a level. Its this thinking that I believe is a crucial skill marketers need to have to be successful. See below....

    read more
    How To Add Google Adsense To Your Website

    How To Add Google Adsense To Your Website

    Every website or blog can be used to generate a passive income. There are many ways to monetize a website. However, you would agree that no one likes the idea of cluttering one’s site with an array of advertisements from a range of different ad networks. So it becomes logical to simply choose the best one. AdSense is probably the most popular service for this. It can be used to display text, video or image advertisements. As a website owner, you will be paid each time your visitors click on ads.

    So what is Google AdSense? One of the best ways to make money online! Let’s delve deeper into this before learning to add AdSense to WordPress.

    What is Google AdSense?

    AdSense is a CPC program from Google that allows webmasters to showcase ads on their blogs and websites. The best part about AdSense is the fact that it is one of the easiest and one of the best monetization options for website owners today, which can help them earn thousands, if done right. Publishers simply need to embed a small JavaScript code into their website(s). And that’s it!
    If the account gets approved by Google, contextual ads will start appearing in various locations of the website. Your website would be automatically crawled by Google’s spiders in order to know more about your website’s pages. This helps Google bots in putting the best-fitting ads on your website. For example, if you love to blog about shoes, Google bots will take that as a clue and will put ads related to socks and footwear on your website. They do so by automatically checking their ads database and finding the most related ads on the basis of your WordPress website. It is obvious that a person who is reading about shoes is more likely to buy footwear than someone who is researching info about cyber security. Makes sense?

    Being a logical, honest and reliable method to monetize your WordPress blog is not the only reason why we recommend using Google AdSense, as it has many more advantages. Let’s have a quick look at each of them, before proceeding with adding AdSense to WordPress.

    Reasons Why You Should Choose AdSense Monetization

    • Easy to add multiple blogs You can use it with mulitple websites. The only requirement is that your blogs should be in line with AdSense terms and policies. This is far better than most other ad networks where you need to add all your websites manually.
    • Seamless support on the go Needless to say, when you are dealing with AdSense, you are actually working with one of the top companies – Google. Rest assured, you can clear all your queries and doubts by accessing related customer forums. AdSense is very easy to get started with, even for beginners. There are tons of video and text tutorials, even websites that can help you become a pro in this field.
    • Prompt payment When you activate AdSense advertisement program on your website, you no longer need to worry about the payment. Many CPC companies are fraudulent and non-transparent in terms of payment, which is definitely not the case with AdSense where you’re paid on time, always.
    • An easy way to make money A WordPress blog that you may have started as a hobby can also make you money with very little effort by simply placing some ads on it. What could be a better reason to opt for AdSense than this?
    • Flexible ad formats Google AdSense provides you the freedom of displaying a range of ads on your website, based on the available space and layout of your site. Further, you don’t even need to create ads for your website – all of this is taken care of by Google. All you need to do is get the JavaScript code and simply paste it to the ad placement area.

    The manual method of adding AdSense to your WordPress website seems too tough for you? Well, fret not! Here are a few plugins which would help you in this purpose.

    Things you will need

    Before you begin this guide, you’ll need the following:

    • Access to WordPress dashboard

    Step 1 — Sign up for Google AdSense

    First of all, you need to sign up for Google Adsense account. It can be done here. The sign up process is easy and will take only a few minutes. However, it can take up to 3 days for Google to check and approve your application.

    Step 2 — Creating AdSense Ad

    Once your account is approved, you can start creating ads:

    1. Access the Adsense dashboard and press the My Ads button, which is located in the top menu.
    2. Hit the New ad unit button.

    3. Enter the necessary settings for your ad. These settings are important as they help to customize your ad and make it more suitable for your website design:

    • Name – The name of your ad. Enter a unique name here – it will be easier to manage multiple ads in the future.
    • Ad size – It’s a very important setting, because ad sizes make a great impact on the view of your website. It’s recommended to select Responsive if your website is adapted to all devices.

    4. Press Save and get code. A new window with your Adsense code will appear. Your code snippet that you need to add to the website to connect the website to the AdSense platform will look similar to this code:

    5. Select and copy the code – you will need it in the next step.

    If you need a more detailed guide on how to create an ad, see the official Adsense Help page.

    Step 3 — Adding AdSense to WordPress

    Option 3.1 – Using Plugins

    One of the easiest ways to insert Google Adsense to WordPress is by using plugins. There are many different plugins created for this purpose. Below you can find the three most popular plugins you can install from the official plugins directory:

     

    Google AdSense

    Google AdSense, also known as Google Publisher plugin, is an official AdSense plugin written and managed by Google. This plugin helps you to easily add AdSense to your WordPress website due to its easy-to-use interface.

    Advantages:

    • Easy to add AdSense to your WordPress website
    • Activate mobile-specific ad layouts on the go
    • Easy point and click interface for a quick management of ads

    Ad Injection

    Ad Injection is another great plugin through which you can integrate AdSense with your WordPress blog or website on the go. This plugin is not just limited to AdSense but can also help you with integrating ads from other networks too. Not only that, AdSense allows you to control the visibility of ads – you can adjust them by your posts length or age and IP address of the visitor.

    Advantages:

    • Allows you to automatically inject adverts without modifying your posts
    • Helps to perform split testing by allowing you to define multiple ads for the same ad space
    • Can help you in injecting anything, including the likes of a common header or footer, tracking scripts, social networking button and others

    Disadvantages:

    • Complicated to use and non-user-friendly
    • Last updated 3 years ago
    • May be non-compatible with the latest WordPress version

    Ad Inserter

    Ad Inserter is a powerful plugin that would help you with inserting AdSense ads on your WordPress website.

    Advantages:

    • Easy to display ads on various locations
    • Comes with an automatic display option that allows the plugin to automatically choose locations
    • 16 code blocks

    Disadvantages:

    • At times, might refuse Google AdSense responsive ads.

    Option 3.2 – Inserting Ads Manually

    Another way to insert an ad into WordPress is by creating a new widget. The biggest advantage of this method is that you do not need to install any plugins. Follow the steps below in order to create a new widget and insert the Adsense code:

    1. Log in to your WordPress dashboard, navigate to Appearance -> Widgetssection.
    2. To add a new widget, select Text and drag and drop it to the place where you want to display the ads. In this example, we decided to put Adsense to Sidebar, but you can choose any part of your website. Press the Add Widget button.
    3. Fill the Title and Content fields.
    • Title – Enter the name of your widget (you can leave it empty).
    • Content – Paste the copied code from Google Adsense website.

    Once you are done press the Save button.

    Best Practices for AdSense Projects

    Now that you are all set up you should get a quick overview of some of the best practises as Google AdSense platform will take no violations. They are extremely strict with any breach of policy and it is very difficult to get a suspended account unsuspended. Here are a few best practices that could help you in getting more clicks on ads, thus helping you in earning better.

    Research
    • Research well before getting startedIt is highly recommended to follow AdSense rules in order to get your AdSense account approved quickly. Further, it is also suggested to select a high paying niche for your blog, which means selecting a niche that is often researched by people on Google.
    Ad placement
    • Proper ad placementThe position of the ad on your web page determines your revenue to a great extent. You should place ads on the top of the page, using both images and text ads. If placing an ad on a page with a lot of content, you might like to include an ad between the texts too.
    Ad sizes
    • Choose the right AdSense sizesIf your main aim is to earn via AdSense, it is highly recommended to choose the size of ads carefully. Some of the sizes that work best include 336×280, 728×90, and 160×600.
    Category Blocking
    • Track category performanceMake the best use of category blocking feature of AdSense and avoid placing ads that belong to the categories that do not yield better earnings.

    Here are a few extra do’s and dont’s that you should keep in mind in order to get maximum benefits:

    Do’s

    • Make the best use of AdSense heatmaps in order to better understand the psychology of your visitors and design your website accordingly. This will help you get more clicks, and thereby more income.
    • Write good and engaging content that would attract users to your website and would thus increase the chances of getting clicks on your ads.
    • Conduct Google experiments to split-test: what is working for your website and what is not.
    • Make sure that both your website and the ads are responsive.
    • Keep yourself up-to-date with their latest policies.
    • Contrast and design your ad styles in accordance with your website theme.

    Dont’s

    • Don’t overuse AdSense and don’t clutter your website with too many ads as this will bounce off the visitors, thus minimizing your earnings.
    • Don’t click on your AdSense ads even by mistake and don’t ask your family members or friends to click on them for you. Fraudulent clicks will get your account banned.
    • Avoid making use of texts like ‘Click on ads’. Such texts are considered as forcing users to click on your ads and is against Google AdSense policies.
    • Don’t place ads on empty pages.
    • Avoid bringing automated traffic to your website at all costs.
    • Don’t make multiple AdSense accounts with the same payee name.

    Final Words

    This was a very simple introduction to Google AdSense. I wanted to help beginners and bloggers with a quick how to guide for adding AdSense to your websites so that you can start to make money online.

    Making money is easy when you only have to write good content, Let the AdSense platform take care of the advertising and payment a truely passive way of making money online.

    Now I hand over to you my friends and you can start taking action and getting paid by Google to write helpful and informative content that your readers will enjoy.

    Follow their guidelines

    Google owns the platform

    They are strict and there and take violation seriously.

    Keep the above in mind and remember that now you are a publisher of content and you will be paid to do just that. Google AdSense is easy to integrate with your website and you can do it either way- manually or with the help of a plugin. Keep in mind the above-mentioned pointers and keep making money online.

     

    Understanding and using the Bounce Rate and Exit Rate

    Understanding and using the Bounce Rate and Exit Rate

    Understanding and using the Bounce Rate and Exit Rate

     

    With the great metrics it provides, Google Analytics can be a very powerful tool in helping you understand your website’s overall performance.

    However, if you don’t know what the metrics mean and how they are different from one another, you won’t be able to understand the data that’s right in front of you and take advantage of it.

    In this article, we are going to dissect the Google Analytics metrics that represent the movement of people across your web pages: the bounce rate and exit rate. More specifically, we will answer such questions as what these metrics are, what’s the difference between the bounce rate and the exit rate, and how you can make the most of them to improve your website.

    Let’s start by taking a look at the two metrics.

    What’s a bounce rate?

    The bounce rate is a web traffic analysis metric that represents the percentage of people who came to a specific page on a website and left straight away without going to any other pages within the website.

    Let’s take a look at a simple illustration of a bounce:

    Illustration of a bounce rate

    As you might have already guessed, the more people leave a web page in such a way, the higher its bounce rate will be. For this reason, the bounce rate is often referred to as the “percentage of single-page sessions”.

    What’s an exit rate?

    The exit rate is another web traffic analysis metric that represents the percentage of people who visited some pages of your website and then left from a particular page. This metric shows you where various visitors decided to cut short their journey through your website.

    Once again, let’s check out another simple illustration:

    Illustration of an exit rate

    Checking the bounce & exit rates in Google Analytics

    You can analyze the individual bounce and exit rates of each page by going to Behavior > Site Content > All Pages.

    Bounce rate and exit rate in Google Analytics

    You can really make the most of the provided data under All Pages. But keep in mind that you shouldn’t focus on the numbers as much as on the bigger picture – your website’s business goals.

    In addition, you can check the bounce rate from different channels and sources under Acquisition for additional info.

    What’s the difference between bounce rate & exit rate?

    While the exit and bounce rates might sound similar, the two metrics provide you with completely different data. Even Google’s definition of bouncing and exiting can be quite confusing, so let’s point out the main differences between the two metrics, just to be clear on the subject:

    • Bouncing refers to the first page people land on while exiting refers to the last visited page in a session.
    • Bouncing refers to one-page sessions while exiting isn’t limited by the number of pages.
    • Bouncing is usually seen as a negative metric.
    • Exiting can be negative and positive depending on the context of a page.
    • All bounces are also exits.

    In general, these metrics inform you how many people are visiting your web pages and the duration of their stay, as well as how effectively your pages move people toward your conversion goals. They can let you know the effectiveness of individual pages as well as of your site’s conversion funnel, but how exactly are these metrics measured?

    Calculating the bounce & exit rates

    Google Analytics uses the following formulas to calculate the bounce & exit rates:

    Bounce rate and Exit rate formulas

    Now, let’s take a specific example of a user journey of three visitors (1, 2 and 3) through three web pages (A, B and C) and calculate the two rates:

    Example of a Bounce and an Exit

    Visitors 1 and 2 land on Page A. Visitor 1 moves on to Page B, while Visitor 2 leaves the site – bounces. So, the bounce and exit rates for Page A are at 50% since half of its visitors left.

    Then, once Visitor 1 lands on Page B, Visitor 3 enters the page. Visitor 1 is continuing navigating the site and can no longer contribute to the bounce rate. However, Visitor 3 leaves after seeing just one page, taking the bounce rate of Page B to 100%. The exit rate remains at 50% since half of the visitors have left.

    Lastly, Visitor 1 continues to Page C, then makes an exit. Since no new visitors entered the site at this point, the bounce rate for Page C is zero, but with Visitor 1 leaving the site completely, the exit rate amounts to 100%.

    What can the bounce and exit rates be used for?

    When looking at the bounce and exit rates, it’s best if you consider the context of each page.

    As a rule of thumb, use the bounce rate to learn how effective your landing pages are at getting visitors to further explore your website, and analyze the exit rate to find out how well each one of your pages is performing in terms of funneling users to the page where they convert.

    It must be mentioned that it’s better to analyze the exit rate versus the bounce rate in terms of the user down-funnel journey, since bounces are only counted when visitors land directly on a page, while exits take all website exits into account. After all, it’s all about conversions.

    There are a number of ways to cut down the bounce and exit rates on important web pages, such as offering an incentive to continue browsing or recommending closely-related content, to name a few. Let’s talk a little bit more about that.

    Reducing the bounce & exit rates

    First off, there is no such thing as the perfect bounce and exit rate! Let’s be clear on that. It’s all about, that’s right — context. So don’t just go chasing numbers.

    Start by looking at some areas of your website that may influence the bounce rate and the exit rate, such as:

    • Homepage – the gateway to your site
    • Content – easy to read and relevant to the search query
    • Multimedia – distracting or self-loading elements
    • Page load time – critical for mobile users (and not only)
    • Social ads – in sync with the landing page
    • Links – open in new tabs
    • Live chat option – alleviate user uncertainty
    • Design and navigation
    • CTA – encouraging or actionable

    Run split tests to evaluate different versions of the same page to see which ones resonate better with the visitors. Focus on pages that push visitors to convert. Plus, you must first understand the purpose of a page and what visitors expect from it.

    Take an e-store, for example, where the user journey usually ends on an order confirmation or thank you page. As a result, these pages have a lot of exits. But why not add a “related products” section to encourage shoppers to continue browsing? Moreover, give shoppers all relevant information upfront before they click “Add to Cart” and optimize the checkout process to decrease the number of exits.

    Another thing you can do is install heatmap or real-time tracking software like Hotjar and Inspectlet to better understand what exactly people do on your web pages and your site in general.

    Heatmapping service

    With that knowledge, you can find out what’s preventing them from taking the next step.

    At the end of the day, your conversion goals and user behavior help you decide which metric you should rely on. By segmenting your data and targeting specific pages, you’ll be able to fix problematic areas in the context of your site’s structure and design and increase the time people spend on your site.

    It also must be said that not all websites are made up of multiple pages. With the growing use of mobile devices, desktop apps are fighting an uphill battle for popularity with single-page web apps. The latter are far more easier to update, their use is more convenient, and, on top of that, they are accessible from all devices.

    In fact, Google has started taking one-page sites into account and is gradually updating their search bots to display such sites in SERPs for relevant queries.

    Let’s look at single-page websites a bit closer in the context of measuring the bounce rate.

    Bounce rate for single-page websites

    Single-page websites or applications are exactly what the name suggests. They are uncomplicated, dynamically-updated pages designed to provide details that encourage visitors to move toward the conversion goal.

    For example, take Facebook. It’s infinite scroll technically means that no one is going to a second page and that it must have a high bounce rate. And yet it doesn’t.

    Setting up event tracking in Google Analytics

    Event tracking in Google Analytics is a great way to discover what visitors are actually doing on each page and which elements are pushing them to make an exit.

    Google Analytics has to have certain settings to properly track the bounce rate. Your bounces will be off the chart if you don’t set up event tracking, regardless of whether your website consists of a single or multiple pages.

    So, to know what visitors are doing on your site, you need to set up an adjusted bounce rate by adding the following tracking parameters via Google Tag Manager:

    • Time on site. Visitors that make it past the set “time-on-site” threshold won’t contribute to the bounce rate.
    • Page view. Single-page sites don’t work well with page-view-based tracking, so you’ll need to initiate virtual pageview tracking. You can set it up for certain clicks that are defined as page views by you, or once visitors scroll to a certain section tagged as a separate page. This also works for multi-page websites.
    • Click. Add this parameter to anchor texts, images and buttons to track interactions and find the best way to drive clicks to your web pages.
    • Event. The automatic activation of lightboxes, modals or sliders can also be tracked.
    • Scroll depth. Learn how far down the page visitors are scrolling to see their level of engagement.
    • eCommerce. Attribute sales to elements in your click and event tracking by adding this parameter.

    Adding these tracking parameters to collect large amounts of data can help you understand what design changes to make on your single – or multi-page website, what technical updates to implement, and how to get more visitors to convert.