Mejorar la velocidad de tu página web para convertir más

Que no te la cuelen, el tema de mejorar la velocidad de tu página web igual que el tamaño… importa jejeje… Aprovecha algunos de estos consejos que te planteamos en este artículo para mejorar tu velocidad web. Este factor cobra cada día más importancia y no queríamos perder la ocasión de escribir un artículo sobre el tema.

Mejorar la velocidad web es un factor crítico en el marketing digital actual. Tiene un impacto significativo en:

• Cuánto tiempo permanecen los viajeros en su sitio web.
• Cuántos de ellos se convierten en clientes que pagan.
• Cuánto paga según el CPC que nos cuesta para atraerlo.
• Sobre que palabras claves estás ranqueando y como son de rentables.

 

Hay que reconocerlo, la mayoría de las webs no funcionan lo suficientemente bien o no al menos tan bién como lo esperado. Tener una web optimizada a la mayor velocidad web posible requiere de un trabajo y una dedicación que no todos los clientes están dispuesto a asumir.

Además es un tema que requiere de un conocimiento técnico y a la vez del negocio que requiere que una agencia de marketing digital especializada esté detrás de la mejoras. Son muchas las tareas en la estrategia de marketing y en la comercialización de un alojamiento para tenerlas todas revisadas al 100%.

 

 

Esto es fácil de entender porque la mayoría de las personas no comprenden realmente la importancia de este detalle que a menudo se pasa por alto, por lo que no ven el valor de invertir tiempo y dinero para mejorarlo en unos segundos la carga de la web. (De ahí que no todo el mundo crea interesante invertir en velocidad)

Lo que puede parecer una cantidad de tiempo poco rentable, incluidos aquellos que se centran únicamente en la optimización de motores de búsqueda, puede que no lo sea tanto. Recientemente nos encontramos avisos en Google Ads para la mejora de este factor, de ahí que ya no solo en SEO sino también en SEM es clave.

Asumimos que eres como nosotros y que quieres mejorar la velocidad de tu  web y por lo tanto los resultados. Aquí te lanzamos algunos consejos para

1. Elige el Hosting adecuado.

Es imprescindible contar con el mejor hosting posible, no sólo porque proporcionará alojamiento a tu dominio y lo dotará de seguridad o soporte, una parte importante es que además internamente contará con una serie de requisitos para que tu web esté optimizada desde un principio.

Nosotr@s llevamos tiempo trabajando con Azamedia y la verdad es que estamos muy contentos. Lo que te recomendamos es que si tu servidor no cuenta con algunas de estos factores sería bueno que fueras pensando en cambiar de hosting:

• Discos SDD: un buen servidor debe utilizar discos SSD para agilizar la velocidad de carga.
• Caché: un sistema interno de caché, servirá la misma información comprimida al usuario ahorrando velocidad web.
• Certificado SSL: necesitas tener instalado el certificado Lents Encrypt no solo para mostrar que tu web es segura, también como paso al sistema HTTP/2 adaptado a los nuevos navegadores para ganar rapidez.
• Enjaulado de cuentas: este sistema hará que tu web no se vea afectado si otros dominios del alojamiento compartido con otros clientes tiene exceso de visitas.
• PHP7: si tu hosting no ofrece el software PHP7 implantado es mejor que contrates otra plataforma para alojar tu negocio o proyecto web.

2. Reduce las llamadas HTTP.

Cada archivo necesario para que una página web se procese y funcione, como HTML, CSS, JavaScript, imágenes y fuentes, requiere una solicitud HTTP por separado. Cuantas más solicitudes se realicen, más lenta se cargará esa página.

Ese problema ocurre porque la mayoría de los diseñadores web, independientemente de su habilidad o experiencia, no hacen que la  velocidad de tu página web sea una prioridad.  Aquí es donde comienza el problema:

La mayoría de los temas cargan uno o más archivos CSS y varios archivos JavaScript. Algunos, como Jquery o FontAwesome, generalmente se cargan de forma remota desde otro servidor, lo que aumenta drásticamente el tiempo que tarda una página en cargarse.

