¿Cómo mejorar la velocidad de carga en Page Speed Insight?

Mejorar la velocidad de carga de tu web es un factor clave de la estrategia SEO de tu negocio y un factor determinante en la usabilidad de tu web. Desde Asiri Marketing planteamos un recorrido sobre diferentes acciones para que mejores tu puntuación en el baremo del Page Speed Insight. Nosotr@s te ayudaríamos a subir de 90 con mucho gusto. 

En 2006 Amazon informó que por cada 100 milisegundos que aceleran una página web aumenta un 1% los ingresos de su web. Seguidamente Google anunció la importancia de mejorar la velocidad de carga y como esto afecta en los resultados de búsqueda tanto a nivel SEO como SEM.

Desde entonces, es muy habitual que surgan contenidos que muestren los beneficios de tener una web rápida. En este artículo reunimos algunos de los factores clave para mejorar la velocidad de carga de un sitio web. Según un estudio de Google, la probabilidad de rebote en una web aumenta de forma drástica con cada segundo de más:

En primer lugar debes de tener en cuenta, ¿qué tan rápido es suficientemente rápido? Optimizar la velocidad de tu página puede ser un proceso tedioso y constante. Siempre habrá margen de mejora, entonces, ¿cuándo deberíamos estar satisfechos?

Una forma es utilizar  Page Speed Insight para comparar la velocidad de carga de tu sitio con la de sus principales competidores. Apunta a ser el más rápido del grupo. El mismo modo que penaliza el hecho de que una página web no sea «mobile-friendly» también se penalizan las páginas cuyo contenido pesa tanto que ralentiza su carga.

 

 

En Asiri Marketing estamos preopucpados con la velocidad de carga, por lo que mejor trabajarlo en casa y luego poder utilizarlo en nuestros clients. En la versión Mobile de nuestra web estamos en 66% y en la versión Escritorio marca un 99%.

¿Quién no ha abandonado alguna vez una web porque estaba tardando demasiado en cargar?

Asumámoslo, vivimos en la era de la inmediatez, donde lo queremos todo aquí y ahora. Nuestra tolerancia a la frustración con los tiempos de espera se ha ido reduciendo drásticamente en los últimos años. Entonces, ¿cómo puedes acelerar tu sitio de esta manera? Comencemos con algunas de las cosas que tienen el mayor impacto.

Desde Asiri Marketing os planteamos una serie de factores para mejorar la velocidad de carga en Page Speed Insight de Google, en nuestra web está fucnionando, estamos convencidos que en la tuya también lo hará.

1.- Usa un CDN (Red de entrega de contenido)

Aloja tus archivos multimedia en una red de distribución de contenido es una de las mejores formas de acelerar tu página web. Puedes ahorrar hasta un 60% de ancho de banda y reducir a la mitad el número de solicitudes que realiza tu sweb.

Los CDN funcionan alojando yus archivos en una gran red de servidores en todo el mundo. Cuando un usuario visita su sitio desde Tailandia, está descargando archivos del servidor más cercano a él. Debido a que el ancho de banda se distribuye en tantos servidores diferentes, reduce la carga en un solo servidor y también protege tu sitio de ataques DDoS y picos de tráfico.

