Prueba la velocidad de tu sitio en dispositivos móviles para mejorar el WPO y SEO

Prueba la velocidad de tu sitio en dispositivos móviles para mejorar el WPO y SEO de tu página web o blog.

La mayoría de los sitios pierden la mitad de sus visitantes mientras se cargan. Con tecnología de WebPageTest.org Google pretende ayudarnos.

Google nos ofrece herramientas que nos sirven para mejorar la velocidad de nuestro sitio y de paso mejorar nuestro WPO y SEO.

Te recomendamos que analices tus artículos y portadas de tu web con la siguiente url https://testmysite.thinkwithgoogle.com/intl/es-419

Siempre debemos dar interactividad al usuario por debajo de los 10 segundos incluso con mala conexión y tener un tiempo de respuesta del HTML menor a 400 ms.

Además os dejamos una pequeña guía para mejorar nuestra velocidad.

Por qué es importante la auditoria. Las cargas rápidas de las páginas proporcionan una mayor captación de usuarios, aumentan el número de vistas de la página y mejoran la conversión.

Puedes mejorar la velocidad de carga de tu Web si integras enlaces y secuencias de comandos que son necesarios para la primera impresión visible y difieres los innecesarios para después.

Consejos para mejorar la prueba la velocidad de tu sitio en dispositivos móviles para mejorar el WPO y SEO

Mejorar rendimiento

La mejora del rendimiento es un proceso que comienza con la minimización o, al menos, la optimización de los datos que los usuarios descargan. Comprender cómo un navegador representa esos recursos es un requisito previo para mejorar la eficiencia del código. Después de mejorarlo, necesitas probarlo.

Optimización de ahorro de contenido

Para ofrecer un excelente rendimiento, debes optimizar la entrega de cada byte de tu sitio web.

Las aplicaciones web continúan creciendo en términos de alcance, ambición y funcionalidad, y eso es bueno. No obstante, la implacable marcha hacia una Web más dinámica está impulsando otra tendencia: la cantidad de datos que descarga cada app continúa aumentando a un ritmo sostenido. Para ofrecer un excelente rendimiento, debemos optimizar la entrega de cada byte.

Lograr una experiencia web instantánea en vista de estos requisitos no es un tema menor y por ello es fundamental optimizar la eficacia del contenido: eliminar descargas innecesarias, optimizar la codificación de transferencia de cada recurso mediante diferentes técnicas de compresión y aprovechar el almacenamiento en caché, siempre que sea posible, para eliminar descargas redundantes.

• Haz un inventario de tus propios recursos y los de terceros en tus páginas.
• Mide el rendimiento de cada recurso: su valor y su rendimiento técnico. Ejemplo no uses carruseles si no son estrictamente necesarios para tus ausuarios y está medido.Determina si los recursos proporcionan suficiente valor.
• Los recursos más rápidos y más optimizados son aquellos que no se envían. Debes eliminar los recursos innecesarios en tu app o web.

Usar compresión GZIP

Una vez que hayas eliminado los recursos innecesarios, el siguiente paso será comprimir los recursos restantes que el navegador debe descargar. Mejoraremos el tiempo de descarga, incluso con conexiones malas.

Optimización de las imágenes

A menudo, las imágenes representan la mayor parte del peso descargados en una página web y también ocupan una considerable proporción del espacio visual de esta. Como resultado, la optimización de imágenes a menudo puede ser uno de los más eficaces medios de ahorro de bytes

Hay que optimizar las imágenes y para los iconos mejor usar SVG (imagenes vectoriales) comprimidos con GZIP. Una buena técnica es usar lazyload en las imágenes que no vemos. Es decir a demanda del usuario. Si no se ha descargado no ocupa espacio, ni tiempo

Si fuera necesario usar una imagen de trama, proporciona y optimiza diferentes variantes de cada imagen con la ayuda de srcset y picture.

No permitir que el navegador escale las imágenes. Debemos dar los tamaños ajustados.

Web Fonts

La tipografía es fundamental para lograr un buen nivel de diseño, desarrollo de la marca, legibilidad y accesibilidad. Las fuentes web permiten todo lo anterior pero reducen nuestro WPO. Mejor una y si puede ser en base 64 dentro del VSS para evitar latencias

Uso de la cache del navegador

Usar las implementación de un caché HTTP. Lo único que debes hacer es asegurarte de que cada respuesta del servidor proporcione las directivas de encabezado HTTP correctas para indicar al navegador cuándo y durante cuánto tiempo puede almacenar la respuesta en caché.

