Un trato rápido y velocidades de carga rápidas son las claves para atraer la atención y el tiempo de un usuario en tu sitio Web.
Debe haber escuchado de personas que hablan sobre la velocidad con lo que es un sitio web en particular y qué tan rápido responde a sus comandos.
Sin embargo, de hecho es una declaración indefinida cuando se usa el término «rápido».
¿Por qué estamos hablando de esto?
Un sitio web puede ser más rápido en su dispositivo, pero puede tardar una cantidad diferente de tiempo en cargarse en otro dispositivo.
Las capacidades del dispositivo y la conexión de red juegan un papel importante en la determinación del rendimiento de un sitio web en ese dispositivo específico.
Por lo tanto, cuando verifica la velocidad de un sitio web en particular, el tiempo que se muestra es la velocidad a la que se carga el sitio web en la mayoría de los dispositivos de sus usuarios.
¿Qué necesita el usuario?
Actuación.
Y las actuaciones no sólo se refieren a la velocidad de carga inicial del sitio Web, sino también a su experiencia global.
Desde el primer clic para abrir el sitio web hasta la última acción, ya sea intentar lanzarse en paracaídas, tocar o hacer clic en un cuadro de diálogo, el usuario debería poder navegar por todos ellos.
Si el tiempo de carga inicial de un sitio web es más bajo pero lleva mucho tiempo procesar un paquete de JavaScript cuando se hace clic en él, es posible que el usuario no lo aprecie.
Si un enlace en la página no funciona cuando se hace clic en él, si la página no aparece fácilmente o si una llamada de acción (CTA) no lleva al usuario a la página deseada, también es una experiencia desagradable.
Este es el impacto que tiene el rendimiento de un sitio web en una empresa:
Si quieres evitar cometer estos errores, quizás quieras reflexionar sobre los siguientes puntos.
- ¿Qué métricas te permitirían medir con precisión el rendimiento de un usuario?
- ¿Cómo usar estas métricas en usuarios reales?
- Según las métricas y medidas registradas, ¿qué sitio web puede calificar como «rápido»?
- ¿Cómo mejorar el sitio Web en función de sus conclusiones?
Para ayudarlo a responder las preguntas anteriores, tenemos un repertorio debajo de las métricas que necesita optimizar.
Una buena optimización de estos aspectos sin duda aumentará la velocidad de carga de su sitio Web.
Las medidas de velocidad centradas en el usuario son:
- Primera pintura (FP) y Primera pintura con contenido (FCP)
Estas métricas marcan los puntos que son visibles por primera vez cuando un usuario accede a una página.
Esto es obligatorio para responder a la pregunta si funciona o no.
Mientras que FP nota el primer cambio en la pantalla que difiere de la página desde la que navegaste, FCP mide el primer contenido que ves, que es texto, imagen, etc.
Mira la imagen de abajo para entender mejor.
Fuente: WP Rocket
- Primera pintura significativa (FMP)
Esta métrica es esencialmente la inspección de inspección de contenido para verificar si es útil o no.
Los «elementos héroe» (los aspectos más importantes en la página específica) deben cargarse y abrirse primero.
Como la necesidad de información está satisfecha, el usuario no puede ser molestado si se cobra o no el resto de la página.
- Tiempo de interactividad (TTI)
El TTI es la métrica que marca el momento en que se devuelven los datos de tu sitio Web y también son visibles para el usuario.
Es posible que el contenido no sea visible para un usuario en caso de que aún no se haya cargado un código JavaScript en la página o si algunas tareas largas hubieran bloqueado el archivo principal.
A veces, las tareas largas pueden ser un obstáculo y ralentizar un sitio web.
Si un usuario ejecuta una tarea en el sitio web, es posible que no se cobre ya que el archivo principal no borra todas las demás tareas.
Consulte la siguiente tabla para averiguar qué necesita optimizar y cuáles son los efectos.
| Por experiencia | Métrico |
| eso es caminar? | FP / FCP |
| ¿Es útil? | FMP |
| ¿Es precioso/útil? | ITT |
| ¿Es fluido y rápido? | Tareas largas |
Una vez que hemos aclarado en qué debe trabajar, aquí hay algunos consejos que pueden ayudarlo a impulsar su sitio web de manera exponencial.
10 consejos para mejorar la velocidad Medidas centradas en el usuario para el mejor rendimiento de tu sitio Web
1. Cree nuevas fuentes para las mejores soluciones de DNS
Los mejores tiempos de búsqueda de DNS son la clave para una carga más rápida de los sitios Web, porque esta es la primera opción que se produce cuando se carga una página.
Mejorar este tiempo puede aumentar todas las medidas de velocidad centradas en el usuario de su sitio Web.
Fuente: KeyCDN
Para aquellos que usan el DNS por defecto, les proporciona su proveedor de alojamiento, ¡queremos que sepan que se están perdiendo muchas cosas!
Cloudflare es el proveedor de DNS más apreciado y rápido. ¡No solo es un excelente administrador, sino que también es gratuito!
Las otras opciones efectivas disponibles son WordPress, DigitalOcean, dnsimple y Zilore.
2. La calidad no es suficiente, optimiza tus imágenes
Las imágenes juegan un papel importante en la elección del tamaño, de ahí la velocidad de carga de un sitio Web.
Si desea aumentar la velocidad de su sitio Web, debe modificar ciertos aspectos de las imágenes de su sitio Web.
Fuente: Desarrolladores de Google
WebP
WebP es un mejor formato de imagen para descargar imágenes en su sitio web, gracias a su tamaño más pequeño.
El tamaño de una imagen WebP es aproximadamente entre un 25 y un 30 % inferior al de una imagen jpg, jpeg o PNG.
Sin embargo, puede ser problemático si alguien quiere usar su sitio web en un navegador que no carga imágenes WebP. En tales casos, podemos reparar una imagen virgen en lugar de la imagen real.
SVG
SVG es un formato gráfico vectorial, lo que esencialmente significa que la calidad sigue siendo la misma que el tamaño.
No solo es extremadamente eficiente, sino que también se puede animar. Es mucho mejor que una simple imagen. ¿No lo es?
Cambie sus imágenes a formato SVG y reduzca el tamaño de su página tanto como sea posible, y aumente significativamente la velocidad de carga de su página.
Imágenes a cargo de parseux
Es una técnica astuta y, en nuestros días, noticia que no cobra la información necesaria.
Es una forma efectiva de reducir la velocidad de carga de una página.
La carga diferida es el método por el cual se carga por primera vez la información visible para un usuario cuando abre la página. El resto se cobra cuando se contamina hasta el fondo.
Google mismo ha lanzado una versión actualizada de Googlebot para apoyar esta optimización.
3. No busques un policía de fantasía
El uso de políticas creativas y atractivas le da a su sitio Web un aspecto indiscutiblemente increíble. Cada vez más personas han comenzado a utilizar políticas sofisticadas para integrar su sitio web.
Sin embargo, no son conscientes del efecto negativo que esto tiene en la velocidad de carga de la página.
En tales casos, su texto no se puede cargar rápidamente y formar un flash de texto sin estilo (FOUT) o un texto de texto invisible (FOIT).
Esto puede ser una experiencia invaluable para el usuario y debe evitarse.
4. Inspira tus propios íconos policiales
El uso de los paquetes de íconos de políticas actualmente disponibles es una excelente opción para mejorar la presentación de su sitio Web. Sin embargo, es un huevo de doble corte.
Así como mejora la experiencia, disminuye la velocidad de carga del sitio Web. Estos íconos se pueden usar hasta 100 Ko para un archivo CSS y 300 Ko para un paquete policial.
Una mejor solución es usar servicios como Fontello y Fontastic para crear sus propias políticas y usarlas en su sitio web.
Esto no sólo es más rápido de cargar, sino que también es una excelente oportunidad para mostrar su lado creativo en su sitio web.
5. Deshabilitar CSS no utilizado
CSS puede ser uno de los principales responsables de ralentizar las velocidades de carga. La necesidad de cargar todas las páginas mientras el usuario está en la página de inicio no ralentizará su sitio web.
Optimice su sitio web para ayudar con varios servicios disponibles, como CSS Utilized, Purify CSS y UnCSS para iniciar archivos inútiles.
Nota: Esta optimización debe realizarse página por página y requiere muchas pruebas. Pero al final, es un golpe.
Redirigir los archivos bloqueando el regreso a la baliza atrás
Los archivos CSS externos pueden ralentizar la velocidad de carga de otro contenido de valor.
Esto puede entrenar una pantalla de video por más tiempo, porque el archivo CSS se cargará en el orden en que está organizado en el paquete.
Mueva estos archivos al final de la baliza para aumentar la velocidad de carga. Una de estas optimizaciones permite cargar y mostrar más rápidamente el contenido que no sean los archivos CSS.
7. Organice CSS importante en Apex
Optimice su sitio web para insertar el CSS más importante en la parte superior de la página.
Es importante destacar que mantengo el CSS que debe mostrarse sobre el sitio en su sitio web.
Esto ayuda al navegador a representar un CSS importante y mostrarlo antes de que un archivo bloquee la representación.
8. Evita las regresiones
La optimización del sitio web antes del lanzamiento de nuevas funciones es obligatoria para evitar cualquier retroceso.
Debe asegurarse de que no haya ningún obstáculo para el correcto funcionamiento del sitio Web antes de actualizarlo con nuevos atributos.
Se pueden usar herramientas como Lighthouse y PageSpeed Insights para registrar cualquier regresión o disminución en las métricas del sitio web.
9. Retrasa JavaScripts no importantes
La carga de un tren pesado de JavaScript pronto aumentará el tiempo de carga del sitio Web.
El reportero cobrará después de que el resto del contenido se entregue al usuario que tiene algo que ver.
Definitivamente es una mejor experiencia coincidir con una pantalla en vivo mientras el JS se carga en el plano trasero.
Fuente: Varvy
Basta con añadir ‘defer’ a la baliza para optimizar el JavaScript.
10. Autorizar caché del navegador
En la actualidad, seguramente tendrá una idea de la cantidad de archivos que se cargan cuando abre un sitio Web. Sin embargo, estos archivos también se pueden almacenar para su uso posterior.
Al activar la caché del navegador, permites que el navegador almacene aspectos como…