Hemos probado algunos CDN´s y Cloudflare es nuestro favorito (y es gratis para arrancar:

2.- Utiliza WP Engine.

Configura la monitorización del tiempo de respuesta para una variedad de diferentes empresas de alojamiento web. Simplemente abre una cuenta, carga tu sitio de WordPress en blanco con un tema idéntico y luego utiliza una herramienta de monitorizacion del servidor para probar el tiempo de respuesta cada cinco minutos.

 

Es posible que cambiar los servidores web no sea algo que pueda hacer en menos de 45 minutos, pero tiene el potencial de tener un impacto mayor que todos los ‘ajustes’ a continuación combinados. ¿Nuestro consejo? Trabaja con un proveedor de confianza como puede ser Azamedia o comienza con un host como WP Engine y vuelva más tarde si aún tiene problemas de velocidad de la página.

3.- Utiliza un complemento de almacenamiento en caché.

Si está utilizando WordPress, una de las formas más rápidas y fáciles de reducir la velocidad de carga de tu página es instalar un complemento de almacenamiento en caché como WP Total Cache o WP Super Cache. Por supuesto, si está utilizando WP Engine, puede omitir este punto, ya que tienen el almacenamiento en caché incorporado.

Los dos complementos mencionados anteriormente se pueden descargar gratis y son muy buenos. A pesar de su nombre, los complementos de almacenamiento en caché hacen mucho más que el almacenamiento en caché del navegador, aunque esa es su función principal. Para aquellos que usan WordPress y buscan mejorar la velocidad de la página rápidamente, a menudo es más fácil simplemente instalar un complemento.

4.-Agrega encabezados de caducidad para aprovechar el almacenamiento en caché del navegador.

Los encabezados de caducidad le indican al navegador si debe solicitar un archivo específico del servidor web o si debe obtener una versión de una página del caché del navegador. Por supuesto, esto solo se aplica si un usuario ya tiene una versión de su página web almacenada en su caché, por lo que solo acelerará su sitio para los usuarios que ya han visitado su sitio web.

Los encabezados de caducidad aceleran su sitio de dos maneras. En primer lugar, reducen la necesidad de que los usuarios descarguen dos veces los mismos archivos de su servidor web. En segundo lugar, reduce la cantidad de solicitudes HTTP que deben realizarse, lo que acelera aún más el tiempo que tarda la página en cargarse.

5.- Utiliza un buen tema (si utilizas WordPress).

Prevenir siempre mejor que curar. Para evitar muchos problemas de velocidad de páginas en primer lugar, debes optar por un buen host, un buen CDN y un buen tema o diseño de la web.

Como especialista en marketing digital, es frustrante cuando los diseñadores web crean sitios que se ven hermosos pero que si funcionan terriblemente desde una perspectiva de SEO o una perspectiva de velocidad. El objetivo es buscar el diseño web que encuentre el equilibrio.

Hace años  los diseñadores todavía usaban flash y otras tecnologías primitivas para crear sitios. Hoy en día, los diseñadores utilizan temas de WordPress cada vez mejor optimizados con constructores cada vez más competitivos.

6.- Comprime tus imágenes con WP Smush.it

Si está utilizando WordPress, instala el complemento WP Smush.it para comprimir automáticamente tus imágenes. Esto reducirá el tamaño de tus imágenes sin perder calidad visual. Lo mejor de este complemento es que funciona en segundo plano cada vez que subes una nueva imagen. Tambiésn puede ejecutarlo retrospectivamente en todas las imágenes cargadas en tu biblioteca de medios.

7.- Limpia tu base de datos.

Una de las trampas con WordPress es que su base de datos puede volverse muy desordenada debido a borradores guardados, revisiones de publicaciones, complementos desactivados, etc. WP Optimize es un complemento fantástico que elimina rutinariamente todas las cosas que no necesita y que están saturando base de datos.

8.- Comprime tu sitio web con gzip.

Gzip es un método simple para comprimir los archivos de su sitio web para ahorrar ancho de banda y acelerar los tiempos de carga de la página. Gzip funciona comprimiendo sus archivos en un archivo zip, que es más rápido para que el navegador del usuario cargue. El navegador del usuario luego descomprime el archivo y muestra el contenido. Este método de transmisión de contenido desde el servidor al navegador es mucho más eficiente y ahorra mucho tiempo.

Puede habilitar Gzip simplemente agregando el siguiente código en su archivo .htaccess:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

Para comprobar si Gzip está habilitado o funciona correctamente en tu sitio.

9.- Arregla todos los enlaces rotos.

Los enlaces rotos no solo son una pérdida de ancho de banda, sino que también son una de las formas más seguras de lograr que un usuario abandone su sitio. Recientemente, uno de nuestros clientes tuvo varios cientos de errores 404 en las Herramientas para webmasters de Google. Después de corregir los enlaces rotos mejoró considerablemente la tasa de rebote.

Si la velocidad de la página no es una razón lo suficientemente convincente para arreglar tus enlaces rotos, es de esperar que el impacto en estas métricas de comportamiento sí lo sea.

Para identificar tus enlaces rotos, recomendamos utilizar las siguientes herramientas:

• Herramientas para webmasters de Google (pestaña de errores de rastreo)
• Screaming Frog
• Ahrefs.

La razón por la que recomiendo usar los tres es porque algunos profundizarán más que otros e identificarán errores de rastreo que otros no. Una vez que haya alcanzado 0 enlaces rotos en las tres herramientas.

10.- Reduce tus redireccionamientos.

Si bien los redireccionamientos 301 (permanentes) son preferibles a los errores 404 (enlaces rotos), aún no son ideales, ya que ralentizan el tiempo que tarda el navegador en llegar a la versión correcta de una página.

Screaming Frog es una vez más una gran herramienta para detectar redireccionamientos 301. Si está usando una PC, también puede usar Xenu Link Sleuth , que es un herramienta para rastrear datos de sitios web.

11.- Minifica tus archivos CSS y JS.

Cuando observas que tus páginas se cargan despacio, es probable que tenga algo que ver con muchos archivos Javascript  o CSS que se cargan de manera ineficiente. Una de las trampas de WordPress y otros sistemas de administración de contenido es que se agrega un nuevo archivo JS o CSS virtualmente cada vez que instala un nuevo complemento.

Hay varias formas de minimizar tus archivos. La primera forma consiste en juntar todos sus archivos en uno, por lo que en lugar de llamar a diez archivos javascript individuales, simplemente coloque todo su javascript en un archivo.

El segundo aspecto de la minificación implica eliminar los espacios en blanco y hacer que los archivos sean más pequeños. Si está utilizando WordPress, WP Minify es un gran complemento que hace todo esto automáticamente por ti.

12.- Reemplaza PHP con HTML estático donde sea posible.

PHP es excelente para hacer que tu sitio sea eficiente y reducir la necesidad de ingresar la misma información varias veces. Sin embargo, la información de llamada a través de PHP consume recursos del servidor y debe reemplazarse con HTML estático donde no se ahorra tiempo.

13.- Enlaza a tus hojas de estilo.

De manera similar al punto anterior, @import usa más recursos que los que se vinculan directamente a sus hojas de estilo a pesar de lograr exactamente el mismo resultado. Otra razón por la que no usar @import es que algunos de los navegadores más antiguos no lo admiten, por lo que es mejor evitarlo siempre que sea posible.

14.- Desactiva los ping backs y trackbacks en WordPress.

Los pingbacks y trackbacks realmente no tienen ningún uso práctico en WordPress y, sin embargo, a menudo están habilitados de forma predeterminada. Recomendaroa,ps apagar ambos, ya que obstruyen tius base de datos y aumentan la cantidad de solicitudes que se realizan.

15.- Habilita Keep-Alive.

HTTP Keep Alive se refiere al mensaje que se envía entre la máquina cliente y el servidor web solicitando permiso para descargar un archivo. Habilitar Keep Alive permite que la máquina cliente descargue varios archivos sin pedir permiso repetidamente, lo que ayuda a ahorrar ancho de banda.

Para habilitar Keep Alive, simplemente copia y pegue el siguiente código en tu archivo .htaccess.

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

16.- Especifica las dimensiones de la imagen.

Antes de que su navegador pueda mostrar tu página web, debes descubrir cómo diseñar tu contenido alrededor de tus imágenes. Sin conocer el tamaño de estas imágenes, el navegador lo resuelve, lo que hace que trabaje más y tarde más.

Especificar las dimensiones de la imagen evita que el navegador tenga que pasar por este paso, lo que ayuda a acelerar las cosas.

17.- Especifica un juego de caracteres en los encabezados HTTP.

Por la misma razón que la anterior, es útil especificar un juego de caracteres en los encabezados de respuesta HTTP, para que el navegador no tenga que dedicar más tiempo a determinar qué juego de caracteres está usando. Puedes hacer esto simplemente agregando una etiqueta de juego de caracteres UTF-8 en la sección de su sitio web.

18.- Pon CSS en la parte superior y JS en la parte inferior.

Se considera una buena práctica colocar su CSS lo más cerca posible de la parte superior de su página, ya que los navegadores no renderizarán su página antes de renderizar el archivo CSS. Javascript, por otro lado, debe estar lo más cerca posible de la parte inferior, ya que evita que los navegadores analicen la etiqueta antes de que se cargue y se complete.

19.- Desactiva el enlace directo de imágenes

Cuando el ‘enlace activo’ de otro sitio web a sus imágenes, roba ancho de banda, lo que ralentiza tu sitio. Para evitar que otros sitios acaparen tu ancho de banda, puedes agregar este fragmento de código a su archivo .htaccess. ¡Recuerde cambiar el bit que dice asiri.es!

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?asiri.es [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

20.- Apaga todos los complementos que no utilices.

Con los sitios de WordPress, los complementos suelen ser el mayor culpable de ralentizar el sitio. Si hay algún complemento que ya no usas o no es esencial, elimínalo.

21.- Minimizar los tiempos de ida y vuelta (RTT).

El tiempo de ida y vuelta es el tiempo que tarda el cliente en enviar una solicitud y el servidor en responder. Se ve afectado por una gran variedad de cosas, pero se ve afectado principalmente por la cantidad de solicitudes que se envían. Se pueden reducir casi a la mitad el número de solicitudes HTTP que se estaban realizando, lo que redujo enormemente el tiempo de ida y vuelta.

Para reducir la cantidad de solicitudes, utiliza sprites CSS para llamar menos imágenes, minimice y combine sus archivos JS y CSS, y no llame a nada que no necesite. Una de mis mayores quejas con WordPress es cómo los complementos que solo se necesitan en ciertas páginas, como Disqus o Contact Form 7, tienden a llamarse en cada página, lo que crea solicitudes innecesarias. Reduce el número de solicitudes innecesarias reducirá sus RTT.

22. Utiliza Sprites CSS.

Un objeto es una imagen grande que contiene todas tus imágenes. Se parecen a los juegos de pegatinas que solía obtener con cien pegatinas en una sola hoja. Usando CSS puede ocultar todo en la imagen excepto una sección entre un conjunto de coordenadas.

Los sprites CSS funcionan porque es más rápido cargar una imagen grande y usar CSS para mostrar la sección que desea que cargar muchas imágenes más pequeñas. Esto se debe a que el navegador no necesita realizar tantas solicitudes.

La forma más rápida de usar sprites CSS es usar SpriteMe , que es una herramienta que te permite convertir fácilmente todas tus imágenes en un sprite CSS.

Por qué la velocidad de la página es más importante ahora que nunca.

Dado que se espera que el uso de Internet móvil vaya imponiendose de forma más masiva al desktop, nunca ha sido tan importante como ahora corregir y optimizar la velocidad de tu web. Los usuarios de Internet son menos tolerantes con los sitios web lentos que nunca, y el cambio hacia dispositivos móviles habilitados para Internet significa que si no eres rápido, no te verán.