CONSULTORA DE
MARKETING DIGITAL

susanapavon blog

velocidad de carga de tu web

WPO: Optimiza la velocidad de carga de tu web 馃殌 [Tips + herramientas]

Uno de los factores SEO m谩s importantes que tienen en cuenta los algoritmos de Google para la indexaci贸n y organizaci贸n de los sitios web en sus resultados de b煤squeda es la velocidad de carga de cada sitio.

WPO o Web Performance Optimization es la definici贸n de optimizar los tiempos de carga de una web. Se trata pues de mejorar la capacidad de una p谩gina web en mostrar todo su contenido al usuario en el menor tiempo posible.

Un sitio web optimizado tiene un funcionamiento mucho m谩s 谩gil que descargar谩 m谩s r谩pido y har谩 un uso m谩s eficiente de las cach茅s en servidores y navegadores.

Algo muy importante es que en su conjunto es valorado por los robots de Google y en la UX (experiencia de usuario) por lo tanto repercute directamente no s贸lo en el posicionamiento sino en el tr谩fico de la p谩gina puesto que nuestros usuarios siempre estar谩n mucho m谩s c贸modos aterrizando en una p谩gina que cargue r谩pido adem谩s de evitar el tan temido abandono por parte de usuarios que no tendr谩n paciencia para esperar a que se cargue una p谩gina que tarda demasiado.

El tama帽o de archivo de una p谩gina afecta a la forma en la que los buscadores indexan una web ya que el tiempo y recursos que el servidor dedica son limitados. Cuanto m谩s peque帽o sea el archivo m谩s f谩cil ser谩 su indexaci贸n. Desde Abril de 2010 Google reconoce de manera expresa que la velocidad de descarga tiene impacto directo sobre la indexaci贸n y posicionamiento de las p谩ginas web por lo que es necesario optimizar al m谩ximo el peso, configuraci贸n y recursos de las p谩ginas.

2- Tips para optimizar la velocidad de carga de tu web

鉁旓笍 Elegir un buen hosting

Si bien es cierto que cuando comenzamos un nuevo proyecto tratamos de minimizar en gastos, la elecci贸n de hosting no debe entrar entre nuestros recortes. Si un servidor no tiene un buen servicio t茅cnico y unos servidores potentes ( memoria RAM, discos SSD) deber铆as pensar en cambiar de hosting. En mi caso he comenc茅 con un hosting en el que entr茅 a trav茅s de una persona que se llevaba comisi贸n pero sin duda no cumpl铆a con ninguno de los requisitos ni t茅cnicos ni de potencia que se requieren. A los dos meses cambi茅 a Raiola Networks con una diferencia brutal. Ya s贸lo el servicio t茅cnico que Raiola ofrece es fant谩stico; 24 horas en las que te atienden y resuelven tus dudas de manera profesional.

鉁旓笍 Temas de tu CMS Optimizados

Cuando usamos un CMS ya sea WordPress, Joomla o Drupal es necesario que utilicemos temas o Themes que son la plantilla, el conjunto de estilos que se adaptan a la pantalla del usuario. Lo principal del Theme con el que vistas tu CMS, tu blog, es a parte de que sea bonito e invite al usuario a entrar en tu p谩gina, que sea responsive.
Si quieres que tu web se vea perfectamente en cualquier dispositivo m贸vil o tableta deber谩s tener muy en cuenta que el dise帽o de tu plantilla sea responsive.
Adem谩s deber谩s tener en cuenta que no todos los usuarios navegan con el 煤ltimo modelo en tecnolog铆a ni la pantalla m谩s grande del mercado por lo que la velocidad de carga depender谩 siempre del dise帽o y contenido de tu p谩gina web.

鉁旓笍 Reducir el n煤mero de peticiones HTTP para mejorar la velocidad de carga

El uso y abuso de plugins e integraci贸n de redes sociales en nuestras p谩ginas webs aunque necesarios en muchas ocasiones repercuten directamente en el la velocidad de carga de nuestra p谩gina. Cada vez que hacemos una llamada a nuestras redes o servicios externos provocamos que se realice una petici贸n HTTP al servidor y con ello tu web se cargar谩 m谩s lentamente.

