Optimiza Slider Revolution, sin plugins, para agilizar la carga de tu web

• 14
  Jul

• Etiquetas: contenido, navegación, optimización, programación

El plugin de carruseles de imágenes y vídeo Slider Revolution es uno de los más utilizados en WordPress. Es sencillo de usar, permite montones de personalizaciones y con él se pueden crear carruseles realmente impactantes.

El problema de Slider Revolution

Ahora bien, su potencia se le debe a montones de scripts, estilos y fuentes, que carga para poder ofrecer esos fantásticos efectos, y ahí es donde está el problema: Las webs con Slider Revolution suelen ser más lentas que las que no lo tienen, y obtienen peores puntuaciones en las métricas web principales.

Esto se debe principalmente a que (por default)…

• Carga todo su JavaScript globalmente en todas las páginas de tu web, da igual si tienen un carrusel de Slider Revolution o no.
• Carga todo su CSS globalmente en todas las páginas de tu web, da igual si tienen un carrusel de Slider Revolution o no.
• Carga todo su JS y CSS en la cabecera de tus páginas.
• Carga todas las fuentes de Google Fonts por defecto.
• Carga la biblioteca de iconos Font Awesome aunque no los uses.
• Hace un uso excesivo de jQuery.
• No hace carga diferida de las imágenes.

Como verás son unos cuantos problemas a abordar, pero todos con solución.

Uno estaría tentado rápidamente a potenciar mediante plugins de caché y optimización genéricos, pero vamos a echar el freno, porque se puede optimizar, y mucho, la carga de Slider Revolution sin plugins adicionales.

Cómo optimizar Slider Revolution

Optimiza las imágenes

Para esto no necesitas plugin alguno. El primer gran consejo es que subas imágenes a tus carruseles de Slider Revolution al tamaño adecuado de pantalla y con el menor peso de archivo posible.

Si necesitas una imagen de un máximo de 1900 píxeles de ancho no la subas a 2500, y optimiza esa imagen antes de subirla a tu carrusel, mejor si el archivo pesa 100 Kb que si pesa 2 Mb.

Tienes herramientas gratuitas como Squoosh que te facilitan ambas tareas de manera muy sencilla.

No incluyas las bibliotecas de código globalmente

Por defecto, Slider Revolution añade las bibliotecas de código JavaScript y estilos CSS globalmente, en todas las páginas de tu web, aunque solo tengas un carrusel en una de ellas (sólo el Home, por ejemplo).

Para evitarlo, y que solo se carguen en las páginas en las que realmente haya un carrusel de Slider Revolution haz lo siguiente:

1. Ve a la administración de Slider Revolution y haz clic en el icono «Globals» para acceder a los ajustes globales.
2. Desactiva la opción llamada «Include libraries globally» que es la que, por defecto, incluye todo este código en toda tu web.
3. En la caja a la derecha de «List of pages to include RevSlider libraries» añade, separados por comas, los IDs de las páginas en las que sí quieres que se carguen las bibliotecas que necesita Slider Revolution para que funcionen los carruseles. Para saber cuál es el ID de una página o entrada edítala y en la URL aparece el número ID como post=1234. Además, si quieres que se carguen en tu página de inicio incluye también el texto homepage.

Ejemplo de configuración correcta, incluyendo varios ID de páginas y la portada:

Inserta los scripts en el pie de página

Por defecto, Slider Revolution carga sus scripts en la cabecera de tus páginas. Un modo de mejorar la experiencia de navegación, velocidad y optimizar la carga de tus páginas es insertar estos scripts en el pie de página.

De nuevo, en los ajustes globales de Slider Revolution, activa la opción llamada «Insert scripts in footer»

Aplaza la carga del JavaScript

También mejorará el rendimiento de tu web aplazar la carga de todo el código JavaScript de Slider Revolution.

Para ello activa la opción «Defer JavaScript loading».

Usa la carga diferida (lazy loading) de tu plugin favorito

