[section]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

[/section] [ux_slider hide_nav="true" nav_pos="outside" arrows="false"] [ux_image id="12509" image_size="medium"] [ux_image id="12507" image_size="medium"] [/ux_slider] [section]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

[ux_image id="12569" image_size="original"] [divider align="center" width="95%" height="1px" margin="3.4em" color="rgb(46, 189, 89)"] [/section] [section]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

[ux_image id="12568" image_size="original"] [divider align="center" width="95%" height="1px" margin="3.4em" color="rgb(46, 189, 89)"] [/section]

This article is a little bit of love for the Flying Scripts plugin, and a real world example of how simple it is to speed up your website with low effort.


Website Speeds - The Problem

The bane of any web designers day is getting the elusive green scores in GT Metrix. You can have a optimised website with green lights in all areas, on super fast host, but your time to loading is around 4-5 seconds. What gives?

It's those damn JavaScript files! The issue is that, when a browser is loading all the little files that make up a page, it'll 'unpack' them as they are received. This can create slow loading websites, and to rub it in further, its normally non-essential scripts that aren't needed for your website to function (EG, Google Analytics, Stripe.js, YouTube, Google Maps).

So What can be done?

Well we can defer the files, so they 'unpack' after the page loads. This makes for a smoother experience for your users, but you still have long page load times in Google and GT Metrix. This isn't great for SEO in a world where page speed really matters.

Enter Flying Scripts

Flying Scripts is different, because the files are downloaded, but they are not 'unpacked' by the browser until the user interacts with the website in some way. This means that those multiple analytics and tracking scripts that do not add to the function of the page, do not load until they are called upon by a user.


A Real World Example of Speed Savings

So I did a beautiful website for Need to Pass Quick, a driving agency in the UK, using Oxygen. It outputs clean code, but you can see that the load time was nearly 5.5 seconds for the homepage, despite being hosted on Cloudways and cached through Cloudflare.

Before Flying Scripts

Load time of 5.4 seconds

NO FLYING SCRIPTS Need to Pass Quick AFTER Gtmetrix

With Flying Scripts

Load time of 2.9 seconds! That's a saving of 2.5 seconds!
Remember - I have performed no other tricks or optimisations - just installed and configured Flying Scripts!

WITH FLYING SCRIPTS Need to Pass Quick AFTER Gtmetrix

So as you can see, Flying Scripts works amazingly well and is very simple to use. All you do, is enter the js files you wish to load through the plugin, and it does the rest. In my example above, I added the Google Analytics and Stripe js files, since they are for tracking and security checks only. These two script made such an enormous difference to my website load time!


I definitely recommend the plugin! Let me know how you get on and how much time to you save!

FireShot Capture 005 Home City Drive School Driving Lessons citydriveschool.co .uk 1 e1600956179996
[section] [ux_stack distribute="center" align="center" gap="1"] [button text="Homepage" letter_case="lowercase" style="link" icon="icon-angle-down" link="#homepage"] [button text="Services" letter_case="lowercase" style="link" icon="icon-angle-down" link="#services"] [button text="View website" letter_case="lowercase" size="medium" expand="0" link="https://ctkmedia.co.uk/" target="blank"] [/ux_stack] [/section] [section] [row] [col span__sm="12"] [scroll_to title="Homepage" link="#homepage"]

CTK Media are a small professional company in Yorkshire who specialise in all things video and motion. The videos they create ooze personality, and it was important to create something that would reflect this. We went a bold, professional route that is hyper modern and very graphic. There are a lack of decorative items on this website to ensure that the videos always take the centre stage.

CTK Media Homepage

[ux_image id="12255" image_size="original"] [divider width="95%" height="1px" margin="3.5em" color="rgb(46, 189, 89)"] [/col] [/row] [/section] [section] [row] [col span__sm="12"] [scroll_to title="Services" link="#services"]

Services page

[ux_image id="12258" image_size="original"] [divider width="95%" height="1px" margin="3.5em" color="rgb(46, 189, 89)"] [/col] [/row] [/section]

[section]

[row v_align="middle" h_align="center"]

[col span="10" span__sm="12"]

Summary

Website: www.smcbikes.com
Systems: WordPress, WooCommerce ~(80k Products), WP-Allimport, Flatsome

[divider align="center" width="100%" margin="3.0em" color="rgba(9, 2, 25, 0.14)"]

[/col]

[/row]
[row label="Home"]

[col span__sm="12"]

SMC Bikes Homepage

[ux_image id="12246" image_size="original"]

[divider align="center" width="100%" margin="3.0em" color="rgba(9, 2, 25, 0.14)"]

[/col]

[/row]
[row label="Servicing"]

[col span__sm="12"]

Motorcycle Servicing Home

[ux_image id="12248" image_size="original"]

[divider align="center" width="100%" margin="3.0em" color="rgba(9, 2, 25, 0.14)"]

[/col]

[/row]
[row label="Ecommerce"]

[col span__sm="12"]

Ecommerce Product Filtering

[ux_image id="12249" image_size="original"]

[divider align="center" width="100%" margin="3.0em" color="rgba(9, 2, 25, 0.14)"]

[/col]

[/row]
[row label="Product Page"]

[col span__sm="12"]

Ecommerce Product Page

[ux_image id="12250" image_size="original"]

[divider align="center" width="100%" margin="3.0em" color="rgba(9, 2, 25, 0.14)"]

[/col]

[/row]

[/section]

Roseheart Jewels Homepage

I built a modern, sophisticated website that would be the central hub for Roseheart Jewels, a company that specialises in selling custom built jewellery and gemstones. A lot of emphasis was placed on the look and feel of this site, to ensure it was professional and would appeal to customers.

[button size="medium" style="primary" text="View website" link="https://www.roseheartjewels.co.uk/" target="blank"]

roseheart new grab 2

Crazy Candles Homepage

The ask was to build a lightweight, fun fresh website with tons of personality and Yorkshire charm that would convert.

crazy candles old grab 1

Here is something that really gets my goat. Websites with bad Visual Hierarchy. Here is a really great post that goes through the basics.

It's a great read, so I suggest you give it the once over! At it's core, however, the article talks about how as designers it's our job to use colour, texture and shape to portray the function of a website's interface. People are visual thinkers at heart, and process visual data much quicker than reading text. As designers, it's our job to ensure that the design decisions we use make sense and do not serve as a barrier to to whatever it is a user came to your website to do!

So what the hell am I talking about when I mention Colour Context? The foundation of good colour context suggests that we use repeatable design decisions throughout our website in a way that makes sense.

ZmPNpH7

This design was my attempt to visually explain how I would like to see a Netflix or LoveFilm type web app to work.

(more…)

(more…)

This is one of my tee designs. I've made a bunch of them but recently I decided it's about time I got these up on this here site.

(more…)

coming soon...

I've been a long term fan of Hantu and their work, so being able to collaborate was a bit of an honour on my part.

Hantu banner

You may be asking what on Earth I mean by 'refit'. Well this website, like a couple others I've worked on started life out as a website that someone else had put together.

(more…)

Just a little something I'm working on. A whole bunch of these bad boys. And they're starting to look pretty smexy.

crossmenu
Let's Chat!