Cada vez me encuentro más clientes del servicio de mantenimiento que han creado su web usando los famosos Jetplugins de Crocoblock, una serie de complementos para Elementor o el editor de bloques Gutenberg que añaden funcionalidades avanzadas y realmente vistosas.
Es realmente sorprendente todo lo que incluyen los plugins de Crocoblock para dinamizar y hacer atractiva una web, pero como siempre, cuantas más funcionalidades más scripts, más código interactuando en tu web, y más hay que controlar los recursos, y la compatibilidad con el resto de componentes del sitio.
En el servicio de mantenimiento incluimos optimizar el rendimiento de la web, además de la seguridad y otras mejoras, así que algo hemos aprendido de cómo acelerar una web que use estos plugins.
En esta guía te explicaré cuáles son los aspectos a tener en cuenta a la hora de acelerar al máximo y mejorar el rendimiento de una web que use plugins de Crocoblock, así como algunas configuraciones concretas que pueden afectar tanto a su funcionamiento como a la experiencia de navegación en tu web.
Servidor y hosting
Los plugins de Crocoblock son realmente potentes, pero por el mismo motivo los recursos del servidor y tu alojamiento, tu hosting, debe estar acordes con sus necesidades de recursos.
Por este motivo hay algunos básicos que debes tener en cuenta a la hora de elegir y configurar el servidor y tu servicio de hosting para evitar problemas de rendimiento y consumo excesivo de recursos de los Jetplugins de Crocoblock.
Para empezar, tu hosting debe ofrecer lo siguiente:
- Discos SSD, para un mejor rendimiento y consultas más rápidas.
- HTTP/2 o mejor HTTP/3 al servir este protocolo los recursos mucho más rápido.
- Servidor en la nube (cloud) para una mejor gestión de los recursos compartidos.
- Caché de objetos persistente desde el servidor (Memcached o Redis)
- Aislamiento de cuentas en alojamientos compartidos (la mayoría) para que el consumo de un cliente no afecte negativamente a otros.
- Uso de CDN, para aliviar carga de consumo de recursos del hosting y de paso añadir una capa extra de seguridad.
Esto no lo digo solo yo, también son – en gran parte – recomendaciones de los propios desarrolladores de Crocoblock, por si las dudas, pero sobre todo está basado en nuestra experiencia a la hora de optimizar sitios con estos plugins activos, comprobado en diversos hosting.
Si quieres una recomendación de hosting que cumpla todos estos requisitos mi consejo es cualquiera de los planes de SiteGround, desde el más económico, todos cumplen de sobra con estas prestaciones arriba apuntadas.
Caché
En cuanto a lo relacionado con el uso de los diversos sistemas de caché disponibles, y cuáles funcionan mejor con los plugins de Crocoblock, he comprobado que una configuración ideal sería la siguiente:
- Caché de disco o página, usando la incluida con WP Rocket o los plugins Surge o Cache Enabler. De este modo se sirven desde la caché estática tanto los códigos como los medios (imágenes).
- Caché de objetos persistente, para reducir al máximo las consultas a la base de datos de las operaciones habituales.
- Caché de la CDN (Cloudflare preferentemente), para entregar rápidamente los recursos estáticos sin consumir recursos del servidor.
- Caché del navegador. Puedes optimizar los tiempos de vaciado por defecto de la caché del navegador para ciertos recursos.
También es conveniente realizar el precalentamiento o precarga de la caché, que puedes hacer con los plugins SG Optimizer o WP Rocket.
Excepciones
Al respecto de los plugins de Crocoblock, uno de ellos que he comprobado que tiene problemas con la caché son los widgets de JetReviews, que en ocasiones pueden no mostrarse actualizados debido a la caché. Más abajo veremos el motivo.
El otro sería JetMenu, que puede no mostrarse correctamente en dispositivos móviles. Si así fuera, debes hacer 2 cosas, a saber…
- Activar la caché separada para dispositivos móviles (con WP Rocket).
- En la sección de optimización de archivos (también de WP Rocket, pero igualmente en otros plugins), en el apartado de «Retrasar la ejecución de JavaScript», si usas WP Rocket identificará JetMenu en la lista de exclusiones a un clic, si así fuera márcala, en caso contrario añade estas excepciones en la caja siguiente:
/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js /jquery-migrate(.min)?.js /elementor-pro/ /elementor/ /jet-blog/assets/js/lib/slick/slick.min.js /jet-elements/ /jet-menu/ elementorFrontendConfig ElementorProFrontendConfig hasJetBlogPlaylist JetEngineSettings jetMenuPublicSettings
Como verás, hay varios recursos que he apuntado que son de Elementor y Elementor Pro, añádelos únicamente si usas este maquetador.
Precarga
Además de la precarga de caché, es conveniente, y siempre mejora las métricas, realizar una precarga de los recursos que se vayan a utilizar, como DNS, fuentes e incluso enlaces.
Esto puedes hacerlo fácilmente desde SG Optimizer o WP Rocket, como te muestro en las siguientes capturas.
La única precaución que tienes que tener es con la precarga de enlaces de WP Rocket, que puede aumentar el consumo de recursos del servidor, así que si la activas vigila el consumo de RAM y CPU del hosting.
Optimización de códigos CSS y JS
Y llegamos al apartado de optimizaciones que más quebraderos de cabeza suele darnos a la hora de optimizar cualquier web, pues aunque hay algunos ajustes de optimización de códigos que nunca dan problemas, para otros depende muchísimo del tema o plugins que estemos usando.
Minimizado de CSS y JS
Este ajuste de optimización, da igual con qué plugin lo realices, no tiene ningún efecto negativo en la visualización y procesamiento de los plugins de Crocoblock, y reduce el peso de todas las páginas de tu web, así que puedes activarlos con total tranquilidad.
Aplazar y retrasar la ejecución de CSS y JS
Una de las optimizaciones de códigos que más mejora las puntuaciones en las métricas web principales es el aplazamiento o retardo de ejecución de códigos JS y CSS, pero lamentablemente no siempre funciona todo como esperamos al activar esta optimización, pues hay temas y plugins que «no se dejan».
No es el caso de los plugins de Crocoblock, y para empezar deberías activar todas estas optimizaciones, salvo con un par de excepciones…
Excepciones
La primera excepción se refiere a los widgets de JetReviews, que si tienes la caché activa pueden no visualizarse o no actualizarse adecuadamente. Y no, no tienes que desactivar la caché, sino añadir excepciones, indicando la ruta a los archivos JS de JetReviews, en los ajustes de carga de archivos JavaScript de manera diferida, o en su defecto desactivar completamente esta funcionalidad, en WP Rocket o cualquier otro plugin de optimizaciones.
La otra es relativa a JetMenu, y ya te indiqué arriba, en el apartado de caché, cómo arreglarlo, mediante estos ajustes.
Carga diferida (lazy loading)
Otra de las optimizaciones que mejor puntúan los medidores de rendimiento web y velocidad de página es aplazar la carga de imágenes y vídeos, lo conocido como lazy loading o carga diferida de medios.
Es una optimización que hace WordPress por defecto, pero que puedes mejorar con plugins como los que he comentado antes, y que no tienen ningún efecto negativo en la mayoría de plugins de Crocoblock, con una única excepción: JetMenu, y curiosamente no se soluciona desactivando la carga diferida.
Excepciones
Si por algún motivo, no es algo que pase siempre, se rompe tu menú personalizado creado con JetMenu de Crocoblock, una joya dicho sea de paso, es debido a la carga diferida, a lazy loading, pero no lo desactives, debes atacar el problema desde otro enfoque.
En tu plugin de optimizaciones debes desactivar, uno a uno, los siguientes ajustes, hasta dar con el que esté rompiendo tu. menú:
- Optimizar la entrega de CSS – En la sección de «Optimizar archivos» de WP Rocket desactiva esta opción o, en su defecto, añade como excepciones todos los CSS de JetMenu.
- A continuación comprueba que estén inactivas las opciones de minimizar archivos JavaScript, combinar archivos JavaScript y, lo más importante, la de retrasar la ejecución de JavaScript.
No desactives todo de golpe, ve probando, pues al desactivar una opción impides que se optimizen muchos otros recursos de la web, y siempre que puedas deja activas las opciones pero añadiendo como excepciones los archivos JS o CSS del plugin en conflicto.
Fuentes
Esto son consejos que siempre debes tener en cuenta, no solo para optimizar webs en las que uses Crocoblock:
- Usa la menor cantidad de fuentes tipográficas posibles.
- Si es posible usa fuentes de sistema, en vez de fuentes personalizadas o de Google.
- Aloja siempre localmente las fuentes, por rendimiento y por legislación de privacidad.
- No cargues subconjuntos de fuentes que no necesites.
- Siempre que puedas usa fuentes variables.
Cookies
En ocasiones puedes encontrarte con que el plugin JetCompare & Wishlists no guarde correctamente los datos al pasar de una página a otra o actualizarlas, esto puede suceder al tener activo el minimizado y diferida la carga de JavaScript en tu plugin de optimizaciones.
Si te pasa, el modo de solucionarlo es añadir lo siguiente a la sección de «Reglas avanzadas → Nunca poner en caché estas cookies» del plugin WP Rocket:
woocommerce_items_in_cart wp_woocommerce_session_ woocommerce_recently_viewed woocommerce_cart_hash
Heartbeat
Siempre, siempre, deberías limitar, o si es posible desactivar la funcionalidad Heartbeat de WordPress.
Yo suelo recomendar siempre desactivarlo, y solo si se detecta alguna necesidad, como edición simultanea de pedidos o contenidos, limitar su actividad en el escritorio.
Desactiva lo que no necesites
Como punto final, pero que en realidad debería ser siempre por donde deberías empezar a la hora de optimizar cualquier web, desactiva siempre cualquier ajuste, configuración, funcionalidad o módulo que realmente no necesites.
Esto se aplica a los módulos de los plugins de Crocoblock, que puedes desactivar en sus ajustes todo lo que no uses, pero también debes aplicar este principio de sentido común a las funcionalidades de Elementor innecesarias, del tema, incluso del editor de bloques.
Ten en cuenta que si dejas activos módulos que no estás utilizando, ningún plugin «sabe» dónde vas a necesitar los recursos de los módulos activos, así que por defecto suelen cargar todos sus códigos (JS y CSS) en todas las páginas de tu web, por si fuesen necesarios, ralentizando innecesariamente la carga de todas y cada una de las páginas de tu web, da igual si usan esos módulos (activos, pero sin aplicar específicamente) o no.
¿Se puede conseguir un 100/100 en PageSpeed con Crocoblock?
Respuesta rápida: Depende
Respuesta razonable: Depende de qué contenido, funcionalidades y configuraciones tenga tu web, y necesites para tu negocio.
Habrás visto por ahí muchas capturas de gente que promete resultados de 100/100 en PageSpeed, algo que es muy sencillo de conseguir en webs de presentación, landing pages o que solo tienen texto y poco más. Otra cosa es cuando tienes que optimizar una web con tienda online, cursos en línea desde la web, vídeos explicativos, o funcionalidades avanzadas de comercio electrónico, pasarelas de pago, etc., etc., etc.
Los plugins de Crocoblock ayudan a crear webs realmente impactantes, de un aspecto muy avanzado, dinámico y profesional, solo sustituibles por cientos de horas de programación a medida, que siempre es mucho más caro, y muchos negocios (la mayoría) no se pueden permitir, al menos al principio de su vida comercial.
Así que este tipo de plugins, imperfectos como todo, son una muy buena y barata solución de compromiso, de equilibrio y funcionalidades, a la hora de lanzar una web con unas funcionalidades y aspecto totalmente profesional, indistinguible de otras que han costado decenas o cientos de miles de euros, por una muy pequeña inversión.
Ahora bien, igual que en una web hecha a medida, también hay que dedicarle tiempo y cariño a optimizar y mantener la web, esto es una tarea imprescindible, da igual si gestionas un pequeño negocio desde una web con un tema gratuito y unos pocos plugins gratuitos y de pago, o administras un famoso portal, con millones de líneas de código personalizado.
¿Dudas?
Si tienes alguna duda concreta, anímate y compártela abajo, en la sección de comentarios, entre todos trataremos de ayudarte 😉
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Anónimo
I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.
binance
Can you be more specific about the content of your article? After reading it, I still have some doubts. Hope you can help me.