Web Performance - Dean Hume's Blog

Experimenting with the Streams API

I am always looking for ways to build faster, slicker web pages. Where applicable, I’ll use great new browser features such as service workers, HTTP/2 and improved compression, just to name a few. But what if I told you there was a way to build even faster web

Progressive Web Apps

Dynamic resources using the Network Information API and service workers

The Network Information API allows developers to determine the connection types and the underlying connection technology that the user agent is using. In terms of web performance, this brings a whole new level to the way that we build web pages.

Progressive Web Apps

How to display a "new version available" for a Progressive Web App

In this article, I will show you how to add a notification to your site and display it each time that there is a new version of the service worker available. You’ll also learn how to refresh the page, so that the user is up to date and has the latest version of any cached files.

Progressive Web Apps

Progressive Web Apps - Book Giveaway

"Progressive Web Apps" has recently been released, and if you haven't already gotten your hands on a copy, I have 5 free copies to give away to lucky readers.

Progressive Web Apps

Service Workers can save the environment!

Service workers allow you to cache resources on the user's device when they visit your site for the first time. Fewer HTTP requests mean less CPU usage and less energy consumed.

Progressive Web Apps

Converting a Ghost blog to a Progressive Web App

In this article, I am going to take you through the different steps required to get a Ghost blog up and running as a Progressive Web App (*hint: it’s easier than you think!*)

Web Performance

Guest Posts and Advent Calendars

This year, I’ve been lucky enough to write two articles for two great “advent calendar” style sites. I try to write for the Performance Calendar every year around this time and this year I’ve written about progressive image loading using Intersection Observer and SQIP. In this article, I

Web Performance

Lazy loading images using Intersection Observer

If you haven’t had the chance to watch it yet, Paul Lewis put together an awesome video series that demonstrates how to build a media player alongside some of the great features of Progressive Web Apps. There are a series of videos on YouTube that take place over a

Web Performance

Experimenting with the Server Timing API

You may be familiar with the saying “If you can’t measure it, you can’t improve it”. This saying couldn’t be more true when it comes to web performance. In our browsers today, we already have great APIs such as Navigation Timing and Resource Timing built-in, which allow

HTTP

Getting Started with HTTP/2 and Server Push

HTTP/2 is awesome. When we enabled HTTP/2 on the settled.co.uk website, we noticed a 10% improvement in the page load times across the site. We didn’t change any code, or even make any web performance tweaks - we made the switch and noticed the results

Web Performance

A simple, client-side approach to measuring Speed Index

When I first started learning about web page performance, I always use to focus solely on the time that it took a page to load. The excitement of seeing a web page load in an instant kept me coming back for more. Whilst web page load time is an important

Web Performance

Image Beast - My 10 K Apart Entry

This year, An Event Apart and Microsoft are teaming up to bring you 10 K Apart. It's a pretty cool competition with a challenge to build a compelling web experience that can be delivered in 10 KB and works without JavaScript. Believe me - it's not as easy as it

Web Performance

Ten Things you didn't know about WebPageTest.org

That's a pretty catchy title for an article, right?! Now that I've lured you onto this page, I am going to do my best to deliver the goods! Without a doubt, WebPageTest is one of my favourite web performance testing tools. It's completely free to use and is such a

Google Chrome

CPU throttling using Chrome Developer Tools

I recently gave a tutorial at Velocity Conference in Santa Clara about some of the amazing features that lie within the browsers we use everyday. As web developers, we are pretty lucky to have such awesome developer tools at our disposal. After the tutorial was complete, a few people asked

Web Performance

Faster Mobile Websites - Slides

Earlier this year I was lucky enough to get the chance to present at UpFront Conference in Manchester. This was the inaugural year for the conference, and it was great to be apart of this event. A few people have asked about the slide deck and wanted to know more.

Web Performance

Responsibly harnessing the power of Prefetch using Google Analytics

If you browse the web today, there are many articles that explain what browser pre-loading is and how to use it, but very little explain how to actually use this feature in the real world. The ability to prefetch resources is powerful, but if used incorrectly it can turn out

Web Performance

Optimising Google Fonts for Fast Load Times

Using web fonts can be a great way to improve the look and feel of your website. I love tinkering with different font combinations on websites and seeing the changes they make. Unfortunately, adding web fonts to your site adds extra overhead to your site and can often slow your

Web Performance

Improved Compression Ratios Using Zopfli

Compressing files can be a very effective way of reducing their size as they are transferred between the server and a user's browser. Most modern browsers work effectively with compressed files and use lossless compression formats such as Gzip, Deflate or Zlib. In order to compress a file, an encoder

Speaking

I'll be speaking at UpFront Conference

I’m proud to say that I will be speaking at UpFront Conference in Manchester, UK on the 19th of May. UpFront Conference is in it’s first year and is billed as “a front-end conference for anyone who makes for the web”. The speaker line-up is packed with great

Web Performance

Mozinar: 8 Simple Steps towards a Super Fast Website

Search Engine Optimization (SEO) plays a major part in the way we use the web today. SEO techniques can make your website easy for both users and search engine robots to understand. I've long been a fan of the Moz blog and their free SEO tools that can help grow

Google Chrome

Quick Tip: Create Data URI's using Chrome

Using Data URI's can be a great way to reduce the number of HTTP requests that a web page makes. If you've never heard of Data URI's, they are a way of in-lining data in web pages as if they are external resources. This means that instead of adding a

Web Performance

Getting started with the Picture element

Responsive web design is awesome. It's changed the way we serve content to our users and has allowed us to offer a tailored experience to different screen sizes. It is really flexible and with a little bit of knowledge, anyone can get started. While this flexibility is great, it can

Web Performance

My Favourite Talks at Velocity Conference New York 2014

After a long flight and a little bit of jetlag, I've arrived back in London after visiting New York for Velocity Conference 2014. In typical Velocity fashion, the quality of the talks have been amazing and there have been a few highlights that are worth sharing. I thought it would

Web Performance

HTTP vs HTTPS performance comparison

Google recently announced that they will be starting to use HTTPS as a ranking signal in their search algorithms. This means that websites that serve traffic over HTTPS with secure, encrypted connections will be slightly favoured over those websites that don't. During Google I/O, there was a big push

Speaking

I'll be speaking at Velocity Conference New York 2014

Velocity Conference is without a doubt one of my favourite conferences of the year. It's the conference where different topics such as DevOps, web operations, web performance, and mobile explode into being. Packed with some of the best speakers in the industry; it's a great place to learn and network.