Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home Webmaster Posicionamiento Web SEO

5 pasos para mejorar la velocidad de tu web

La velocidad de carga de una web es uno de los factores que determina si tienes una buena posición en los buscadores

17 mayo, 2020
en Posicionamiento Web SEO
0
wp speed
Share on FacebookShare on Twitter

La velocidad de carga de un sitio web tiene impacto en cada «rendimiento» del sitio web. La velocidad afecta la clasificación, afecta las conversiones y al promedio de páginas vistas. No trabajar en la velocidad de un sitio web significa que está perdiendo dinero. 

Siempre tenemos que tener en cuenta la experiencia del usuario cuando navega por nuestra web, y todos tenemos muy claro que la experiencia en una web rápida es mucho mejor que una lenta. Los estudios de investigación han demostrado que las webs rápidas generan mucho más tráfico y beneficios que las lentas. Eso ya de por sí debería ser un motivo principal de su importancia para no tener pérdida de clientes y ventas.

Más allá de ser mejor para los usuarios, las webs rápidas son mucho más fáciles de rastrear, procesar e indexar. Esto significa que tardarán menos tiempo en aparecer en los resultados de búsqueda, y por tanto posicionarse mucho mejor. 

Resumen del Contenido

  • Cómo medir la velocidad de tu web
  • Factores que influyen en la velocidad de carga
    • 1. Hosting contratado
    • 2. Minimizar HTML, CSS y JavaScript
    • 3. Optimización y compresión de imágenes
    • 4. Habilitar la compresión GZIP
    • 5. Utilización de CDN
  • Conclusión

Cómo medir la velocidad de tu web

El primer paso que debes dar es medir la velocidad de tu web y conocer el punto de partida. Tendremos que hacer un test de velocidad de nuestra web. Existen multitud de herramientas a nuestra disposición, pero los tests de velocidad pueden variar según que test realices, de las influencias externas (como el día o la hora), y más factores. Por este motivo al repetir un test no siempre dan los mismos resultados. Cada herramienta suele medir la velocidad a su manera, y pueden usar métricas completamente distintas. 

Por ello recomendamos utilizar estas herramientas para hacer el test de velocidad, y no solo una de ellas (si haces una búsqueda verás mas herramientas, aquí solamente indicamos las «mas importantes»)

  • Pingdom Website Speedtest Tools
  • GTMetrix
  • WebPageTest

Cada una de estas herramientas tiene su propia forma a la hora de medir, informar y hacer sugerencias para las mejoras. Para sacar el máximo rendimiento de ellas necesitarás entender las métricas que usan y cómo lo hacen. De esta forma podrás interpretar los resultados correctamente.

Factores que influyen en la velocidad de carga

Dependiendo del tipo de web, ya sea un blog, una tienda online, los factores que influyen en la velocidad de carga principalmente podemos considerar los siguientes, que no son los únicos pero si por donde empezar

  • Hosting contratado
  • Minimizar HTML, CSS y JavaScript
  • Optimización y compresión de imágenes
  • Habilitar la compresión GZIP
  • Utilización de CDN

1. Hosting contratado

Tener un hosting lento puede paralizar la velocidad de la web, incluso si usas el almacenamiento en caché. Para evitarlo, puedes actualizarlo o, si prefieres, elegir uno nuevo para un mayor impacto positivo en la velocidad de carga. 

De forma habitual tendemos a comprar los mas económico del mercado sin dar importancia al servicio de hosting que necesitamos. Cada web necesitas unas determinadas necesidades y el hosting tiene que ser adecuadas a ellas. 

Tienes muchas opciones desde un servidor dedicado (que sería la mejor pero el precio no tanto) o un servidor virtual, VPS. Tu eliges, pero que sea adecuado a las necesidades de tu web. Un hosting rápido es un factor para que tu web gane velocidad.

2. Minimizar HTML, CSS y JavaScript

A la hora de programar código siempre se busca que sea de fácil lectura, con espacios en blanco, utilización de tabuladores entre otras cosas. Esto hace que los ficheros tengan mas peso y realmente a los navegadores no les hace falta. Por ello, eliminar todo este código hará que tu web pese menos y por ello sea mucho más rápida.

Hacer esto a mano, no quiero ni pensarlo, mejor utilizar las herramientas que tenemos disponibles como HTMLMinifier o CSS and JavaScript minifier. Todo será mucho más rápido y tendrás menos problemas. 

