Author: Neil Matthews

In this video post I want to show you how to optimize your fonts and load them locally. In this tutorial we will show you  how to speed up font loading.

The problem is that google fonts are loaded from remote servers for each page load, they are not cached or set with headers, if we load them locally we can speed up page load.

Video Tutorial

Plugin Used

We use the following plugin in this video:

https://wordpress.org/plugins/host-webfonts-local/

Wrap Up

This does not work with every theme so please test thoroughly after installing this plugin

If you need help speeding up your WordPress site check out our services.

Photo Credit: Andrei! Flickr via Compfight cc

What Is Minify?

In this post I want to answer a question, what is minify?

If you have taken my free mini course How Slow Is your Site you will probably have seen that one of the results is to minify javascript and CSS.  In this post I want to explain what Minification is and why you should be doing it.

Minify or Minification

Minify sometimes called minification is teh process of compressing javascript or css files.

These files are often static and once written they don’t need to be touched,

Write a script For People To Read

When you are developing a script of CSS style sheet you need to code it in a human readable format.  Lots of white space and  carriage returns.

Tabs to indent things to make sense BUT all the space and carriage returns also add invisble characters to your code.  For example a carriage return adds the control+M or ^M hidden character to your file.

This takes up space and adds time to your download.  See this diagram, the red boxes are all hidden characters that add size to your file.

Now this makes 100% sense when developing your code it needs to be human readable, but when you package up your theme or plugin and deploy it for people to run, we don’t need that overhead.

Deploy That Script For Computers To Run

Computers don’t need that white space,  that’s a human weakness, and the reason the computers will rise up and become our digital overlords.

When the scripts is ready for prime time is should be compressed and the red boxes removed.  This is what a compressed file would look like, and you can see from the graphical representation the same information is conveyed in less space.

You may think a few characters is not a big deal, but multiply all the scripts and stylesheets from all the plugins and theme on your site and this can add up to a lot of hite space that needs to be downloaded for each site visitor.  It created a real load on your site.

Not All Scripts Are Deployed Minified.

Our problem begins.  Not all scripts and style sheets are not minified.

Why Minify?

We need to minify for the following reasons

• The file is compressed
• This reduces  size
• The file is quicker to load

We need to speed up our site to keep the SEO gatekeepers at Google happy and for the real people visiting our sites.  Slow sites are very annoying and will make people abandon carts of leave your site in frustration.

How To Minify Files

There are a couple of ways you can minify the files on your site.

Manually

There are a number of tools out there to compress and minify your scripts manually.  I like this one

https://www.minifier.org/

Copy the contents of the script or CSS in question ( again check my mini course you will be give a list of files that need to be minified). paste them into the tool and download it.

Replace the uncompressed file with the minified file.

This may be a bit much for normal site owners, so there is always a plugin …

Plugins

Of course there are plugins out there to minify your scripts.

• w3-total cache
• Autoopotimize
• WP Rocket– hint use this one it costs $49 but it’s worth it

Add one of these to your site and check the documentation on how to minfy your sites.

W3-Total-Cache is complex, but WP-Rocket is super simple with two check boxes

Careful now, it can break things!

Once you have minified check your site, this process can sometimes make things break.

Locate which scripts or style sheet is acting up and exclude it from the minification process.

Wrap Up – What Is Minify?

Minification should be one of your performance tuning ingredients.  Performance tuning is a recipe, you need a pinch of this and a cup of that.  If you have minification, caching, CDN and optimized images it’s gonna taste real good.

If you would like me to speed up your slow loading site, get in touch and I’ll send you a no obligation quote.

Photo Credit: rvandermaar Flickr via Compfight cc

I’ve created a new (free) mini course where I teach you how to create a baseline on the speed of your WordPress site.  It’s called “How Slow Is Your Site”.

A baseline is an objective score on how fast/slow your site loads as opposed to a subjective one; it feels like it is loading slowly.

