Si hay una cosa que preocupa a todos los gestores de sitios web, ya sean webs corporativas, comercios electrónicos, blogs o lo que sea, es la eficiencia de la web y sus métricas relacionadas, específicamente la velocidad de carga. Y es normal, porque eso afecta directamente a la experiencia de usuario, al SEO, a la tasa de conversión… En fin, a todo.
Al margen de las mejoras que podemos implementar en la propia web hay otras que se pueden conseguir a nivel de servidor que, en un hosting compartido, habilitaremos por medio del archivo .htaccess. Así que vamos a ver cómo puedes usar htaccess para mejorar la velocidad de carga de tu web.
Tabla de contenidos
Sobre htaccess
Muy rápidamente, un par de palabras sobre el archivo .htaccess: qué es, dónde está, cómo modificarlo y qué hacer si la lías parda te equivocas al realizar las modificaciones y la web deja de funcionar.
El archivo .htaccess es un pequeño archivo de texto que se encuentra en la raíz de la web (el mismo lugar del que cuelgan los directorios wp-admin, wp-includes y wp-content de WordPress) y que permite realizar o ajustar ciertas configuraciones en el servidor de forma descentralizada.
Es decir, gracias a este pequeño archivo puedes hacer que el servidor se comporte al mostrar tu web de una forma diferente a la que tiene establecida en sus archivos de configuración, permitiendo que establezcas tus propios parámetros al margen de los generales, como por ejemplo la estructura de URLs (que en WordPress estableces en Ajustes > Enlaces permanentes).
Modificar el htaccess
Dicho esto, quedan claras dos cosas:
- No es un archivo de WordPress, sino del servidor web (concretamente de Apache, aunque otros servidores son compatibles con este formato)
- Al ser un archivo de configuración, dañarlo, modificarlo de forma incorrecta, eliminarlo o en general “cagarla” con él puede provocar problemas, aunque la solución en estos casos suele ser bastante sencilla
Para modificarlo podemos acceder a él de dos maneras: bien a través del gestor de archivos de nuestro hosting, usando la opción de editor, o bien a través de FTP (con tu cliente preferido, por ejemplo FileZilla), editándolo con el editor de texto plano que utilices habitualmente.
El punto con que comienza el nombre del archivo significa, en los sistemas *NIX, que es un archivo oculto, así que es posible que para verlo tengas que habilitar una opción (tanto en el gestor de archivos del hosting como en tu cliente de FTP) que permita ver este tipo de archivos.
Recuerda añadir tus modificaciones siempre tras la línea que dice # END WordPress.
Recuperación del htaccess en WordPress
Pero antes de poner manos a la obra seremos previsores y veremos qué hacer si ocurre un desastre y, por ejemplo, te equivocas editándolo y empiezan a salir errores de todo tipo al intentar acceder a la web.
Ante todo, como siempre, mucha calma. Como buen lector de este blog ya has tenido la previsión de realizar antes de nada una copia de seguridad del archivo, así que sólo tienes que subir el original y, si te encuentras con ánimo, volver a comenzar desde ese punto.
Si, pese a las veces que repito que no se debe tocar nada sin realizar antes una copia de seguridad, has ido en plan kamikaze, a pelo y sin red, tampoco te pongas nervioso: volver a crear el .htaccess que WordPress utiliza es muy sencillo:
- Elimina el .htaccess dañado, así desaparecerá cualquier error que se estuviera mostrando, y la web volverá a funcionar, aunque sólo la página de inicio y el área de administración (el resto mostrará errores 404)
- Ve a Ajustes > Enlaces permantenes en el área de administración y, sin realizar cambio alguno, pulsa en guardar
Y ya está, WordPress ha vuelto a crear el archivo .htaccess que necesita para funcionar correctamente según la configuración que tengas establecida para los permalinks.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
Mejorar la velocidad de carga modificando el htaccess
Y una vez repasada la teoría básica, vamos a ensuciarnos las manos, que es lo divertido. Vamos a ver dos directivas para este fichero que permitirán que tu web gane puntos no sólo en cuanto a velocidad de carga, sino también ante “Papá Google”, ya que son dos de los puntos que mide PageSpeed y que Google tiene en cuenta a la hora de estimar la experiencia de usuario en tu sitio web.
Los navegadores pueden guardar en su caché interna algunos recursos, como imágenes, vídeos, archivos CSS o JS, etcétera. De esta forma, tras la primera carga de la web, el resto son más rápidas ya que no tienen que volver a descargar estos archivos, pudiendo usar los que han guardado en su caché.
Pero para eso tenemos que pedir expresamente al navegador que lo haga, indicándole un periodo tras el cual estos recursos dejarán de tener validez y deberá volver a descargarlos.
PageSpeed Insights:
Especificar caché del navegador
Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red.
Conseguirlo es muy sencillo, y basta con añadir unas pocas líneas en el .htaccess:
Header set Cache-Control "public" Header set Expires "access plus 2592000 seconds"
Como ves he establecido como fecha de expiración el momento de acceso más 2.592.000 segundos, es decir, un mes (30 días, para ser más preciso), independientemente de cuál sea el momento en que el navegador realiza la descarga. También se puede establecer una fecha específica, aunque es menos recomendable (si lo haces que sea, al menos, una fecha lejana):
Header set Cache-Control "public" Header set Expires "Thu, 15 May 2025 23:00:00 GMT"
Habilitar la compresión
¿Sabías que el servidor puede enviar al navegador los recursos comprimidos, de forma que la descarga de estos sea más rápida? Archivos de imagen, fuentes, estilos, scripts… incluso PDFs. Todos ellos son susceptibles de ser comprimidos por el navegador para acelerar su transmisión al navegador cliente.
Pero, de nuevo, hay que especificarlo, ya que por defecto esta funcionalidad está deshabilitada. PageSpeed Insights te lo pide diciendo:
Habilitar compresión
Comprimir recursos con gzip o con deflate puede reducir el número de bytes enviados a través de la red.
Hacerlo es, de nuevo, muy sencillo. Basta con añadir al .htaccess la siguiente directiva:
SetOutputFilter DEFLATE
Conclusiones
Es fácil, ¿verdad? Añadir estas dos directivas al archivo .htaccess cuesta como medio minuto, el tiempo de copiar y pegar unas líneas de código, y haciéndolo conseguirás dos cosas:
- Tu web cargará más rápido. Quizá no sean más que unas décimas (todo depende del peso inicial y de la cantidad de recursos estáticos que tengas) pero cuando se llega a cierto nivel de optimización unas décimas significan una gran mejora
- Google detectará estas mejoras, otorgándote esos puntos adicionales en PageSpeed Insights y teniéndolo en cuenta a la hora de “juzgar” la experiencia del usuario en tu web, lo que se traduce en una mejora del SEO
Yo diría que los beneficios compensan el esfuerzo, ¿no crees?
Tomás dice
Fantástico Enrique,
Gracias por la aportación.
Saludos!
Yaiza dice
Cuando modifico el .htaccess y añado el código, despúes de #END WordPress, me sale un error 500 Internal Server Error en mi página.
Por suerte, tenía copia de seguridad del .htaccess.
¿A qué se debe este error?
Enrique J. Ros dice
Hola Yaiza
Se debe a un error de sintaxis en el htaccess
Un saludo
tomas dice
cuando te pase eso de nuevo no tienes que restaurar la copia de seguridad, solo con borrar el htacces este se regenera, lo que si te recomiendo que si ya tenias modificaciones en el htacces antes las salves
Antonio dice
Pues que sencillo regenerar el .htacess guardando cambios en los enlaces permamentes!!!.
Lo borré con una página de prueba en local, no hice copia despreocupado por ser una página de prueba y no se regeneraba de ningún modo hasta que encontre tu post!
Increíble, buenísimo!