Mejorar el tiempo de carga de una web

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Después de hablar sobre la entrada  “el tiempo de carga mejora el posicionamiento” creo que es bueno comentar cómo reducir el tiempo de carga de las plantillas de WordPress.

Trataremos WordPress porque es el más usado, pero los consejos son aplicables para cualquier CMS o incluso para una web estática.

 

Usar cache del navegador para reducir el tiempo de carga

Medir tiempo de cargaEl navegador de los visitantes almacena datos de los sitios Web que visita de forma predeterminada, el tiempo que el navegador mantiene esos archivos temporales puede ser determinado por la Web.

Utilizaremos una configuración que personalmente me ha funcionado muy bien, haremos que las imágenes se mantengan por 3 meses en el cache del usuario (ya que no se suelen cambiar muy a menudo), guardaremos también el resto de archivos de nuestra Web durante una semana e indicaremos no almacenar archivos dinámicos.

Para configurar la cache del navegador como hemos indicado anteriormente agregaremos las siguientes líneas al archivo .htaccess, recomiendo hacer una copia de seguridad del archivo por si la liamos parda.

Las líneas son las siguientes:

#cache images for 3 month

<FilesMatch “.(gif|jpg|jpeg|png|flv|swf|ico)$”>

Header set Cache-Control “max-age=7257600, must-revalidate”

</FilesMatch>

# cache everything else for 1 week

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

<FilesMatch “.(js|css|pdf|txt|html|htm)$”>

Header set Cache-Control “max-age=604800, must-revalidate”

</FilesMatch>

# disable caching for dynamic files

<FilesMatch “.(pl|php|cgi|spl|scgi|fcgi)$”>

Header unset Cache-Control

</FilesMatch>

Comprimir imágenes

Uno de los elementos que más pueden aumentar el tiempo de carga de una Web son las imágenes.

Para optimizar imágenes te daré una buena serie de consejos:

  1. Recortar imágenes: Si por ejemplo una imagen va a ocupar un espacio de 500 pixeles de ancho y 300 de alto, recórtala a ese tamaño con Photoshop. Tienes un tutorial sobre cómo realizar esto en este enlace.
  2. Optimizar imágenes con Photoshop: Una imagen que se va a utilizar en una Web no tiene que tener la misma calidad que si se fuese a imprimir. Recomiendo optimizar las imágenes con Photoshop, para realizar esto se puede hacer con “Archivo – Guardar Web”.
  3. Optimizar imágenes online: Existen herramientas muy buenas que reducen considerablemente el tamaño de una imagen online, una muy utilizada es Kraken.
  4. Optimizar imágenes de la plantilla: La mayoría de plantillas contienen imágenes que se cargan con cada impresión, los autores de estas casi nunca optimizan las imágenes, recomiendo hacerlo como comentamos anteriormente.
  5. Insertar las imágenes del tema mediante las hojas de estilo: Las imágenes del tema deben de insertarse mediante las hojas de estilo, de esta manera cargan más rápidamente.

Comprimir y juntar hojas de estilos

Las hojas de estilos se utilizan para dar formatos a tablas y divs generalmente reducen la carga del sitio, pero debes de procurar juntar todas las hojas de estilos en una y optimizarlas.

JavaScript

Es importante utilizar el JavaScript lo menos posible y en caso de usarlo juntarlo todo en un único archivo e insertarlo todo al justo antes de </body>

 

 

Deja un comentario

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