Contenidos
SEO y Velocidad de carga
Últimamente me he centrado mucho en las mejoras técnicas de mejorar la carga de una web. Para ello lo primero es saber en que y donde falla, existen herramientas que nos van a ir dando respuestas sobre ello, yo he usado tres, aunque podría ser menos. Primero decir, que la velocidad no es lo único que afecta al SEO, quiero decir, que dos páginas una que cargue muy rápido y otra que no, no tiene porque la más rápida posicionarse arriba, puede que la otra tenga mejor contenido o el que tiene está más optimizado para descargarse, como que sus imágenes estén comprimidas, eso consigue que ocupen la mitad, si la primera web solo tiene una imagen pero sin comprimir y la segunda tiene diez comprimidas, lógicamente la segunda tiene más contenido. De hecho yo tengo muchas webs bien posicionadas donde mi competencia tiene mucha mejor tecnología para cargar y aun así las mías están arriba.
Mis tres herramientas para mejorar la Carga Web.
PageSpeed Insights
La herramienta de Google para comprobar como es de buena una web, por supuesto si es de Google es la que más nos interesa. Esta herramienta es muy fácil de usar entramos en la web de PageSpeed Insights ponemos la url a medir y damos a analizar. A continuación nos mostrará los informes, veremos que hay dos pestañas una para móvil y otra para ordenador y la que nos muestra por defecto, es por supuesto la de móvil, recuerda que siempre el móvil primero. En ambas muestra una puntuación de 0 a 100 y debajo las optimizaciones que debemos hacer.
Muchas suelen ser sencillas de aplicar como una compresión gzip que simplemente es añadir un código a nuestro archivo .htaccess (un archivo de configuración de los servidores Apache), comprimir imágenes, bien a mano o bien con plugis para WordPress, minificar los JS, html o CSS, que no es otra cosa que eliminar los espacios y los saltos de línea para que ocupe menos y otras son más complejas, a veces tanto que no interesa perder el tiempo en ellas o sí, depende el proyecto y la competencia y lo fácil o rentable que sea ser el primero.
Esta herramienta permite descargar los archivos mejorados, imagenes comprimidas y los JS, CSS y HTML minificados, luego podemos subirlos a nuestro servidor.
Velocidad con Pingdom
Otra gran herramienta es Pingdom realmente da una información muy similar a Pagespeed de Google pero de otra forma, nos dice el tiempo de carga, el ranking respecto las páginas que se miran, cuantas peticiones necesita y una puntuación. Igual que la de PageSpeed introducimos nuestra url y además desde que servidor queremos probarla, tienen varios, yo siempre pruebo desde Suecia que es el único europeo y el más cercano a España. Despues nos da unas directrices igual que PageSpeed para mejorar y que puntuación tenemos en cada una de ellas.
Ahora viene lo complicado, Pingdom da resultados de cada archivo, cuantos archivos y cuanto cuesta cargar cada uno, así como cuantas peticiones hace a cada tipo archivo. También información de que servidores ha hecho peticiones y que porcentaje y tamaño.
Por último nos da una gráfica del tiempo de carga, muy bien especificada, cuanto tarda en hacer la petición DNS (el listín telefónico que convierte una url en una IP), en el SSL (la encriptación), cuanto en mandar, cuanto esperando… vamos completísima herramienta para llegar más allá.
Además de dar más información Pingdom tiene otra gran ventaja respecto a PageSpeed, los datos son instantáneos siempre hace el análisis, mientas que PageSpeed guarda los resultados 10 minutos por lo que si estamos haciendo pruebas tenemos que esperar.
performance.sucuri.net y primer Byte
Al principio hemos comentado que una web más rápida no tiene que ser mejor para el algoritmo de Google, supongamos dos webs similares una con más carga que la otra muy optimizadas y Google tiene que tomar una decisión, un poco por lo que he leído y por como los SEOs tratan de descifrar el cerebro del buscador, Google tiene en cuenta el primer Byte. Antes de continuar quiero decir que esto es pura especulación y es algo que se hablaba hace años pero ahora se habla menos, pero por si acaso me parece interesante porque tiene lógica y al tener lógica creo que Google lo tenga en cuenta.
El primer Byte es lo que tardas en recibir eso… el primer Byte de información de una web, un servidor potente con mucha CPU y RAM, con un sistema bien mantenido con su Apache, su Nginx, sus aplicaciones en cache… y que además no entrega PHP u otro lenguaje sino html puro (el PHP es un programa require un tiempo mayor de ejecución, intenta mover gráficos con tu ordenador o ver un vídeo donde ya están renderizados) el tiempo del primer Byte es rápido. Sin embargo un hosting normal, de los baratos, con un WordPress que le hemos metido todos los plugins que veíamos, una base de datos saturada, mucho tráfico y sin optimizar, tendrá un primer Byte más lento. Entonces es una forma de saber cuan bueno es una web y cuanto esfuerzo y dinero se ha destinado a que de un buen servicio y rápido ¿es lógico que Google lo tenga en cuenta? ¿y si no lo tiene? pues si no lo tiene sin cambiar de Hosting y optimizando el WordPress he logrado bajar de 1.4 segudos a 0.4 s el primer byte, he bajado un segundo el tiempo de carga que eso si que sabemos seguro que Google lo tiene en cuenta.
Aunque PingDom nos da esta información con performance.sucuri.net es más rápido e intuitivo, además de darnos los datos de un montón de lugares, por eso la uso para ver como afecta cada plugin o cada actualización o tema al rendimiento de mi hosting. Nos da varios datos, como el DNS, Conect o Redirect, pero para mí el importante aquí es el First Byte o primer byte, desde que decimos hola ¿que tal? a la web hasta que nos responde con bien ¿y tú?.
Extra: Consejos rápidos de mejora de carga
Unos consejillos rápidos para mejorar la carga:
- Si usas un CMS como WordPress o Prestashop, borra todo lo que no uses, los plugin consumen recursos, al menos desactiva.
- Comprime las imágenes, Google te lo hace desde PageSpeed luego solo lo tienes que subir al servidor, también hay plugins que realizan esta tarea.
- Minifica los archivos JS, CSS y HTML, igualmente Google te los da minificados y existen plugins que también realizan esta labor, a veces dan problemas con los JS al comprimirlos pues no funcionan despues.
- C0mprimir en GZIP y Cache, es añadir un código en el .htaccess en futuro post explicaré como hacerlo.
- JS al Footer, los archivos JavaScript es mejor que estén al final de la página así la web se cargará correctamente y por último se cargarán los efectos o la programación, pero no tendremos esperando al usuario.
- Cargas asincronas o defer, son cargas que van en paralelo o que cargan los archivos al final, para los JavaScript.
- Usa cache, existen programas que hacen una cache de nuestra web, en lugar de ejecutar un pesado PHP, ese se carga una vez, el plugin cache guarda esos datos en HTML y cuando entras a la web se muestra ese hml sin programación mejora mucho el rendimiento.
