@@@4603@@@

Cómo mejorar el rendimiento de la página web mediante configuraciones en el archivo .htaccess

Las páginas web modernas utilizan normalmente muchas imágenes, diseños complejos y extras como, por ejemplo, galerías de fotos basadas en Javascript. Cuanto más complicada sea tu página web, mayor será el tiempo de carga para tus visitantes.

En este artículo te explicamos cómo mejorar este tiempo de carga. Te mostramos algunas configuraciones que puedes definir a través de un archivo .htaccess.

Atención: Los gestores de contenidos habituales (CMS) como Joomla o WordPress o las tiendas online como xt:Commerce suelen traer un archivo .htaccess. Por ello, comprueba en primer lugar si en el directorio principal de tu página web existe ya un .htaccess y crea una copia de seguridad. Si aún no existe un archivo .htaccess, crea uno nuevo y llámalo exactamente .htaccess (es muy importante el punto al inicio del nombre de archivo). Con un editor de texto puedes editar un archivo .htaccess existente y crear uno nuevo.


Transferir contenidos comprimidos

Cuanto más grande sea una web, más archivos contendrá, por lo que aumentará el tamaño total en KB/MB que tienen que cargar los visitantes. Para reducir al máximo los tiempos de carga merece la pena comprimir los archivos para la transmisión por el servidor. Para ello se aplica el módulo Apache mod_deflate.

A partir del paquete STRATO Hosting puedes realizar la compresión de la manera siguiente:


Abre el archivo .htaccess en el directorio principal de tu aplicación web y completa la línea SetOutputFilter DEFLATE.


A continuación dispondrás de todas las opciones mod_deflate como, por ejemplo, AddOutputFilterByType DEFLATE text/html text/plain

Encontrarás más información aquí: externer Link http://httpd.apache.org/docs/2.2/mod/mod_deflate.html

Utiliza la caché del navegador

Otra opción de optimización consiste en guardar en el navegador de tu visitante (caché) los archivos que se modifican poco. Si un usuario accede por primera vez a tu página web, estos se cargarán por completo. Si vuelve a cargar la página, el navegador comprobará si ha guardado una imagen en la memoria caché y la cargará desde allí. La página se cargará así mucho más rápido.

Ejemplo

La información del archivo .htaccess debería ser más o menos así:

# Caching einrichten FileETag MTime Size
ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/x-icon "access plus 1 months"


Breve explicación:
FileETag MTime Size crea para cada archivo de tu página web una identificación de la última fecha de modificación así como del tamaño del archivo.

La consulta <IfModule mod_expires.c> comprueba si el módulo de servidor necesario está instalado, lo que es el caso en todos los paquetes de STRATO.

ExpiresActive On activa el módulo para tus páginas web, a continuación figuran los datos de qué tipo de archivos deberán guardarse en caché y durante qué periodo de tiempo. El tiempo se introduce bajo la forma "a partir del último acceso por un periodo X", en el ejemplo, "access plus 1 weeks", es decir, "acceso más una semana". Si el periodo establecido ha expirado, el archivo de la caché es reemplazado por la versión actual de tu página web.

En el ejemplo, los archivos CSS y Javascript (JS) están almacenados en caché por una semana y las imágenes y los iconos de favoritos, por un mes. Recuerda que la duración se indica siempre en plural, es decir, siempre hay una "s" al final (weeks, months, ...). En la documentación oficial del servidor web Apache encontrarás qué valores están permitidos para indicar el tiempo:  http://httpd.apache.org/docs/2.0/mod/mod_expires.html#AltSyn

Tú puedes determinar el periodo. En la siguiente tabla encontrarás algunos consejos:

Tipo de archivoTiempo de almacenamiento en cachéComentarios
Imágenes (jpg/png/gif)access plus 1 monthsEn caso de páginas web estáticas, blogs, galerías de imágenes, etc.
access plus 1 weeksPara Tiendas Online que cambian con frecuencia las imágenes de producto.
Archivos CSSaccess plus 1 monthsSi realizas a menudo cambios en el diseño de tu página web, determina un periodo más corto, por ejemplo, 1 o 2 semanas.
Archivos JavaScript (JS)access plus 1 months

 
Para que los visitantes de tu página web también puedan visualizar los cambios que se producen dentro de un periodo de caché (por ejemplo, caché de 1 mes, modificación transcurridos 14 días), indica simplemente en el archivo .htaccess el valor para el periodo de caché del tipo de archivo en cuestión. Deja la configuración activa durante, por ejemplo, una semana, y restablece los valores originales.

Ejemplo:

De access plus 1 months se pasa a access plus 1 hours.

Nota: Si no utilizas la compresión (ver arriba), para un uso óptimo del caché en el archivo .htaccess, completa manualmente la línea Header append Vary Accept-Encoding. Si la compresión está activa, el header se pone automáticamente, no es necesario introducir la línea anterior.

En función del CMS utilizado, existen más posibilidades de mejorar el rendimiento. Por ejemplo:

  • Añadir CDN (Content Delivery Network)
  • Guardar imágenes en CSS Sprites
  • Guardar scripts CSS/JS comprimidos en el espacio web
  • En caso de que no se utilice, desactivar mootools en el frontend (Joomla)

    Normalmente encontrarás indicaciones más detalladas sobre cómo proceder con el CMS que utilizas en el foro de soporte del CMS en cuestión.

    Sobre este tema dispones también de este artículo: Cómo optimizar la velocidad de su Sistema de Gestión de Contenidos (CMS)
¿Le ha resultado útil este artículo?