Aprenda a asegurarse de que cada Username obtenga la mejor experiencia posible optimizando sus sitios para restricciones específicas de hardware y red.
Device capabilities and network connections vary widely. Sites that delight users on high-end devices can be
unusable en los de gama baja. Los sitios que se cargan sin problemas en redes rápidas pueden detenerse en redes lentas. Cualquier usuario puede experimentar un sitio Web lento, por eso el desarrollo de soluciones de «talla única» no siempre funciona.
In its Chrome Dev Summit Talk, Addy Osmani de Google y Nate Schloss de Facebook exploran una solución a ese problema: un patrón para entregar páginas que se adapten mejor a una variedad de limitaciones de los usuarios. Ellos lo llaman adaptive load.
What is adaptive loading?
Adaptive loading involves providing different experiences to different users based on their network and hardware limitations, specifically:
-
A fast core experience for all users (including low-end devices).
-
Progressively add exclusive high-end features, if a user's network and hardware can handle it.
Al optimize para restricciones específicas de hardware y red, permite que cada usuario obtenga la mejor experiencia posible para su dispositivo. Adaptar la experiencia a las limitaciones de los usuarios puede incluir:
-
It serves low quality images and videos on slow networks.
-
Limit the frame rate of animations on low-end devices.
-
Avoid computationally expensive operations on low-end devices.
-
Bloqueo de scripts de terceros en dispositivos más lentos.
-
Carga de JavaScript no crítico para interactividad solo en CPU rápidas.
How to implement adaptive loading
The signals that you can use for adaptive loading are:
Hay dos lugares donde puede tomar una decisión sobre qué servir a los usuarios: el client and the server. En el cliente, tiene las API de JavaScript mencionadas anteriormente. En el servidor, puede utilizar customer suggestions
for information on the capabilities of the user's device and the network to which it is connected.
Adaptive loading in React
React Adaptive Loading Hooks and Utilities is a suite for the React ecosystem that makes it easy to adapt your sites to low-end devices. It includes:
-
the
useNetworkStatus ()hook to adapt according to the state of the network (slow-2g,
2 g,3gor4g). -
the
useSaveData ()hook to adapt according to user's data saving preferences. -
the
useHardwareConcurrency ()hook to adapt based on the number of logical CPU processor cores in the user device. -
the
useMemoryStatus ()hook to adapt according to user device memory (RAM).
Cada gancho acepta un argumento opcional para establecer el valor inicial. Esta opción es útil en dos escenarios: cuando el browser del usuario no es compatible con la API relevante y para la representación del lado del servidor, donde puede usar los datos de sugerencias del cliente para establecer el valor inicial en el servidor. Por ejemplo, el
useNetworkStatus () hook can use the initial value passed from the client hint for server-side rendering, and when run on the client, it is updated if the effective type of the network changes.
React Adaptive Loading Hooks & Utilities are implemented using web platform API (Network information,
Memory device
and Hardware concurrency). You can use the same APIs to apply adaptive loading concepts to other frameworks and libraries, such as
Angular,
Vue, and others.
Adaptive charging in action
Esta sección explora demostraciones de cómo puede utilizar la carga adaptable y ejemplos del mundo real de sitios como Facebook, eBay, Tinder y otros.
the React movie demo shows how adapt media service based on network status. It's a movie search app that displays posters, summaries, and cast lists. Based on the type of effective connection of the user, it serves high-quality posters on fast connections and low-quality posters on slow connections.
Twitter has a data saving mode designed to reduce the amount of data used. In this mode, preview images are loaded in low resolution and large images are only loaded when you tap the preview. With this option enabled, iOS and Android users saved 50% on image data usage, and web users saved 80%. Here's a reaction
manifestation
que usa el gancho Guardar datos para replicar la línea de tiempo de Twitter. Intente abrir sus DevTools Net panel and observe the difference in the amount of data transferred as you scroll while Save Data is disabled and when it is enabled.
A screencast that compares scrolling the Twitter timeline with turning Data Saver on and off. With Data Saver on, only image previews are loaded and videos do not play automatically.
eBay conditionally enables and disables features like zoom when a user's hardware or network conditions don't support them well. You can achieve this through adaptive code splitting and loading, a way to conditionally load more interactive components or run more computationally heavy operations on high-end devices, without sending those scripts to users on slower devices. Watch the video on 16 minutes where Addy shows this pattern implemented with React.lazy () and Suspense in a
eBay product demo page.
Tinder is using a series of adaptive loading patterns on its
Web
and Lite app para que la experiencia be rápida para todos. Si un usuario está en una red lenta o tiene el Ahorro de datos habilitado, deshabilita la reproducción automática de video, limita la búsqueda previa de rutas y limita la carga de la siguiente imagen en el carrusel para cargar imágenes una a la vez a medida que los usuarios deslizan el dedo. Después de implementar estas optimizaciones, han visto mejoras significativas en el recuento de deslizamientos promedio en países como Indonesia.
Adaptive upload to Facebook
One problem that arises in adaptive loading is the grouping of devices into high-end and low-end classes based on available signals. On mobile devices,
user-agent (UA) string provides the device name that allows Facebook to use publicly available data on device characteristics to group mobile devices into classes. However, on desktop devices, the only relevant information that the UA provides is the device's operating system.
To group desktop devices, Facebook records data about the operating system, CPU cores (from navigator.hardwareConcurrency) and RAM (navigator.deviceMemory) en su seguimiento del desempeño. Al observar las relaciones entre diferentes tipos de hardware y rendimiento, clasificaron los dispositivos en cinco categorías. Con las clases de hardware integradas en el monitoreo del rendimiento, obtienen una imagen más completa de cómo las persons usan los productos de Facebook según su dispositivo y pueden identificar las regresiones más fácilmente.
Watch the video on 24 minutes, where Nate explains how Facebook approaches device grouping and uses adaptive loading for animations and JavaScript loading.
Learn more about adaptive charging
Adaptive Loading is all about designing your sites with inclusivity in mind. Create a core experience that works great for everyone, then toggle or layer features that make it even more awesome if a user has enough memory, CPU, or a fast network. For more information on adaptive charging, see the
population
and watch the Chrome Dev Summit talk:
