How browsers schedule and execute scripts can impact the performance of web pages. While techniques like <script defer>, <link rel=preload> (and others) influence script loading, knowing how browsers interpret them can also be helpful. Thanks to Kouhei Ueno, we now have an up to date summary of script scheduling in Chrome.
Note: Loading priorities are not guaranteed to be consistent cross-browser so use this knowledge wisely and measure when unsure. Ideally, aim to delivery a great experience to the widest number of users possible.
If you’re a web developer wondering where you can see the “Loading Priority”, Chrome DevTools has an optional “Priority” column available in the Network panel. …
Performance is a constant process, not a one-time checklist. It requires continuous monitoring and work. A useful workflow when investing in performance is Measure, Optimize & Monitor.
A few tips:
tl;dr: There are no silver bullets to web performance. Simple static pages benefit from being server-rendered with minimal JavaScript. Libraries can provide great value for complex pages when used with care.
Netflix is one of the most popular video streaming services. Since launching globally in 2016, the company has found that many new users are not only signing up on mobile devices but are also using less-than-ideal connections to do so.
By refining the JavaScript used for Netflix.com’s sign-up process and using prefetching techniques, the developer team was able to provide a better user experience for both mobile and desktop users and offer several improvements. …
If you’re building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets and learn to live within them. Network & CPU limits on mobile can require asking hard questions like, “what is really important to my users?”
When we talk to Fortune 500 companies that put in the work to improve performance, perf metrics will often rapidly regress once they return to feature development. Performance budgets help teams prioritize features, optimizations and facilitate discussions on what is really important to users.
“Having a pre-defined ‘budget’ is a clear, tangible way to frame decisions about what can and can’t be included, and at a suitably early stage in the project” — Mark…
Update: The Cost Of JavaScript In 2019 is now available to read.
Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens?
Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways.
Today we’ll cover some strategies you can use to deliver JavaScript efficiently while still giving users a valuable experience.
Tinder recently swiped right on the web. Their new responsive Progressive Web App — Tinder Online — is available to 100% of users on desktop and mobile, employing techniques for JavaScript performance optimization, Service Workers for network resilience and Push Notifications for chat engagement. Today we’ll walk through some of their web perf learnings.
Tinder Online started with the goal of getting adoption in new markets, striving to hit feature parity with V1 of Tinder’s experience on other platforms.
The MVP for the PWA took 3 months to implement using React as their UI library and Redux for state management. The result of their efforts is a PWA that delivers the core Tinder experience in 10% of the data-investment costs for someone in a data-costly or data-scarce…
Pinterest’s new mobile web experience is a Progressive Web App. In this post we’ll cover some of their work to load fast on mobile hardware by keeping JavaScript bundles lean and adopting Service Workers for network resilience.
The Pinterest PWA started because they were focused on international growth, which led them to the mobile web.
After analyzing usage for unauthenticated mobile web users, they realized that their old, slow web experience only managed to convert 1% of users into sign-ups, logins or native app installs. …
As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this post, I’ll cover why a little discipline can help if you’d like your site to load & be interactive quickly on mobile devices.
tl;dr: less code = less parse/compile + less transfer + less to decompress
When most developers think about the cost of JavaScript, they think about it in terms of the download & execution cost. Sending more bytes of JavaScript over the wire takes longer the slower a user’s connection is.
This can be a problem, even in first-world countries, as the effective network connection type a user has might not actually be 3G, 4G or WiFi. …
At Google I/O this year, we introduced HNPWA (Hacker News Readers as PWAs) — a project aiming to demonstrate Progressive Web Apps can be implemented with popular JavaScript frameworks. Implementations follow a short specification but ultimately must demonstrate they can perform well on metrics like how soon a user can interact with the apps.
This is validated using Lighthouse on average mobile hardware (a Moto G4) using WebPageTest’s Faster 3G and Emerging Market 3G profiles.
We started off with apps written in Polymer, Vue, Preact, React, Svelte and Angular and thanks to the community have grown to 22 applications.
Implementations make use of architecture patterns like PRPL and route-based code-splitting. They also use Web Platform primitives like <link rel=preload> and HTTP/2 Server Push. …
Authors: Treebo: Lakshya Ranganath, Chrome: Addy Osmani
Treebo is India’s top rated budget hotel chain, operating in a segment of the travel industry worth $20 billion. They recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production.
What they saw compared to their old mobile site was a 70%+ improvement in time to first paint , 31% improvement in time-to-interactive. …
About