Slider Revolution no tiene ajustes avanzados globales para la carga diferida de imágenes, algo que sí puedes hacer con plugins como SG Optimizer o WP Rocket.

Si quieres usar los ajustes de tu plugin de optimización favorito para la carga diferida de imágenes añade el parámetro de carga diferida del plugin en la caja a continuación de «3rd Party lazy loading data»

Por ejemplo, si usas WP Rocket el parámetro de carga es lazy-src,  y en el caso de SG Optimizer lazyload.

Activa la caché interna de Slider Revolution

No mucha gente sabe que Slider Revolution tiene su propio sistema de caché interno que guarda los carruseles como HTML para servirlos más rápidamente.

Puedes activarla en la opción «Use internal caching» y hasta tienes un botón para vaciarla. Si no te aparece esta opción es porque no tienes activa la más reciente versión de Slider Revolution.

Optimiza la carga de fuentes de Google

También es recomendable activar la caché y precarga de las Google Fonts que usa Slider Revolution. En el ajuste «Enable Google Fonts download» puedes elegir entre:

• Load from Google: Carga las fuentes desde Google en cada carga de página.
• Cache fonts local: Precarga y almacena localmente las fuentes de Google necesarias para servirlas más rápidamente.
• Disable, Load on your own: También puedes desactivar totalmente el uso de Google Fonts si realmente no las utilizas en ninguna diapositiva de tus carruseles con esta opción.

Cualquier opción entre la segunda y la tercera son mejores que la primera, por defecto. Si sabes que no usas ninguna Google Font la mejor es la última, ante la duda opta al menos por la segunda opción: Cache fonts local.

Ajustes avanzados por diapositiva

Además de los anteriores ajustes globales, también hay ajustes avanzados en cada diapositiva (slide) que pueden ayudar a optimizar su carga.

Para ello, edita tus carruseles y, en cada diapositiva, pásate por el icono «Advanced» de la sección de contenido, donde encontrarás varios ajustes de optimización.

En concreto, debes revisar los siguientes ajustes:

• Lazy Loading: Ajustes de carga diferida de la diapositiva, con varias opciones…
  1. All: Carga diferida de todas las imágenes cada vez que se visualice la diapositiva.
  2. Smart: Carga diferida de la diapositiva actual, de la anterior y de la siguiente.
  3. Single: Carga diferida solo de la diapositiva actual
  4. No Lazy Loading: Carga de las imágenes inmediata, sin carga diferida.
• Use cache: Puedes activar la caché solo en esta diapositiva o usar los ajustes globales.
• jQuery No Conflict Mode: Útil cuando haya errores de visualización o scripts al interferir la versión de jQuery de Slider Revolution con la de otros plugins o incluso WordPress.
• Put JS to Body: Al igual que vimos en los ajustes globales, pero esta vez a nivel de cada diapositiva, puedes cargar el JavaScript en el pie de página en vez de en la cabecera. No es necesario si lo hiciste ya en los ajustes globales.

Estos serían los ajustes recomendables:

Nota: Verás en la captura de los ajustes avanzados por diapositiva que ponemos como recomendado no hacer carga diferida. Esto es debido a que normalmente estos carruseles suelen estar en la parte inicial de carga de la página, conocido como above the fold, y en esta sección las métricas web principales de Google no recomiendan aplicar carga diferida, para que el visitante vea de inmediato el contenido inicial de la página.

Nota: Si activaste la caché o poner el JS en el pie de página en los ajustes globales de Slider Revolution no es necesario que actives estos ajustes en cada diapositiva.

¡Pues ya está! Como habrás visto, el equipo de desarrollo de Slider Revolution no está parado ni muchísimo menos, y ofrece ajustes de optimización muy interesantes en su plugin, que marcan enormes diferencias en cuanto al rendimiento y velocidad de carga de tu web sin los configuras correctamente, como esperamos haberte ayudado a hacer.

A modo de resumen, aquí te dejo las capturas finales de cómo está configurado globalmente Slider Revolution por defecto y de cómo dejarlo configurado de manera óptima según hemos visto en esta guía: