Webmasters Gallery

In this week’s roundup, how to determine a slow connection, what we should put into alt text for images, and a new polyfill for the HTML loading attribute, plus more.

Detecting users on slow connections

Algolia is using the Network Information API (see the API‘s Chrome status page) to detect users on slow connections — about 9% of their users — and make the following adjustments to ensure a good user experience:

• increase the request timeout when the user performs a search query (a static timeout can cause a false positive for users on slow connections)
• show a notification to the user while they’re waiting for search results (e.g., “You are on a slow connection. This might take a while.”)
• request fewer search results to decrease the total response size
• debounce queries (e.g., don’t send queries at every keystroke)

navigator.connection.addEventListener("change", () => {
  // effective round-trip time estimate in ms
  let rtt = navigator.connection.rtt;

  // effective connection type
  let effectiveType = navigator.connection.effectiveType;

  if (rtt > 500 || effectiveType.includes("2g")) {
    // slow connection
  }
});

(via Jonas Badalic)

Alt text should communicate the main point

The key is to describe what you want your audience to get out of the image rather than a simple description of what the image is.

<!-- BEFORE -->
<img alt="Graph showing the use of the phrase "Who you
          gonna call?" in popular media over time.">

<!-- AFTER -->
<img alt="Graph illustrating an 800% increase in the use
          of the phrase "Who you gonna call?" in popular
          media after the release of Ghostbusters on
          June 7th, 1984.">

(via Caitlin Cashin)

In other news…

• There is a new polyfill for the HTML loading attribute that is used by wrapping the images and iframes that you want to lazy-load in elements (via Maximilian Franzke).
• WeChat, the Chinese multi-purpose app with over one billion monthly active users, hosts over one million “mini programs” that are built in a very similar fashion to web apps (essentially CSS and JavaScript) (via Thomas Steiner).
• Microsoft has made 24 new (online) voices from 21 different languages available to the Speech Synthesis API in the preview version of Edge (“these voices are the most natural-sounding voices available today”) (via Scott Low)

Read more news in my new, weekly Sunday issue. Visit webplatform.news for more information.

The post Weekly Platform News: Improving UX on Slow Connections, a Tip for Writing Alt Text and a Polyfill for the HTML loading attribute appeared first on CSS-Tricks.