¡Hola! Esta es la continuación de este post . En ellos intento dar una visión global de todo lo relacionado con la velocidad de carga de una página web. Si lo prefieres, descargarte la versión completa en mi Guía para que tu página cargue como un cohete.

Son consejos que van, desde lo más simple, como instalar un plugin de caching, hasta contratar un hosting administrado. Esto último no es que sea complicado, pero si ya tienes tu web desarrollada y online igual tienes que decantarte por otros consejos.

Hacer uso del Caching

Tener muchos plugins es útil, pero la mayoría fallan en el caching. ¿Qué es el caching? Pues básicamente, es guardar una copia de la web para responder a las peticiones de búsqueda.

Los plugins de caching crean archivos estáticos para cada página o post. Los servidores los guardan para ofrecer un contenido más rápido a los usuarios que han entrado una búsqueda.

Hay que tener en cuenta (lo veremos también más adelante) que los archivos estáticos se cargan mucho más rápido (según WordPress, cientos de veces más rápido) que las nuevas páginas y posts, con contenido dinámico.


Como WordPress por sí solo no hace mucho para influir en el almacenamiento en caché del navegador, tenemos plugins que nos solucionan la tarea, como W3 Total Caché o WP Rocket. El primero es gratuito y ya ofrece todas las características que necesitamos. El segundo es de pago. Yo lo utilizo y ofrece características compresión de archivos Javascript y CSS, como ya vimos en el anterior post.


Usar un CDN

Los CDN (Content Delivery Network) son una red informática en la que se entrelazan varios ordenadores distribuidos geográficamente. Sirven para almacenar parte de la información y el contenido de los sitios web, como por ejemplo los contenidos estáticos (CSS, javascript, imágenes) y los sirven al usuario final desde servidores cercanos a ellos.

Sus ventajas son que mejoran la disponibilidad de nuestro servidor, alivian la carga de tráfico de éste, son una barrera más de seguridad contra ataques informáticos, y además mejoran el rendimiento y los tiempos de carga.


CloudFlare es uno de los más conocidos y ofrecen un plan gratuito para páginas personales y blogs. Y tienen un plugin para WordPress. Hay que crear una cuenta primero y luego enlazarla en el plugin.

Si decides usar un CDN tendrás que cambiar el nombre del servidor en domain manager. Antes de usar un CDN es recomendable consultarlo con tu hosting, por si tienen otras sugerencias para acelerar la página y por si tienen ya colaboración con el CDN que estás considerando o con otro.


Usar Google AMP (Google Accelerate Mobile Pages)

Google AMP es un proyecto incipiente, pero puede llegar a ser una revolución en la navegación móvil. Se trata de una biblioteca de código abierto que ayuda a incrementar la velocidad de carga en dispositivos móviles. El resultado, según Google AMP, son páginas web atractivas, ligeras y que se cargan prácticamente al instante para los usuarios.

Su plugin para WordPress permite la compatibilidad de nuestros posts y páginas con AMP.

Optimizar la Base de Datos

Con el tiempo, nuestra base de datos acumula mucha basura, como por ejemplo las revisiones de posts y páginas, spam, comentarios no aprobados

WP Optimize es un plugin que ayuda a limpiar la base de datos de toda esa basura innecesaria.

Eliminar hotlinking

El hotlinking ocurre cuando otras páginas linkan directamente a las imágenes de nuestro post o página desde sus posts o páginas.

Nuestro servidor tendrá que hacer frente a muchas peticiones y quien efectúa el hotlinking está consumiendo nuestro ancho de banda. Existe incluso el peligro de que el hotlinking acabe con todo nuestro ancho de banda.

Podemos solucionar esta amenaza incluyendo este código al final de nuestro archivo .htaccess. Se trata de mostrar una imagen alternativa o disuasoria en caso de que nos quieran enlazar una imagen:

 

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?tu-web.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ http://tu-web.com/imagen-alternativa.png [NC,R,L]

¿Qué hace este código?

  • La primera línea activa el motor de redirecciones.
  • La segunda línea permite a las visitas directas a la imagen a que la puedan ver.
  • La tercera línea permite a tu propia web (tu-web.com) a mostrar las imágenes. Debemos sustituir por el nombre de nuestro dominio.
  • La cuarta línea permite el acceso a Google, para que nos las indexe todas.
  • La quinta línea indica qué imagen mostrar en lugar de la imagen que nos quieren linkar.

Si no nos queremos complicar con el código y preferimos instalar un plugin, tenemos el plugin de WordPress Hotlink Protection.


Añadir un encabezado expires a los contenidos estáticos

Ayuda a los navegadores a saber si servir o no una versión en caché de la página, para conseguir reducir el tiempo de carga y el trabajo del servidor. Puedes establecer encabezados expires en ficheros específicos o incluso especificar tipos de fichero. Cuando el navegador viene a nuestra página pueden ver la última vez que cargaron el tipo de archivo especificado. Si fue recientemente, se despliega directamente de la caché.

La idea es establecer tiempos de expiración largos a elementos como logos, css… elementos que no cambian en tu website. Y tiempos de expiración largos para elementos que cambian regularmente.

¿Cómo lo hacemos? Pues de nuevo en nuestro archivo .htaccess, poniendo o adaptando las siguientes líneas de código. En este ejemplo, todos los archivos tipo imagen (gif, png, jpg y jpeg) expirarían en un mes, expresado en milisegundos.

 

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000

Reducir el número de revisiones guardadas

WordPress guarda las revisiones de las páginas, posts… indefinidamente y además guarda todas las copias. Revision Control es un plugin para reducir esas copias guardadas y lo recomendable es que sean dos o tres como máximo. Así conseguiremos aligerar la base de datos de información innecesaria.

Desactivar pingbacks y trackbacks

Por defecto WordPress interactúa con otros blogs equipados con pingbacks y trackbacks. Cada vez que otro blog te menciona, o linka a tu página o blog, según tu configuración recibirás una notificación. Será en forma de email, pero también como notificación en el Dashboard para que, como los comentarios, lo moderes (aprobar, eliminar…).

Se trata también de otro tipo de información que podemos evitar acumular en nuestra base de datos.

Reemplazar PHP con contenido estático

Cuando sea posible, podemos sustituir las llamadas PHP a contenido HTML. Está indicado también para contenidos que no van a cambiar, como el título de tu sitio, las rutas del favicon y de las CSS, etc.

Vuelvo a mencionarlo y es importante como hemos visto: el contenido estático carga hasta 100 veces más rápido que el dinámico.


 

Adapto un ejemplo del siguiente link:.

<title><?php bloginfo('name'); ?> <?php bloginfo('description');?></title>
<link rel="shorcut icon" type="image/x-ico" href="&lt?php bloginfo('template_url'); ?>/favicon.jpg" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>"/>

Podemos convertir fácilmente este contenido con llamadas dinámicas a PHP a contenido estático en HTML:

<title>One Man's Blog - Specialization is for Insects.</title>
<link rel="shorcut icon" type="image/x-ico" href="http://onemansblog.com/wp-content/themes/rapid-access/favicon.jpg" />
<link rel="stylesheet" type="text/css" media="screen" href="http://onemansblog.com/wp-content/themes/rapid-access/style.css"/>

Eliminar los plugins que no utilices

Todos hemos acumulado plugins uno tras otro. Es un poco síndrome de Diógenes.  Pues bien, ha llegado el momento de dar de baja aquellos que ya no utilicemos. Primero los desactivamos y luego los borramos. Es recomendable realizar una copia del sitio antes, o hacerlo uno a uno, por si algo no va bien.

Y también es muy recomendable tener la última versión de WordPress, así como actualizar los plugins siempre que podamos.


Bueno, pues hasta aquí este macropost en dos entregas para acelerar la velocidad de carga de tu página web. Recuerda que si quieres, tienes la versión completa en mi Guía para que tu página cargue como un cohete.

Si te ha gustado este post, o no, o si quieres que hable de algún otro tema sobre desarrollo web y diseño, no dudes en dejar tu comentario. ¡Gracias por leerme!