Esto se vuelve aún más problemático cuando considera los archivos CSS y JavaScript adicionales agregados por los complementos. Es fácil terminar con media docena o más solicitudes HTTP solo con archivos CSS y JavaScript.

Cuando tiene en cuenta todas las imágenes de una página, cada una de las cuales requiere una solicitud HTTP por separado, rápidamente se sale de control. Soluciones del tipo:

• Combinar archivos JavaScript en un solo archivo.
• Combinar archivos CSS en un solo archivo.
• Reduces o eliminas los complementos que cargan sus propios archivos JavaScript y / o CSS. En algunos casos, como con Gravity Forms, tiene la opción de desactivar su carga.
• Usa sprites para imágenes de uso frecuente.
• Utiliza una fuente como FontAwesome o Ionic Icons en lugar de archivos de imagen siempre que sea posible porque solo se necesita cargar un archivo.

3. Incluye la barra diagonal final.

Un detalle como O¡omitir la barra diagonal final en los enlaces que apuntan a su sitio web, ya sea de fuentes externas (esfuerzos de creación de enlaces) o desde su propio sitio web, tiene un impacto negativo en la velocidad de carga de tu web.

Así es cómo:

Cuando visita una URL sin la barra diagonal final, el servidor web buscará un archivo con ese nombre. Si no encuentra un archivo con ese nombre, lo tratará como un directorio y buscará el archivo predeterminado en ese directorio.

En otras palabras, al omitir la barra diagonal final, está obligando al servidor a ejecutar una redirección 301 innecesaria. Si bien puede parecerle instantáneo, toma un poco más de tiempo y, como ya hemos establecido, cada poco se suma.

https://example.com (esto es malo) o https://example.com/servicios (esto también es malo)

vs.

https://example.com/ (esto es bueno) o https://example.com/services/ (esto también es bueno)

4. Habilitar compresión.

La habilitación de la compresión GZIP puede reducir significativamente la cantidad de tiempo que lleva descargar sus archivos HTML, CSS, JavaScript porque se descargan como archivos comprimidos mucho más pequeños, que luego se descomprimen una vez que llegan al navegador.

No te preocupe: tus visitantes no tendrán que hacer nada más porque todos los navegadores modernos admiten GZIP y ya lo procesan automáticamente para todas las solicitudes HTTP.

5. Habilitar el almacenamiento en caché del navegador para mejorar tu Velocidad web.

Con el almacenamiento en caché del navegador habilitado, los elementos de una página web se almacenan en el navegador de sus visitantes para que la próxima vez que visiten su sitio, o cuando visiten otra página, tu navegador pueda cargar la página sin tener que enviar otra solicitud HTTP al servidor para cualquiera de los elementos en caché.

Una vez que se ha cargado la primera página y tus elementos se almacenan en la memoria caché del usuario, solo se deben descargar elementos nuevos en las páginas siguientes. Esto puede reducir drásticamente la cantidad de archivos que deben descargarse durante una sesión de navegación típica.

6. Recursos “Minify”.

Al minimizar sus archivos CSS y JavaScript, se eliminan los espacios en blanco innecesarios y los comentarios para reducir el tamaño del archivo y, como resultado, el tiempo que lleva descargarlos.

Afortunadamente, esto no tiene que ser un proceso manual porque hay varias herramientas disponibles en línea para convertir un archivo en una versión más pequeña y reducida de sí mismo.

También hay varios complementos disponibles para WordPress que reemplazarán los enlaces en el encabezado de su sitio web para sus archivos CSS y JavaScript normales con una versión reducida de ellos sin modificar sus archivos originales, incluidos los complementos populares de almacenamiento en caché, como:

• W3 Caché total.
• WP Super Cache.
• WP Rocket.

Puede tomar un poco más de esfuerzo realizar la configuración correcta porque la minificación a menudo puede romper CSS y JavaScript, por lo que una vez que haya minimizado todo, asegúrese de probar que la web funciona bien.

7. Priorizar la carga del contenido a la navegación.

