¿Cómo acelerar el tiempo de carga de WordPress?

1. Mantén actualizado WordPress

Estar actualizado con la última versión de WordPress es muy importante. No solo para el rendimiento de tu sitio, sino para evitar hackeo y cuestiones similares. En cada actualización, por lo general, hay muchas mejoras de desempeño.

Los desarrolladores de WordPress liberan nuevas versionesporque con cada actualización WordPress mejora más.

2. Elimina plugins innecesarios y actualiza los demás

Si estás usando más de 15 plugins en tu blog, entonces necesitas revisar si realmente los necesitas a todos. Si no los necesitas, elimínalos. También asegúrate de que los Plugins que mantengas, estén actualizados a su última versión.

3. Optimiza tu Base de Datos

Te sorprenderás de cuanto puede disminuir el tiempo de carga de tu sitio web, tan solo optimizando tu base de datos. Puedes hacerlo manualmente o puedes hacerlo mediante Plugins.

Si lo deseas hacerlo de la forma fácil, instala el plugin Optimize DB o WP Optimize. Si deseas hacerlo manualmente debes hacer lo siguiente:

Optimiza tu Base de Datos

Debes abrir el administrador de bases de datos PHPMyAdmin.
Selecciona tu bases de datos.
Haces clic en “Marcar todos/as” al fondo de la página.
Elige la opción “Optimizar la tabla” en la lista desplegable que se encuentra al lado.
Y listo!

4. Cachea tu Base de Datos

Las consultas a la base de datos se hacen cada vez que una persona visita tu blog. El cache es vital para reducir el número de consultas, así mismo aumentar la velocidad de tu blog. Para minimizar tus consultas a la base de datos de forma fácil deberás instalar el plugin DB Cache Reloaded.

5. Desactiva y Elimina las Revisiones de Post

Las revisiones de Post se introdujeron desde WordPress 2.6. pero en realidad son útiles cuando un blog es administrado por varios autores y sirve para ver los cambios de un artículo y la fecha de ese cambio o para regresar un artículo a una versión anterior. Sin embargo, esto hará que tu base de datos se llene de revisiones de artículos, lo que la hace más pesada. Si no necesitas esta característica, debes añadir la siguiente línea a la archivo config.php de tu instalación de WordPress:

1
define('WP_POST_REVISIONS', FALSE);

Si deseas eliminar todas las revisiones de tu base de datos debes ejecutar la siguiente consulta:

1
DELETE a,b,c FROM wp_posts a

2
LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id)

3
LEFT JOIN wp_postmeta c ON (a.ID = c.post_id)

4
WHERE a.post_type = 'revision';

8. Deshabilita el Hotlinking

El hotlinking, también conocido como robo de ancho de banda, es cuando alguien copia y pega la URL de tu imágen, poniendo tus imágenes en su propio sitio, lo que hace que la carga de tu servidor suba bastante.

Hay varias formas de evitar esto poniendo lo siguiente en el archivo .htaccess, que se encuentra en la carpeta raíz de tu servidor, así:

1
#deshabilitar el hotlinking de la imágenes

2
RewriteEngine on

3
RewriteCond %{HTTP_REFERER} !^$

4
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?trazos-web.com [NC]

5
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]

6
RewriteCond %{HTTP_REFERER}  !^http(s)?://(www\.)?feeds2.feedburner.com/TrazosWeb [NC]

7
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

Puedes habilitar tu feed, pues de otra manera tus lectores del feed no verán ninguna imágen.

9. Utiliza un Plugin de Cache de WordPress

Utilizar un plugin de cache como WP Super Cache o W3 Total Cache hace que se guarde una copia en html de tu blog y que esta copia sea la que se le muestre a tus lectores. Esto incrementa enormemente la velocidad de carga de tu sitio web.

10. Optimiza tus Imágenes

Si editas tus imágenes con Photoshop, utiliza siempre la opción “Guardar par Web y dispositivos”, o utiliza algunas de las herramientas para optimizar tus imágenes que te presento a continuación:

Herramientas en línea:

Herramientas de escritorio:

11. Comprime tu contenido

Estos se hace mediante el archivo .htaccess de tu carpeta raíz y permite comprimir la mayoría de los archivos de tu blog (css, javascript, php, html y xhtml). Hay dos maneras de hacerlo dependiendo de la versión de Apache que tengas instalado tu blog, si la versión de Apache es menor de 2.x, se hace mediante mod_gzip, así:

01
<ifmodule mod_gzip.c>

02
mod_gzip_on Yes

03
mod_gzip_dechunk Yes

04
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$

05
mod_gzip_item_include handler ^cgi-script$

06
mod_gzip_item_include mime ^text/.*

07
mod_gzip_item_include mime ^application/x-javascript.*

08
mod_gzip_item_exclude mime ^image/.*

09
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

10
</ifmodule>

Si La versión de Apache de tu servidor es la 2.x, puedes utilizar la función mod_deflate, así:

1
<IfModule mod_deflate.c>

2
<FilesMatch "\.(css|js|x?html?|php)$">

3
SetOutputFilter DEFLATE

4
</FilesMatch>

5
</IfModule>

