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

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:

1	<IfModule pagespeed_module>
2	ModPagespeed on
3	# using commands,filters etc
4	</IfModule>

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)

			<ifModule mod_deflate.c>

				AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

			</ifModule>

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.
1

server {
2

gzip on;
3

gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
4

}

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

<?php
if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) ) {
	ob_start( "ob_gzhandler" );
}
else {
	ob_start();
}
?>

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.

1	Header unset ETag
2	FileETag None

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:

			# 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

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

	
			# 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

Nota:

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.
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)
1

location ~* \.(jpg|png|gif|jpeg|css|js)$ {
2

expires 1h;
3

}

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:

1	define('WP_POST_REVISIONS', false );

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…

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.
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.
1

<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.

¿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.

1	location ~* \.(jpg\|png\|gif\|jpeg\|css\|js)$ {
2	expires 1h;
3	}