Once we have that baseline we can do some performance tuning work and test to see if things are getting faster with our efforts.

The course takes less than 30 minutes to complete and the outcome is an understanding of why your site is loading slowly.

This information can then be use when you start to performance tune and speed up your site (or sent to your local friendly WordPress consultant to do if for you).

Sign Up For The Mini Course

To get instant access to the course complete the form below

[gravityform id=”138″ title=”false” description=”false”]

Photo Credit: *_* Flickr via Compfight cc

How To Redirect To Another Page After A YouTube Video Finishes Playing

I was asked by a client if this was possible to redirect to another page after a YouTube video finished playing (and it is).  In this post I will teach you how to redirect to another page after a YouTube video finishes playing.

The example below from my homepage video show that.

What It Does

Once a video is started code is added to your WordPress site that monitors for the completion of the video.  At that point more code is activated that tells your browser to redirect to another page of your choosing, in my use case I want to send people to the work with me page to request a quote.

Why Do It?

You can add a call to action at the end of your video such as saying “Get a no obligation quote now” and rather than having people click on a button or link, they are automatically taken to that page.

So people see your video message and they are taken directly to another page where they can complete an action.  Dynamic call to action, in action 🙂

How It Does It

YouTube has an API which we can tap into.

The videos on your site send signals that can be accessed and one of them is video completed.  We monitor for this action with some javascript code and on this event trigger a javascript redirect with the window.location function to redirect to a URL of your choosing.

The Code

To make this work, embed the YouTube video in a post or page in the normal fashion via an iFrame.  In the code of your website just before the closing /body tag add the following script

If that last sentence made absolutely no sense scroll down the the wrap up section and check out the done for you part.

Video Embed

<iframe class="player" src="http://www.youtube.com/embed/sOS9aOIXPEk?autoplay=1" frameborder="0" width="560" height="315"></iframe>

Script
<script>
var tag = document.createElement(‘script’);
tag.src = “https://www.youtube.com/iframe_api”;
var firstScriptTag = document.getElementsByTagName(‘script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
// first video
player = new YT.Player(‘player’, {
events: {
‘onReady’: function(){ alert(“Ready!”); },
‘onStateChange’: onPlayerStateChange
}
});
}

function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {

window.location = ‘https://dev.neilmatthews.com/wordpress-technical-support/’;
}
}
</script>

Example

Here’s my home page “work with me” video with a redirect.

Wrap Up – How To Redirect To Another Page After A YouTube Video Finishes Playing

Done for you, if you would like to to setup a video from YouTube on your WordPress site that redirects to another page after it’s completed click on over to the Work With Me page and get a no obligation quote.

Photo Credit: Mitchell Haindfield Flickr via Compfight cc

Doing the seo dance How To  Redirect To Another Page After A YouTube Video Finishes Playing

WP Rocket Review

I do a lot of performance tuning work for my clients.  Speeding up a slow loading site is one of my favourite type of job. Here is my WP Rocket review.

In the past I would use the W3 Total Cache plugin, but I’ve moved over to WP Rocket, this post explains why I think this is the best cache plugin out there.

Why Load Speed Is Important

There are two key reasons why you need to have a fast loading site

1. Site visitors; if your site loads slowly, visitors will become frustrated and click away, there will be no add to cart
2. Google; part of the ranking algorithm is site load speed, if you don’t load quickly, Google will reduce your rank.

Is Your Site Running Slowly?

Jump on over to GTMetrix and put your sites domain name into the tool and analyse.  If you score is not As and Bs  you have a problem.

https://gtmetrix.com

What Is A Cache Plugin

At it’s most basic a cache plugin loads up your website pages and makes a static version of them.

When a site visitor comes to your site, the cache plugin serves up this pre-built page rather than serving up a page generated for each visitor.

Serving up a static version of a website page is much faster than running scripts, accessing the backend database and serving up the page.

WP Rocket ( and the other cache plugins) do this but they also offer more services than just caching.

Why I’m Converting To WP Rocket

After using this plugin on a couple of client projects, I’ve also installed it on my own sites.  It’s really good.  Here are the reasons I’ve stumped up the cache cash to use WP Rocket.

I used to recommend W3 Total cache, but WP Rocket is better.

It Does All The things The Other Plugins Do And Then Some

Just to get this out of the way, WP Rocket does page caching, minify of CSS and Javascript, browser caching and CDN support.

These are the standard features of all cache plugins, but WP Rocket has some extras and they are why I’m swapping.

Super Simple To Setup

Unlike other plugins (I’m looking at you W3 Total Cache), it’s really simple to setup.

You step through a series of pages and click on check boxes to enable features in the plugin.  There are big warning boxes if you click on something that could break your site.

You don’t need to know which expired cache heading you need to select, just click on a button.

Separate Desktop & Mobile Cache

This is huge.  It’s a problem I see a lot with the other cache plugins and I often have to disable caching on mobile devices.

Here’s the issue.  Site visitor A visits your contact page on desktop and a cache is created.  The cache is of the css and setup for a desktop visitor.  Visitor B visits your contact page on their phone, the site says there is a cache of that page and serves that up to speed up the process BUT is serves up the desktop code to a mobile.

The page looks terrible, it does not render for a phone and visitor B leaves your site confused and unable to contact you about a possible project.

Does The Job Of Five Plugins

WP Rocket replaces five other plugins that I usually use to speed up sites,  Fewer plugins means fewer resources used which is good performace tuning

1. W3 Total Cache – cache plugin
2. Autooptimize – Javascript and CSS optimisation
3. WP Optimize – database optimization plugn
4. Resmush IT – image optimisation
5. Jetpack – it replaces the jetpack lazyload image optimisation and CDN
6. Heatbeat Control – the plugin

One Plugin to rule them all and in the performance bind them – JRR Tolkien

Fixes Nagging Issues With Common Remote Scripts

One of the really annoying things I see when optimising sites is that common scripts we add to our site are not optimised.  This includes Google analytics and the Facebook pixel.

WP Rocket realised this was a problem and it has a feature to optimise and serve these scripts locally.

Built In Image Optimisation

WP Rocket integrated with the Imagify service.  This is the material for another blog post, but in short, you can oslleslly compress your images inside the

Heartbeat Control

Another plugin can be discarded with WP Rocket.  It has in built Heatbeat API control.

The WordPress Heartbeat API is a great feature that provides real-time communication between the server and the browser when you are logged into your WordPress admin panel. It uses the file /wp-admin/admin-ajax.php to run AJAX calls from the browser. By default, AJAX requests are sent every 15 seconds on post edit pages, and every 60 seconds on the dashboard.

Controlling the heartbeat API limits how often admin-ajax is run.  The admin-ajax can take a lot of time to load.

Super Charge WP Engine

If you use WP Engine for you hosting, many cache plugins are disabled.  They have built in caching out of the box.

WP Rocket is compatible with their server level caching and adds even more speed to a WordPress site hosted by wpengine.

JQuery Not Optimized

I often disable javascript optimisation on sites that use Jquery for things like home page sliders, if jquery is loaded in the footer or optimized it breaks jquery and the slider will not work correctly.

WP Rocket allows us to optimise JS but ignore jquery with the click of a button – genius.

My Results

Here are my scores from GTMetrix, I’m really happy with the results, the B score from YSlow is due to me not having a CDN in place, I’m currently getting that in place so it will be much faster soon..

Wrap Up – WP Rocket Review

If you want a really good cache plugin for your site then I recommend WP Rocket.

If you need help speeding up your WordPress site I have a fixed price performance tuning package.  Get a quote to see how much it would cost to speed up your WordPress site.

Photo Credit: Greenwich Photography Flickr via Compfight cc

Doing the seo dance WP Rocket review.