Su sitio web puede parecer que el visitante se carga más rápidamente si está codificado para priorizar el contenido de la mitad superior de la página; en otras palabras, el contenido que es visible se carga progresivamente al desplazamiento del usuario.

Esto significa asegurarse de que los elementos que aparecen sobre el pliegue también estén tan cerca del comienzo del código HTML para que el navegador pueda descargarlos y representarlos primero.

También es crítico incluir cualquier CSS y JavaScript que se requiera para representar esa área en línea en lugar de en un archivo CSS externo.

8. Optimizar archivos multimedia.

Debido a que los dispositivos móviles con cámaras de alta calidad y los sistemas de administración de contenido como WordPress, hacen que sea necesario cargar imágenes. Muchas personas simplemente toman una foto y la suben sin darse cuenta de que, a menudo, la imagen es al menos cuatro veces más grande de lo que es necesario.

Esto ralentiza considerablemente la web, especialmente para usuarios móviles. De aquí debemos tener en cuenta la importancia de contar con un banco de imágenes adecuado para nuestra web.

La optimización de los archivos multimedia en su sitio web tiene el potencial de mejorar tu velocidad web, y hacerlo es relativamente fácil, por lo que es una buena inversión de tu tiempo.

Optimizando Imágenes

• Opta por el formato ideal. JPG es perfecto para imágenes fotográficas, mientras que GIF o PNG son mejores para imágenes con grandes áreas de color sólido. Los archivos PNG de 8 bits son para imágenes sin un canal alfa (fondo transparente) y los archivos de 24 bits son para imágenes con un canal alfa.
• Asegúrate de que las imágenes tienen el tamaño adecuado. Si una imagen se muestra a 800 píxeles de ancho en su sitio web, no hay beneficio al usar una imagen de 1600 píxeles de ancho.
• Comprime el archivo de imagen. Además de ser el mejor programa de edición de imágenes, Adobe Photoshop tiene increíbles capacidades de compresión de imágenes a precios razonables. Sino estamos por aprender esta herramienta también puede usar complementos gratuitos de WordPress, como WWW Image Optimizer , Imsanity y TinyJPG , que comprimen automáticamente las imágenes cargadas.

Optimizando video

• Elige el formato adecuado. MP4 es el mejor en la mayoría de los casos porque produce el tamaño de archivo más pequeño.
• Utiliza el tamaño óptimo (dimensiones) en función del tamaño de la pantalla de los visitantes.
• Elimine la pista de audio si el video se usa en segundo plano como elemento de diseño.
• Comprime el archivo de video. Uso Adobe Premiere la mayor parte del tiempo, pero Camtasia también es una opción sólida.
• Reduce la duración del video.
• Considera subir videos a YouTube o Vimeo en lugar de servirlos localmente y usar su código de incrustación de iframe.

Para mejorar la velocidad de tu página web , debes utilizar las imágenes de tamaño adecuado en función del tamaño de la pantalla en lugar de simplemente cambiar su tamaño.

Hay dos formas de manejar esto, en función de la implementación de una imagen.

• Las imágenes dentro del HTML de su sitio web se pueden mostrar utilizando src set, que permite al navegador seleccionar, descargar y mostrar la imagen adecuada en función del tamaño de la pantalla del dispositivo que utiliza un visitante.
• Las imágenes colocadas a través de CSS, generalmente como imágenes de fondo, pueden servirse mediante consultas de medios para seleccionar la imagen adecuada en función del tamaño de pantalla del dispositivo que utiliza un visitante.

9. Utiliza el almacenamiento en caché y CDN.

El almacenamiento en caché permite que su servidor web almacene una copia estática de sus páginas web para que puedan entregarse más rápidamente al navegador de un visitante, mientras que un CDN permite que esas copias se distribuyan a servidores de todo el mundo para que el navegador de un visitante pueda descargarlas del servidor más cercano a su ubicación. Esto mejora la velocidad de la página considerablemente.

Despues de esta batería de sugerencias para mejorar tu velocidad web, simplemente te animamos a que dejes tu proyecto en manos de profesionales y confíes en que estos detalles marcan la diferencia.