Hacer que WordPress cargue rápido

Posted on by

¡Hola! Hacer que WordPress cargue rápido cada vez un tema más recurrente por temas de SEO. En esta pequeña guía mostramos como optimizar WordPress para mejorar tiempos de carga.

Contenido

Principales cosas a optimizar

Casi toda la optimización a realizar está relacionada con el tamaño de la pagina que se descarga cuando se visita y el numero de llamada que realiza la pagina para descargar todos los componentes de la pagina.

Las principales causas de lentitud son las siguientes:

  • Número de plugins elevado
  • Formato y/o tamaño incorrecto en imágenes
  • Exceso de peticiones
  • Falta de un sistema de cache

Para comprobar el tiempo de carga, elementos descargados y recibir consejos de optimización se pueden utilizar las siguientes herramientas en linea:

Elegir los plugins adecuadamente

A la hora de optimizar una web hay que tener en cuenta que los plugins pueden ser una de las principales causas de lentitud ¿Por qué? Porque muchos de los plugins del mercado añaden CSS y JS a la carga del sitio tanto en las secciones en las que es util como en las que no lo es y esto añade mas elementos a descargar.

Ademas de esto los plugins añaden lentitud a la carga de la web ya que tiene que interpretarse su código PHP.

Para evitar estos problemas recomendamos lo siguiente:

  • Se deben utilizar los plugins estrictamente necesarios
  • Si queremos implementar 2 funcionalidades y tenemos la opción de instalar 1 plugin distinto para cada funcionalidad y otro que incluye las 2 funcionalidades al elegir este ultimo reducimos el tiempo de carga
  • No dejar deshabilitados plugins en desuso, los plugins que no se van a utilizar se deben eliminar (al no ser que sea algo temporal)

Optimizando imágenes

Las imágenes de un formato y/o tamaño inadecuado erróneo pueden influir el considerablemente en el tiempo de carga. El tamaño de una imagen es algo que muchas veces ignoramos subiendo las imágenes en tamaños grandes que pesan mas de 200KB y hacen que si en un post hay varias imágenes la carga de la web se ralentice.

Para evitarlo tenemos que hacer lo siguiente:

  • Utilizar imágenes que pesen menos de 100KB siempre que sea posible, esto podemos hacerlo recortando la imagen o comprimiendola
  • Usar formatos adecuados para garantizar un equilibrio entre la calidad de la imagen y la agilidad de carga de esta.
  • En algunos temas puede añadirse funcionalidades de lazy load para cargar las imagenes en diferido solo antes de mostrarse.

Reducir el tamaño de las imágenes

Para reducir el tamaño de las imágenes debemos recortar el tamaño de la imagen a un tamaño adecuado (en pixeles) por ejemplo, si es una imagen para un blog no es necesario que la imagen tenga 2000 X 2000px, con que tenga 800 X 450px es suficiente.

También podemos comprimir la imagen y usar un formato adecuado. EL mejor formato para la web es el formato WEBP pero por defecto no está soportado por WordPress, mas adelante veremos como aceptarlo. Otros formatos que pueden valernos son JPEG y PNG, algo a destacar es que en estos dos formatos tenemos que ajustar la compresión para reducir el peso de la imagen.

Y ahora te preguntaras: ¿Cómo hago para recortar las imagenes o para hacer que se guarden en estos formatos y esa compresión? Bien, la respuesta es: con un editor de imágenes como pueden ser:

Otra opción para optimizar imágenes ya subidas a la web es el plugin smush https://wordpress.org/plugins/wp-smushit/, pero recomendamos hacer las optimizaciones previamente desde un editor de imagenes siempre que sea posible.

Aceptar formato de imagen WEBP en wordpress

Como hemos comentado anteriormente el formato WEBP tiene muchas ventajas. Algunas de ellas son:

  • Tiempo de compresión reducido
  • Permite compresión con o sin pérdidas
  • Tiempo de descompresión reducido.
  • Soporta transparencias.
  • Soporta animaciones.

También hemos comentado anteriormente por defecto no está aceptado el formato WEBP en wordpress, para hacerlo, debemos añadir en el fichero functions.php de nuestro tema (wp-content/MI-TEMA/functions.php) el siguiente bloque de código:

//WEBP MIMETYPE
function webp_upload_mimes( $existing_mimes ) {
	// add webp to the list of mime types
	$existing_mimes['webp'] = 'image/webp';

	// return the array back to the function with our added mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

//HABILITAMOS THUMNAIL / PREVIEW
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );

        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }

    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);
//FIN DE WEBP

Recuerda que si tu tema no es un tema hijo cuando se actualice el tema se perderán estos cambios por lo que te recomiendo crear un tema hijo y añadir este código en el tema que crees.

Exceso de peticiones

Como vimos en el primer apartado donde hablabamos de plugins, nos referíamos al exceso de CSS, JS, ficheros de fuente tipográfica y todos los ficheros que algunos plugins añaden a la carga de la web. Esto también ocurre con los temas, algunos temas añaden una lentitud de carga extra a la web por la cantidad de peticiones que añaden los temas pesados o mal desarrollados.

Lo principal para evitar esto, aparte de las recomendaciones de la sección de plugins, es tener un tema optimizado y ligero a continuación dejamos unos temas ligeros que pueden ser de ayuda para evitar este exceso de peticiones:

  • OnePress: Un tema ligero basado en bootstrap Descargar
  • WP-bootstrap-starter: Otro tema basado en bootstrap Descargar
  • GeneratePress: Un tema rápido y ligero. Tiene muchas opciones de personalización. Descargar
  • Graphy: El diseño para móvil prima sobre el diseño para PC. Descargar
  • Sydney: Un tema pensado para negocios pequeños y medianos. Descargar
  • OceanWP: Un tema simple y ligero pero con muchas posibilidades de personalización.Descargar

Otro consejo para evitar este tipo de problemas es utilizar sistemas como los siguientes plugins:

  • Autoptimize: Antes de nada, decir que es mi preferido. Es un optimizador de rendimiento que añade lazy-load, agrupador de CSS y JS, compresión, etc  Ver
  • hummingbird-performance: Otro optimizador con funciones parecidas al anterior pero con menos opciones para los CSS y JS Ver

Estos 2 plugins  hacen minify de los ficheros JS, CSS y HTML de nuestro sitio y reduciendo así el tamaño de nuestros ficheros. Esto también lo hacen algunos de los siguientes plugins de caché que veremos a continuación.

Sistema de cache

WordPress es un CMS creado con PHP, cada vez que accedemos a WordPress se consumen recursos del servidor. Estos consumos son provocados por consultas a base de datos e interpreación del código PHP. Esto puede provocar lentitud y hasta caídas de nuestro sitio web si tenemos muchas visitas.

Un sistema de cache hace que en las paginas que especifiquemos se genere una vista en un momento determinado y se sirva sin generarse al vuelo cada vez que accedamos a la página. Con esto evitamos el exceso de consumo de recursos del servidor. Hay muchos plugins de cache pero yo recomiendo:

  • Supercache: Facil de configurar, solo hay que instalarlo y activarlo Descargar
  • W3 Total Cache: Es un plugin que requiere más configuración pero se puede optimizar bastante el tiempo de carga y ajustar muy bien con WooCommerce. Mas adelante crearemos una guía para configurarlo. Descargar

 

Si tienes dudas o necesitas ayuda déjanos tu comentario.

¡Nos vemos!

Deja una respuesta