鉁旓笍 Optimiza el c贸digo

Cuando t茅cnicamente sea posible es aconsejable realizar tareas de optimizaci贸n de c贸digo fundamentalmente en la home y en plantillas principales de:

  • Optimizaci贸n del c贸digo HTML
  • Optimizaci贸n del Javascript
  • Optimizar los archivos CSS

La idea fundamental es simplificar al m谩ximo el c贸digo de manera que no existan espacios en blanco innecesarios, el c贸digo se encuentre comprimido y los documentos separados seg煤n su lenguaje.

Si est谩s interesado en aprender c贸digo para aplicarlo luego a tu proyecto y as铆 no tener que “tirar” tanto de plugins, te dejo este enlace a la plataforma codepen聽para practicar y donde encontrar谩s proyectos que pueden servirte. De forma gratuita nos permite crear y editar los proyectos en HTML, CSS y JavaScript

codepen-velocidad de carga- responsive

鉁旓笍 Optimizaci贸n de im谩genes

Es importante tener claro que las im谩genes deben ser de la mejor calidad posible pero con el menor peso Kb. Con programas como Photoshop, Gimp o cualquier editor de im谩genes online como los que te recomend茅 en art铆culos pasados podremos conseguir resultados fant谩sticos con im谩genes de calidad reduciendo el peso de las mismas.
Recordemos los formatos de im谩genes que existen para decidir el que m谩s nos conviene:

  1. Formato JPG 鉃 Son las im谩genes fotogr谩ficas con paletas de 24 bits y compresi贸n con p茅rdida de calidad. Cuanto m谩s enfocada la imagen peor ratio de compresi贸n
  2. Formato GIF 鉃 Son las im谩genes con paletas 8 bit, pocos colores, de tipo vectorial en general como iconos, textos, logotipos. Compresi贸n sin p茅rdida de calidad
  3. Formato PNG 鉃 Este formato se ha hecho muy popular por la posibilidad de usar transparencias de 8 bit ( Gif admite transparencia pero de un color provocando bordes pixelados). Compresi贸n sin p茅rdida de calidad.

鉁旓笍 Activaci贸n de la memoria cach茅/ tecnolog铆a CDN

La tecnolog铆a CDN ( siglas de en ingl茅s ” red de entrega de contenidos”) permite extender copias de tu p谩gina web por toda la red de servidores de tu proveedor. De esta manera se maximiza el ancho de banda y se ofrece la m铆nima distancia entre el visitante y los contenidos.
Existen tres niveles de almacenamiento diferente:

  • Static Cache 鉃 el habitual. Consiste en precargar en la memoria versiones anteriores de un sitio web con su c贸digo, im谩genes etc.
  • Memcached 鉃 recurso usado por grandes sitios de internet como Wikipedia que precisa precargar en memoria los resultados de consultas a la base de datos en lugar de consultar con cada visita.
  • Cach茅 din谩mico: permite precargar versiones est谩ticas ( en HTML) de nuestras p谩ginas din谩micas (PHP) evitando tener que “montarlas” con cada visitante.

En el caso de los que somos usuarios de WordPress encontraremos plugins muy interesantes que nos ayudar谩n a optimizar y gestionar de manera eficaz la memoria cach茅 como por ejemplo:

WP Super Cache

W3 Total Cache

BJ Lazy Load : cuya funci贸n es la de cargar las im谩genes cuando el usuario haga scroll reduciendo as铆 el peso inicial de la carga. Es lo que se llama “carga as铆ncrona”

鉁旓笍 Enlaces y redirecccionamientos

Es un punto importante a tener en cuenta porque los problemas con enlaces y redireccionamientos son uno de los problemas SEO que m谩s afectan a las p谩ginas web. Una redirecci贸n desencadena peticiones HTTP extra y ralentizan la velocidad de tu web.

