Desenvolviendo los secretos del SEO: presentamos la guía definitiva para la velocidad del sitio web

La velocidad es importante tanto para los usuarios como para el SEO: nadie quiere esperar varios segundos a que se cargue un sitio web. Los usuarios prefieren abandonar su sitio e ir a un competidor que pasar el tiempo esperando. La cita "el tiempo es dinero" es tan cierta ahora como lo fue cuando Benjamin Franklin la dijo hace siglos. El tiempo también importa para Google. La velocidad es uno de los factores de clasificación de Google. En igualdad de condiciones, cuanto más rápido sea el sitio web, mayor será el rango. Y no hay nadie que argumente que tener un sitio web rápido no es una necesidad hoy en día. La pregunta es: ¿cómo hacer que su sitio web sea más rápido? Nuestro autor invitado en este Unwrapping the Secrets of SEO es Tomek Rudzki, Jefe del equipo de Investigación y Desarrollo de Elephate, ganador de "Mejor Agencia Pequeña de SEO" en los European Search Awards de 2018. Rudzi ofrece consejos sobre cómo acelerar su sitio web y ganar.

Esta guía completa para la velocidad del sitio web incluye tres artículos. Lea las siguientes publicaciones aquí: La guía definitiva para la velocidad del sitio web - Parte 2 y La guía definitiva para la velocidad del sitio web - Parte 3.

Estudio gratuito de velocidad de página

1. El tiempo es dinero

Hay muchas investigaciones que apuntan al hecho de que un sitio web más rápido equivale a más ingresos.

• Pinterest se dio cuenta de que reducir los tiempos de espera percibidos resultó en un aumento de la cantidad de suscripciones en un 15 % .
• BBC notó que por cada segundo adicional que se carga su sitio web, el 10% de los usuarios se van.
• DoubleClick de Google investigó que la reducción de la carga de la página de 19 (¡extremo!) a 5 segundos dio como resultado tasas de rebote un 35 % más bajas y sesiones un 70 % más largas.
• El estudio de Amazon revela que solo un segundo de ralentización de la carga del sitio web puede resultar en una caída de ventas de 1.600 millones cada año.

Puedes decir, “está bien, pero no me importa Pinterest, la BBC o Amazon; Háblame de MI negocio'”. Google creó una buena herramienta que calcula el impacto de la velocidad en los ingresos potenciales . Llené la herramienta con los datos de ejemplo: visitantes mensuales promedio 1,000,000, tasa de conversión de 3.26%, con un valor de pedido promedio de $82.

Puede preguntar: "Tomek, ¿por qué eligió estos datos: tasa de conversión de 3.26, pero no 1% o 4%, o incluso 10%?" Ok, obtuve los datos de Statista. Según sus informes , el valor medio de los pedidos de compras online en Estados Unidos en el cuarto trimestre de 2017 (en dólares estadounidenses) fue de 82. Además, la tasa de conversión media fue de 3,26.

Parece que reducir la velocidad de carga de la página de 5 segundos a 2,8 segundos puede generar $ 1,97 millones más de ingresos por año. ¡Suena bien!

Por supuesto, es sólo una calculadora. Pero la calculadora se basa en datos reales. No creo que Google agregue algunos ceros al final del valor calculado para que parezca serio.

2. Piense siempre en los usuarios móviles

Según Statcounter, en febrero de 2018, más del 55 % de los usuarios se conectaban a Internet a través de dispositivos móviles o tabletas: ¡estadísticas impresionantes!

Hoy en día, si quieres satisfacer a tus usuarios móviles, debes:

• asegúrese de que su sitio web funcione bien en dispositivos móviles (es decir, si responde)
• hacer que el sitio web sea realmente rápido.

Debe tener en cuenta que los usuarios móviles a menudo tienen conexiones deficientes y usan dispositivos de gama baja, por lo que cada kilobyte enviado por el "cable" realmente importa. Su sitio web puede funcionar rápido en una computadora personal, con todos los extras, pero puede ser realmente lento en dispositivos móviles. Y las probabilidades de que obtenga lo primero ya no están a su favor.

3. Usa GTMetrix

Hay una gran herramienta que te dice qué puedes mejorar para que tu sitio web sea más rápido. Puede auditar cualquier sitio web de forma gratuita. No es necesario ser propietario de un sitio web para iniciar una auditoría (es decir, audité Giphy.com). La herramienta combina datos y sugerencias de Google PageSpeed ​​Insights y Yahoo Slow.

Vale la pena ir a https://gtmetrix.com/ y escribir la URL de su sitio web.

Puede ver la lista de recomendaciones sobre cómo mejorar la velocidad de su sitio web haciendo clic en las pestañas "PageSpeed" o "YSlow".

Por ahora, es posible que gran parte de la información de estas pestañas no sea comprensible porque es demasiado técnica. Está bien. Roma no fue construida en un día. Haré todo lo posible para que comiences. Hay una sección interesante llamada "Cascada" que le muestra exactamente cuándo se descargaron y cargaron los recursos (archivos JS y CSS, archivos de imagen).

Le recomiendo que obtenga una cuenta de GTMetrix (¡es gratis!). Los usuarios registrados pueden personalizar la prueba y cambiar el navegador y la ubicación del servidor. Además, una vez que haya iniciado sesión, puede habilitar la opción "crear video". La opción de vídeo es genial. Le muestra cuánto tiempo tendrán que esperar los usuarios hasta que puedan ver los cambios visuales en su sitio web.

Pero no te vuelvas loco con GTMetrix

