Mejorar la velocidad de carga de una página web

Mejorar la velocidad de carga de una página web

Un sitio web lento es sinónimo de perder un visitante, es por eso que en esta ocasión vamos a ver cómo mejorar la velocidad de carga de una página web utilizando algunas técnicas muy sencillas.

Este post está orientado a mejorar la velocidad de sitios que fueron desarrollados desde 0 y no los que fueron hechos con WordPress o algún otro CMS, ya que para la mayoría de los CMS existen una gran variedad de plugins que hacen esta la tarea por nosotros.

Cómo mejorar la velocidad de carga de una página web en pocos pasos

Una pagina rápida no solamente mejora la experiencia de los usuario o visitantes, si no que también puede llegar a mejorar el posicionamiento en buscadores como Google, ya que una página rápida siempre es mejor vista por Googlebot.

Para sabes si tu sitio o página web es muy lenta o tarda mucho en cargar, Google ofrece una herramienta gratuita que permite medir de 0 a 100 la velocidad de carga del sitio e indica mediante un listado con prioridad, las mejoras que se pueden realizar en la página web. La herramienta se llama PageSpeed Insights y está disponible siguiendo el enlace.

Test de velocidad de Google

Test de velocidad de Google

Una vez que ya tenemos una herramienta para medir la velocidad de carga de una página web, vamos a listar algunas mejorar genéricas que por lo general se le pueden hacer a un sitio web.

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

Este problema es muy sencillo de solucionar, simplemente debemos cambiar la ubicación de todos los Java Script y CSS que está incluidos dentro de la etiqueta head, por lo general se recomienda ubicarlos al final del HTML como se muestra a continuación.

<html>
  <head>
  </head>
  <body>
  </body>
  <link type="text/css" href="estilos.css" rel="stylesheet"/>
  <script type="text/javascript" src="javascript.js"></script>
<html>

Especificar caché de navegador

Especificar la caché de navegador nos va a permitir guardar en nuestras computadoras por un tiempo determinado todos los archivos estáticos, de esta forma cuando se realice una nueva petición al sitio nos vamos a ahorrar muchas peticiones, logrando de esta forma que la página sea muchos más rápida.
Para especificar la caché debemos incluir el siguiente código en el archivo .htaccess que por lo general está ubicado el la raíz del sitio:

<IfModule mod_headers.c>
# WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf|woff2|woff|ico|js|css)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

El código anterior guarda en caché todos los archivos estáticos mencionados por una semana, para cambiar este tiempo se debe modificar la variables max-age.

Habilitar compresión para comprimir recursos con gzip o con deflate

Habilitar la compresión gzip o deflate va a permitir comprimir los archivos estáticos antes de ser enviados al navegador del cliente, al ser menos pesados los archivos, la transferencia se va a realizar mucho más rápida.
Esta tarea la vamos a realizar con el modulo deflate, es por eso que es importante que el modulo zlib.deflate esté habilitado en el servidor.
En este caso también vamos a ingresar el siguiente código dentro del archivo .htaccess:

<IfModule deflate_module>
    # Enable compression for the following file types.
    AddOutputFilterByType            \
     DEFLATE                         \
      application/javascript         \
      text/css                       \
      text/html                      \
      text/javascript                \
      text/plain                     \
      text/xml                       \
      image/x-icon
</IfModule>

En el código anterior estamos comprimiendo los css, html, js, xml, icon. Si queremos comprimir algún otro tipo de archivo solamente debemos agregar la extensión al listado mencionando.

Minificar Java Script y CSS

Minificar los archivos Java Script y CSS permiten reducir sus pesos notoriamente, y en consecuencia hacer más rápida la transferencia.
Si estamos utilizando librerías como jQuery o Boostrap, simplemente debemos incluir los archivo que terminan con .min.js o .min.css en el HTML. En caso que necesitemos minificar un archivo propio podemos utilizar la herramienta online http://jscompress.com/ o https://cssminifier.com/.

Optimizar imágenes

Optimizar imágenes siempre es muy gratificante, ya que de esta forma vamos a reducir el tamaño y en consecuencia la página web se va a descargar más rápido.
Para optimizar imágenes tenemos varias herramientas online, una de las mejores es http://optimizilla.com/. También pueden ver el post donde publicamos las mejores páginas para la optimización de imágenes.

Bueno gente, estos son todos los puntos que se pueden realizar para mejorar la velocidad de carga de una página web. Si seguimos todos los pasos correctamente vamos a poder ver que como PageSpeed Insights nos da una mejor puntuación, lo ideal sería llegar al color verde.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *