home » tecnología » optimizar la velocidad del sitio web para el seo: la ruptura entre marketing y desarrollo

Optimizar la velocidad del sitio web para el SEO: la ruptura entre marketing y desarrollo

10 julio 2024

Tiempo de leer: 9 minutos

Senior SEO-specialist

Velocidad del sitio web: el desglose entre marketing y desarrollo

¿Optimizar la velocidad del sitio web (para el visitante y el SEO)? Muchos de mis clientes se enfrentan a este problema. Pero, ¿qué debe hacer el desarrollo y qué puede hacer el marketing? Por eso he escrito este artículo.

Índice de contenidos mostrar

La importancia de la velocidad del sitio web (para el SEO)

La velocidad de un sitio web es crucial tanto para el visitante como para el SEO. Para el visitante en aras de la conversión. Para el SEO, por el bien del posicionamiento en Google y para permitir que Google rastree un sitio web de forma eficiente (un sitio web lento también significa más trabajo para Google a la hora de descargar las páginas).

Crear un plan de velocidad del sitio web

Un análisis exhaustivo de la velocidad del sitio web es importante para hacerse una idea de lo que ocurre «bajo el capó». Es importante tenerlo en cuenta:

La página de inicio no es la única página que necesita acelerarse. A partir de Google Analytics, determina qué páginas hay que acelerar (yo doy prioridad a las páginas que se visitan con más frecuencia).
Analiza los temas de todas estas páginas (para ello siempre utilizo la API de Lighthouse ).
No ofrezcas una optimización puntual. Mantener alta la velocidad del sitio web implica cambiar ciertos procesos internos (como la carga de imágenes en el sitio web).

Mi lista de comprobación de la velocidad del sitio web para marketing

Me complace compartir mi lista de comprobación para que el departamento de marketing no sólo optimice las imágenes ahora, sino que siga optimizándolas en el futuro.

Imágenes

Las imágenes son una parte importante de esta lista de comprobación, ya que suelen estar relacionadas con el marketing y son un componente importante de toda la historia de la velocidad del sitio web(2).

¿La imagen se sirve en el formato correcto (consejo: si no quieres complicarte mucho, utiliza siempre .webp):
- JPEG para las fotos.
- PNG para imágenes transparentes.
- SVG para vectores.
¿La imagen es inferior a 150 KB (a menos que sea un banner) (150 KB ya es bastante grande)?
¿Es la imagen tan grande como debería ser en el sitio web (la anchura y la altura correctas)?
¿Contiene la imagen un atributo lazyload cuando es
no se muestra «por encima del pliegue»?(3)
¿Está comprimida la imagen? ¿Y contiene ahora esta correcta relación entre calidad y ligereza?
Utilice múltiples variaciones de imágenes para móviles, ordenadores de sobremesa y tabletas. Cuando utilizas una sola imagen, a menudo es demasiado grande para el móvil y, por tanto, carga KB innecesarios.

Vídeo

Otro componente importante en la optimización de la velocidad de un sitio web es el vídeo. Esto también depende en gran medida del marketing.

Utilice vídeos incrustados de YouTube para evitar el alojamiento directo en el sitio web.
Implemente la carga retardada de los vídeos para que sólo se carguen cuando entren en el campo de visión del usuario.
- Asegúrese de que los vídeos son responsivos y se adaptan a distintos tamaños de pantalla y dispositivos.
Optimice todas las imágenes y miniaturas para minimizar el tamaño del archivo.
Configure el almacenamiento en caché del navegador y considere la posibilidad de utilizar una red de distribución de contenidos (CDN) para una entrega de vídeo más rápida.
Carga de archivos JavaScript y CSS de forma asíncrona para evitar el bloqueo de la renderización (en consulta con desarrollo).
Controle los tiempos de carga de las páginas y analice el impacto de los vídeos con herramientas de análisis.

Mi lista de comprobación de la velocidad del sitio web para el desarrollo

Y ahora el desarrollo. Estas son las cuestiones técnicas para la velocidad del sitio web. Lo que suele ocurrir es que el desarrollo sienta primero una buena base para la velocidad del sitio web y el marketing lo acompaña después. Puede tenerlo en cuenta a la hora de asignar estos recursos.

