Blog


WebPageTest Obscure Features for Performance Testing

WebPageTest for those who haven’t used it can allow anyone, for free, to test their website performance by entering an URL and then viewing the results. The results are shown in a nice clear format with high level figures as well as more in detail figures. What this post will be about is the features that you may have not seen before which can be very useful.

Advanced Area

Before even starting the test there is the advanced area hidden as a dropdown link. This area allows you to setup your perfect test:

This area has a tonne of useful features such as:

  • Change the connection type is useful if you know your audience uses slower connection speeds this option can reflect the typical connection your users use.
  • If you click across to the Chrome tab you can also generate a Google Lighthouse report seeing your SEO, accessibility, performance, progressive web app and best practice score
  • If you click across to block in this text area you can block assets, so you could block third-party scripts to measure parts of the website you can control

Request Mapping

Once your website performance test is complete you can then generate a request map to identify what third party scripts are on your website, and where transmitted bytes are coming from as well as the size of your domain and how slow it is. Especially in a post GDPR world this can also be a great way to what are third-party scripts are also additionally requesting in the background.

Visual Comparison Tool

The visual comparison tool is useful for presentations as you can enter your website URL against your competitors and then see how long it takes for your website to load against your competitors.

You don’t have much control over where the test is run and all of the other more advanced features but because all of the URL’s are tested from the same location then it’s a fair performance test.

If you scroll down past the filmstrips you can then compare how your request load in against your competitors using opacity sliders, export the filmstrips, create videos and change the formatting of the filmstrips.

Setting up your own performance dashboard

WebPageTest has a good amount of documentation on it’s RESTful APIs so you can setup automated website performance testing. This could be useful as a way to monitor ongoing website performance and be part of a wider performance dashboard for people to view.

Summary

These are just some of the obscure features of WebPageTest. If you know any other useful features that you use on a day-to-day basis let me know. What you will find with WebPageTest is that it can very simple in that you can drop in a URL and quickly see the website performance or you can get a more in-depth really world experience where you can compare yourself to your competitors or see more details through the LightHouse reporting option.

Read more ››


CSS custom properties for cascading variables

  • June 5, 2018
  • CSS

Preprocessors like Less and Sass have helped over the past few years to keep development CSS codebases simple, organised and maintainable. One of the most used features in preprocessors is the ability to use variables in the stylesheet which was not possible natively in CSS. Now it is possible to use CSS custom properties in native CSS with support across most browsers apart from IE.

Read more ››


Google to Use Page Speed as Ranking Signal in Mobile Search

From July 2018, Google is going to consider page speed as a ranking signal for mobile search. Page speed has been a ranking factor for Google searches since 2010, but this was only focused on desktop searches, not mobile. Google has nicknamed this new update as the “Speed Update”.

Read more ››


Two Years at GoCompare as a product designer

Surprisingly on March the 14th I will have been at GoCompare for 2 years and 3 years into my career as a skilled product designer.  I thought it would be good to reflect on what has been achieved in the last two years at GoCompare and what I have picked up along the way. Also, what does the future hold in store and my personal goals.

Read more ››


UX and UI Tools 2018

With a plethora of UX tools on the market it can be overwhelming what to use. From an idea through to build there is plenty of tools available for any UX or UI job. In this article I will open up what I use on a daily basis that works for me. Tools will include wireframing, design and prototyping as well as sharing the concepts and ideas.

Read more ››


The guide on progressive web apps

It is very difficult to get people to install a native mobile app. Even if someone installs your app it is difficult to keep them engaged for a long period of time before they either delete it or leave it sitting on their device. Websites are much more convenient as all a user needs to do is just enter a URL or click on a link – it just works. However we all know that mobile connections can be temperamental, giving your customers a poor experience of your website.

Read more ››


The web is bloated

First published on LinkedIn – June 25, 2017

One of the greatest frustrations with websites is speed. Websites are slow and bloated, so as a consequence, users deal with a poor experience leaving them irritated but having to make do or move on.

Read more ››


CSS3

CSS Borders

  • May 11, 2016
  • CSS

The border property allows you to specify how the border of the box representing an element should look. The border module consists of the following properties, border-color, border-style and border-width. In this post we will look at all three properties and how we can combined them into the shorthand property.

Read more ››


CSS Padding and Margin

  • April 26, 2016
  • CSS

The most two popular CSS properties are margin and padding, they are used for spacing-out elements. Simply put the padding is the space inside something whilst the margin is the space outside of something.

Read more ››


CSS3

CSS Font Smoothing in Webkit and Firefox

  • March 11, 2016
  • CSS

Using font smoothing can turn a horrible typeface to a beautiful one. The Webkit and Firefox browsers make the fonts look slightly thicker, using just two lines of CSS we can solve this problem.

Read more ››