Clicky

Mejora la velocidad de tu sitio con unas líneas en el archivo .htaccess

velocidad web con el archivo .htaccess

Para configurarlo correctamente en Joomla! sólo tienes que cambiar el nombre del archivo htaccess.txt a .htaccess

Hay muchas maneras de mejorar su sitio Joomla o WordPress, pero la mayoría de ellas se basan en el uso de extensiones de terceros o jugar un poco con la configuración compleja que el usuario medio no va a ser capaz de hacer mucho uso de ella. Hay algunos consejos básicos de optimización de los que todo el mundo puede beneficiarse, como compresión CSS y JavaScript, minificación HTML y CSS sprites, pero ¿sabías que también hay algunas configuraciones de servidor que se pueden utilizar para obtener un poco de aumento de velocidad?

¿Qué es el .htaccess?

.htaccess es un archivo de configuración especial que debería ser capaz encontrar en la raíz del directorio del servidor. Una explicación completa de su propósito podría funcionar por un tiempo, así que vamos a explicar básicamente lo que hace. Este archivo permite controlar nuestro directorio (y subdirectorios también), si creamos un archivo .htaccess en ellos. Con archivos .htaccess se pueden crear redirecciones, reescribir URLs en nuestro sitio web, crear directorios protegidos con contraseña y otras cosas técnicas, pero también se puede utilizar para mejorar la velocidad de carga de las páginas del sitio mediante el aprovechamiento de algunas de las características del servidor Apache.

¿Cómo habilito el archivo .htaccess en Joomla?

Después de la instalación de Joomla ya está creado un archivo .htaccess, pero se llama htaccess.txt y se ve como un archivo de texto normal. ¿La razón de esto? Compatibilidad. No hay garantía de que todos los servidores en que se instala Joomla soportarán las características del .htaccess '. Pero no te preocupes; la mayoría de los servidores modernos que se construyen para soportar Joomla también apoyará htaccess; para empezar sólo tienes que asegurarte de que está habilitada la opción mod_rewrite. Curiosamente, esta opción está efectivamente controlada por el archivo .htaccess en sí.

configuración SEF en Joomla

Para empezar a configurarlo correctamente sólo tienes que cambiar el nombre del archivo htaccess.txt a .htaccess (recordar sobre el punto que viene antes de "htaccess"!). También tendrás que ir a la configuración global de Joomla y habilitar la opción de reescritura de Uso URL; esto permite que la instalación de Joomla! utilice URLs SEF (amigables), que son mejores para los motores de búsqueda y mejor para los usuarios, ya que proporcionan una jerarquía clara a nuestro sitio.

No importa si utilizas el archivo .htaccess sólo para crear URLs amigables SEO, o si quieres ir más profundo y añadir redirecciones o configuración del sitio, ahora está activado y listo para usarse. Si abres el archivo no debería en realidad estar vacío ya que Joomla! incluye algunas reglas de reescritura por defecto con algunos comentarios.

Compresión gzip

Cada respuesta que envía tu servidor puede ser comprimida con Gzip, o no comprimida, antes de ser enviada a los visitantes. La compresión Gzip ayuda a reducir la cantidad de datos que el servidor tiene que enviar a los usuarios, lo que a su vez acelera el tiempo de carga del sitio; la diferencia puede ser más grande de lo que crees, ya que un sitio web habilitado para Gzip puede transferir entre un 50-70% menos que un sitio web sin que activar.

Por ejemplo, si nos fijamos en la página esta web http://www.apañados.es usando esta herramienta para el control de la compresión GZIP podemos ver qué tan grande es la diferencia:

compresión Gzip en apañados

Mediante la compresión de esta página con GZIP, se salvó el 80,7% del ancho de banda. Ahora te estarás preguntando cómo aprovechar los gloriosos beneficios que proporciona a la velocidad; bueno, es sorprendentemente fácil! Sólo tienes que pegar estas líneas al final del archivo .htaccess:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

