Ahora que se avecinan las fiestas más terroríficas del año (después de la declaración de la renta) me parece una buena idea contaros algunas historias terroríficas de errores SEO en ecommerce pasar la noche de Halloween y que podáis asustar a los vecinos que vengan a pediros chuches.Seguir leyendo
El Máster en Marketing Digital definitivo que no te puedes perder.
La experiencia de usuario y el SEO
La mejor estrategia SEO es aquella que se centra en mejorar la experiencia de usuario y no en otros factores como pueden ser el SEO on-page, el link building o el contenido… y en este artículo te voy a explicar por qué el Rey del SEO es el usuario y no otro.Seguir leyendo
El Mobile Friendly de Google: toda la verdad sobre el «Mobilegeddon»
Web Performance Optimization (WPO): controlando el proceso de carga
Cuando hablamos de Web Performance Optimization estamos utilizando el acrónimo de Web Performance Optimization, y esto no es, ni más ni menos, que el conjunto de técnicas que utilizamos para conseguir mejorar la forma en que nuestras web se cargan, hacerlas más rápidas, menos pesadas y más efectivas.
En este artículo veremos los motivos por los que hacer WPO, los aspectos que pueden influir en que nuestra web sea más lenta y veremos también algunos consejos y herramientas que nos ayudarán a corregir esto y conseguir que la carga de nuestras páginas web sea un «visto y no visto»
Una estrategia de Web Performance Optimization para cada página
El Web Performance Optimization engloba muchas… muchísimas acciones que se pueden llevar a cabo, tanto en nuestra página web como en el servidor, con el fin de mejorar la forma en la que nuestras páginas web se cargan.
Algunas de estas acciones serán realmente sencillas de implementar, pero otras serán más complejas o requerirán ciertos conocimientos técnicos.
Puede, por lo tanto, que te plantees si llevar a cabo estos esfuerzos merece realmente la pena y si mejorará lo que realmente importa: la rentabilidad de tu proyecto.
Mi respuesta a esta cuestión es clara: mejorar elWeb Performance Optimization de tu web es siempre una decisión acertada
…pero todo en su justa medida y priorizando en aquellas acciones que mayor beneficio puedan aportar a tu página en particular.
Y es que hay está el truco: en priorizar. Cada proyecto tiene sus propias características y utiliza recursos diferentes… por lo tanto también tendrá necesidades y carencias propias que habrá que corregir con distintas acciones incluidas en nuestra estrategia de Web Performance Optimization.
¿Por qué hacer WPO?
Lo cierto es que en cuanto empieces a hacer Web Performance Optimization verás que se producen un montón de «beneficios colaterales» en el comportamiento de los usuarios de tu web. En Analytics, por ejemplo, empezarás a ver como las páginas vista aumentan rápidamente.
A continuación te muestro algunas de las razones y los beneficios más destacables que obtendrás al hacer Web Performance Optimization.
Pero por si eres uno de esos escépticos, que todavía no tienen claro que preocuparse por el WPO siempre vale la pena, aquí tienes algunas de las razones y beneficios que tiene optimizar el proceso de carga de tu web:
1) Mejora la experiencia de usuario
100 milisegundos: Ese es el tiempo que el lóbulo occipital de nuestro cerebro guarda la información visual que recibe de los ojos. Esto quiere decir que:
- Por debajo de 0,1 segundos tendremos la ilusión de que algo es ‘instantaneo’ (salvo el ColaCao)
- Durante 1 segundo que hagamos esperar a nuestros usuarios habrá ‘reseteado’ hasta 10 veces esa memoria visual.
- En 4 segundos la sensación de abandono es importante.
- En 6 segundos, como podrás suponer ya no hay nadie en tu web.
Con esta impaciencia en nuestro ADN no es de extrañar que estemos tan obsesionados con todos los productos que se nos anuncian como «más rápidos» (ya sean coches, conexiones a internet o comida). Efectivamente, la velocidad es una de las características que más venden.
Peor aún: nos hemos acostumbrado a consumir información tan rápidamente que nuestra paciencia ha disminuido y dónde antes nos parecía que esperar 3 segundos era aceptable ahora nos parece una eternidad.
Por otra parte, a menudo se nos llena la boca de frases como
Haz SEO pensando en el usuario y no pensando en los motores de búsqueda
…y eso está bien, pero si cuidamos esto mucho cuando hablamos de hacer un contenido ¿por qué luego no nos centramos en el usuario que tiene que descargarse la web, por ejemplo, desde un dispositivo con 3G y poca cobertura?… Pues eso: el usuario importa también en este aspecto.
2) WPO no es SEO, pero lo mejora
Vamos a dejarlo claro desde el principio: WPO no es parte del SEO, pero tiene mucho que ver con los resultados que obtengamos en nuestro posicionamiento orgánico.
La velocidad de carga es un factor de posicionamiento
Ningún SEO debería descuidar este aspecto que, en ocasiones es el que marca la diferencia con otras webs con las que competimos en las SERPs. La velocidad de carga es desde hace tiempo, uno de los factores que influyen en el posicionamiento de nuestra página.
Más velocidad de carga = más páginas indexadas
Pero además de ser un factor importante que forma parte del algoritmo de Google tenemos que tener en cuenta que cuanto más lenta sea nuestra página peor se indexará. Si tu sitio web es lento las arañas de Google conseguirán rastrear menos páginas de tu site en el mismo tiempo y seguramente le acabarán dedicando menos tiempo al rastreo de tu web.
3) El WPO hace Adwords más barato
Si haces SEM lo tienes que tener claro: la velocidad de carga irá directamente a tu bolsillo.
El Quality Score de Adwords es la manera que Google tiene de medir la calidad de tus anuncios e influye directamente en el CPC (coste por clic) que pagarás.
El Quality Score dependerá de la calidad de la landing a la que dirija un anuncio, y en este sentido influyen dos aspectos:
- La relevancia de la landing con el anuncio. Importantísimo… pero no es lo que nos ocupa.
- La velocidad de carga de la landing.
Por lo tanto, reducir la velocidad de la carga en nuestra web ayudará también al SEM haciendo que aumente nuestro Quality Score y se reduzcan nuestros costes.
4) Ahorramos costes de servidor
Los servicios de hosting que contratamos incluyen a menudo una tarifa por transferencia de datos, por lo que cuidar el tamaño de las páginas web de nuestro sitio así como mejorar la forma en la que estas se cargan puede reducir enormemente la transferencia de datos desde nuestro hosting y reducir así los costes de este servicio.
Algunos consejos para mejorar la velocidad
Ahora que ya tenemos claro qué es el WPO y cómo nos puede ayudar a conseguir los objetivos de nuestro proyecto online, vamos a ver algunos trucos y acciones que podremos implementar en la mayoría de proyectos.
1) Optimiza las imágenes
Las imágenes imágenes suelen suponer una gran parte del tamaño de nuestra web, pero además son uno de los elementos más comunes que provocan la sobrecarga de peso en nuestra web.
Así que cuando se trata de aligerar peso para aumentar la velocidad de carga lo primero a lo que deberíamos atender es a la optimización de estos elementos.
Cuando hablamos de optimizar imágenes nos tendremos que centrar en 3 aspectos:
1.1) Dimensionar las imágenes
Si vamos a mostrar una imagen en un tamaño de 150px x 150px tenemos que tener claro que no vamos a conseguir más calidad de imagen por el hecho de utilizar una imagen más grande o con más resolución.
La imagen nunca debería de ocupar más tamaño del que el usuario verá. Así que, si el tamaño en el que se va a ver es de 150x150px… pues habrá que guardarla en ese tamaño y no sobredimensionarla.
Las imágenes suelen ser los elementos más pesados de nuestras páginas y, por lo tanto, son uno de los primeros recursos en los que hemos de fijarnos para optimizar la velocidad de carga de una web.
1.2) La resolución
De lo que se trata de de adaptar las imágenes a la resolución del dispositivo en el que se verá. Más allá de esta densidad de píxeles el usuario no notará mejoría en la imagen, pero esta aumentará enormemente de tamaño.
Así que, salvo que estemos publicando un documento que tengamos la intención de que se imprima con alta calidad deberíamos de ajustar siempre este parámetro antes de utilizar una imagen en la web.
1.3) El formato adecuado
No es lo mismo utilizar una imagen en jpg que en PNG8 o PNG24. Depende del tipo de imagen y de las características de la misma tendremos que escoger el formato adecuado que mejor se adapte a la nitidez y peso de la imagen.
Para mejorar este aspecto te recomiendo que le eches un vistazo a este artículo que publiqué hace algún tiempo sobre los formatos de imagen para utilizar en las páginas web
2) Cuida mucho el TTFB
El TTFB (o Time To First Byte) no es más que el tiempo que tarda en llegar el primer byte al navegador del usuario cuando este solicita una URL determinada.
Este es un factor especialmente importante cuando nos preocupamos del SEO (…que debería de ser siempre)
En un experimento realizado por Moz, en el que analizaron más de 100.000 páginas web se llegó a la conclusión de que el TTFB es el parámetro que Google está teniendo en cuenta para formar parte de su algoritmo. No influyen ni el tiempo de carga total ni otras características que influyen en el proceso de carga.
¿Por qué es esto así? Bueno… en principio parece que porque es lo más facilmente ‘medible’. Otros aspectos como el tiempo de carga dependerán mucho de variables externas difíciles de controlar.
¿Es lo adecuado? Ni de lejos (es mi opinión)… pero es lo que hay. Así que deberías saber que puedes mejorar el TTFB de tu web cuidando 3 aspectos:
2.1) Mantén el servidor poco sobrecargado
Si tienes el hosting ‘hasta los topes’ no estarás ayudando a que este sirva el primer byte rápidamente. Le faltarán recursos.
2..2) Reduce la latencia
La latencia no es más que el tiempo que tarda la información en viajar por la red desde el servidor hasta el dispositivo de destino.
2.3) Optimiza la base de datos
Una base de datos sin optimizar será menos eficiente y tardará más en procesar las solicitudes. Optimizar frecuentemente la base de datos del CMS es una tarea sencilla y que puede mejorar enormemente el TTFB.
3) Usar la cache del navegador
Cuando visitas una página web por primera vez el navegador tendrá que descargarse todos los recursos de la misma. Eso lleva su tiempo (que debería ser lo menor posible).
Sin embargo, cuando visitas una segunda (o tercera) página en ese mismo site, la caché del navegador evitará que este tenga que cargar ciertos elementos comunes a todo el site de nuevo (como por ejemplo el logotipo). Estos elementos estáticos se descargarán una sola vez, leyéndolos después de la caché a no ser que cambien.
Usar la caché del navegador ayudará a nuestra web desde muchos puntos de vista:
- Mejora la velocidad de carga: si no se tienen que volver a descargar ciertos elementos de la web el tiempo de descarga se reduce. Esto es, obviamente lo que nos importa cuando hablamos deWeb Performance Optimization.
- Reduce los costes de servidor: Si en cada visita se hacen menos peticiones al hosting, obviamente estaremos usando menos el servidor y esto nos ayudará a reducir sus costes.
- Experiencia de usuario: Que no te quepa la menor duda de que cuanto más rápido se le sirva la página a un usuario mayor será sus satisfacción. No hay nada más molesto que estar navegando desde un dispositivo móvil y que las páginas se ralenticen un montón.
¿Cómo activar la caché de navegador?
En la mayoría de CMSs podrás hacerlo desde la propia configuración o bien con algún sencillo plugin. Pero también lo puedes hacer directamente añadiendo unas líneas a tu fichero .htaccess (que al final es lo que estos ‘añadidos’ harán… pero de una forma mas amigable)
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 600 seconds" ExpiresByType image/x-icon "access plus 604800 seconds" ExpiresByType image/jpg "access plus 604800 seconds" ExpiresByType image/jpeg "access plus 604800 seconds" ExpiresByType image/png "access plus 604800 seconds" ExpiresByType image/gif "access plus 604800 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" ExpiresByType text/html "access plus 7200 seconds" ExpiresByType application/xhtml+xml "access plus 7200 seconds" </IfModule> <IfModule mod_headers.c> <FilesMatch "\\.(ico|jpeg|jpg|png|gif|swf|css|js)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> <FilesMatch "\\.(x?html?|php)$"> Header set Cache-Control "max-age=7200, private, must-revalidate" </FilesMatch> </IfModule>
Fíjate que se debe especificar siempre el tiempo de duración de la caché. En este caso una semana (604800 segundos) para los archivos estáticos y un par de horas (7200 segundos) para los archivos html y php.
Esto es importante, pues si no especificamos la caducidad de la cache el navegador los cargará cada vez… con lo cual no estaremos utilizando la cache realmente.
4) Minificar y combinar el CSS y el JS
Los archivos CSS y Java Script son los reponsables de gran parte del peso de nuestras web (sobre todo los JS). Estos ficheros, en realidad, no son más que ficheros de texto y como tales incluyen espacios y saltos de linea.
Estos espacios y saltos de línea no son realmente necesarios para mostrar la página. Los incluyen los programadores para poder interpretar el código con las limitaciones propias del ser humano. (Sí… los programadores también son seres humanos 😉 )
4.1) Minificar
El proceso de minificación no es más que eliminar esos caracteres innecesarios consiguiendo así una reducción del peso de la página que en ocasiones es muy considerable.
Este proceso lo podemos llevar a cabo nosotros mismos, utilizando herramientas como CSS Compressor, Java Script Minifier (entre otras), con las que generaremos el fichero minificado que luego subiremos al servidor.
Pero también podemos utilizar plugins o extensiones para el CMS que utilicemos. En WordPress, por ejemplo da muy buen resultado WP Minify.
4.2) Combinar ficheros
Lo normal es tener muchos ficheros CSS y JS en nuestras webs. Que si un fichero para el estilo de la barra de navegación, otro para ese plugin tan chulo que acabamos de instalar… y lo mismo ocurre con los ficheros de JavaScript. Es normal y es una forma de mantenerlo todo organizado de una forma lógica.
Sin embargo, esto hace que cuando se carga la página se produzcan muchas peticiones al servidor (una por fichero)… y esto indudablemente retrasará la carga total de la página.
Combinar ficheros no es más que eso: incluir el contenido de varios ficheros en uno solo.
De lo que se trata es de pasar de algo así:
<link rel="stylesheet" href="style.css" media="all"> <link rel="stylesheet" href="nav.css" media="all"> <link rel="stylesheet" href="plugin1.css" media="all"> <link rel="stylesheet" href="plugin2.css" media="all"> <link rel="stylesheet" href="banner.css" media="all">
A esto otro, en dónde llamamos a solo un fichero que combina el contenido de los anteriores ordenados consecutivamente:
<link rel="stylesheet" href="main.css" media="all">
y si hablamos de JS la cosa no cambiará mucho. Se trata de pasar de todo esto:
<script src="nav.js"></script> <script src="plugin1.js"></script> <script src="componente.js"></script> <script src="plugin2.js"></script>
a esto:
<script src="main.js"></script>
Cuando hablamos de combinar archivos tenemos que tener muy en cuenta una cosa: el orden.
Es importante cargar los CSS y JS en el orden adecuado para asegurar que la página se muestre correctamente.
Yo te aconsejaría que antes de combinar estos archivos hicieses un back up por si cuando los combinas algo (o todo) dejase de funcionar.
5) Controla la carga de CSS y JS
Ordenar la carga de estos componentes no reducirá el tiempo total de carga, pero puede mejorar mucho la experiencia de usuario.
El CSS al principio
Siempre que sea posible deberíamos colocar la carga de los archivos CSS en la cabecera, justo antes de la etiqueta </head>
Lo que conseguiremos así es que los estilos de la página se carguen lo antes posible y no se perciba la carga de una web sin estilos a la que tiene que esperar para que ‘coja forma’.
CSS con <link> en vez de @import
Existen dos formas de cargar los ficheros de estilos CSS: mediante la etiqueta <link> en el código HTML o utilizando la directiva @import en uno de los ficheros CSS (o dentro de una etiqueta <style>)
<link rel="stylesheet" href="style.css" media="all" />
@import url('style.css');
La primera es siempre la mejor opción, pues @import hace imposible que los ficheros se carguen en paralelo y por lo tanto será siempre más lenta.
El JS al final
Con el JavaScript ocurre exactamente al contrario que con el CSS. El JS es conveniente cargarlo al final de la página, justo antes de la etiqueta </body>
Cuando el navegador encuentra un fichero JavaScrip detiene el proceso de carga mientras este se descarga. Luego lo ejecuta y sigue con el proceso de carga.
Si posponemos esta carga conseguiremos que se carguen primero todos los demás elementos de la página y el código del JS se ejecute después, mientras el usuario ya está utilizando la página.
Carga asíncrona
En ocasiones no será posible cargar el JS al final del documento. En estas ocasiones lo óptimo será realizar la carga de forma asíncrona. Esto es, en paralelo a la carga del resto de los componentes.
Así, conseguiremos el fichero JS no detenga la carga.
La forma de hacer que el javascript se cargue de forma asíncrona es mediante el atribuo async añadido en la etiqueta que llama al fichero.
<script async type="text/javascript" src="script.js" ></script>
[alert-note]Cuídado con las cargas de JS de forma asíncrona. Los ficheros que se cargan de esta forma se ejecutarán en cuanto terminen de cargarse, sin que podamos determinar su orden de carga y/o ejecución.[/alert-note]
Esto va a provocar que si, por ejemplo, alguno de los archivos que estamos llamando de forma asíncrona utilizan jQuery y este todavía no se ha cargado cuando se ejecuten, se produzca un error.
La solución pasa por cargar el jQuery en la cabecera (antes del elemento </head>). De esta forma estaremos haciendo la web un poquito más lenta, pero sin errores.
6) Habilitar el Gzip o Deflate
La compresión de los archivos de la web antes de transmitirlos debería ser siempre una prioridad en cualquier auditoría de Web Performance Optimization (WPO) por tres razones:
- Es muy sencilla de implementar
- Supone un ahorro de transferencia de entre un 50% y un 70%
- Reduce de forma importante el tiempo de carga en la mayoría de los casos.
¿Cómo funciona la compresión?
De lo que se trata es de que toda la información que se va a transmitir se comprima en el servidor antes de ser enviada. Así, transmitimos ficheros mucho más pequeños aumentando la velocidad de carga de la web.
Una vez recibidos el navegador los descomprime y los interpreta.
Cómo implementar la compresión de los archivos: Gzip o Deflate
Para comprimir los archivos antes de enviarlos podremos habilitar la compresión Gzip o Deflate. Ambos son tipos de compresión y, aunque hay opiniones para todo, lo cierto es que sus ratios de compresión son muy similares y la facilidad de implementarlos también.
Para implementar cualquiera de los dos tipos de compresión tan solo tenemos que asegurarnos de que el módulo correspondiente esté activado en el servidor y añadir unas líneas al fichero .htaccess del directorio raíz en el que se encuentra nuestra web.
En el caso de Gzip debemos añadir esto:
<IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file\.(html?|css|js|phpl)$ mod_gzip_item_include handler^cgi-script$ mod_gzip_item_include mime^text/.* mod_gzip_item_include mime^application/x-javascript.* mod_gzip_item_exclude mime^image/.* mod_gzip_item_exclude rspheader^Content-Encoding:.*gzip.* </IfModule>
Y en el caso de Deflate esto otro:
<IfModule mod_deflate.c> <filesMatch "\.(js|css|html|php)$"> SetOutputFilter DEFLATE </filesMatch> </IfModule>
7) Escoge bien el hosting
Un superhosting, superpotente, con muchísimos recursos, con discos superrápidos y un condensador de fluzo por si tengo que volver al pasado a recuperar una copia de seguridad en 0,001 segundos… obviamente eso todo te va a asegurar una velocidad de transferencia mejor que un hosting compartido alojado en un disco duro lento y cargado hasta la bandera.
El primero, obviamente, será más costoso. El segundo, en cambio, supondrá poco dinero (…pero seguramente al final te saldrá más caro)
Así, escoger un buen proveedor de hosting será una de las mejores inversiones que puedes hacer para mejorar el rendimiento de nuestra web. Para no equivocarte en la elección te aconsejo que le eches un vistazo a como lo han hecho Miguel Angel Florido para escoger su VPS o Rubén Alonso para elegir el hosting compartido que mejor rendimiento le ofrecía.
… sin embargo, a pesar de que un buen hosting puede mejorar el rendimiento de tu website, esto no es hacer WPO. La O de WPO significa optimización y eso no lo es.
Geolocalización de tu target
A pesar de esto, desde el punto del WPO (Web Performance Optimization) si hay algo que si deberías de tener en cuenta cuando contrates este servicio. Pregúntate: ¿Dónde está geolocalizado tu target?
Si tu público objetivo se encuentra geolocalizado en una zona concreta lo lógico es que el hosting que contrates también esté en esa zona.
¿Recuerdas cuando hablábamos de ‘latencia’? Pues eso, precisamente es lo que conseguirás acercándote físicamente a tus usuarios: reducir la latencia.
Así conseguirás mejorar el TTFB y de paso el SEO de tus páginas.
8) Utilizar CDNs para el contenido estático
¿Ya tienes un buen hosting? De acuerdo. Pues ahora recuerda que
[Tweet «el mejor amigo de un buen hosting es un buen CDN»]
¿Qué es un CDN?
CDN es el acrónimo de Content Delivery Network… y hace referencia a eso precisamente: Red de Distribución de Contenidos.
Si no utilizas un CDN y tus usuarios se encuentran distribuidos por todo el mundo, el servidor será el encargado de servir tus páginas a todo el mundo. Evidentemente esto hará que la velocidad de carga sea muy distinta en la misma ciudad en la que tienes alojada la página que en la otra punta del mundo.
Ahora imagínate que tienes varios servidores distribuidos a lo largo del planeta que replican el contenido estático de tu página web… y que cuando alguien solicite tu página desde un punto alejado de tu hosting estos archivos se le sirvan desde el punto más cercano al usuario: así es como funciona un CDN.
¿Que ventajas tiene un CDN?
Pues las 2 ventajas más importantes son:
1) Aumenta la velocidad de carga: El usuario tendrá que esperar mucho menos a recibir la página web.
2) Reduce la transferencia de tu servidor: Todos esos datos envía el CDN al usuario no son transferencia de tu servicio de hosting… por lo tanto te ahorrarás pasta en esto.
9) ¿De verdad necesitas ese iFrame?
Los iFrame introducen contenidos embebidos de otras webs.
Algunos iFrame de los más utilizados son los de YouTube o SlideShare (por ejemplo). Pueden ser realmente útiles, pues nos permiten enriquecer enormemente el contenido de nuestra web.
Sin embargo, tenemos que tener en cuenta que cada iFrame es como una página web anidada en nuestra propia web. Cada iFrame cargará su propio html, css, js…
Así que, tal vez habría que plantearse la utilidad real de algunos iFrames como los botones sociales o el tan popular cuadro con el botón «me gusta» de Facebook.
10) No te centres en la home
Me pregunto si tal vez debería haber empezado por este truco (que no acción) que te ayudará a centrarte en lo que de verdad importa para obtener conversiones en tu proyecto: tus landing pages.
Es uno de los errores más comunes cuando alguien se empieza a preocupar por la velocidad de carga. De pronto acude a infinidad de herramientas que miden la carga he intentan mejorar la puntuación… pero la página que analizan es la del dominio: la home.
En realidad tus usuarios no siempre entran por esa página. Lo que hay que intentar es que cada landing esté preparada para una carga super-rápida.
Cada artículo de tu blog, cada ficha de producto en tu ecommerce son incluso más importantes que la propia home, pues si una visita llega a esas páginas (ya sea a través de un resultado de búsqueda, un anuncio pagado o un enlace en otra web) muchas veces será una visita mucho más cualificada y que busca algo mucho más concreto que el que aterriza en la home.
Dedícale atención al WPO de todo el sitio web, pero sobre todo a aquellas páginas de aterrizaje claves por las que sabes que la gente llega a tu site.
¿Cómo medir la velocidad de carga?
Pero de nada sirve saber cómo optimizar si primero no sabemos que es lo que falla en nuestro caso concreto.
Afortunadamente tenemos a nuestro alcance gran cantidad de herramientas que nos ayudarán a medir, no solo la velocidad de carga, sino también la influencia de cada recurso de nuestra web en este proceso.
Algunas nos dan incluso una pequeña guía de como solucionar cada aspecto que debemos mejorar.
Antes de recomendarte las que considero más completas déjame decirte un par de cosas que será bueno que tengas en cuenta a la hora de medir el rendimiento de tu web:
- No te limites a una sola medición: el rendimiento de una página web puede variar de un momento a otro. Son muchos los factores que pueden influir en el rendimiento en un momento dado (carga del servidor, peticiones atendidas en un momento dado,…) Lo ideal es que realices varias mediciones en momentos distintos para hacerte una idea más fiable de como está funcionando una pagina.
- No te obsesiones con la nota: Como te decía al principio de este artículo cada página tiene sus propias características. En ocasiones corregir alguna de las indicaciones que nos ofrecen estas herramientas puede ser incluso más perjudicial para la experiencia de usuario que dejarlo tal y como está. Valora siempre cada indicación teniendo en cuenta los cambios que requiere implementarla y los beneficios reales que obtendrás de esta mejora.
Algunas herramientas para medir la velocidad
Yslow!
Yslow es la herramienta que nos proporciona Yahoo! para realizar una auditoría de lo que ellos consideran que son los aspectos más importantes que debemos cuidar para conseguir un proceso de carga realmente eficaz.
Podemos instalar Yslow como plugin o extensión en prácticamente todos los navegadores y ejecutándolo realizará un análisis tras el cual nos dará una nota sobre 100, pero también nos indicará en que medida tenemos optimizado cada uno de los parámetros que consideran importantes y las medidas que debemos llevar a cabo para mejorarlos.
Page Speed
El objetivo y el funcionamiento de Page Speed es similar al de Yslow, pero en esta ocasión estamos hablando de la herramienta que nos proporciona Google para realizar una auditoría del WPO de la página.
La puntuación de Page Speed se basa en parámetros diferentes a los que considera Yslow, por lo que es conveniente no centrarse en uno u otro, sino que lo ideal será revisar ambos.
GTmetrix
GTmetrix es una herramienta realmente útil desde el momento en que nos proporciona en un solo lugar los análisis de Page Speed e Yslow incluyendo sus puntuaciones (en %, de A a F y con códigos de colores) y recomendaciones.
Pero no solo eso, sino que GTmetrix nos muestra además el timeline representando gráficamente del proceso de carga. En este podrás ver que procesos son los que ralentizan la página y realizar las acciones necesarias para corregirlo.
Existen versiones de pago de esta herramienta que te permitirán almacenar datos e incluso generar informes con marca blanca. Pero para realizar tus propias mediciones la versión gratuita es realmente completa.
Web Page Test
Web Page Test es una de mis herramientas favoritas tanto por la amplia información que facilita como por las enormes posibilidades de configurar el test.
Las opciones avanzadas de configuración permiten especificar lugar, navegador, tipo de conexión, …y hasta si queremos realizar varios tests sobre una página.
Otro punto fuerte de Web Page Test es la forma en la que resume la carga de la web. Por una parte muestra una puntuación de A a F con códigos de colores de los aspectos generales más importantes. Pero por otra muestra una tabla con los valores de parámetros importantísimos tanto en la primera visita como en una segunda (donde interviene la caché)
Los informes detallados también son de los más completos. En cuanto a análisis nada tienen que envidiarle a cualquiera de las otras herramientas.
Pingdom Website Speed Test
Pingdom nos permite hacer un análisis escogiendo de entre 6 ubicaciones geográficas distintas.
El resumen del resultado nos mostrará una nota sobre 100 así como el número de peticiones, tiempo de carga y tamaño de la página.
Al igual que GTmetrix nos muestra el proceso de carga en formato cascada «waterfall», pero también nos ofrece el detalle de los parámetros que influyen en la nota así como un análisis de la página y algo realmente interesante: un histórico de mediciones sobre la página.
Existen muchas más herramientas para monitorizar el rendimiento de nuestra web, pero estas son mis favoritas.
También hay muchos (muchísimos) más aspectos que pueden influir en el proceso de carga, pero estos son, en mi opinión, algunos de los que suelen necesitar una atención especial en la mayoría de las páginas.
¿Añadirías algún aspecto más a la lista de imprescindibles? ¿Tienes una herramienta preferida distinta para monitorizar el Web Performance Optimization de tu página?
Landing Pages que convierten
En este artículo te hablaré de cómo conseguir que tu landing page consiga más conversiones teniendo en cuenta algunas cuestiones básicas.
Nos esforzamos mucho en hacer SEO para conseguir más visitas… invertimos mucha pasta en anuncios que nos traigan visitas a nuestra página de aterrizaje… pero a menudo se nos olvida lo más obvio: optimizar nuestra página de aterrizaje para que sea más efectiva y genere más conversiones.
Pero antes voy a empezar explicándote el concepto de Landing Page y sentando las bases del planteamiento de cualquier página de aterrizaje.Seguir leyendo
Link Baiting: El Link Building natural
En esta ocasión te voy a contar lo que es el Link Baiting y como llevar a cabo esta estrategia de obtención de enlaces.
Pero también te voy contar lo que NO es Link Baiting y trataré de evitar las confusiones más comunes de esta con otras estrategias como Link Building, Content Marketing o Marketing Viral… pero antes voy a empezar por lo esencial: hablando de enlaces.Seguir leyendo
Google Penguin 3.0 ya está en la calle
Ya nos lo temíamos todos tras las declaraciones de Gary Illyes hace 15 días, pero hasta este fin de semana no se ha hecho realidad el lanzamiento de la tercera versión del pingüino de Google.Seguir leyendo
Cómo sobrevivir a Google Panda 4.1: novedades y tips
El pasado 24 de septiembre comenzó el lanzamiento de la nueva actualización de Google Panda 4.1 que, según está previsto terminará este fin de semana.
Y esta vez se trata de una actualización menor, si, pero con gran calado pues se espera que afecte a entre un 3% y un 5% de los resultados. O sea, que va a haber movimiento.
En este artículo te explico de que va esta nueva actualización de Panda y te daré algunos truquillos para salir airoso de la nueva actualización de algoritmo.
¿De que va esto de Panda?
Que si andas un poco perdido con esto de los algoritmos te voy a explicar ahora (muy por encima) de que va este, a quien le perjudica y a quien le beneficia.
Google Panda es un algoritmo de Google que trata de modificar los resultados de búsquedas (las SERPs) de forma que tengan cada vez más relevancia los contenidos de calidad.
Así, cada vez que se actualiza el algoritmo lo podemos entender como otra vuelta de tuerca para afinar más en busca de la calidad(… y es entonces cuando los SEOs nos ponemos a temblar ante las posibles subidas o bajadas de nuestras webs y la de los clientes).
Esto es lo que odia el Panda:
- Los contenidos duplicados
- Los scrapers
- Los contenidos pobres y/o cortos
- Los contenidos sobre-optimizados para robots
Lo que debes hacer para que el Panda te quiera
- Apostar por contenidos de calidad
- Escribir para personas
- Ser original y aportar valor
No es un algoritmo, es una actualización
Esto es algo que debemos de tener en cuenta para comprender que, básicamente, las reglas del juego siguen siendo las de Panda 4.0 con algunas actualizaciones.
Recordemos entonces que la gran influencia de Panda 4.0 fue premiar los contenidos originales, extensos y acompañados de contenido multimedia frente a los ‘refritos’ y contenidos de calidad más pobre.
Esto, junto con la anterior aparición de Hummingbird consiguió que desapareciesen de las SERPs muchos sitios de escaso valor y sobreoptimizados dejasen de aparecer por encima de otros mucho más útiles y escritos en un lenguaje más natural.
Así es el Panda 4.1
Se trata de la 27ª actualización de Panda desde que apareció en 2011 y como te comentaba al principio, a pesar de no ser una actualización mayor, va a mover los ranking de casi el 5% de las SERPs. Esto es muchísimo para una actualización de este tipo.
Así que el pasado día 26 nos enteramos de que Google había lanzado su nuevo algoritmo gracias a un post de Pierre Far en Google+
(… si… es cierto… parece que ahora echamos todos de menos a Matt y su «sentido del humor». Ya no es lo mismo.)
Al tratarse de una actualización menor se supone que va a seguir las pautas generales del 4.0, pero en esta ocasión se espera que mejore notablemente en su eficacia detectando contenido de calidad, y que este será mejor valorado en los sitios pequeños y medianos que, hasta ahora no podían con los grandes recursos de los grandes sitios.
¿Quién ganará y quién perderá?
Así, es previsible que pequeños blogs que publican contenidos extensos y de gran utilidad para sus lectores vean compensados sus esfuerzos.
De igual manera, los pequeños ecommerce que trabajen bien las fichas de sus productos y la estructura de sus categorías es posible que ganen posiciones frente a grandes tiendas online con miles de referencias que hasta ahora posesionaban infinidad de categorías según las consultas que se hacían populares. Esto se acabó.
¿Cómo me preparo para este nuevo Panda?
Pues en realidad no hay nada nuevo bajo el sol.
Si has apostado por el marketing de contenidos desde el principio generando contenido de calidad para tus usuarios, si has publicado con frecuencia, si te has cuidado de no duplicar contenido (y por supuesto no copiar de otros) y a la hora de generar el contenido has tenido más en mente al usuario que a los motores de búsqueda… si tu planteamiento siempre a sido este no deberías preocuparte. Simplemente revisa tu analítica y tal vez te encuentres incluso alguna sorpresa agradable en forma de visitas orgánicas.
Pero si no siempre ha sido este tu planteamiento a lo mejor deberías cambiar y/o revisar algunas cosas:
Genera contenido pensando en tus usuarios
El contenido es el Rey… ¿de verdad? Pues no. El Rey es tu visitante. El contenido es el motivo por el que el Rey se digna a visitar tu web.
Cuida el contenido. Publica regularmente. Pero sobre todo genera contenido útil para tus visitas. Escribe pensando en que quien busque tu página y finalmente la encuentre no salga decepcionado sino todo lo contrario. Ese es el contenido que le gusta a Google Panda.
Si tratas de generar contenido pensando únicamente en que este se posicione bien al final no lo conseguirás.
Revisa el contenido antigüo
El contenido antigüo también cuenta. El Panda lo va a examinar tanto como el nuevo. Si al mirar atrás ves contenido pobre, de poca calidad o que no aporta gran cosa a tus usuarios tienes dos posibilidades: lo mejoras o lo eliminas. Pero si lo dejas ahí te estás jugando un zarpazo del oso panda.
Cuidado con el contenido duplicado
Evita el contenido duplicado en tu web. Utiliza correctamente el Rel Canonical y las redirecciones 301 para indicar a Google cual es el contenido que vale y cual no debería tener en cuenta.
Mucho ojo con copiar y pegar, y esto va por los que tenéis ecommerce y tenéis la tentación de utilizar la descripción del proveedor… que por más que se dice me sigo encontrando penalizaciones por eso. Si pones eso en la ficha de tu producto vas a encontrarte un montón de ecommerce con la misma ficha. Luego explícale tu al panda que no es una copia pero es igual porque… pues eso.
No te quedes corto
Pues si, la extensión de tus contenidos es un factor en el que el Panda se fijará para determinar si considera tu contenido de calidad o no.
Al principio, con las primeras versiones de Panda se hablaba de contenido por encima de 300 palabras. Con Panda 4.0 se hablaba ya de más de 800 palabras.
¿Cabe esperar que esta nueva actualización considere calidad estar por encima de las 1000 palabras? No lo sé, pero para mi esta medida siempre ha sido un poco absurda. A veces no se tata del número de palabras. A veces es más bien como se organicen estas. Pero si es cierto que la mayoría de las veces los contenidos que nos resultan útiles son algo más largos.
Contenido multimedia
Yo no me fijaría tanto en el contador de palabras como en la riqueza de lo que incluyo como contenido.
Si incluyes texto puede que escribas grandes cosas, pero si incluyes información en imágenes, vídeo, infografías, audio… es evidente que llegarás a un mayor público.
SEO on page
A pesar de que en las últimas versiones de Panda esto ya había perdido valor, sigue siendo importante (y por supuesto no te va a penalizar) mantener nuestras páginas correctamente etiquetadas, ligeras, y optimizadas para que los buscadores sean capaces de indexarlas como es debido.
Socializa
Así como el SEO on-page va perdiendo cada vez más valor, está claro que al Panda le gusta más cada vez que tu página se comparta en las redes sociales.
Es una forma más que tiene Google de determinar la popularidad de una página.
Por lo tanto no olvides compartir tu contenido, hazlo visible en redes sociales y facilitar que se comparta. Plantéate incluir botones sociales donde tenga sentido para facilitar que tus visitantes compartan tu contenido.
Una nueva oportunidad
Tal vez esta nueva revisión suponga una nueva oportunidad si tu sitio fue penalizado con Panda 4.0 y desde entonces has puesto manos a la obra hasta dejarlo todo como deberías.
O tal vez estuvieses haciendo bien las cosas pero con este cambio puede que notes ese empujón que te faltaba para estar ahí arriba.
De cualquier forma te recomiendo que revises tus analíticas desde el pasado miércoles 24 hasta hoy… y también en los próximos días. Si detectas subidas o bajadas de más del 3% en tráfico orgánico puede ser que el Panda te esté echando el ojo (o la zarpa si lo has hecho mal)
Google Tag Manager: una etiqueta para controlarlas a todas.
El event tracking (o seguimiento de eventos) te puede servir para rastrear el envío de un formulario de contacto, el clic en un enlace del menú, la descarga de un fichero… y en definitiva cualquier clic que un usuario pueda hacer en tu web.
En este artículo verás las distintas posibilidades que tienes para realizar el seguimiento de estos eventos y comprenderás las ventajas de realizar el seguimiento con Google Tag Manager en vez de utilizar Universal Analytics.