Hace poco hemos visto las entrevistas a Fernando Tellado, José Conti, Javier López del Río y Guillermo Tamborero en la WordCamp Barcelona, así que ahora llega el turno de otro profesional muy conocido en la comunidad WordPress. Esta vez tuvimos el placer de charlar con Pablo López.
Pablo López lleva más de 10 años en el mundo del desarrollo web y, concretamente, en WordPress desde 2011. El pasado mes de octubre, tuvimos la oportunidad de tenerlo como como ponente en la WordCamp para hablarlos de la optimización de assets en su ponencia 'Gestión avanzada de assets en WordPress'.
¿Quieres ver qué más nos contó sobre optimización y estrategias para los assets en WordPress? Échale un ojo a la entrevista completa, ¡no tiene desperdicio!
Estamos en el WordCamp de Barcelona. Tenemos ahora con nosotros a Pablo López que nos va a hablar sobre optimización, sobre assets. ¡Muchas gracias por estar aquí con nosotros, Pablo!
P.L: ¡Hola, buenos días!
Primero de todo, ¿qué es assets? ¿Qué se entiende por este concepto?
P.L: Vale, pues los assets son los recursos estáticos que tenemos en la web, es decir, todo lo que son CSS, JS, fuentes, imágenes… La definición sería recursos estáticos de tu web.
¿Y por qué es tan importante tener como objetivo optimizar assets?
P.L: El motivo fundamental es para tener tu página web optimizada. Una gestión correcta y optimizada va a hacer que tu sitio cargue rápido y eso, a la larga, te va a beneficiar en la experiencia de usuario porque no vas a tener una web que tarde diez segundos en cargar y que tus usuarios se desesperen. Además, últimamente Google está bonificando a las webs que cargan rápido.
El tema, por ejemplo, de gestionar contenido dinámico y contenido estático. Parece que el estático no depende de bases de datos y el dinámico depende constantemente. ¿Es más o menos así?
P.L: Si tu contenido es estático, al final, depende de la estrategia que quieras seguir. Si tienes un contenido estático, probablemente lo cachés e incluso, si lo haces con Varnish, por ejemplo, si no va a cambiar durante el tiempo, es la mejor estrategia porque vas a conseguir algo súper rápido. Si vas a tener contenido dinámico que se actualiza cada poco tiempo, la estrategia es totalmente diferente. O lo haces de manera asíncrona, o limpias la caché cada hora. Es en función del proyecto que tú definas tu estrategia.
Porque no es lo mismo, por ejemplo, optimizar assets en una página que tenga 10 visitas diarias que una que tenga 1 millón de visitas diarias. ¿Qué diferencias habría?
P.L: Hombre, yo siempre digo que optimizar deberíamos optimizar todos, pero sí que es cierto que para llegar a un nivel muy alto de optimización requiere mucho tiempo, mucho presupuesto y mucho dinero. Pero sí es cierto que un blog particular o alguien que tenga pocas visitas, con un esfuerzo inicial podría tener una optimización decente. Hay muchos puntos que son comunes, es decir, ya seas un blog grande o un blog pequeño tienes que optimizar las imágenes, el CSS, el JS… Pero ya al ir un peldaño más arriba es cuando hablamos de otro tipo de estrategias a nivel de servidor, sobre todo.
Por ejemplo, has comentado en la charla el uso de CDN, ¿qué es exactamente el CDN? ¿Cómo podría usarlo un usuario normal?
P.L: Vale, pues un CDN es, digamos… Tú lo configuras para servir desde un CDN, por ejemplo, tus imágenes. Un CDN es un servidor muy cercano a ti, o sea, hay servidores repartidos por todo el mundo, entonces te van a servir ese recurso desde el ordenador más cercano. Entonces esta latencia es mucho menor de tiempo y el recurso se te va a servir inmediatamente. No es lo mismo que compres un hosting y lo tengas alojado en Australia, porque igual para descargarte un recurso estamos hablando de segundos que si lo alojas en un CDN (probablemente en tu ciudad haya un CDN) que te lo va a servir mucho más rápido.
Entonces, ¿se recomendaría coger los recursos estáticos, los assets, ponerlos en un CDN y dejar que lo dinámico esté centralizado en otro sitio?
P.L: Hombre, lo del CDN viene bien por otros temas, pero para optimización siempre es recomendable. Luego lo que es el contenido en sí, al fin y al cabo, va a salir de la base de datos. Pero es lo que decía antes, si ese contenido no va a cambiar en el tiempo, tu estrategia debería ser tener una caché fuerte como Redis, Varnish, etc. que te va a servir en milisegundos ese contenido.
Y, por ejemplo, si gestionamos varios sitios web con plataformas como ManageWP, por ejemplo… ¿Cómo podríamos utilizar esa optimización para varios sitios al mismo tiempo? ¿Habría que hacerlo uno por uno o habría alguna forma de gestionar todos los assets desde un punto central?
P.L: La verdad es que no he utilizado nunca esa plataforma, pero, al fin y al cabo, yo siempre digo que cada sitio tiene su “aquel”. Es decir, hay que darle cariño a cada sitio de manera independiente. Aunque mucho trabajo pueda reutilizarse, a la hora de construir un tema o un plugin, lo suyo es que ese tema o ese plugin pues tenga herramientas tipo Gulp que te ayuden a optimizar estos archivos o incluso el uso de plugins que te ayudan, por ejemplo, a optimizar una imagen. Así que, hay cosas que se pueden llegar a compartir, pero siempre hay que darle un poquito de cariño particular a cada proyecto, porque cada proyecto es único.
Y también has comentado sobre la importancia del orden de carga de la información que, por ejemplo, vayamos navegando por una web y los componentes se vayan cargando a medida que navegamos. Eh... ¿Cómo funcionaría eso? ¿Cómo podríamos gestionar ese punto?
P.L: Sí, bueno, hay diferentes estrategias. Una, por ejemplo, es hacer precarga de recursos que vamos a utilizar después. De esta manera, el navegador en segundo plano va a empezar a descargar un recurso que vas a utilizar más tarde. Y luego, otra estrategia es, por ejemplo, “engañar” a la vista del usuario que es entregar el CSS en línea. Al entregarlo en línea, te ahorras la petición HTTP, entonces el pantallazo inicial, nada más llegar a la web, da la sensación de que está construida, aunque realmente no lo está. El usuario va a entrar en una web y lo tiene ahí de inmediato. Es otra estrategia más para realizar optimización.
¿Y los navegadores están realizando su propio esfuerzo para optimizar también esto?
P.L: Sí, sí. De hecho, siempre hablamos de Google porque aquí en España es el que domina el mercado. Él es el que ha puesto estas reglas que van a dar mejor puntuación a páginas que estén optimizadas, sobre todo, que estén preparadas para móviles. Y sí que es cierto que ahora están haciendo un esfuerzo, lo que he comentado antes, por ejemplo, de lazy load, que es la carga diferida de imágenes, que la van a integrar en futuras versiones. Entonces, esta parte la van a delegar al navegador para que el propio navegador te enseñe la imagen si realmente has llegado a ella haciendo scroll. Entonces muy bien es ese sentido.
Perfecto. Pues muchísimas gracias Pablo. Como veis, son muchas las cosas que tenemos que tener en cuenta a la hora de optimizar un sitio web. La gestión de recursos estáticos es extremadamente importante para mejorar la velocidad de nuestros sitios web y, consecuentemente, para mejorar nuestras posiciones en los buscadores. Gracias de nuevo Pablo por tu presencia.
P.L: Muchísimas gracias a vosotros.
Adiós y hasta el próximo vídeo.
