Website Speed Tips

6 Tips to Increase Your Website Page Speed - Part 2

Looking to get a better page speed on your website? Look no further...these tips will get you moving.

This is part 2 of a two part series, read part 1 here.

Upgrade your server to HTTP/2

HTTP/2 has been a long time coming, for too long we’ve been building on top of a legacy protocol, this means a lot of our techniques have been put in place because we’re working with HTTP/1.

One of the many benefits of HTTP/2 is that we can now download assets in a much more fluid way, HTTP/1 forced us to download assets in batches, this was useful to keep connections open but meant we’d wait for the largest file to finish before we could move onto the next batch.

HTTP/2 has done away with this meaning that we can now download assets as soon as we finish any other asset currently being downloaded, this means that techniques like concatenation of files and turning images into sprites are now not best practices and should be avoided, favouring more smaller files which can be downloaded and displayed to the user as and when they get delivered.

HTTP/2 does have some requirements, one of which being browser support, the other being that it must be used in conjunction with a valid certificate. Both of which aren’t a problem to get over to help you reap the rewards of HTTP/2.

HTTP/2 has other huge benefits, Daniel Stenberg has written http2 explained if you’d like to dive in deeper.

Optimise for the critical render path

If you’ve use Google Page Speed Insights, you’ve seen this phrase. This is a much more complicated challenge than anything else we’ve discussed so far, but I’ll outline what we’re trying to achieve here.

The critical render path defines the assets required for the browser to do it’s first render, this means everything the browser first sees when scanning the initial HTML that’s delivered. The challenge of optimising the critical render path is all about prioritising your assets to get that first render as quick as possible.

This means we may want to delay our JavaScript completely, we may even want to delay a large section of our CSS and only focus on what the user can see which, if they are on mobile, could be as little as the header and some initial content. The goal here is to try and make our critical render path so small, that even on a very slow network, we could get for that ever ideal goal of our first render happening in under 1 second.

The reason this is a more complicated solution than anything we’ve discussed previously is that after we’ve delayed all those assets we then need to pull them in in a way that isn’t jarring for the user and doesn’t impact the rest of their experience. We still need all these assets delivered quickly and giving to the user without them noticing.

Ilya Igrigorik has done amazing work on the critical render path and you can see his video here.

Increase your perceived web performance

Okay, so this isn’t going to make your website faster on any metric, but it can have just as much impact on your user experience.

Perceived web performance is all about how fast your website feels as opposed to how fast it actually is.

There are a few accepted ways of increasing your perceived web performance:

Sleight of hand

I call this Sleight of hand because it works similar to how a street magician can steal your watch, we are essentially distracting the user while we load the assets to the website. The most simple way of doing this would be adding in some animation while loading in a new section of the website, if our animation takes 2 seconds and it takes us 1 second to load in the new thing, the user may not even realise it’s taken any time before they can interact with the new part of the website. If this seems pointless to you, the web already uses this a lot and you’re probably not even noticing it.

Skeletons

This is a technique that is heavily used by social media website such as Facebook, Twitter and Instagram, the technique here is basically just loading in something that looks like the asset the user is trying to get at. In the case of Facebook, who use this heavily on your timeline, it’s a dummy post, your brain is already expecting to see a post so by seeing this skeleton in place, your head is already partly accepting the fact that the page is loaded. This is really effective and although has no increase to the actual page speed, it can increase your conversion rate massively.

Keep ‘em busy

This should be saved for when we’ve got a long wait that we can’t speed up for some reason, give the user something to do. The gaming industry will often give users a mini game to play while they load the main game. This could be a simple version of what they’re going to be playing or a tutorial. We could just give the user some information, if we’re a holidays website, we could display the weather while we’re doing some heavy processes that can’t be sped up for example.

Everything I’ve said about are all web performance techniques that actually work, I’ve implemented them, I’ve seen the results and I can vouch for them.

I’d love to hear your stories implementing some of these results, equally, I’d love to hear some of your web performance techniques that do or don’t work, so please reach out in the comments.


