Las 5 formas más efectivas de reducir el tiempo de carga del sitio web

¿Qué tan rápido se inicia su sitio web o aplicación?ally cargas es la primera impresión que reciben sus usuarios. En esta guía, enumeraremos técnicas comprobadas para reducir valiosos segundos de la carga inicial de la página.

Tiempo de carga inicial

El tiempo que pasa desde que su usuario o cliente ingresa el nombre de dominio de su sitio web hasta que ve el contenido son los segundos más importantes que tiene para causar una buena primera impresión.

Amazon found that every 100 milliseconds of latency cost them 1% in sales.

And yet, many web developers treat this as an afterthought. More and more libraries are added for more and more features, and gradually over time, they start seeing less conversions. Worse yet, these losses in conversion are hard to detect because they abandon a página de carga lenta antes de que tenga tiempo de enviar métricas.

Algunas de estas son técnicas que se pueden implementar en el front-end y otras en el back-end. Independientemente, las aplicaciones web deben cargarse rápidamente.

Agrega las medidas correctas

The first thing you need to do is to add measurements. There are many stages of the loading process, and you won’t know where the bottleneck is without measuring the right segments.

The following are the most important milestones of the loading process:

Lo que esto significa es que debería realizar un seguimiento de las métricas cada segmento de este diagrama.

Veamos cómo podrías hacer eso.

Browser request to response served:

Mida esto en su servidor. Desea obtener el momento en que su API recibe la solicitud cuando entrega una respuesta. Dependiendo de si se realizan llamadas externas a, por ejemplo, bases de datos, esto puede ser muy corto o un cuello de botella significativo.

Respuesta atendida a la respuesta recibida:

Esto es más difícil de medir, pero una forma de hacerlo es agregar una marca de tiempo cuando su respuesta salga de su servidor y medir eso con la hora actual del lado del usuario en el primer momento posible (una etiqueta de script en el encabezado del HTML página).

Respuesta recibida a la primera pintura con contenido:

La primera pintura con contenido es cuando el primer elemento se representa en el DOM. Eso puede ser algo tan simple como un texto, un fondo o una rueda de carga. Esto se puede medir ejecutando Lighthouse en las herramientas de desarrollo de Chrome.

De la primera pintura con contenido a la pintura con contenido más grande:

The largest contentful paint is when the largest element is rendered in the user’s browser viewport. This typically signals the end of the “rendering” portion of the page load, and the user sees a populated screen. This is also measured by running Lighthouse.

Pintura con contenido más grande a tiempo para interactuar:

finalally, time to interact refers to when the user can perform actions like a scroll, clicking, and type. It can be especially frustrating if this duration is long because they’ll see a rendered screen in front of them but can’t do anything when they expect they can! This is another metric that Lighthouse helps us measure.

Reducir código

Ahora que tiene las medidas, puede comenzar a realizar optimizaciones. Las optimizaciones tienen ventajas y desventajas y las mediciones le dirán cuáles valen la pena.

The fastest page to load is a blank page, but a lot of code can be added to an app before anyone can notice the difference in loading speed between it and a blank page. What often happens is that the increments are so minute that you don’t perceive the difference from build to build until one day, it just starts to feel slow. You realize your app is bloated, and it’s at this point that reducing code will make a difference.

Obtiene dos mejoras en la velocidad cuando reduce el código:

• Su aplicación se transfiere a través de la red más rápido.
• The user’s browser finishes parsing the code more quicker.

The first speedup is small; since requests are compressed over the wire, if you cut 1 MB of source code, it might amount to only 10 KB of savings on bandwidth. However, the speedup from parsing is importante. Your users are probably running your app on a whole spectrum of browsers and computers, many of whom don’t have the computing power that might parse the code as quickly as it does on your own.

O podrían estar corriendo dispositivos móviles, con incluso menos potencia de cálculo. La diferencia puede estar en la magnitud de los segundos.

So the less code you have, the quicker the browser can finish parsing and get to running your app. Even if you want to show a loading screen that Javascript controls, it has preceded by the parsing of that code.

But you don’t want to cut features or actually delete code. Luckily, there are a couple of standard practices to reduce code without having to do that.

