Hacer que tu WordPress cargue en menos de 2 segundos

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

Hace un par de semanas encontré un artículo muy interesante en Torque donde explicaban cinco pasos para reducir el tiempo de carga de WordPress a menos de 2 segundos. Como supongo que a ti también te interesa optimizar la velocidad de tu web, y teniendo en cuenta que los trucos que explican en el artículo enlazado son muy sencillitos, he pensado que sería interesante reproducirlos en nuestra web para que cualquier principiante que no domine el inglés los tenga a su alcance.

1. Utiliza un servicio de hosting decente

El primer paso a realizar cuando quieres mejorar la velocidad de tu WordPress consiste en seleccionar un servicio de hosting decente. Utilizar un buen servicio de hosting, que esté correctamente configurado y optimizado para trabajar con instalaciones WordPress, es una de las formas más sencillas de garantizar una mejor experiencia de usuario.

Ya hemos visto en entradas anteriores la importancia que tiene escoger un buen servicio de hosting y lo que hay que tener en cuenta para hacerlo correctamente. Entre los motivos que Gerard nos explicó estaba, precisamente, el de la velocidad. Algunos ejemplos de empresas son WPEngine, WP Radius, Flywheel o Pantheon.

Estos proveedores de hosting no te ofrecer√°n sus servicios por 3‚ā¨ al mes; la estabilidad, eficiencia y calidad se pagan, pero sin duda sale a cuenta. ¬°Ah, por cierto! Por si te lo preguntas, en WPrincipiante usamos WPEngine¬†?.

2. Optimiza las im√°genes

Uno de los principales motivos por los que la velocidad de una web es baja son las im√°genes. Si tus p√°ginas o entradas incluyen im√°genes grandes y de mucha calidad, es muy probable que tu WordPress tarde bastante m√°s de dos segundos en cargar.

Por suerte, es posible reducir el tama√Īo ¬ęf√≠sico¬Ľ de las im√°genes y comprimirlas para que pesen menos, sin tener que sacrificar apenas calidad. Y, por supuesto, reducir su peso te¬†ayudar√° a reducir tambi√©n esos tiempos de carga que tanto te preocupan.

En WordPress existen varios plugins para optimizar las imágenes en WordPress. En el artículo original de Torque, el autor nos recomienda EWWW Image Optimizer. Cada vez que subas una imagen a tu biblioteca de medios, ésta se optimizará para tu web. Además, también le puedes decir que optimice todas las imágenes que ya habías subido antes de instalar el plugin, así como las imágenes que utilizan tus plugins y tema.

Aunque el plugin es gratis, optimizar cada imagen tiene un peque√Īo coste, puesto que se realiza en los servidores de la empresa detr√°s del plugin. Estamos hablando de costes muy, muy peque√Īos: 0,005 d√≥lares las primeras 1.000 im√°genes… Bastante asequible, ¬Ņno crees?

3. ¬ęMinificar¬Ľ y concatenar

De forma an√°loga a las im√°genes, los ficheros que tu web tiene que cargar tienen un impacto en el tiempo de carga. Estos ficheros consisten en, principalmente,¬†hojas de estilo CSS y ficheros JavaScript. Aunque en principio deber√≠a haber pocos de estos, la cantidad de ficheros aumenta r√°pidamente a medida que instalas plugins, puesto que cada uno incluye los suyos propios. ¬ŅC√≥mo mejoramos esto?

Existen dos formas complementarias de optimizar la carga de ficheros CSS y JavaScript: ¬ęminificar¬Ľ y¬†concatenar.

Minificar consiste en reducir el n√ļmero de caracteres innecesarios que tienen los ficheros. Es decir, se eliminan comentarios, as√≠ como caracteres in√ļtiles (por ejemplo, espacios y saltos de l√≠nea) y se reducen los nombres de variables y funciones. As√≠, un fichero JavaScript con el siguiente contenido:

(function( $ ) {
  var variable = 3;
  function nombreFunction() {
    $( '#selector' ).html( variable );
  }//end nombreFunction()
})( jQuery );

se convierte en:

(function(a){var b=3;function c(){a('#selector').html(b)}})(jQuery)

Sin duda, menos ¬ęamigable¬Ľ para las personas, pero mucho m√°s cortito que la versi√≥n original.

La otra opci√≥n¬†es¬†concatenar diferentes ficheros en uno solo. De esta forma, en lugar de tener que hacer dos peticiones para cargar los ficheros¬†a.css y¬†b.css, bastar√° con realizar una √ļnica petici√≥n que cargue el fichero¬†a-y-b.css.

De nuevo, puedes utilizar un plugin para minificar y concatenar ficheros CSS y JavaScript. Autoptimize es uno de los plugins más usados para ello y, entre otras cosas, te permite excluir ciertos ficheros del proceso.

Aviso. Hay algo importante que debes tener en cuenta. Es posible que si concatenas tus ficheros JavaScript, tu web deje de funcionar (lo he visto en algunos de nuestros clientes). Lo que pasa es bastante sencillo: cuando hay un error en un fichero JavaScript (por ejemplo, error.js), tu navegador web deja de interpretar (ejecutar) ese fichero en concreto. Sin embargo, los demás ficheros de tu web (por ejemplo, mola.js) sí se ejecutarán con normalidad.

Cuando concatenas todos los ficheros en uno s√≥lo, el navegador web ya no cargar√° los ficheros¬†error.js y¬†mola.js, sino que cargar√°, como hemos visto, un √ļnico fichero llamado¬†error-y-mola.js. Cuando ejecute¬†el contenido de ese fichero, empezar√° interpretando el c√≥digo que ten√≠amos en¬†error.js¬†y, como contiene un error, fallar√° sin llegar a ejecutar el c√≥digo de¬†mola.js.

Así que, ya sabes, si usas un plugin para minificar y concatenar y las cosas dejan de funcionar, comprueba que no haya errores usando la consola JavaScript de tu navegador.

4. Optimizando lo primero que se ve

Aquí, en realidad, no estamos mejorando la velocidad de carga de la página, sino la sensación de velocidad (que para el caso es lo mismo).

Cuando una página web se está cargando, el contenido se carga en un cierto orden. Lo normal es que las cosas se carguen en el orden en que aparecen en tu página, pero no siempre es así; hay veces en que el contenido que se está cargando está por debajo del scroll, haciendo que lo que es directamente visible por tus usuarios esté a medio cargar.

Si esto te parece un poco dif√≠cil de entender, haz la siguiente prueba. Vuelve a abrir esta entrada en una pesta√Īa nueva. Ver√°s que la imagen destacada tarda un poquito en aparecer (dando la sensaci√≥n que la p√°gina a√ļn no est√° lista), aunque el contenido de la entrada (lo que de verdad te interesa) est√© disponible instant√°neamente.

Bien,¬†ahora que ya eres consciente de ello, hay que buscar f√≥rmulas que nos permitan acelerar la velocidad de carga percibida. Una de las t√©cnicas que nos explican en Torque es optimizar la hoja de estilos, para que el trozo de p√°gina que se ve nada m√°s acceder a tu web se vea bien formateada. ¬ŅC√≥mo?

Esta herramienta escanea la página que le indiques y, junto con el CSS de tu web, te indicará qué reglas CSS son las que deberías cargar lo antes posible (porque son las que se usan en esta primera porción de tu web). Una vez conoces esas reglas, las puedes meter directamente en tu web (inline CSS) con el mismo plugin Autoptimize y, así, la página se podrá formatear correctamente sin tener que esperar a que el fichero CSS se descargue y procese.

5. Utiliza una CDN

Finalmente, la solución que también ofrece resultados geniales es usar una CDN (Red de Distribución de Contenidos, por sus siglas en inglés). Una CDN es un servicio que, básicamente, almacena una copia de los ficheros en tu web (imágenes, ficheros CSS y JavaScript, etc) en sus servidores, los cuales tienen distribuidos por todo el mundo. Cuando alguien accede a tu web, todos esos contenidos ya no se tienen que cargar directamente de tu servidor, sino que se pueden cargar de uno de esos servidores, reduciendo la carga de tu propio servidor y aumentando la velocidad.

Ejemplos de servicios CDN son, por ejemplo, MaxCDN o CloudFlare. De hecho, uno de los módulos de Jetpack, Photon, implementa una CDN para la distribución de imágenes:

