Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Hosting
Code

Optimizar la Velocidad de Carga de WordPress Con header.php y .htaccess

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La velocidad de carga de un sitio web es crucial para cualquier blog/web, especialmente para la gente que tenga un alojamiento compartido – que es el servicio de alojamiento más barato disponible. Existen algunos trucos para .htaccess y header.php que incrementan la velocidad de carga de tu sitio web entre un 50 o un 70%.


El rendimiento web está recibiendo cada más y más atención por parte de los desarrolladores y es uno de los temas más candentes en el desarrollo web. Lo primero y más importante, la velocidad de carga es mucho más que una característica importante. Si tu sitio web es lento, la gente no lo usará.

Qué significa la velocidad para los gigantes de internet:

  • Para Google – 500 milisegundos extra en el tiempo de carga provoca un 20% menos de búsquedas
  • Para Yahoo – 400 milisegundos extra en el tiempo de carga causa un incremento del 5-9% del número de personas que pulsan "volver" antes incluso de que la página se acabe de cargar 
  • Para Amazon – 100 milisegundos extra en el tiempo de carga da como resultado una caída del 1% en las ventas

Google, en su continuo esfuerzo por crear una web más rápida, publicó "hemos decidido tomar en cuenta la velocidad del sitio en los rankings de nuestras búsquedas".

Así que una web más lenta incluso disminuirá la posición en los resultados del motor de búsqueda. 

Por tanto, el tiempo de carga importa muchísimo. Un CDN (Content Delivery System) es una buena solución para mejorarlo, pero hasta cierto punto, y los buenos proveedores de CDN son algo caros.

Las buenas noticias son que algunas de las optimizaciones más importantes para la velocidad se pueden realizar con simples trucos en el archivo .htaccess. Estos pueden hacer que cualquier sitio web se cargue más rápido comprimiendo el contenido, habilitando el cacheado del navegador y siguiendo las Mejores Prácticas para Acelerar Tu Sitio Web del Excepcional Equipo para el Rendimiento de Yahoo!, y sin que te cueste un céntimo.


Paso 1 Compresión Gzip de los Archivos

La compresión reduce los tiempos de respuesta al disminuir el tamaño de las respuestas HTTP.

Merece la pena comprimir con gzip tus documentos HTML, los scripts y las hojas de estilos. De hecho, merece la pena comprimir cualquier respuesta basada en texto, incluyendo los archivos XML y JSON.

Los archivos de imágenes y los PDFs no deberían comprimirse con gzip, ya están comprimidos. Comprimirlos no sólo sería un gasto innecesario de CPU, sino que podría aumentar el tamaño de los archivos. 

La compresión de archivos también ahorrará algo de tu ancho de banda.

Con .htaccess

  • Para Servidores Apache

    mod_pagespeed es un módulo Apache desarrollado por Google y su directiva de comandos puede usarse de la misma forma que cualquier otro módulo.

    En la actualidad solo GoDaddy y DreamHost admiten el módulo mod_pagespeed, así que si estás alojado con ellos, simplemente copia y pega el siguiente código en tu archivo .htaccess:

    Probablemente muchos de vosotros estéis alojados con otros proveedores que no admitan el módulo mod_pagespeed.

    Puedes usar el módulo mod_deflate (Apache 1.3x usaba mod_gzip pero desde Apache 2x se usa mod_deflate)

  • Para Servidores Nginx

    Si estás alojado en un servidor web Nginx copia el siguiente código en tu archivo .htaccess para habilitar la compresión gzip.

Con header.php

Si tu servidor no acepta mod_deflate ni mod_gzip puedes usar este script PHP para la compresión que funcionará tanto en Apache como en Nginx 

Simplemente copia lo siguiente en el archivo header.php de tu tema

Abajo tienes un gráfico de barras que muestra la velocidad de carga de mi sitio sin y con compresión gzip. 


Paso 2 Desactiva las Etags

Las ETags (Etiquetas de Entidad) son mecanismos que los servidores web y los navegadores usan para determinar si un componente almacenado en la cache del navegador coincide con su correspondiente original alojado en el servidor. Las ETags se añaden para proporcionar un mecanismo de validación para entidades más flexible que la fecha o la última modificación. Una ETag es una cadena que identifica de forma única la versión de un componente. Las limitaciones de este formato son que la cadena está entre comillas. El servidor de origen especifica los componentes ETag usando el header de respuesta ETag. 

Para desactivar las ETags, pega esto en tu archivo .htaccess.


Paso 3 Usa la Cache del Navegador

Con el cacheado del navegador, damos instrucciones explícitas a los navegadores para que mantengan archivos concretos durante un periodo de tiempo específico. Cuando el archivo se necesita de nuevo, el navegador tira de su cache local en lugar de solicitarlo otra vez al servidor.

Disponer de una web sin cachear adecuadamente tiene el mismo sentido que conducir a la tienda a por un vaso de agua cada vez que tengas sed.

El cacheado del navegador es verdaderamente útil para los usuarios que vuelven a tu sitio; podría convertir visitantes leales en permanentes y además te ahorra mucho ancho de banda.

Un usuario que visita tu página por primera vez, hará varias solicitudes HTTP para descargar todos los archivos del sitio, pero empleando headers con Expires y  Cache-Control consigues que esos archivos sean cacheables. Esto evitará peticiones HTTP innecesarias en las sucesivas vistas de la página. 

  • Para Servidores Apache

    Apache lo habilita a través de módulos mod_expires y mod_headers.

    El módulo mod_expires controla el ajuste del header Expires HTTP y la directiva max-age del Cache-Control HTTP header en las respuestas del servidor. Para modificar las directivas de Cache-Control diferentes a max-age, puedes usar el módulo mod_headers.

    El módulo mod_headers proporciona directivas para controlar y modificar las solicitudes HTTP y los headers de respuesta. Los headers pueden ser combinados, sustituidos o eliminados.

    Añade estas reglas a .htaccess para configurar Expires headers:

    reglas .htaccess para configurar un el Cache-control del header: 

    Nota:

    1. No hay necesidad de establecer la directiva max-age con el header de Cache-Control puesto que ya está configurada por el módulo mod_expires.
    2. must-revalidate significa que una vez una respuesta ha sido anunciada debe ser revalidada; aunque no significa que tenga que ser comprobada cada vez.
  • Para Servidores NGINX

    Los ajustes .htaccess correspondientes en Nginx serían algo así: 

    (El ejemplo inferior le indicará al navegador del visitante que guarde el HTML, el CSS, el Javascript, las imágenes y el favicon durante una hora)


Paso 4 Reducir el Tamaño de la Base de Datos MySQL

A partir de la versión 2.6, WordPress guarda automáticamente los posts mientras escribes, estas copias permanecen en la Base de Datos MySQL como revisiones incluso después de que hayas guardado tu post definitivamente. Cuanto más voluminosa sea la Base de Datos, más tiempo tardará el sitio en cargarse. Te recomiendo que desactives la función de las revisiones.

Pega lo siguiente en wp-config.php para desactivar las revisiones:

No obstante, si aún así decides mantener la funcionalidad de las revisiones activa, puedes optar por mantenerlas sólo por un determinado número de días, p. ej. 10 días.


Más…

  1. Añadir el expires header no afecta al tiempo de carga de la web de una primera visita, pero te sorprenderías de cuanto lo reduce en la próxima vista / visita de la página para el visitante que vuelve.
  2. Haz un seguimiento del rendimiento de tu web: muestra el número de consultas por cada carga.

    Simplemente pega el siguiente código después del texto de copyright en el footer.php de tu tema.


¿Conoces o usas otro método o métodos para optimizar el tiempo de carga de tu blog/web? No olvides compartirlos a través de un comentario.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.