1. Using a web font loader

    July 4th 2014

    Web fonts open up a lot of opportunities for adding visual interest and branding. However, browsers - particularly WebKit based browsers - don't necessarily do the best thing, especially in non-ideal network conditions. To work round the performance and reliability issues we can use a web font loader to give us the fine control we need.

    Read article…
  2. Quantifying a performance budget using HTTP Archive data

    July 1st 2014

    As network connection speeds are highly variable, setting performance targets in terms of load times can be hard to work towards. To ensure page performance targets are met it is a good idea to set a budget that is defined as quantifiable and repeatable metrics - such as total number of HTTP requests and data transferred. Ideally this budget should be set based on testing and RUM data but for new sites, or other sites that have not generated much data, the HTTP archive can be used as a data set. Based on this a reasonable budget for a site is: 350KB total data in 25 requests, a Page Speed Score of 80% and a Speed Index of 1500.

    Read article…
  3. Inlining CSS into the head of a page

    June 20th 2014

    Including CSS inlined into the <head> of a web page is a performance and fault tolerance best practice. As this technique requires the CSS to be included as part of the markup delivered by the server, integrating it with the output of build systems using CSS pre-processors designed to produce externally included files requires extra work.

    Read article…