El servidor

En esto, distingo entre lo que puede controlarse en el servidor y lo que puede controlarse dentro del propio sitio web.

Tiempo de respuesta del servidor (TTFB): optimiza el tiempo que tarda el servidor en responder a una petición del navegador. Yo utilizo esta herramienta para comprobarlo.
Tipo de alojamiento: elige un tipo de alojamiento (compartido, VPS, dedicado o en la nube) que se adapte al volumen de tráfico del sitio web.
Ubicación geográfica del servidor: elija una ubicación del servidor cercana a su público objetivo para reducir la latencia.
- Utilizar una Red de Entrega de Contenidos (CDN): implanta una CDN para entregar archivos estáticos rápidamente desde un servidor cercano al usuario (también recomendaría una CDN con sitios web holandeses).
Almacenamiento en caché: configure el almacenamiento en caché del servidor para reducir los tiempos de carga para los visitantes que vuelven.
Optimización de la base de datos: garantizar una base de datos eficiente mediante la limpieza y optimización periódicas de las consultas.
- Equilibrio de la carga: aplique el equilibrio de la carga para distribuir eficazmente el tráfico entre varios servidores y evitar tiempos de inactividad y retrasos.
Compresión: active la compresión (por ejemplo, Gzip) para reducir el tamaño de los datos transferidos.
HTTP/2: HTTP/2 permite un manejo más eficiente de múltiples peticiones simultáneas (por ejemplo, puedes cargar varios archivos JS al mismo tiempo por defecto).
Optimización SSL/TLS: optimice SSL/TLS para conexiones seguras y rápidas.
Minimización de recursos: minimiza y combina los archivos CSS y JavaScript en el servidor para reducir el número de peticiones HTTP (esto no ayuda si tienes HTTP/2).

¿Y el negocio dentro del sitio web?

Compresión de archivos: reduce el tamaño de los archivos CSS, JavaScript y HTML eliminando los espacios y saltos de línea innecesarios, por ejemplo.
Optimización de imágenes: aplica la optimización automática de imágenes para reducir el tamaño del archivo sin pérdida de calidad (esto también puede ahorrar trabajo de marketing). Normalmente, esto se regula en todo el sitio mediante el desarrollo.
Carga asíncrona de archivos: aplique técnicas de carga asíncrona o diferida de CSS y JavaScript para evitar el bloqueo de la renderización.
Almacenamiento en caché del navegador: establezca el almacenamiento en caché del navegador para los archivos estáticos con el fin de reducir los tiempos de carga para los visitantes que regresan.
Carga lenta: implemente la carga lenta de imágenes y vídeos para reducir el tiempo de carga inicial de la página. Esto es mejor recogerlo una sola vez en todo el sitio (y a partir de ahí se añade automáticamente cuando se añaden nuevas imágenes).
Uso de sprites CSS: Combina varias imágenes o iconos pequeños en un sprite para reducir el número de peticiones HTTP. Compruebe si esto realmente tiene un impacto positivo con HTTP/2.
Optimización del contenido: asegúrate de que el contenido, especialmente por encima del pliegue, está optimizado para una carga rápida y una interacción directa con el usuario (esto afecta principalmente al LCP).
Reducir las peticiones HTTP: reduzca el número de peticiones HTTP combinando archivos y reduciendo los scripts y fuentes externas.
Evita las redirecciones: minimiza el uso de redirecciones para reducir el tiempo de carga de la página(4).
Implementar cabeceras de seguridad: Añada cabeceras de seguridad HTTP para proteger el sitio web de diversos ataques y vulnerabilidades.

Conclusión

Utilice estas listas de comprobación no sólo para establecer una buena base para la velocidad del sitio web una vez, sino también para prepararlo para el futuro. ¡Buena suerte!

El libro más completo sobre la velocidad de los sitios web

He escrito tanto sobre la aceleración de sitios web y todo lo que implica, que me gusta dividirlo en diferentes secciones; general, herramientas, puntos de mejora de la velocidad y consejos. No dude en ver y consultar todos los enlaces que aparecen a continuación para obtener más información sobre herramientas y consejos para acelerar su sitio web.