React Javascript Series

React Series Part 1: Why Use React, What Is It?

This blog post gets you to grips with the features, nuances, and benefits of using the React library.

Why use React? What is it? Well, React is often compared to frameworks such as AngularJS and Ember, which is a common misnomer and can set you off on the wrong foot when you want to learn it. React itself is only the view layer of an application. In a nutshell, React is a JavaScript framework for rendering HTML written in JavaScript / JSX in its own virtual DOM. That’s all it does. And it does it well. In this blog series I will describe the features of the React library, and how to write a maintainable, modular application with state management.

Components and JSX

A React Component is a specific piece of the User Interface (UI), and contains all of the logic regarding that component inside of it. A React Component, at it’s simplest, is a JavaScript Class with a render() method, which describes exactly how you want a piece of the DOM to be presented. This is an important distinction to make; the elements you decide to create are not real html elements, they portray what you want your DOM to look like at some point. Below is an ES6 instantiation of a React Component;

import React from 'react'
class HelloWorld extends React.Component {
 render() {   return (     <p> Hello World! </p>   ) }}

The above example depicts a component at its basic level. The first line imports the React class from the React library. On the third line, a class is created as an extension of a React component.

So what’s line 5?

Line 5 is where you will initiate a constructor. The constructor is a special method for creating and initalising objects that the class creates. If you instantiate a constructor, you need to make sure to pass super(), or the props, more on props coming up, returned will be undefined, and will present you with bugs. The constructor is the place in which you initialise state and to bind the methods of the component to this. If there is not state or any methods that you wish to bind; then you won’t be needing a constructor at all. Make sure to always bind methods to this in your constructor, or they will be undefined when they are called. This is a common React ‘gotcha’, and is worth noting.

Props

What are props? The props are the properties of a component, its options. Components are very similar to arbitrary functions, and props can be seen as that components input. A component must never change its own props. They are immutable. This is the job of a components’ state, which will be discussed in the next section. This a strict rule that you must remember when developing your applications, as it will produce side-effects if not followed. Whilst this is true, components are also responsible for determining their child components’ props.

Props - PropTypes

Proptypes are initialised in the same file as components themselves, and define the properties that the component is to expect when called. PropTypes are types of data. Number, string, object, function, etc are all variations of the propType you can use. PropTypes are essentially objects that say ‘for each of this components’ properties, I expect to receive these data types’

Tip: you can use React Developer Tools to view the properties of a component, as illustrated below in a screenshot of the React website:

As you can see, The developer tools also make it easy to find your components in the virtual DOM.

State

What is state? The state of a component defines how a component renders, and how it behaves before, during, and after user interaction. State is the piece of the React pie that allows your components to become dynamic, and also lets you anticipate how to ‘React’ to a user’s input. A state has a default value, for each key value pair, before a component mounts. These values can change over time, and this is mostly due to user interaction. The state object is a representation of a component in a place in time. A component has no business in meddling with child components’ state, unlike props.

Tip: you can again, use React Developer Tools to view the state of a component, as illustrated below in another screenshot:

So, what’s the difference between props and state?

The main responsibility of a component is to render data into HTML. With that in consideration, the props and the state together represent the raw data that the HTML output derives from.
The props and state is essentially the input data for the render() function of a Component.

Why Use React?

So now that we have a rough idea of what React is, why should anyone use it? There are countless reasons to use this library.

One of the best features of React is how quickly you can get your application up and running, once you’ve configured your workflow and build tools. Because React uses JSX, it lets your brain relax from the mental stress of context switching, which is necessary in typical application development with other libraries.

React is abstract. Because of this abstraction, it lets you think of your application in smaller chunks, and how those chunks behave. This also gives your brain a rest; as you’re not thinking about the whole pie; only a slice.

React has its own Developer tools. As illustrated earlier in this post; it allows you to follow the state of your components, inspect its props, and debug issues whilst you’re developing React applications.

React makes use of the latest and greatest JavaScript features. These include the use of let, const, object spread ({...data}) literals etc. allowing you to utilise state-of-the art features of the latest iterations of JavaScript, assuming you are running the application on a Node server of the latest version.

The virtual DOM stops you having to worry about the way in which your components are presented in the DOM, and gives you the extra mental space necessary to juggle the data, improving developer’s productivity, and reducing the mental fatigue necessary when context switching.

It can be isomorphically (universally) rendered on the server, as well as the client. This is a great benefit to ‘perceived’ speed, meaning all of the JavaScript has already been compiled into HTML. This stops the flashing of unstyled content, and allows Search Engine Indexes to crawl the valid HTML that is pumped out.

So, that’s a brief overview of the React JavaScript library. In the next post of this series; we will set up a new react project, where you will be introduced to a build pipline using npm scripts, managing dependencies, and using JSX.


eCommerce Site Search Best Practice

eCommerce Site Search - Best Practice

In this article, we discuss the importance of a good search bar and how to make the most of yours.

On eCommerce sites, up to 30% of visitors will use the site search bar to navigate.

These users are showing a clear intent to purchase by entering product names they may wish to browse. Therefore, you want to ensure you’re making the most of it and create the best experience for your visitors.

Make it easy to find

This probably sounds simple but it’s very important - make it easy to find. If the user can’t find the search bar, you could be losing out on that potential extra 30% of sales. It doesn’t necessarily need to be too big or bold but users should be able to find it quickly when they arrive at a page and look around. Here, Halfords have gone as far as to dim the rest of the site when a user clicks on the search box.

Positioning the search box

The position of the search box on the site can influence the user's decision to make use of it to look for products. Navigation should be clear across the entire site, including the site search boxes. This is so that visitors can move around easily, whichever page they happen to arrive at.

However do bare in mind that you want to avoid any confusion on your site. So to do so, make sure you do not locate the search bar too near to other boxes, such as newsletter sign-ups or postcode searches for stock information.

Use autocomplete for site search

By applying this feature to your search bar you improve the search experience by reducing the work that the visitor needs to do. As they type, products are suggested. The use of images not only provides a visual appeal but it also allows them to check the products quickly, such as is shown with PrettyLittleThing.com

If I were the user and I typed in ‘red’, not only do suggestions appear, such as ‘red crop top’ and ‘red denim skirt’ but images appear too which makes the experience for the user better as they get to instantly preview the items.

Filtering the results page

 

Whether a customer clicks or leaves your website can be down to your search results page. Not only do you want the searching experience to be easy and hassle free, you want to bring up relevant results.

With a good site search engine, you should be able to customise your users search to great deal. For instance, if you were a womens fashion retailer, one of your visitors could search for ‘black dress’ and all black dresses would appear. I have used retailer ASOS for this example (see images).

That user should then be able to filter their search more by features such as size, length (do they want a midi, mini or maxi length?), price and so on. Using filters helps to narrow down the options available for the customer so they aren’t overwhelmed and can therefore find their desired item faster.

You can see that just by adding a few filters the search for black dress has gone down drastically.

Track your searches

Some tools you should be taking advantage of are Google Analytics and Google Keyword.

The majority of search engines or hosted searches will keep a list of search terms that users have been looking for on your website. This is a great way to keep track of what the most popular items are and you can see what users are after. With this information you are then able to place these items nearer the top of search results.

Leaving the right breadcrumbs

It can be very irritating when a website produces breadcrumbs like Home > Search > Your Search Result. But leaving the right breadcrumbs can make the users life much easier. People use them to get a more precise search. Helpful breadcrumbs allow people to search without clearing everything and starting from the beginning.

For instance, using this John Lewis camera search query, we can see that convenient breadcrumbs have been left on the site. The item selected while browsing, in this example the Sony camera, might not be exactly what the customer is looking for, therefore leaving useful breadcrumbs such as ‘Cameras & Camcorders’ or even ‘Electricals’, makes searching easier. Furthermore, a faster and hassle-free shopping experience will more likely result in a sale.

Make sure it works and it’s fast