• Ejecute su código a través de minificadores. Los minificadores realizan optimizaciones como nombres cortos y largos en nombres cortos (signUpDarkModeButton se convierte en ss), eliminan espacios en blanco y otros para que su código sea lo más compacto posible sin perder nada.
• Importar parciales. Libraries are often bloated with things you don’t need but come packaged together under an umbrella package. Maybe you only want a specific function of a utility library, so instead of importing the entire library, you can import just the code you need.
• Código muerto tembloroso. Sometimes you leave code for debugging purposes or haven’t thoroughly cleaned up a deprecated feature, and though it’s in your source code, it’s never run. There are tools in the Cadena de herramientas de JavaScript, like Webpack, that can detect dead code or unused dependencies and remove them from the production build automatically para ti.

Dividir el código en trozos

Después de reducir tanto código como pueda de su aplicación general, puede pensar en exprimir aún más esta idea y reducir el código necesario para la carga inicial.

Let’s say 20% of your code is powering some app feature that users can only get to after a few clicks. It would be wasted time for the browser to parse that code before showing a loading screen. Splitting your code into chunks can significantly reduce the time to interact.

Instead of having an intertwined dependency graph of imports for all your Javascript files, identify easily cut areas. For example, maybe a component loads some heavy libraries. You can isolate that component into its own file and then only import it when the user is ready to interact with that component.

Existen varias bibliotecas para diferir la carga, según el marco que esté utilizando. No hay necesidad de exagerar con esto y dividir cada componente porque entonces el usuario tiene una carga inicial rápida y tiene que esperar a cada interacción posterior. Encuentre las piezas más grandes que pueda segmentar y divida su código fuente allí.

Procesamiento del lado del servidor

Desde browsers need to do all that intensive parsing and compiling and have users on Chromebooks and mobile devices, one common technique to reduce load times is having your servers take some of that load. What this means is that instead of giving a blank page and then using Javascript to fill in all the content, as most single-page apps do these days, you can run a Javascript engine on your server (usually Node.js) and fill in as much of the data and content as you can.

Your servers will be much faster and more predictable than users’ browsers. Inevitably, they’ll still need to parse some Javascript code for the app to be interactive. Still, server-side rendering can fill in much of the initial content so that when the user gets the page, it’s already showing a loading screen or progress bar at a minimum.

And if data is needed for the initial view, the client doesn’t need to make a separate request to get that; it’ll already be hydrated in the app for the client to use.

Comprimir activos

Assets make a page come to life, and a page doesn’t feel completely loaded until those assets finish rendering. This may be your background, user interface icons, a user profile picture, even the loading spinner. Often, assets can shift the layout as well, so if a user starts trying to interact with something, the page might continue to jump around while assets are being loaded in. Sometimes, these assets are the largest contentful paint.

But assets are also one of the heaviest parts of an app. An image can come in at several megabytes, and loading many icons can easily exceed the browser’s maximum concurrent network request limit, causing a staggering queue of loading.

Casi nunca querrá descargar una imagen de Internet y luego hacer referencia a ella en su aplicación. Se debe cambiar el tamaño de las imágenes to the smallest possible dimensions that they will be shown at. If you have a user profile displayed in a tiny 50 pixel by 50-pixel element, without resizing, your app will take the time to download the full image that looks sharp as desktop wallpaper and then resize it down to the tiny size.

En segundo lugar, las imágenes se pueden comprimir dependiendo de su formato. Estos días, webm is the preferred format, but the field of compression on the web is constantly being improved upon, and many new formats are on the horizon. Due to the changing nature of formats, some browsers may not support the newer ones! Luckily, browser technology can let the user’s browser load whichever format they support.

So, compress to the latest y greatest format, but also keep a less modern version, and use picture y video elementos que admiten formatos alternativos.

Para Concluir

Estas son cinco de las técnicas más efectivas para brindar a sus usuarios una ultrarrápida primera carga on your app. These will improve your conversion rates, user happiness, and even rankings de búsqueda, ya que el SEO recompensa los tiempos de carga rápidos. A Terraestructura, we employ these techniques and more so that users can create and view diagrams that you see in this article as quickly as possible.