y guardar el archivo. Si deseas comprobar si tu sitio está comprimido con gzip después de aplicar estos cambios puedes utilizar la mencionada herramienta.

Utiliza el .htaccess para establecer expiración de cabeceras y control de cache (Expires y Cache-Control headers)

Si utilizas herramientas de análisis como "‹"‹Google PageSpeed o algunas otras herramientas de optimización, probablemente recibirás algunos consejos para el uso de la caché del navegador para obtener un aumento de velocidad. Cuando un nuevo visitante entra en tu sitio web se descargan todos los archivos como scripts, estilos CSS y las imágenes - no hay manera de evitarlo y producen de forma natural varias peticiones al servidor. Pero ¿y si el visitante llega a tu sitio web más adelante? esto producirá varias peticiones a al servidor. Pero lo ¿qué podemos hacer si un cliente de nuestro sitio web vuelve de nuevo? Podemos indicarle al navegador del usuario que almacene estos archivos en su caché; a continuación, cuando el usuario vuelve a nuestro sitio, se volverán a cargar los archivos de la memoria caché en lugar de descargar todos de nuevo.

Con el fin de añadir almacenamiento en memoria caché de nuestro sitio web, tendremos que fijar la fecha para cuando expira la memoria caché. Esta fecha es, por supuesto, flexible, y el tiempo de caché óptimo y responsable del sitio puede variar en función del tipo de sitio web que estás ejecutando. Sin embargo, para la mayoría de los casos, el código base proporcionado por Samuel Santos será más que suficiente; sólo tienes que, como antes, copiar el código al final de tu archivo .htaccess.

# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

Como te habrás dado cuenta, en el código que especifica la encabezados expiran tiempo para diferentes tipos de archivos, como scripts, imágenes, hojas de estilo, etc., estos son probablemente los tipos más comunes que tendrás en tu sitio.

Control de caché del navegador

El control de caché del navegador está directamente relacionado con la fecha de expiración de la cabecera y, de acuerdo con la documentación de Apache, proporciona directivas para controlar y modificar la solicitud HTTP y encabezados de respuesta. Los encabezados pueden fusionarse, reemplazarse o eliminarse. Puedes utilizar esta función mediante la inclusión de este código en tu archivo .htaccess:

# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

Después de aplicar esta modificación puedes comprobar los resultados con las herramientas de Chrome Dev; se puede detectar cómo se cargan los archivos en la pestaña "Network". Asegúrate de que no está marcada "Disable cache" cuando se ejecuta este control, ya que por defecto la opción está activada.

Chrome Dev tools

Deberías notar una enorme diferencia en el tiempo de carga, ya que la mayoría de los archivos serán cargados desde la memoria caché del navegador, que es mucho más rápida que la descarga desde un servidor remoto. Si echas un vistazo a la columna de abajo "Tamaño de la imagen" se puede observar que sólo se vuelven a descargar unos pocos recursos; con los demás hay algún texto, (desde la memoria caché), lo que indica que el navegador los sacó de su almacenamiento local.

¿Qué más puedo hacer con el archivo .htaccess?

.htaccess es un archivo muy potente, así que antes de ir más profundo debes prometerme que sólo utilizarás su fuerza para el bien. Con él, puede manipular las URLs de tus páginas, crear redirecciones personalizadas y mucho más. Una característica muy útil permite crear una contraseña para un directorio determinado; podrías, por ejemplo, crear otra contraseña para la carpeta de /administrator en la instalación de Joomla. En estos tiempos de los intentos nefastos de hacking, capas adicionales de seguridad y validación son siempre una bendición.

Además de estas opciones, también puede bloquear direcciones IP específicas o incluso evitar que las imágenes aparezcan vinculados, mostrando una imagen diferente si alguien la roba y la publica en su propio sitio.  Se puede encontrar más información sobre las grandes características disponibles con .htaccess en este sitio web: Htaccess file overview (Visión general del archivo .htaccess).

Jesus_Caceres