Or risk losing revenue. There is correlation between the amount of users who purchase something from your website and the load time. The same is true for search results. When load times increase, profit decreases. Amazon reported that “one additional second would cost them $1.6 Billion dollars in sales”. Therefore, run tests and ensure your load time is acceptable - this includes checking the load time on mobile devices.

When considering search result load times, even loading time by half a second can be detrimental. In 2012 Google conducted an experiment on search results by increasing results from 10 to 30. The outcome showed that revenue and traffic decreased by 20% because the additional search results took milliseconds longer to load.

Give search suggestions

Placing suggestive text in your search bar will encourage or prompt the user to search for something on your website, but make sure you limit your hints to just a few words.

Not only does a sample search query give them suggestions but it also makes it clear on what they can search for on your website and how many criteria are available. For instance Triavago.co.uk search for hotels and have given ‘New York’ as their search sample, whereas Odeon have given multiple samples, ‘Films, Cinema’s and Questions’.

 


Getting directions with Google Maps API

How to Get Directions with the Google Maps API

This blog post offers a simple solution to providing a ‘get directions’ feature on your website.

I recently had the task of getting the directions from the current user’s location, to the location of a store, as part of an eCommerce project. For this particular application, I was working on the SAP Hybris platform but the process should be the same for any of the main platforms such as Shopify Plus, Magento, BigCommerce etc.

I found the documentation on Google Maps to be a lot more convoluted than necessary. The directions in the documentation explain that you need to use the `DirectionsService` that google maps provide as part of the API, as found in this example.

This is not the case, although you will still need the location in which you would like to direct the user (i.e. the latitude/longitude, or the name of the place).

Assuming you wish to set the start location as the user’s current location, you can achieve this by simply using this endpoint,

<a href="https://www.google.com/maps/dir//{latitude},{longitude}"> Get directions </a>.

There is also an opportunity here to set various rules on how the directions should be set, such as the mode of transport, the travel time, waypoints, and much more. All of these options can be found here.  But, to save you the click, here they are;