Cada recurso puede definir su política de almacenamiento en caché mediante el encabezado HTTP Cache-Control. Se recomienda un mínimo 7 días para recursos estáticos de nuestra web. JS, CSS, e imágenes.

Rendimiento con minimización

La mejora del rendimiento es un proceso que comienza con la minimización o, al menos, la optimización de los datos que los usuarios descargan. Comprender cómo un navegador representa esos recursos es un requisito previo para mejorar la eficiencia del código. Después de mejorarlo, necesitas probarlo.

Optimización del ahorro de contenido. Para ofrecer un excelente rendimiento, debes optimizar la entrega de cada byte de tu sitio. Si quitas comentarios, espacios en blanco, tabulaciones y saltos de línea en los ficheros como js, csss y html mejorar enl WPO y el SEO al mejorar el tiempo de entrega.

¿Comprendes qué sucede en los pasos entre la recepción de HTML, CSS y JavaScript, y el procesamiento para convertirlos en píxeles representados?

La optimización para mejorar el rendimiento se basa en la comprensión de lo que ocurre en estos pasos intermedios entre la recepción de los bytes de HTML, CSS y JavaScript. Debetener un render progresivo que vaya pintado cosas pronto para que el usuario vea algo.

El lenguaje de marcado HTML se transforma en un Document Object Model (DOM) y el lenguaje de marcado CSS se transforma en un CSS Object Model. Debemos proporcionar el html y css lo antes posible.

DOM y CSSOM son estructuras de datos independientes. El Timeline de Chrome DevTools nos permite capturar e inspeccionar los costos de construcción y procesamiento del DOM y CSSOM.

Reducir la complejidad el html y el css siempre es bueno.

Evitar modificar el DOM o CSS por javascript para que no tenga que recalcular el pintado de la página. Siempre que sea posible el javascript en asíncrono, por eventos del usuarios (click,zonas de visibilidad, load,…) y al final de la página.

La base de toda estrategia de rendimiento sólida es una buena medición e instrumentación. No se puede optimizar lo que no se puede medir. En este documento, se explican distintos métodos para medir el rendimiento de CRP.

Usar la Web Testmysite de Google

Te recomendamos que analices tus artículos y portadas de tu web con la siguiente url https://testmysite.thinkwithgoogle.com/intl/es-419

Plugin Lighthouse de Chrome para auditorías rápidas de WPO

Lighthouse es una herramienta de auditoría de apps web que realiza una serie de pruebas en una página determinada y, a continuación, muestra los resultados de la página en un informe consolidado.

Puedes ejecutar Lighthouse como una extensión de Chrome o un módulo de NPM, que es útil para integrar Lighthouse con sistemas de integración continua.

Para empezar, consulta Auditorías de apps web con Lighthouse. https://developers.google.com/web/tools/lighthouse/

En el informe del plugin Lighthouse. queda claro que debemos migrar el blog frikipandi.com a HTTPS y poner el javascript en asíncrono. Del resto no salimos mal parados excepto por la publicidad.

También podemos ver los datos que nos da el navegador

<script>
function measureCRP() {
var t = window.performance.timing,
interactive = t.domInteractive – t.domLoading,
dcl = t.domContentLoadedEventStart – t.domLoading,
complete = t.domComplete – t.domLoading;
var stats = document.createElement(‘p’);
stats.textContent = ‘interactive: ‘ + interactive + ‘ms, ‘ +
‘dcl: ‘ + dcl + ‘ms, complete: ‘ + complete + ‘ms’;
document.body.appendChild(stats);
}
</script>
</head>
<body onload=»measureCRP()»>

Para ver los informes Velocidad del sitio también puedes usar Google Analytics:

Inicie sesión en su cuenta de Analytics. Vaya a su vista. Seleccione la pestaña Informes. Seleccione Comportamiento > Velocidad del sitio. Informe Tiempos de página https://support.google.com/analytics/answer/1205784

Conclusión, os recomendamos usar Lighthouse https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk, la web https://testmysite.thinkwithgoogle.com/intl/es-419 y el ya clásico Web Speed Insights de Google https://developers.google.com/speed/pagespeed/insights/

Prueba la velocidad de tu sitio en dispositivos móviles para mejorar el WPO y SEO de tu web. Google y tus usuarios te lo agradecerán.

¿Qué resultados dan en tu web? No dudes en comentar.

Fuente https://developers.google.com/web/fundamentals/performance/