Optimiza y acelera autom√°ticamente las im√°genes mediante la red de entrega de contenido global WordPress.com. De este modo, te ahorrar√°s los costes de alojamiento al reducir el ancho de banda.

Resumiendo

Los consejos que hemos visto hoy para mejorar la velocidad de carga de tu web se pueden clasificar en dos grandes grupos:

  1. Más potencia y hardware. Si aumentas la potencia de tu servidor, usas un servicio de hosting mejor y/o confías en una CDN para disponer de una cache de tus contenidos, te será muy sencillo optimizar la velocidad de tu web.
  2. Reducir tama√Īo y n√ļmero de ficheros.¬†Si reduces la cantidad de datos que tienes que enviar a tus usuarios, a trav√©s de optimizar el contenido y, cuando sea posible, concatenarlo, tambi√©n ser√°s capaz de percibir una reducci√≥n en los tiempos de espera.

¬ŅConoces alguna otra t√©cnica sencilla para mejorar la velocidad de WordPress? ¬°Comp√°rtela con todos nosotros en los comentarios!

Imagen destacada de Gib3102.

10 comentarios en ¬ęHacer que tu WordPress cargue en menos de 2 segundos¬Ľ

    1. ¬°Hola, David!

      Est√° chula, ¬Ņverdad? La verdad es que la descubr√≠ cuando prepar√© la entrada y, s√≠, coincido contigo en que es muy interesante.

      Un saludo,
      David

      1. Hola David, graciasl por el artículo!
        Lo que no entiendo muy bien o no se como hacerlo es al utilizar la herramienta https://jonassebastianohlsson.com/criticalpathcssgenerator/, como se intorduce el c√≥digo? tal y como dices ¬ęlas puedes meter directamente en tu web (inline CSS) con el mismo plugin Autoptimize¬Ľ pero no entiendo muy bien a que te refieres, puedes por favor explicarme como lo puedo hacer.
        Gracias!

        1. Hola Carmen. Normalmente, en el fichero CSS de tu tema hay muchas m√°s reglas de las que realmente necesitas en un momento dado; son reglas que sirven para elementos que no est√°n presentes en la p√°gina actual (pero quiz√°s s√≠ en otras p√°ginas). Lo ideal ser√≠a tener un CSS espec√≠fico para cada p√°gina, √ļnicamente con las reglas necesarias (aunque entonces no se podr√≠a cachear de una p√°gina a otra).

          De todas formas, no te preocupes mucho por esta herramienta; en la mayoría de casos es innecesario preocuparse por el coste de los CSS. El cuello de botella suele estar en otros sitios.

          Un saludo,
          David

  1. Buenas, muchas gracias por la menci√≥n David ūüôā

    Nuestro √ļltimo juguete es Magic Cach√©, es un sistema de cach√© a nivel servidor basado en ajustes Nginx, Varnish, Apache, MemCache y OPCache para obtener rendimientos de carga de menos de 1 segundo para p√°ginas est√°ndar.

    Este sistema de Cache permite asumir un n√ļmero de visitas elevado, debido a que se cachea todo el contenido de la web en memoria RAM del servidor, esto es una gran ventaja porque la memoria ram es de acceso mucho m√°s r√°pido que leer en el disco. Con picos de visitas es donde m√°s se nota porque el server ni se inmuta…

    Un saludo!
    Gerard

    1. ¬°Hola Gerard!

      Vaya, tiene muy buena pinta lo que nos comentas. ¬ŅTen√©is alguna entrada donde detall√©is un poco m√°s el proceso de configuraci√≥n y tal? Me gustar√≠a leer en m√°s detalle sobre el tema y creo que estar√≠a bien que quedase enlazado aqu√≠ tambi√©n.

      Un saludo y gracias por seguirnos,
      David

Deja una respuesta

No publicaremos tu correo electr√≥nico. Los campos obligatorios est√°n marcados con: ‚ÄĘ

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptaci√≥n est√°s dando tu leg√≠timo consentimiento para que tu informaci√≥n personal se almacene en SiteGround y sea usada por Nelio Software con el prop√≥sito √ļnico de publicar aqu√≠ este comentario. Cont√°ctanos para corregir, limitar, eliminar o acceder a tu informaci√≥n.