Code Faster, Lighter Javascript
NET|December 2018

JavaScript is the most expensive resource for web browsers to process on mobile phones. In this feature Addy Osmani covers how to load JavaScript quickly without throwing out the kitchen sink.

Addy Osmani
Code Faster, Lighter Javascript

Building interactive websites can involve sending JavaScript to your users. Often, too much of it. Have you been on a web page on your phone that looked like it had loaded only to tap on a link or try to scroll and nothing happens? We all have. Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones because it can delay interactivity in significant ways (bit.ly/interactivity-matters). Today we’ll cover some strategies for delivering JavaScript efficiently to your users on mobile while still giving them a valuable experience.

The web is bloated by too much user ‘experience’

When users access your site you’re probably sending down a lot of files, many of which are scripts. Perhaps you added a quick JavaScript library or plugin but didn’t have a chance to check just how much code it was pulling in? It’s happened to many of us. As much as I love JavaScript, it’s always the most expensive part of your site. I’d like to explain why this can be a major issue.

Many popular sites ship megabytes of JavaScript to their mobile web users. The median webpage today currently ship a little less – about 350kB of minified and compressed JavaScript (bit.ly/state-of-js). Uncompressed, that bloats up to over 1MB of script a browser needs to process. Experiences that ship down this much JavaScript take more than 14 seconds to load and get interactive on mobile devices (bit.ly/loading-speed).

Diese Geschichte stammt aus der December 2018-Ausgabe von NET.

Starten Sie Ihre 7-tägige kostenlose Testversion von Magzter GOLD, um auf Tausende kuratierte Premium-Storys sowie über 8.000 Zeitschriften und Zeitungen zuzugreifen.

Diese Geschichte stammt aus der December 2018-Ausgabe von NET.

Starten Sie Ihre 7-tägige kostenlose Testversion von Magzter GOLD, um auf Tausende kuratierte Premium-Storys sowie über 8.000 Zeitschriften und Zeitungen zuzugreifen.

WEITERE ARTIKEL AUS NETAlle anzeigen
Camille Gribbons
NET

Camille Gribbons

UX designer at Booking.com, Camille Gribbons reveals how she first got into the industry

time-read
7 Minuten  |
June 2020
THE 5G UI REVOLUTION
NET

THE 5G UI REVOLUTION

Tris Tolliday describes his vision of a web UI catapulted forwards by 5G

time-read
3 Minuten  |
June 2020
HOW TO SHOWCASE YOUR DEV SKILLS
NET

HOW TO SHOWCASE YOUR DEV SKILLS

Aude Barral shares 5 top tips for landing your dream developer job

time-read
3 Minuten  |
June 2020
KNIVES OUT
NET

KNIVES OUT

Murder mystery film, Knives Out, grabbed everyone’s attention, and so did the fun website that promoted it. Oblio tells Tom May how it created its innovative 3D navigation

time-read
6 Minuten  |
June 2020
HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH
NET

HOW EMOTIONAL LABOUR HINDERS WOMEN IN TECH

Christine Brewis, head of digital marketing at Studio Graphene, discusses how gender parity in tech has changed over the last ten years, and what more can be done

time-read
5 Minuten  |
June 2020
EDAN KWAN
NET

EDAN KWAN

He swapped life as a singer for a career making eye-popping digital visuals. The Lusion founder chats to Tom May about battling demons, winning awards and where digital advertising is heading

time-read
8 Minuten  |
June 2020
ANDREW COULDWELL
NET

ANDREW COULDWELL

The Brit in LA discusses his new book on design systems, Laying the Foundations

time-read
3 Minuten  |
June 2020
Top 5 Tips For Ensuring Web Content Is Accessible For All
NET

Top 5 Tips For Ensuring Web Content Is Accessible For All

Merlyn Meredith outlines five top tips for ensuring web content is accessible for all

time-read
2 Minuten  |
May 2020
WHAT DOES THE FUTURE HOLD FOR BROWSERS?
NET

WHAT DOES THE FUTURE HOLD FOR BROWSERS?

Nico Turco examines the state of play with browsers, whether developers should encourage diversity or monopoly and how Google fits into it all

time-read
6 Minuten  |
May 2020
YEARS IN THE MAKING
NET

YEARS IN THE MAKING

Exclusively for net: The latest in a series of anonymous accounts of nightmare clients

time-read
3 Minuten  |
May 2020