3- Herramientas para medir y mejorar la velocidad de carga de tu p谩gina web

1) Page Speed Insights 鉃

PageSpeed Insights es la herramienta de Google que te ayuda a optimizar tus im谩genes. Mide de 0 a 100 la velocidad de carga de tu sitio y te indica por prioridades qu茅 debes mejorar. Es sencilla de usar y da mucha informaci贸n. Adem谩s separa la velocidad de carga de ordenadores y m贸viles.

pageSpeed_Velocidad de Carga de tu web

2) Pingdom Tools 鉃

Pingdom Tools es una de las herramientas m谩s completas para medir y ayudarte a mejorar la velocidad de carga de tu sitio web. Su funcionamiento consiste en hacer un rastreo por toda la p谩gina a trav茅s de su c贸digo ( im谩genes, HTML, CSS, Javascript, etc) emulando tal y como cargar铆a tu web normalmente. Su funcionamiento es sencillo y muy 煤til. Tan s贸lo has de introducir la url de tu sitio y te devolver谩 el resultado del test.

Pingdom_velocidad de carga

3) GTmetrix 鉃

GTmetrix 聽para muchos profesionales del SEO la mejor herramienta para medir la velocidad de carga de nuestra web. Nos muestra de una manera detallada qu茅 ocurre y c贸mo podemos solucionarlo. Adem谩s integra Google Page Speed y Yahoo YSlow para ver el comportamiento en una gran cantidad de par谩metros de c贸digos HTML, Javascript, DNS, Ajax, im谩genes, etc. Comprueba la eficiencia de todos los elementos incluidos en tu web y adem谩s te ofrece consejos.

GTmetrix___Optimizacio虂n_de_la_velocidad_de carga_el_rendimiento_del_sitio_web

4) QuickSprout 鉃

Otra herramienta que te puede interesar es QuickSprout, con la que podr谩s hacer un an谩lisis SEO completo o segmentado sobre la velocidad de carga de tu p谩gina.

Quick_Sprout_-_Velocidad de Carga

5) Yahoo Yslow 鉃

YSlow Se trata de una herramienta desarrollada por Yahoo que adem谩s de otorgar a tu sitio una puntuaci贸n en base a diversos par谩metros permite a帽adir an谩lisis propios o ver los resultados en su barra de estados. Dentro de la propia herramienta encontramos Smush.it una aplicaci贸n para optimizar im谩genes y JSLint que eval煤a la calidad de nuestro JavaScript. Es una herramienta completa con la que podr谩s analizar peticiones de llamadas y saber qu茅 archivos no est谩n optimizados de acuerdo a una adecuada velocidad de carga.

YSlow___YSlow_ velocidad de carga

 

Hemos hecho un repaso por lo que supone la velocidad de carga de una web no s贸lo desde el punto de vista t茅cnico sino en cuanto afecta a nuestro SEO ( posicionamiento en buscadores) y por supuesto al tr谩fico de nuestro sitio. El porcentaje de abandono en los casos de una web que carga lento es infinitamente superior a otra que cargue m谩s r谩pido, por ello es tan importante optimizar nuestros recursos, c贸digo, archivos multimedia y todo aquello que est茅 en nuestras manos. Con las herrramientas que os he apuntado podr茅is hacer un testeo de vuestra web y con ello mejorarla y llevarla a otro nivel 驴Te apuntas?

Si te ha parecido interesante este post, comp谩rtelo en redes sociales!

Susana Pav贸n
supeivon@gmail.com

Soy Licenciada en Derecho y Master en Asesor铆a Jur铆dica de Empresas. Desde hace unos a帽os me dedico a la comunicaci贸n en Redes Sociales. Master Social Media por AERCO-PSM y en formaci贸n continua en todo lo relacionado con el Marketing, la tecnolog铆a y el mundo en el que vivimos.



Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si contin煤a navegando est谩 dando su consentimiento para la aceptaci贸n de las mencionadas cookies y la aceptaci贸n de nuestra pol铆tica de cookies ACEPTAR

Aviso de cookies