{  origin: LatLng | String | google.maps.Place, // where you will begin  destination: LatLng | String | google.maps.Place, // where you will end up  travelMode: TravelMode, //driving, train, boat, transit etc  transitOptions: TransitOptions, // only applies if travelMode is provided  drivingOptions: DrivingOptions, //you can set the departure, and pessimistic or optimistic driving coniditons  unitSystem: UnitSystem, // metric or (the archaic) imperial  waypoints[]: DirectionsWaypoint, // places to stop off on the way  optimizeWaypoints: Boolean, //when true, it chooses the shortest route  provideRouteAlternatives: Boolean, // when true, gives more than one way to get to the destination  avoidFerries: Boolean,   avoidHighways: Boolean,  avoidTolls: Boolean,  region: String}

TLDR;

<a href="https://www.google.com/maps/dir//{latitude},{longitude}"> Get directions </a>

Note: the two  `//` after `dir` are required, as otherwise it will assume you are setting the starting location.


Customer Feedback, Relationships and Reviews

Reviews Matter: How to Build a Better Relationship with Your Customers

Some easy tips and tricks on how to make the most of reviews on your website and increase credibility

Having a good relationship with your customers is arguably the most important part of running a business. After all, happy customers, happy conversion rate.

And one quick, uncostly way to do that is through reviews.

According to statistics, ‘92% of people will trust a recommendation from a peer & 70% will trust a recommendation from someone they don’t know’. And with more than one in ten customers reading online reviews, your customers will be your best form of marketing.

Having a product reviews section on your website will mean your products have the backing from your consumers. Those that have bought, tried and tested, your products will be able to review them for other potential consumers that may be browsing the site (and hopefully they will be vouching for you).

Equally, it is important to never remove any negative reviews. This would be dishonest, and that isn’t the message you want to be sending out where your business is concerned. Instead, E.g. if a review says "My product arrived late" replying and saying "We're sorry for the confusion, please get in touch and we're happy to refund your delivery". Customers understand that things go wrong and more interested in the solution.

This approach will appear more professional and suggest that you care about your customers and about improving not only your product but your business. Make the most of these comments. It’s a good way to see things from the other side too!

And it’s not just written reviews. Thanks to social media, your customers can now give you social testimonials.

So for instance, let’s say your business is fashion related. A customer may post a photo of her new dress on social media. She just can’t wait to wear it out this Saturday and tags you in the caption or mentions your brand when one of her friends asks “where’s it from?”. Now, all of her friends and followers that saw her post are aware of who you are. They may even visit your site. And one great tool you could use to help with this would be Yotpo. They allow you to “combine reviews and photos with customizable display options that enhance your brand”.

Whether you’re in the fashion industry, tech, sports, whatever it may be, ultimately the principle works the same. People buy from people.

So not only can reviews potentially make your products more credible but if used in ways like social testimonials, it can generate advertising and reach extra audiences you may not have otherwise.

Is your business making the most of reviews?

 


Website Speed Tips

6 Tips to Increase Your Website Page Speed - Part 1

As anybody who knows me will tell you, I’m a huge self-confessed web performance geek, I love websites that download fast, I believe that fast internet is a basic human right and I think hotels that claim to have WiFi but instead have LiFi (WiFi that doesn’t quite seem to download anything) are criminal and should be boycotted.

This means that I’m always on the hunt for a good website performance technique and I thought I’d share 6 of the best web performance techniques that work every time.

Reduce the size of your images

The most commonly overlooked technique to get a faster website, can not only give you some of the biggest rewards but it’s also the easiest technique to implement.

There are a few areas in which you can reduce the size of your images:

Reducing the aspect ratio
This sounds very obvious but a huge amount of websites I’ve optimised and found that their main banner at the top of every page is 5000 pixels wide but is being displayed at 20% that. Just by reducing that you can save yourself a huge amount of bytes and therefore save your users from a huge download for no real benefit.

Make sure you’re showing the right image for the device
If your customer is viewing your product on their mobile, show them a version of the image that’s no wider than the device. When CSS is used to reduce the size of an image, it’s still the same size to download, just the browser then has to process it to the size required by the CSS, adding more time. Consider looking into srcset which is becoming more widely supported.

Compress the image

Tools like TinyPNGTinyJPG and ImageOptim can save your users from many kilobytes of download without reducing the visual of your image in any way your users will notice. This means that you can save a large amount of bytes on your page, without actually impacting your users. If you can have this built into your media upload, you don’t even need to think about it.

Reduce the ‘quality’ of the image

By reducing the quality of our images, we’re really talking about simplifying the amount of colours being used. This means that we can not only reduce the file size but also making tools like Gzip more effective. Other more advanced techniques of this include reducing the quality significantly to the point where you can see but saving the image at double the resolution, this has been proven to deliver even smaller file sizes without impacting the asset visually.

Remove old and unneeded code

Technical debt is an unavoidable part of any development, making sure you go through and remove old CSS, HTML and JavaScript is hugely important, though.

A few common areas that get overlooked regularly:

Removing vendor files

Pulled out an old version of a carousel or a split testing tool, make sure to pull out the assets as well, that includes the JS and CSS that goes with it.

Removing losing variants of split tests

Very often I’ve seen examples where 2 or more versions of the same element have been created and tested. After this has been analysed and a winner decided, the traffic is pushed down one stream to the winning variant only for the old versions to be forgotten about. Make sure to remove any old code associated with the losing variants of the split test.

Not including the entire framework

This is the most common cause of removing unneeded code, when people include frameworks like Bootstrap or Zurb, they very often include the entire framework, this means all the JS and CSS that build elements that the website might never even use. You can build these files up as and when you need them by not including the unneeded Sass files or only downloading part of the JS. For instance, the entire bootstrap CSS and JS is 668KB whereas the bootstrap grid is just using the grid is 13KB. You can use the customize tool on the Bootstrap website to do this for yourself and tailor the download to your needs.

Prioritise your assets

This is equally as important as anything else, make sure you’re downloading your assets as and when you need them. The simplest case of this is making sure to put your CSS in the head of your file and the JS in the bottom.

Even more than this though we can look at preloading pages and lazy loading.

Preloading

Preloading is when you download an asset before the user requires it and store it in cache or local storage, this means when they get to the area of your website where you think they might need it it’s already available and you don’t have to download it. A good example of when this could work is if you have a booking flow on your website, your booking flow will probably have some extra functionality, so before the user clicks on the search button on your booking engine, you could preload some of this functionality meaning you can load the page quicker and hopefully convert that user.

Lazy loading

Lazy loading is the other side of this, delaying your assets on the page the user is currently looking at until they actually need them. If for instance, you’ve got a gallery on your page, you don’t need to load all of the images the moment the user lands on the page. A more optimal way of doing this would be to download nothing at first, this allows for the first render to happen. Once we’ve displayed the page we download the first couple of images, and maintain being 1 or 2 images ahead of the image in view. This means you’re not downloading images that your user might not ever see but still make your users feel everything is instant as they slide through your gallery.

This is part 1 of a two part series, read part 2 here.

Everything I’ve said about are all web performance techniques that actually work, I’ve implemented them, I’ve seen the results and I can vouch for them.

I’d love to hear your stories implementing some of these results, equally, I’d love to hear some of your web performance techniques that do or don’t work, so please reach out in the comments.


Universal Javascript

Tackling Universal Javascript

Tackling Universal Javascript - the benefits of server and client-side rendering

What is Universal Javascript?

Simply put, ‘Universal Javascript’ is javascript that is capable of running on both the browser and the server, but also on native devices, embedded systems and more.

It’s also referred to as ‘Isomorphic Javascript’ as there is some confusion regarding what ‘universal’ and ‘isomorphic’ mean in the context of Javascript. It was decided by community leaders, that, in fact, it’s best to call it Universal.

So, now we’ve cleared that up, let us move on.

Why Universal Javascript?

The reason the decision was made to use Javascript say instead of say C#, PHP, or any other popular server-side language is because javascript allows the junior members of our team (including me) to use our front-end skills in a more productive way. This grants us the ability to be introduced to powerful concepts such as REST, and HTTP, without the added mental stress of learning a whole new language, abstracting away from the language itself and focusing on the concepts behind what’s happening on the client, and the server.

It’s a great environment to develop and nurture both front-end and back-end skills, and removes the necessity of context-switching, leaving us to think about the important parts of our application rather than the implementation details, and stressing over semi-colons.

Furthermore, another selling point of universal JavaScript is the fact that it runs on every device. iPads, iPhones, Android, Raspberry Pi’s...  whilst, PHP for example, can not. This, I believe, gives Javascript a unique ‘future-proofed’ status among programming languages, as it provides us the freedoms of using experimental javascript and device features without being limited by the browser, allowing us to create cutting-edge solutions for our clients, as the language evolves. Also, given that Universal Javascript is in it’s relative infancy; it has some huge industry backers. These include NetflixAirbnb to name a few.

Universal Javascript also gives us the added benefit of a substantial performance boost. The templates created in our components can be rendered on the server; and plain HTML can be sent the client. This benefits the user greatly; as it will provide them with a viewable media faster, without relying on fast loading speeds, location, device speed or any other of the factors regarding the user's experience outside of our testing environments. This, in turn, reduces the bounce back rate, providing more conversions for marketers. More benefits include ‘perceived speed’, which is where the user thinks your site is faster than it actually is; this can be achieved by critical CSS rendering; which is where the ‘above the fold’ content is rendered as quickly as possible, which in turn gives the user the content that they want, faster.

Universal Javascript also offers SEO benefits. One of the biggest disadvantages to building a Single Page Application (SPA), is the fact that it’s all rendered on the client. What does this mean? Well, this means that google's, bing's, and yahoo's’ webpage crawlers aren’t able to interpret client side code; because they crawl the server pages. However, with Universal Javascript, these pages can be pre-rendered on the server, giving accurate content to the crawlers.