Aunque GTMetrix es una gran herramienta, a veces sus recomendaciones pueden llevarlo a una búsqueda inútil. No hay nada malo con GTMetrix. Es solo que no existe una regla de "talla única" al optimizar la velocidad, algo de lo que GTMetrix es muy consciente:

Por ejemplo, GTMetrix recomienda que configure el almacenamiento en caché del navegador para los recursos almacenados en el servidor de Google Analytics o Facebook. A decir verdad, estos recursos están fuera de su control: no puede hacer nada . Los desarrolladores de Google y Facebook decidieron que, por alguna razón, estos recursos no deberían almacenarse en caché durante un largo período de tiempo.

Por supuesto, hay muchas herramientas similares a GTMetrix, como WebPageTest (que es mucho más poderosa que GTMetrix). Sin embargo, decidí presentarles GTMetrix por dos razones:

1. GTMetrix es más fácil de usar
2. WebPageTest no le da recomendaciones claras sobre qué hacer.

Me gustaría mencionar otra herramienta interesante: Google Lighthouse (si usa Chrome, ya lo tiene instalado). Kamila Spodymek de Elephate escribió un excelente artículo sobre cómo los SEO pueden beneficiarse de las métricas de rendimiento de Google Lighthouse . ¡Definitivamente una buena lectura!

4. Usar compresión GZIP

Hay una regla que debes saber: si un recurso pesa menos, el navegador puede descargarlo mucho más rápido, lo que provocará que la página cargue más rápido . Sus usuarios móviles realmente se beneficiarán de ello.

Puede disminuir el tamaño de sus archivos de texto (como HTML, SVG, CSS y JS) implementando la compresión GZIP. Es bastante común que la compresión GZIP ahorre entre el 70 y el 80 % del tamaño de un recurso, sin perder ninguna información. ¡Es realmente un gran problema!

Visite https://checkgzipcompression.com/ para verificar cuántos kilobytes puede ahorrar (¡o ya ha guardado!) al implementar GZIP. En el caso de Searchmetrics.com, GZIP está habilitado (permitió ahorrar un 83% del tamaño de la página). ¡Suena bien!

¡Sin embargo, ten cuidado! A veces, los webmasters cometen un error y comprimen todos los archivos estáticos, incluidas las imágenes JPEG, PNG y PDF. Permítanme citar la Documentación de la red de desarrolladores de Yahoo : “Los archivos de imagen y PDF no deben ser comprimidos con gzip porque ya están comprimidos. Intentar comprimirlos con gzip no solo desperdicia la CPU, sino que también puede aumentar potencialmente el tamaño de los archivos”.

Si desea ahorrar kilobytes adicionales, también es una buena idea minimizar sus archivos HTML, JS y CSS .

5. Sirve imágenes a escala

Es un hecho que un sitio web cargará muy lentamente (¡especialmente en teléfonos móviles!) debido a una gran cantidad de imágenes.

Por lo tanto, a veces puede ser una buena idea reducir el número de imágenes. Pero en lugar de limitarlos, recomendaría optimizar los existentes . Dicho esto, las imágenes que se sirven a sus usuarios deben escalarse y comprimirse (ya sea sin pérdida o con pérdida).

Primero, hablemos de escalar las imágenes. Digamos que hay diez miniaturas de 220 × 220 por página, pero subiste imágenes de 800 × 800 al servidor. ¿Debería servir las imágenes ya escaladas a los usuarios, o forzar al navegador a escalarlas "sobre la marcha"?

La respuesta es fácil. Si no escala las imágenes en el lado del servidor, entonces el navegador tiene que descargar muchos más kilobytes de los necesarios. Para nada, porque las imágenes se van a escalar de todos modos. Además, es un trabajo adicional para la GPU en el lado del cliente. Sin mencionar que la velocidad de carga de la página se verá afectada.

6. Comprime tus imágenes

Ahora, hablemos de comprimir imágenes. Esta es otra técnica imprescindible para la web moderna.

Generalmente, hay dos tipos de compresión de imágenes:

• Sin pérdidas (hace un muy buen trabajo, puede estar seguro de que la calidad no se verá afectada).

• Con pérdida (por lo general, hace que una imagen sea más liviana, pero, como dice el nombre: pierde algo de calidad).

Surge la pregunta: ¿qué tipo de compresión es mejor: sin pérdida o con pérdida?

• Realmente depende de la situación. Si su sitio web proporciona imágenes del espacio exterior, cada detalle importa. Pero si hace un blog personal, probablemente estaría bien con la compresión con pérdida, incluso con una alta tasa de compresión. Le recomiendo que experimente para ver qué configuración se adapta mejor a su sitio web.

7. ¡No fuerce a sus visitantes móviles a descargar fotos Full HD!

Los usuarios de dispositivos móviles tienen pantallas mucho más pequeñas y simplemente no se beneficiarán de sus fotos HD. En cambio, se enojarán si los obligas a descargar imágenes grandes.

Examinemos el ejemplo de Elephate.com . Tenemos una foto bastante grande (2600 × 1463 píxeles) de los miembros de nuestra empresa en la parte superior de nuestra página de inicio (522 kb)

Está totalmente bien para computadoras de escritorio: pueden descargarlo muy rápido. Pero, para usuarios móviles, usamos los parámetros "srcset" de HTML. Gracias a la implementación de esto, los usuarios móviles simplemente descargarán una imagen mucho más pequeña (no necesitan una más grande), lo que tiene un impacto positivo en el tiempo de carga de la página.

Los usuarios de escritorio no sufrirán porque verán la foto Full HD. Pero los usuarios móviles realmente se beneficiarán de ello.