Tags: speed

84

sparkline

The three Rs of web performance

  1. Reduce
  2. Reuse
  3. Restructure

The slides from Matthew’s talk on the performance overhauls he did on FixMyStreet.com and TrainTimes.org.uk.

How Fast Is Amp Really? - TimKadlec.com

An excellent, thorough, even-handed analysis of AMP’s performance from Tim. The AMP format doesn’t make that much of a difference, the AMP cache does speed things up (as would any CDN), but it’s the pre-rendering that really delivers the performance boost …as long as you give up your URLs.

But right now, the incentives being placed on AMP content seem to be accomplishing exactly what you would think: they’re incentivizing AMP, not performance.

It’s Dangerous to Go Stallone. Take Glyphhanger | Filament Group, Inc., Boston, MA

You’ll need to be comfortable with using the command line, but this is a very useful font subsetting tool from those clever folks at Filament Group.

Standardizing lessons learned from AMP – Accelerated Mobile Pages Project

This is very good news indeed—Google are going to allow non-AMP pages to get the same prioritised treatment as AMP pages …if they comply with the kind of performance criteria that Tim outlined.

It’ll take time to get there, but I’m so, so glad to see that Google aren’t going to try to force everyone to use their own proprietary format.

We are taking what we learned from AMP, and are working on web standards that will allow instant loading for non-AMP web content. We hope this work will also unlock AMP-like embeddability that powers Google Search features like the Top Stories carousel.

I just hope that this alternate route to the carousel won’t get lumped under the banner of “AMP”—that term has been pretty much poisoned at this point.

Winning on Mobile

This looks like a handy tool for doing some quick’n’dirty competitor analysis when it comes to performance: create a scoreboard of sites to rank by speed (and calculate the potential revenue impact).

Many factors contribute to an engaging mobile experience. And speed is chief among them. Most people will abandon a mobile site visit if the page takes more than a few seconds to load. Use our Speed Scorecard to see how your site stacks up to the competition.

Moving Slowly and Fixing Things / Paul Robert Lloyd

Although design gets conflated with creation, its the act of improving what already exists — organising a room, editing a text, refining an interface, refactoring a codebase — that I enjoy the most.

AMP: the missing controversy – Ferdy Christant

AMP pages aren’t fast because of the AMP format. AMP pages are fast when you visit one via Google search …because of Google’s monopoly on preloading:

Technically, a clever trick. It’s hard to argue with that. Yet I consider it cheating and anti competitive behavior.

Preloading is exclusive to AMP. Google does not preload non-AMP pages. If Google would have a genuine interest in speeding up the whole web on mobile, it could simply preload resources of non-AMP pages as well. Not doing this is a strong hint that another agenda is at work, to say the least.

Seva Zaikov - Single Page Application Is Not a Silver Bullet

Harsh (but fair) assessment of the performance costs of doing everything on the client side.

The Human Computer’s Dreams Of The Future by Ida Rhodes (PDF)

From the proceedings of the Electronic Computer Symposium in 1952, the remarkable Ida Rhodes describes a vision of the future…

My crystal ball reveals Mrs. Mary Jones in the living room of her home, most of the walls doubling as screens for projected art or information. She has just dialed her visiophone. On the wall panel facing her, the full colored image of a rare orchid fades, to be replaced by the figure of Mr. Brown seated at his desk. Mrs. Jones states her business: she wishes her valuable collection of orchid plants insured. Mr. Brown consults a small code book and dials a string of figures. A green light appears on his wall. He asks Mrs. Jones a few pertinent questions and types out her replies. He then pushes the start button. Mr. Brown fades from view. Instead, Mrs. Jones has now in front of her a set of figures relating to the policy in which she is interested. The premium rate and benefits are acceptable and she agrees to take out the policy. Here is Brown again. From a pocket in his wall emerges a sealed, addressed, and postage-metered envelope which drops into the mailing chute. It contains, says Brown, an application form completely filled out by the automatic computer and ready for her signature.

Network based image loading using the Network Information API in Service Worker | justmarkup

This is clever—you can use the navigator.connection API from a service worker (because it’s asynchronous) which means you can have a service worker script that serves differently sized images based on bandwidth.

The Fallacies of Distributed Computing (Applied to Front-End Performance) – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

Harry cautions against making assumptions about the network when it comes to front-end development:

Yet time and time again I see developers falling into the same old traps—making assumptions or overly-optimistic predictions about the conditions in which their apps will run.

Planning for the worst-case scenario is never a wasted effort:

If you build and structure applications such that they survive adverse conditions, then they will thrive in favourable ones.

Using SVG as placeholders — More Image Loading Techniques - JMPerez Blog

Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.

Can You Afford It?: Real-world Web Performance Budgets – Infrequently Noted

Alex looks at the mindset and approaches you need to adopt to make a performant site. There’s some great advice in here for setting performance budgets for JavaScript.

JavaScript is the single most expensive part of any page in ways that are a function of both network capacity and device speed. For developers and decision makers with fast phones on fast networks this is a double-whammy of hidden costs.

“async” attribute on img, and corresponding “ready” event · Issue #1920 · whatwg/html

It looks like the async attribute is going to ship in Chrome for img elements:

This attribute would have two states:

  • “on”: This indicates that the developer prefers responsiveness and performance over atomic presentation of content.
  • “off”: This indicates that the developer prefers atomic presentation of content over responsiveness.

eBay’s Font Loading Strategy | eBay Tech Blog

Here’s the flow that eBay use for the font-loading. They’ve decided that on the very first page view, seeing a system font is an acceptable trade-off. I think that makes sense for their situation.

Interestingly, they set a flag for subsequent visits using localStorage rather than a cookie. I wonder why that is? For me, the ability to read cookies on the server as well as the client make them quite handy for situations like this.

Network Information API

It looks like this is landing in Chrome. The navigator.connection.type property will allow us to progressively enhance based on connection type:

A web application that makes use of a service worker to cache resources during installation might have different bundles of assets that it might cache: a list of crucial assets that are cached unconditionally, and a bundle of larger, optional assets that are only cached ahead of time when navigator.connection.type is 'ethernet' or 'wifi'.

There are potential security issues around fingerprinting that are addressed in this document.

Why it’s tricky to measure Server-side Rendering performance

A good analysis, but my takeaway was that the article could equally be called Why it’s tricky to measure Client-side Rendering performance. In a nutshell, just looking at metrics can be misleading.

Pre-classified metrics are a good signal for measuring performance. At the end of the day though, they may not properly reflect your site’s performance story. Profile each possibility and give it the eye test.

And it’s always worth bearing this in mind:

The best way to prioritize content by building a static site. Ask yourself if the content needs JavaScript.

Inside a super fast CSS engine: Quantum CSS (aka Stylo) ★ Mozilla Hacks – the Web developer blog

Lin gives a deep dive into Firefox’s new CSS engine specifically, but this is also an excellent primer on how browsers handle CSS in general: parsing, styling, layout, painting, compositing, and rendering.

The Critical Request | CSS-Tricks

Ben takes us on a journey inside the mind of a browser (Chrome in this case). It’s all about priorities when it comes to the critical path.

Focusing on What Matters at Fluent, 2017 - YouTube

A great short talk by Tim. It’s about performance, but so much more too.

Focusing on What Matters at Fluent, 2017