04.5 Velocidad de carga y compresión en el SEO de tu web

Velocidad de carga y compresión en SEO

Una rápida respuesta de carga es determinante para el buen posicionamiento de un sitio web. Como ya sabes, Google busca siempre ofrecerle los resultados de mejor calidad a sus usuarios, esto incluye contenido actualizado y de calidad, pero también otros factores como el que vamos a tratar en este capítulo, la velocidad de carga.

Que la velocidad de tu sitio web sea buena determinará que el usuario se quede en tu sitio o en cambio lo abandone.

Según los estudios que Google ha publicado, el uso del móvil para acceder a internet supera en más del 50% al uso del PC.

Por lo que mejorar la velocidad de carga aún se hace más importante si quieres que los usuarios visiten tu sitio y sobre todo, decidan quedarse en él por la fluidez que ofrece la navegación. Y es que, si el usuario que decide hacer clic en tu enlace mostrado en las SERPs obtiene una interminable carga de la web, hará que vuelva atrás antes de siquiera ver el contenido que le ofrecías y que elija otro sitio web que Google le ha mostrado en sus resultados. La consecuencia de todo esto es que obtienes una elevada tasa de rebote y una disminución del CTR, poniendo en peligro la posición que habías conseguido.

Además uno de los factores que los robots analizan desde que se lanzó la actualización de algoritmo Mobile-first; es el tiempo de respuesta que ofrece el sitio web.

¿Cómo mejorar la velocidad de carga en SEO de una página web?

Una rápida velocidad de carga depende de varios factores que vamos a tratar detalladamente a continuación.

Servidor / Alojamiento Web

Elegir un buen servidor es primordial para que la velocidad de tu sitio no se vea perjudicada. A día de hoy existe un amplío abanico de opciones a elegir pero debemos tener en cuenta aspectos como si el servidor está preparado para la velocidad de carga en SEO, donde está ubicado, o si está especializado para el CMS que tú usas. Por ejemplo si usas WordPress, un hosting que ofrezca planes para WordPress con herramientas exclusivas para un rápido desarrollo y una fácil gestión, configuración de la caché… Son aspectos destacables a la hora de decantarse por una de las opciones.

Este punto sería fundamental para reducir el tiempo de respuesta del servidor. Si habéis realizado un test con la herramienta PageSpeed Insights de Google; puede que en ocasiones, una de las sugerencias de optimización que la herramienta os muestra sea «Reducir el tiempo de respuesta del servidor». Esto podremos mejorarlo disponiendo de un buen servicio de alojamiento, entre otros aspectos que vamos a seguir tratando a lo largo del capítulo.

Compresión GZIP

Otro aspecto vinculado al servidor, ya que la compresión GZIP es un servicio que facilita el proveedor de hosting. Con la compresión GZIP lo que se consigue es reducir el tamaño de las respuestas a solicitudes HTTP, disminuyendo a su vez el tiempo de descarga del rescurso que corresponda, y reduciendo también el tiempo de renderizado de las páginas que se cargan por primera vez. La compresión GZIP también puede habilitarse a través del archivo  .htaccess de nuestro sitio, pero antes debemos asegurarnos que nuestro servidor sea compatible con esto.

Caché

Antes que nada debemos saber qué es la caché, cómo funciona y qué tipos de caché hay.

¿Qué es la caché?

La caché es un espacio o memoria que almacena documentos web como páginas, imágenes, logotipos, etc. Sirve para reducir la carga de los servidores, las peticiones realizadas y el tiempo de descarga de dicha página y renderizado.

¿Cómo funciona la caché?

La primera vez que un usuario visita una página web, en la caché se crean copias de parte del contenido que hay en la página que no serán modificadas con frecuencia. Esto pueden ser imágenes, logos, hojas de estilos (CSS), etc. Cuando ese mismo usuario vuelve a visitar el sitio web, es decir, es un usuario recurrente, la caché le sirve las copias anteriormente guardadas para que la carga de la página sea más rápida. Mejorando con esto también la experiencia de usuario.

Pero para que esto pase y el navegador guarde archivos en caché, debemos configurarlo previamente en nuestro sitio web, para darle la orden al navegador de hacer una copia de los archivos.

La caché tiene un periodo de duración, que podemos elegir nosotros. Dependiendo del archivo, y la fecha de caducidad seleccionada, dichos archivos serán actualizados, creando nuevas copias de archivos en caché. Por ejemplo: Especificamos en la caché que la copia del logo de un sitio web debe durar 12 semanas. Por lo que al pasar ese tiempo si volvemos a acceder al sitio, la caché creará una copia nueva del logo, para servirla en futuras sesiones.

Tipos de caché

• Caché del servidor:  Como su nombre indica esta caché se encuentra en el servidor. Sirve para que cuando se hagan peticiones HTTP al entrar en una web el servidor sirva la copia que tiene en caché, haciendo este proceso mucho más rápido.
• Caché del navegador:  En este caso es el navegador quien guarda una copia de parte de la página para mostrarla al usuario cuando éste visite la web.