Un consejo, mucha cuidado cuando estés minimizando los ficheros de JavaScript, prueba todo desde, todo, todo, todo y vuelve a comprobarlo.

3. Optimización y compresión de imágenes

Aunque lo hemos puesto en tercer lugar de forma habitual será lo primero a realizar. Las imágenes es uno de los factores mas importantes en el peso de una web. Hablamos hace unos meses como optimizar imágenes para la web para mejorar el rendimiento y de las distintas opciones disponibles. Siempre tienes que llegar a un «acuerdo» entre la calidad y peso de una imagen.

Como puntualización, tienes que poner especial interés en las imágenes que mas veces se cargan en tu web. Por experiencia, cuando revisamos la web de un cliente la mayoría de las veces se olvidan de comprimir el logotipo al tamaño correcto. No tiene sentido subir un fichero de 300px de alto cuando en la web estamos mostrando el logotipo con un alto de 80px. 

Las imágenes tienen que tener el tamaño adecuado para el lugar que ocupen. No es aconsejable redimensionar con CSS cuando puedes tener el tamaño real necesario.

4. Habilitar la compresión GZIP

La compresión con GZIP nos permite comprimir los recursos en el servidor, antes de ser servidos a los navegadores de los visitantes. En el caso de textos es una maravilla consiguiendo hasta un 80% de compresión, que es mucho. En el caso de las imágenes no se nota tanto este tipo de compresión ya que estas suelen utilizar un tipo de compresión propio.

La compresión GZIP puedes realizara directamente modificando tu fichero .htaccess con el siguiente código.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

5. Utilización de CDN

Un CDN (content delivery network o red de entrega de contenido) es una excelente herramienta para mejorar la velocidad de carga de su sitio web. El CDN acerca físicamente el sitio web al visitante. Al agregar un CDN, puede servir su contenido desde una ubicación cercana al visitante y, por lo tanto, acelerar drásticamente sus tiempos de carga. 

cdn
Izq: Sin CDN – Derecha: Con CDN

Un CDN almacena en caché el contenido estático. El contenido estático son archivos como HTML, CSS, JavaScript y archivos de imagen que permanecen igual para todos los usuarios. Estos archivos no tienen que generarse dinámicamente en función de un conjunto de reglas, es decir, contenido dinámico. Al hacer que estos archivos estáticos estén disponibles en un CDN con muchos servidores en todo el mundo, puede servirlos a sus visitantes mucho más rápido.

Conclusión

Cuando cada milisegundo puede marcar la diferencia entre que un visitante compre o se vaya, siempre hay más espacio para la optimización del rendimiento. Revisa periódicamente la configuración del alojamiento, CDN, plugins y tema si es un WordPress, tamaño de las imágenes, versión php del servidor… Es un trabajo constante que no debes olvidar y realizar cada cierto tiempo de forma habitual.

Etiquetas: Acelerar BlogVelocidad de cargaVelocidad webWPO
ANUNCIO
Post anterior

Carta digital QR, la nueva tecnología para bares y restaurantes

Próximo Post

Los mejores plugins de WordPress para mejorar la velocidad

Otros Posts

SEO

Los 3 mejores plugins de SEO para WordPress

30 octubre, 2022
0

Hemos comentado ya muchas veces que cuando comienzas a construir tu sitio web tienes que centrarte en la  optimización de motores de búsqueda (SEO). Mejorar el SEO es esencial para clasificar una web en lo...

Screaming frog@3x

¿Qué es Screaming Frog y por qué es importante si eres SEO?

16 julio, 2022
0

Dentro del amplio mundo de herramientas que tenemos a disposición en internet para mejorar el SEO, encontramos Screaming Frog SEO Spider. Esta herramienta es imprescindible para todos los que se dedican al SEO y para...

Recomendados

0 to 255: encuentra variaciones de colores para la web

Modos de color: RGB & CMYK

9 abril, 2013
Algunas herramientas SEO muy útiles

¿Por qué Google no indexa mi contenido correctamente?

18 abril, 2020
Servidor VPS

Servidores VPS de OVHcloud

2 abril, 2020
Legibilidad: ¿simplificarse o abrirse?

Legibilidad: ¿simplificarse o abrirse?

12 agosto, 2021

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .