Como mejorar la velocidad de carga de tu página web

23460398 8e4d6e9dc4 z

 

Si estás interesado en crear un sitio web o si ya lo tienes desarrollado, este post es para ti.

Deberás medir, comprobar y analizar la velocidad de carga web, te será útil la herramienta: pagespeed insights (google)

Recuerda que un sitio web rápido significa aumento de tráfico web y un posicionamiento alto.

¿Cómo lograrlo?

La velocidad de nuestra web la podemos optimizar a través de las recomendaciones elaboradas por Google. Veamos las principales:

1.- Compresión Gzip

En ocasiones, los archivos HTML y CSS ocupan mucho espacio en nuestros servidores y es necesario comprimirlos, esta compresión, consiste en enviar los códigos del sitio en formato comprimido, para que ocupen mucho menos espacio y por tanto se transfieran por la Red de una manera más rápida.

2.- Caché del Navegador

El caché del navegador es una función que tienen los principales navegadores web y que permite cargar las páginas web más rápido guardando en el ordenador parte de la información que previamente se ha solicitado.
Al abrir la página de tu navegador, el almacenamiento de archivos (imágenes, JS, CSS, etc.) y objetos (multimedia, PDF, etc) puede ahorrarte tiempo si visitas en más de una ocasión un sitio web.
Esto significa que un usuario de tu sitio web no tiene que volver a cargar el logo, archivos CSS, etc. en su segunda visita y por tanto la carga de las páginas será mucho más rápida.

3.- Redirecciones

Las redirecciones se producen cuando un usuario busca un archivo y es redirigido a otro sitio web.
Dentro de ellas, las dos más comunes son la redirección denominada 301 (de carácter permanente) y 302 (de carácter temporal).

4.- Imágenes
Google aconseja realizar una optimización básica y avanzada de todas las imágenes.
Así que si una vez que mides la velocidad de tu página web, te avisa que debes “Optimizar imágenes”.

Comprimir imágenes
Las imágenes pueden ostensiblemente reducir la velocidad de carga de una página web.

Recomendamos:

  • No uses archivos BMP o TIFF
  • Usa sólo archivos GIF para imágenes con animaciones o para gráficos simples o muy reducidos en tamaño
  • Utiliza JPG para fotografías e ilustraciones complicadas. Recomendación no comprimir más de un 70-80% para no perder excesiva calidad
  • Usa PNG para fondos web, iconos o gráficos que no son fotografías. Es un formato de imagen sin pérdidas
  • Especificar dimensión

5.- CSS
El CSS es un lenguaje de estilo que define la presentación de los documentos HTML. El CSS abarca, entre otras cuestiones, fuentes, colores, márgenes, líneas, altura, anchura o imágenes de fondo.
Por tanto, mientras HTML proporciona estructura al contenido, CSS le otorga un formato al mismo.
El CSS se puede utilizar de muchas maneras y por tanto, existen muchas configuraciones distintas.
El CSS debe ayudar a tu página web a hacerla más rápida y no a destruir el rendimiento de la misma.
Desde Google, recomiendan 4 buenas prácticas para una buena configuración CSS:

  1. Las Clases y IDs deben de ser cortas
  2. Minimizar la hoja de estilo
  3. Unificar todas las hojas de estilo
  4. Evitar el CSS inline y usar archivos externos (Estilo.CSS), así el navegador puede ubicar el archivo en el cache.

6.- JavaScript
JavaScript es un lenguaje de programación usado principalmente para crear páginas web dinámicas.
No necesita compilar programas, ya que se puede probar directamente en cualquier navegador y son estos últimos los encargados de interpretar el código.
En algunas ocasiones, los archivos JavaScript demoran la carga web debido a que bloquean la visualización del contenido superior de una página.

7.- Contenido visible

Cuando compruebas la velocidad de carga web, si Google te informa de que debes “Priorizar el contenido visible” significa que debes limitar el tamaño de tus datos (HTML, CSS, imágenes, JavaScript) para que muestres el contenido en la mitad superior de tu página web.

8.- Recursos (HTML, CSS y JavaScript)
Cuando medimos la velocidad web con la herramienta de Google PageSpeed Insights y se da cuenta de que alguno de los recursos puede reducirse, te recomendará “Minificar recursos”.
Esto quiere decir que podemos reducir el tamaño suprimiendo espacios, sangrías y saltos de líneas.
Con ello podemos acelerar la velocidad de tu carga y optimizar tu página web.

9.-Tiempo de respuesta del servidor
Existen muchos motivos por los cuales la respuesta del servidor puede superar los 200 milisegundos, límite que propone Google y por encima del mismo considera un rendimiento no óptimo.
Si superas dicho límite, PageSpeed Insights te indicará que debes “Mejorar el tiempo de respuesta del servidor”, pero no te informará de la medición en segundos.

Muchas son las razones posibles para que haya una respuesta lenta del servidor:

  • Consultas lentas a la base de datos
  • Procesador insuficiente
  • Memoria escasa
  • Entornos
  • Bibliotecas

Aquí te dejamos el link de PageSpeed Insights, una herramienta que te ayudará a conocer los elementos que debes modificar para acelerar la velocidad en tu página web.

Luis Alatriste


Fuentes:
http://alfredohernandezdiaz.com

Google PagesSpeed Insights

Imágenes:

https://www.flickr.com/photos/anjin/

Mapa del Sitio

Planificador de proyectos

Legal & Enlaces

Copyright

 

facebook facebook

Please publish modules in offcanvas position.