12. Añade caché a todo tu contenido estático

Añadir Cabeceras de Expiración (Expire Headers) y Cabeceras de Control de Caché (Cache-Control Headers) hará que se realicen menos peticiones HTTP lo que disminuirá el tiempo de carga de tu sitio web. LasCabeceras de Expiración son generalmente usadas con las imágenes, pero pueden ser utilizadas con hojas de estilos, scripts, componentes de flash, etc.

Aquí te dejo un ejemplo de lo que deberías poner en tu archivo .htaccess para implementar estas cabeceras:

01
# EMPIEZA Cabeceras de Expiración

02
<IfModule mod_expires.c>

03
ExpiresActive On

04
ExpiresDefault "access plus 1 seconds"

05
ExpiresByType image/x-icon "access plus 2592000 seconds"

06
ExpiresByType image/jpeg "access plus 2592000 seconds"

07
ExpiresByType image/png "access plus 2592000 seconds"

08
ExpiresByType image/gif "access plus 2592000 seconds"

09
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"

10
ExpiresByType text/css "access plus 604800 seconds"

11
ExpiresByType text/javascript "access plus 216000 seconds"

12
ExpiresByType application/javascript "access plus 216000 seconds"

13
ExpiresByType application/x-javascript "access plus 216000 seconds"

14
ExpiresByType text/html "access plus 600 seconds"

15
ExpiresByType application/xhtml+xml "access plus 600 seconds"

16
</IfModule>

17
# FIN Cabeceras de Expiración

18
#EMPIEZA Cabeceras Cache-Control

19
<IfModule mod_headers.c>

20
Header unset ETag

21
FileETag None

22
<FilesMatch "\.(ico|jpe?g|png|gif|swf)$">

23
Header set Cache-Control "max-age=2592000, public"

24
</FilesMatch>

25
<FilesMatch "\.(css)$">

26
Header set Cache-Control "max-age=604800, public"

27
</FilesMatch>

28
<FilesMatch "\.(js)$">

29
Header set Cache-Control "max-age=216000, private"

30
</FilesMatch>

31
<FilesMatch "\.(x?html?|php)$">

32
Header set Cache-Control "max-age=600, private, must-revalidate"

33
</FilesMatch>

34
</IfModule>

35
# FIN Cabeceras Cache-Control

13. Optimiza tus archivos CSS y JavaScript

Los archivos CSS y JavaScript pueden ser optimizados para reducir el tamaño de estos. Por ejemplo, las líneas en blanco y clases CSS sin usar deben ser eliminadas. Al optimizar estos archivos, puedes reducir efectivamente el ancho de banda del servidor y ahorrar espacio en el disco duro. Para comprimir el CSS hay varias herramientas:

WP CSS: Es un plugin para WordPress que comprime los archivos CSS de tu blog.
Mediante CSSOptimizer.
CSS Compressor
Clean CSS

Para ayudarte a optimizar tu archivos JavaScript existen las siguiente herramientas:

14. Mueve las llamadas a archivos JavaScript al fondo

Un servidor solo puede cargar un cierto límite de ítems al mismo tiempo. Si estás usando muchos JavaScript en tu sitio de WordPress, entonces tendrás que comprimirlos. Luego de comprimir los scripts, deberás moverlos al fondo de la plantilla de tu blog, por lo general antes de la etiqueta </body>, para que el contenido (imágenes, css, etc) sea cargado primero.

Algo así:

1
....

2
<script type="text/javascript" src="algunScript.js"></script>

3
<script type="text/javascript" src="otroScript.js"></script>

4
</body>

15. Utiliza el API de bibliotecas AJAX de Google

El API de bibliotecas AJAX es un intento por hacer más rápidas las aplicaciones web para los desarrolladores de manera simple, convirtiendo una red de distribución de contenido en una arquitectura de carga para las librerías de JavaScript más populares, incluyendo:

Para implementarlo en tu sitio puedes usar la API de Google:

`1`	`<script type="text/javascript"` `src="http://www.google.com/jsapi"></script>`

`2`	`<script type="text/javascript">google.load("jquery",` `"1.3.2");</script>`

O enlazar el código fuente directamente en la plantilla de tu blog:

`1`	`<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>`

16. Reduce el uso de scripts externos

Cuando tu blog carga lentamente, deberías pensar seriamente en quitar widgets como el de Fans en Facebooko Últimas actualizaciones en Twitter o botones como los de Tweetmeme, pues estás haciendo que la carga de tu sitio dependa de otros sitios. Por ejemplo, si estás usando el botón retweet y Tweetmeme está caído, tu blog no cargará correctamente. Trata de evitar estos plugins o widgets lo más que puedas.

17. Utiliza CSS Sprites

Los Sprites CSS son múltiples imágenes combinadas en una sola gran imágen. Luego mediante CSS puedes ‘recortar‘ o seleccionar el pedazo de imágen que deseas usar en determinada clase, en vez de tener múltiples imágenes utilizadas múltiples veces. Esto es bueno pues requiere menos peticiones al servidor.

Aquí te dejo algunos artículos para que aprendas más sobre los CSS Sprites:

Artículos en esta sección