Ambos tipos de caché son complementarias y han de configurarse para obtener mejor velocidad de carga.

Para configurar la caché debemos contactar por un lado con el servidor, en caso de que no estuviese ya en funcionamiento. Es algo que por defecto los servidores tienen configurado.

Por otro lado mediante algún plugin, módulo o con la inserción de código directamente en htaccess podemos configurar la caché del navegador. Eligiendo el tiempo de caducidad que sea conveniente en cada caso.

Nota: solo se podrá configurar y establecer la caché para recursos internos de la web. No es posible configurar la cache de recursos de dominios externos como Google Analytics por ejemplo, un caso muy común.

Optimización de imágenes

Subir a un sitio web imágenes sin optimizar repercute en el tiempo que necesita la web para ser mostrada. Esto se debe a que si se suben a un sitio imágenes con un gran peso que no han sido preparadas para web, en cuanto a tamaño y resolución, se estará cargando información innecesaria que dará como resultado más tiempo en procesar dicho sitio. Se recomienda subir imágenes con el tamaño al que se vayan a mostrar y no dejar que sea el archivo CSS el que escale la imagen al tamaño que corresponde. También se debe realizar un compresión sin pérdidas, que respetará la calidad del archivo, pero reduciendo su resolución y con ello su peso.

Esto podrá hacerse con cualquier programa de edición (Photoshop o similares). Incluso existen plugins y módulos que realizan dichas optimizaciones en imágenes que ya han sido previamente subidas al sitio.

Minificación de JavaScript, CSS y HTML

¿Qué es la minificación de JavaScript, CSS o HTML?

La minificación de un código como JavaScript, CSS o HTML es la optimización del código, cuando se reduce el archivo quitando espacios en blanco, saltos de líneas, comentarios, etc. Con esto se consigue reducir el peso del archivo y como resultado se obtiene una velocidad de carga más rápida.

Para los programadores y desarrolladores es muy útil en cuanto a organización estructurar el archivo con saltos de líneas, comentarios o espacios, para tener una mayor claridad en el trabajo que están realizando, pero para los robots como el de Google, dicha jerarquización del contenido no le es de utilidad, y lo que va a analizar es que la carga de estos sea rápida. Esto se consigue minificando los códigos. También existen herramientas online y plugins que realizan dicha tarea.

CDN

¿Qué es una CDN?

CDN por sus siglas en inglés Content Delivery Network, es un conjunto de servidores distribuidos en diferentes lugares, que tiene como función entregar de una forma más rápida y eficiente el sitio web a los usuarios. Por ejemplo: Si tu sitio web está alojado en Francia y tienes activo el servicio de CDN, al usuario que visite la web desde Nueva York, la CDN le servirá tu sitio desde un servidor de Nueva York o desde el servidor más próximo a la ubicación en la que se encuentre el usuario.

Ventajas de la CDN

Al servir el contenido de un sitio web desde el servidor más cercano al usuario, hace que la velocidad de carga que presenta el sitio sea mucho menor. Por lo tanto la usabilidad y la experiencia de usuario será mucho más positiva, consiguiendo con esto mejorar el SEO de la web.

Otros aspectos a tener en cuenta, si usas herramientas CMS como WordPress

Hay ciertas cuestiones que se deben tener en cuenta a la hora de mejorar la velocidad de carga de un sitio web que son los siguientes:

Elegir la plantilla adecuada

Ciertas plantillas cargan y añaden mucho código innecesarios que hacen más lenta la carga de una web.

Diseños recargados

Al igual que en las plantillas, un diseño recargado de un sitio conlleva a una lenta velocidad de carga.

Número excesivo de plugins

Se debe evitar por todos los medios usar innumerables plugins en un sitio web. Esto carga el sitio web con código no optimizado que afecta a la velocidad. Es recomendable usar el menor número de plugins posibles. El uso de plugin puede sustituirse directamente por la inserción de código en el sitio web. Por ejemplo si tenemos configurado en nuestro sitio un plugin de Google Analytics, que puede incluir otras funciones que no estemos usando, es mejor integrar el código que nos facilita Analytics en nuestra cabecera del sitio. Así evitaremos la inclusión de código innecesario. Otro aspecto a tener en cuenta es eliminar todos los plugins que no usemos y que tengamos desactivados.

Mantener las actualizaciones al día

Tener tu sitio web actualizado al completo, además de ayudarte a proteger y mejorar la seguridad de tu web, también mejora la velocidad de carga. Ya que dichas actualizaciones se realizarán para corregir posibles errores que pudiesen ralentizar el sitio, añadir más código del necesario, etc.

Borrar el contenido demo o de prueba

Cuando se está creando un sitio web, se suele subir contenido de prueba para ir viendo la forma que va teniendo el sitio y cómo va quedando en cuanto a diseño. Dejar este contenido ahí no solo conlleva a que este aparezca en las SERP’s, también tiene la desventaja de que el usuario tiene que esperar a que más contenido extra se cargue al visitar el sitio web.

Páginas webs para optimizar el código HTML de tu página

Norfipc.com

El funcionamiento es sencillo, introducimos el código HTML y la aplicación web lo comprime eliminando todas las anotaciones y saltos de linea que el programador hubiese incluido.  Eliminar las anotaciones en código no afecta al correcto funcionamiento de la web, son notas incluidas por el desarrollador las cuales sirven de guía a las personas para entender el contenido.

Las anotaciones son leídas por los navegadores haciendo que tarden más tiempo en mostrar la web puesto que gastan recursos que podrían estar dedicados a estar interpretar código HTML.

Es importante hacer una copia de seguridad de los archivos antes de volverlos a subir a FTP.

Páginas web para comprimir Hojas de estilo (CSS) y JavaScript

Minifier.org

Del mismo modo que con el HTML, el código CSS y JavaScript puede (y debe) ser comprimido, es sumamente importante crear una copia de seguridad del código antes de realizar la compresión por motivos evidentes, además si deseamos realizar una edición posteriormente en alguno de los códigos usamos la versión sin comprimir para entender el contenido más cómodamente y luego comprimirlo de nuevo.

Una herramienta de gran utilidad es Minifier.org. Solo copiamos nuestro código, clickamos en «MINIFY» y nuestro código será comprimido tardando así menos tiemwpo en ser procesado por los navegadores.

Webs para reducir el peso de las imágenes

Como mencionamos más arriba, uno de los elementos que lastran la velocidad de carga de una página web son las imágenes, es por ello que debemos de optimizar su peso todo lo posible. Esto lo podemos hacer mediante Photoshop, GIMP o reductores de peso online.

Optimizilla.com

Una herramienta extremadamente simple pero a la vez útil, es recomendable pasar nuestras imágenes por aquí para quitarles peso antes de subirlas a nuestra web.

Conseguir los recursos optimizados automáticamente

Una de las últimas funciones añadidas por Google es la de descargar los recursos optimizados automáticamente desde Page Speed Insights.

Una vez hemos realizado el test de velocidad, en la parte inferior nos indica la opción de descargar los recursos optimizados.

Luego de descargarlos solo tenemos que subirlos mediante FTP reemplazando los originales.

Configuración de caché del navegador en el sitio web

En el archivo .htaccess de nuestro sitio debemos especificar el tiempo de cacheado que durarán los archivos de la web. Esto lo especificamos mediante el siguiente código, con ello como hemos explicado antes conseguimos reducir la velocidad de carga cuando el usuario entra en nuestro sitio.

Copia y pega el siguiente código en tu .htaccess antes de la línea de código

# Con esto especificamos el tiempo de cacheado

y configuramos el tiempo que los navegadores guardan

en caché los archivos planos

<IfModule mod_expires.c>

# Enable expirations

ExpiresActive On

# Default directive

ExpiresDefault «access plus 1 month»

# Favicon

ExpiresByType image/x-icon «access plus 1 year»

# Images

ExpiresByType image/gif «access plus 1 month»

ExpiresByType image/png «access plus 1 month»

ExpiresByType image/jpg «access plus 1 month»

ExpiresByType image/jpeg «access plus 1 month»

# CSS

ExpiresByType text/css «access plus 1 month»

# Javascript

ExpiresByType application/javascript «access plus 1 year»

</IfModule>

# FIN

Atención: El htaccess es un archivo muy delicado por lo que un error puede hacer que nuestro sitio web no se vea. Así que antes de editarlo se debe descargar una copia de seguridad de este y en el caso de que algo no funcione, con volverlo a subir todo funcionará correctamente.

Compresión GZIP

En htaccess también podemos forzar la compresión GZIP siempre que nuestro servidor sea compatible con esto, por ello antes debemos consultarlo en nuestro hosting.

#Para forzar la compresión GZIP
FilesMatch "\.(css|js|ico|pdf|jpg|jpeg|png|gif|php|woff|ttf)$">

SetOutputFilter DEFLATE

/FilesMatch>

Keep Alive

Otra de las opciones que podemos activar desde htaccess es la extensión Keep Alive que permite que el navegador del usuario descargue todo el contenido de una vez, es decir, haciendo solamente una conexión HTTP en vez realizar múltiples llamadas por cada contenido que quiera descargarse. Esto también agiliza la carga de la web.

Una vez configurada la caché, optimizados códigos e imágenes de nuestro sitio y hechos todos los cambios en nuestro archivo htaccess, podemos realizar un test con una herramienta como Page Speed Insight de Google o GTmetrix para comprobar las mejoras de puntuación que ha obtenido nuestra web.