Making Web Apps & Sites Fast
BundlePhobia (Open Source SaaS)Choose your npm packages smartly with
Check sizes of current or future dependencies with BundlePhobia. Simply enter the name of a npm package, and it will tell you how many downloadable kilobytes it will become, and how long that will take.
Example: everyone’s favorite utility library, Lodash
Let’s look at the bundle stats for lodash:
The first figure we see is the minified bundle size, which is what the user’s browser will parse and execute. A larger amount of code will intuitively on average take a longer time to execute. On a low speed mobile phone, this can be a very noticable effect — in the order of several seconds. If this code is controlling what is displayed on screen, then the user will be waiting until the result is ready.
The download times give a rough baseline for how long your users will be waiting. You can see that 24.2KB doesn’t sound like much, but it will take roughly half a second to download on a slowish 3G connection. And note that this does not include the time for execution. So someone on a older phone on a slow connection could have a really poor experience of waiting and waiting.
Measure the experience
Lighthouse (Open Source)
Audit performance and accessibility issues with Lighthouse. The same functionality is also available in Google Chrome’s Audits panel.
WebPageTest (Open Source)
Test how your site performs on Chrome on a Motorola G with slow 3G — a 400 Kbps 3G connection with 400ms of latency.
The site might look crude, but it gives you a wealth of information, including detailed request/response waterfall diagrams, screenshots, and even pie charts of the categories of processing on the CPU.
Track your site’s performance over time. Measure page loading metrics from Lighthouse such as time to first-paint and interactive. Compare the performance between a mobile and desktop device. Set budgets and notify via email or Slack.
httpstat (Open Source CLI)
See durations of:
- domain name lookup into an IP address
- time to establish a TCP connection to that IP address
- how long the TLS handshake of HTTPS took
- the time the server took to respond with data
- and how long that data took to fully transfer to you
> httpstat https://collected.guide/ Connected to 18.104.22.168:443 from 0.0.0.0:61669 HTTP/2 200 date: Sat, 18 Aug 2018 05:44:44 GMT content-type: text/html; charset=utf-8 content-length: 5685 last-modified: Sun, 12 Aug 2018 23:21:26 GMT DNS Lookup TCP Connection TLS Handshake Server Processing Content Transfer [ 5ms | 243ms | 400ms | 457ms | 1ms ] | | | | | namelookup:5ms | | | | connect:248ms | | | pretransfer:648ms | | starttransfer:1105ms | total:1106ms
Improve and compress images
This guide covers many processes and tools that can reduce image sizes and speed up their decoding to improve the experience for your users.
ImageOptim (Free Mac App & Paid SaaS)
Optimize and lossless compress PNGs, SVGs, and JPEGs.
Optimize web fonts
Custom font are one of the heaviest assets you can ship on a website. Not only can they be a big download, but in the time they take to download they can leave the user seeing no text on the page.
A “full” webfont that includes all stylistic variants, which you may not need, plus all the glyphs, which may go unused, can easily result in a multi-megabyte download.
The ”race” between the first paint of page content, which can be done shortly after the render tree is built, and the request for the font resource is what creates the ”blank text problem” where the browser might render page layout but omits any text.
Start loading earlier
Often, performance problems slowing pages down are due to third-party scripts: ads, analytics, trackers, social-media buttons, and so on.
Cache and fingerprint your assets
Fetching something over the network is both slow and expensive. Large responses require many roundtrips between the client and server, which delays when they are available and when the browser can process them, and also incurs data costs for the visitor. As a result, the ability to cache and reuse previously fetched resources is a critical aspect of optimizing for performance.
The good news is that every browser ships with an implementation of an HTTP cache. All you need to do is ensure that each server response provides the correct HTTP header directives to instruct the browser on when and for how long the browser can cache the response.
Experience a slow network for yourself
It's important to understand what using your app or site feels like when connectivity is poor or unreliable. A range of software tools can help you emulate and simulate low bandwidth and high latency.