Creadores de páginas optimizados para el rendimiento
Generador de oxígeno (de pago)
Oxygen Builder es un constructor de páginas bien optimizado que ofrece gran flexibilidad, a la vez que produce código limpio y optimizado, preoptimizado para la velocidad de carga de la página. Reduce considerablemente el uso de etiquetas div innecesarias, ya que un exceso de etiquetas div sobrecarga el DOM. Un DOM sobrecargado aumenta el tiempo de análisis del HTML, lo que incrementa el TTFB.
Constructor de ladrillos (de pago)
Bricks es otro generador de páginas bien optimizado que genera un código limpio.
Lienzo en vivo (de pago)
LiveCanvas: el único generador de páginas que genera un código HTML5 súper limpio, con estilo Bootstrap 5, que siempre puedes editar y refinar mediante un editor de código en vivo incorporado.
Live Canvas es extremadamente ligero y crea código preoptimizado. Recomiendo encarecidamente considerar Live Canvas como una opción.
Live Canvas se combina mejor con Picostrap, un tema de rendimiento optimizado creado por los mismos desarrolladores:
Picostrap (Gratis)
Tema optimizado para el rendimiento creado por el equipo de desarrollo de Live Canvas.
Elementor (Freemium)
Contrariamente a la creencia popular, una vez optimizado , Elementor ofrece un excelente rendimiento . Sin embargo, un Elementor sin optimizar tiene un rendimiento muy bajo. Si bien Elementor es muy complejo antes de la optimización, es uno de los constructores más ligeros después de la optimización y muy fácil de optimizar.
Los plugins para eliminar CSS no utilizados y retrasar Javascript incluyen exclusiones integradas para Elementor (excepto Flyingpress, que no incluye exclusiones con casilla de verificación), lo que facilita enormemente la optimización de los recursos CSS y JS de Elementor Core y Elementor Pro. Debloat y Perfmatters permiten aplicar exclusiones automáticas cuando se utiliza la función «Retrasar todo JS».
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (generador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, etc.).
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
Element Manager le permite deshabilitar todos los widgets nativos de Elementor.
Experimentos de rendimiento
Elementor tiene muchas funciones de mejora del rendimiento integradas que se encuentran en la pestaña de funciones (Configuración>Funciones)
Muchos de estos no están activados por defecto, especialmente si ya tenías un sitio web cuando se añadieron en una actualización. Esto significa que muchos sitios de Elementor están perdiendo rendimiento gratuito, que puede mejorarse simplemente cambiando el experimento de inactivo a activo en el menú desplegable.
Por ejemplo, Elementor añadió recientemente la carga optimizada de controles, lo que puede suponer una gran mejora en el rendimiento de sitios grandes. Esta función no está habilitada por defecto y debe habilitarse manualmente.
Nota: No hay problema en activar la función de carga diferida de Elementor además de otro plugin de optimización. Personalmente, no he comprobado que la carga diferida nativa de Elementor funcione del todo bien, así que sigo usando las opciones de carga diferida de los plugins de optimización del rendimiento. Sin embargo, combinarla con la funcionalidad nativa de Elementor no afectará al rendimiento.
Limitar el uso de contenedores, secciones y columnas
Cada contenedor, sección o columna adicional añade elementos DOM adicionales y peso HTML a tu página. Si bien los contenedores, secciones y columnas a veces son más fáciles de usar en el diseño, afectan negativamente la velocidad de la página. Los contenedores (que reemplazan a las secciones y columnas) son muy flexibles y permiten colocar múltiples elementos dentro de ellos. Si lo deseas, usa contenedores con formato de cuadrícula para simular columnas.
Método de impresión CSS
Incrustación interna
Al habilitar el método de impresión de CSS de incrustación interna en la configuración de Elementor, se incorporarán algunos de los CSS que la función Eliminar CSS no utilizado omitirá.
Si ve archivos post-xxxx.css en su árbol de solicitudes, al cambiar el método de impresión de CSS, se eliminarán esas solicitudes integrándolas en el documento HTML. Si se integra demasiado CSS, esto puede tener el efecto contrario al deseado y afectar el rendimiento. Por lo tanto, asegúrese de ejecutar pruebas de PageSpeed antes y después de habilitar la función para comprobar si su impacto es beneficioso. Eliminar funciones CSS no utilizadas generalmente no afecta a estos archivos, por lo que es necesario integrarlos mediante la opción de incrustación interna de Elementor para eliminar esas solicitudes.
No coloque imágenes de fondo sobre elementos no convencionales
Las imágenes de fondo configuradas en elementos no convencionales no se pueden cargar en diferido con plugins de optimización, ya que sus algoritmos no las detectarán. Si una imagen se configura como imagen de fondo en un elemento, como un espaciador, la función de carga diferida de imágenes de fondo de Elementor detectará algunas , pero no todas, lo que afectará negativamente la velocidad de la página. Incluso la carga diferida de Elementor las omitirá por alguna razón.
Solo debe configurar imágenes en widgets que contengan una sección que tenga un selector de imágenes O como una imagen de fondo normal (no a través de la sección avanzada al editar un elemento) .
Si no se puede cargar tus imágenes de forma diferida, esto afectará significativamente la velocidad de carga de la página. Al optimizar un sitio, revisa siempre la pestaña de red de la inspección para ver qué archivos se están cargando. Esto aplica a cualquier sitio, ya sea creado con Elementor o no.
Iconos SVG en línea en el documento HTML raíz (gratis)
https://github.com/jazir555/Inline-SVGs-uploaded-to-Elementor-Icon-Widget
Este es mi plugin, desarrollado personalmente, para integrar iconos SVG en el documento HTML raíz del widget de iconos de Elementor (actualmente el único widget compatible). Este plugin aún está en desarrollo y se ampliará para incluir todos los widgets/elementos con capacidad para iconos SVG alojados localmente.
La funcionalidad actual funciona como se espera y agrega un botón a la pestaña de configuración avanzada para el widget de ícono, que se puede activar por widget (no es global, lo que permite una implementación granular) .
Las actualizaciones posteriores del complemento (después de que la funcionalidad se haya expandido a todos los widgets basados en íconos de Elementor) incluirán una página de opciones en el Panel de administración que permite el alojamiento local de cualquier archivo SVG arbitrario, alojado localmente o remoto desde cualquier dominio de terceros para eliminar todas y cada una de las solicitudes HTTP.
Nota: este complemento eventualmente se agregará al repositorio de complementos de WordPress.org una vez que la funcionalidad de Elementor se haya desarrollado por completo.
Editor de paneles de Elementor
Panel flexible de Elementor (gratis)
Plugin muy ligero que mejora el panel del editor. Se puede desactivar de forma segura y selectiva desde la interfaz.
- Panel de Elementor arrastrable y posición guardada
- Muévete hacia el lado derecho y cambia al modo RTL
- Panel Elementor plegable vertical
- Cambiar el tamaño del panel de Elementor y guardar el tamaño
- Múltiples máscaras oscuras para el editor Elementor
- Categoría de widgets plegables
- Categoría de widgets ordenables y posición de guardado
- Agregar botón de salida en el pie de página del editor de paneles
- Opción para cerrar la primera pestaña en el widget Acordeón
- Añadir más opciones para el modo responsivo
Optimización del rendimiento del editor
Limpieza del editor para Elementor (gratis)
Editor Cleanup For Elementor es un complemento de Freesoul Deactivate Plugins para limpiar el editor de Elementor.
- No solo limpiará los activos de otros complementos, sino que su código PHP tampoco se ejecutará.
- El editor de Elementor será más rápido y sin conflictos con otros complementos.
- Tanto los complementos de desactivación de Freesoul como Elementor deben estar instalados y activos; de lo contrario, este complemento no se ejecutará.
Contenido restringido
QuentnWP (Gratis)
Complemento de restricción de contenido gratuito con integración con Elementor.
Visibilidad dinámica para Elementor (gratis)
La extensión Dynamic Visibility le permite ocultar widgets, columnas, contenedores, secciones o páginas.
Es especialmente útil cuando estás construyendo algo que no quieres mostrar a todo el mundo.
- Elija una condición OR/AND.
- Limitar la visibilidad para campos o páginas personalizados específicos.
- Establezca una fecha (desde-hasta), un día de la semana o una hora y decida cuándo será visible cada elemento.
- Limite la visibilidad para roles de usuario específicos, metadatos de usuario, IP, referencias o usuarios.
- Limitar la visibilidad de los productos de WooCommerce
- Establezca un texto de respaldo (por ejemplo: ‘Próximamente’) para los elementos ocultos que se mostrarán en lugar del elemento.
- Puede elegir ocultar el elemento mediante CSS o eliminarlo del DOM.
Consultas avanzadas (gratis)
Una extensión de Elementor PRO que le permite consultar de forma dinámica y sencilla sus publicaciones y resultados de widgets de cartera sin ID de consulta personalizados.
Nota: Requiere Elementor Pro
Clases CSS adicionales para widgets
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (generador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, etc.).
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
Fundamento (Gratis)
Le permite inyectar clases CSS adicionales en los widgets de Elementor.
Columnas y secciones en las que se puede hacer clic
Haga que las secciones y columnas sean cliqueables ( gratis)
Complemento ultraligero para que las secciones y columnas sean cliqueables.
Elementor gratuito
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (generador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, etc.).
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
CSS personalizado
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (generador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, etc.).
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
RRdevs (Gratis)
https://wordpress.org/plugins/rrdevs-for-elementor
Complemento gratuito para Elementor que añade CSS personalizado
Ultra Addons Lite (Gratis)
Paquete complementario gratuito con funcionalidad CSS personalizada.
Complementos Xpro (gratis)
Otro complemento para Elementor Free que habilita la funcionalidad CSS personalizada.
Mini carrito para WooCommerce
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (generador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, etc.).
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
Ultra Addons Lite (Gratis)
Incluye un widget de mini carrito
Chat en vivo (gratis)
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (creador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, botones flotantes, etc.). Los botones flotantes de Elementor Pro incluyen chat en vivo.
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
Plugin de chat simple (gratuito)
Plugin de chat en vivo de WhatsApp gratuito, ultraligero (¡sin Javascript!)
Chat en vivo digital (gratis)
https://wordpress.org/plugins/indigitall-web-push-notifications
Complemento de chat de WhatsApp gratuito y ultraligero.
Constructor de temas
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (generador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, etc.).
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
Creador de temas Xpro (gratis)
Crea diseños personalizados para tipos de entradas, archivos de blog, productos y categorías de WooCommerce, páginas de búsqueda, páginas 404 y más con Elementor Free. Puedes personalizar la experiencia de tu tienda WooCommerce modificando el diseño predeterminado para que se adapte a cualquier estilo.
- Encabezamiento
- Pie de página
- Diseños singulares
- Publicación única
- Página única
- Página de archivo (blog)
- Página 404
- Página de búsqueda
- Página de producto único de WooCommerce
- Página del carrito de WooCommerce
- Página de pago de WooCommerce
- Página de cuenta de WooCommerce
- Publicación personalizada individual (CPT)
- Diseños de archivo
- Archivo de entradas del blog
- Archivos de categorías
- Archivos de etiquetas
- Archivo del autor
- Archivo de publicaciones personalizadas (CPT)
- Etiquetas dinámicas y globales
- Etiquetas dinámicas ACF
- Etiquetas del grupo ACF
- Etiquetas dinámicas de publicación
- Etiquetas dinámicas de Woo
- Etiquetas de términos y taxonomía
- Etiquetas de usuario y sitio
- Etiqueta PHP personalizada
- Importador de plantillas con un solo clic
Etiquetas dinámicas
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (generador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, etc.).
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
Complementos reales (gratis)
Añade la funcionalidad de etiquetas dinámicas a Elementor gratis. Es más que eso: un creador de sitios web dinámico completo para Elementor.
Usa etiquetas dinámicas para crear sitios web con contenido dinámico. Crea tipos de entradas y taxonomías personalizadas. Personaliza campos, tipos de entradas y plantillas de taxonomías personalizadas. Agrega datos dinámicos de productos, incluso para la cuadrícula de archivo de WooCommerce y páginas de productos individuales, y mucho más.
Campos personalizados avanzados admitidos: Texto, Área de texto, Número, Rango, Correo electrónico, URL, Contraseña, Seleccionar, Casilla de verificación, Botón de opción, Verdadero/Falso, Galería, Imagen, Repetidor, Archivo, Contenido flexible, Clonar, Editor WYSIWYG, oEmbed, Selector de fecha, Relación, Taxonomía, Selector de hora, Selector de color, Objeto de publicación, Acordeón, Pestaña, Google Maps.
Visibilidad dinámica
Visibilidad dinámica para Elementor (gratis)
La extensión Dynamic Visibility le permite ocultar widgets, columnas, contenedores, secciones o páginas.
Es especialmente útil cuando estás construyendo algo que no quieres mostrar a todo el mundo.
- Elija una condición OR/AND.
- Limitar la visibilidad para campos o páginas personalizados específicos.
- Establezca una fecha (desde-hasta), un día de la semana o una hora y decida cuándo será visible cada elemento.
- Limite la visibilidad para roles de usuario específicos, metadatos de usuario, IP, referencias o usuarios.
- Limitar la visibilidad de los productos de WooCommerce
- Establezca un texto de respaldo (por ejemplo: ‘Próximamente’) para los elementos ocultos que se mostrarán en lugar del elemento.
- Puede elegir ocultar el elemento mediante CSS o eliminarlo del DOM.
Encabezado fijo para Elementor
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (generador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, etc.).
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
JetSticky para Elementor (Gratis)
Agrega funcionalidad adhesiva a la versión gratuita de Elementor.
Incrustación de documentos
Incrustador de documentos (gratis)
Animaciones
Elementos Pro (Gratis)
https://github.com/proelements/proelements
Habilita todas las funciones de Elementor Pro (generador de encabezado/pie de página, etiquetas dinámicas, CSS personalizado, etc.).
Si se utilizan, ninguno de los complementos necesarios para habilitar las funciones individuales de Elementor Pro enumeradas son necesarios.
Animate de UiCore (gratis)
Animaciones adicionales gratuitas y livianas para Elementor.
Incrustaciones
Todo incrustado ( gratis)
El complemento All Embed para Elementor es una colección de widgets de audio, video y redes sociales para Elementor. Cuenta con más de 20 widgets que permiten incrustar cualquier contenido.
Paquetes de complementos de Elementor
Complementos Xpro (gratis)
Otro complemento para Elementor Free tiene un montón de widgets, generalmente premium, y habilita la funcionalidad CSS personalizada para Elementor Free.
Complementos excelentes (gratis)
Pequeño y ordenado paquete complementario con mejoras del editor, nuevos widgets y plantillas gratuitas.
Kit de elementos de LA-Studio (gratis)
Kit de widgets y plantillas gratuitos.
Efectos al pasar el cursor sobre la imagen (gratis)
Complemento de efectos de desplazamiento de imágenes ultraligero.
Iconos personalizados (gratis)
Gestor de iconos personalizado gratuito con iconos adicionales
Elementos hash (gratis)
Conjunto gratuito de elementos complementarios.
Creador de encabezados y pies de página (gratis)
Te permite crear tu encabezado y pie de página con la versión gratuita de Elementor (no requiere versión pro). Ligera.
Kits de plantillas (gratis)
Plantillas SKT (gratis)
Plantillas gratuitas.
Extensiones de Rife (gratis)
Amplio conjunto de plantillas gratuitas. Ligeras.
Templately (Gratis y Pro)
Complemento de plantilla gratuito y ligero
Envato Elements (gratis y Pro)
Kits de plantillas prediseñadas de Envato. Plantillas gratuitas y profesionales. Plantillas ligeras, pero como todo, requieren optimización.
Widgets optimizados para Elementor (gratis)
https://wordpress.org/plugins/optimized-widgets-for-elementor
Reduce el tamaño del DOM eliminando uno de los contenedores anidados predeterminados en cada widget.
Los widgets incluidos son: Título, Texto, Imagen.
Dado que se elimina el div elementor-widget-container, podría dañar tu tema u otros plugins/scripts que requieran dicho div. Úsalo con precaución y prueba tu página para comprobar si todo sigue funcionando. Se recomienda habilitar esta opción en la versión de prueba antes de activar este plugin en la versión en vivo.
Importar diseños de Figma
UIChemy (Gratis y Pro)
Te permite importar 10 diseños al mes con el plan gratuito. Para usar el plan gratuito e importar plantillas ilimitadas, simplemente crea un sitio temporal en instawp.com y registra otra cuenta.
Puntuación de PageSpeed objetivo de optimización de Elementor
Elementor se puede optimizar fácilmente para páginas móviles con puntuaciones de velocidad superiores a 90.
Este sitio se encuentra en el 5% superior de los rankings de velocidad de página. Este resultado fue fácil de lograr.
Complementos utilizados:
1. Advanced Database Cleaner Pro (sustituya AAA Option Optimizer y Advanced Database Cleaner Free por el equivalente gratuito)
2. Indexa WP MySQL para acelerar (gratis)
3. Asset Cleanup Pro (Asset Cleanup Pro ofrece alternativas, incluyendo plugins gratuitos que se listan en la sección «Desactivar plugins selectivamente»). Usa la versión gratuita si no quieres pagar por la versión Pro para deshabilitar la carga de archivos innecesarios de WP Core, como por ejemplo polyfill.
Si usa Asset Cleanup Free, necesitará un plugin alternativo para deshabilitar plugins de forma selectiva, como Freesoul Plugin Deactivator o WP Plugin Manager . Desplácese hasta la sección «Deshabilitar plugins de forma selectiva» para obtener más información. Asset Cleanup Free también puede deshabilitar recursos CSS y JS de forma selectiva.
4. Perfmatters ( Pagado )
5. Desactivar Gutenberg (gratis)
6. Docket Cache (gratis)
7. Pre-Fiesta (gratis)
8. Flyingpress (de pago). Existen otros plugins gratuitos de caché que también cumplen con los requisitos en el repositorio https://wordpress.org/plugins (recomiendo WP Speed Booster Pack como excelente alternativa gratuita).
9. Flying Pages (gratis): precarga el HTML de las páginas internas para tiempos de carga más rápidos (asegúrese de retrasar flying-pages.min.js en su complemento de retraso de JavaScript para anular el impacto en el rendimiento) .
10. Inspeccionar solicitudes HTTP (gratis)
11. Desactivar el Bloat de WordPress y WooCommerce (Gratis)
12. Tema: Hello Elementor (Gratis).
Las alternativas gratuitas necesarias para lograr la misma funcionalidad que Perfmatters son:
1. Limpieza de activos (versión gratuita)
2. Debloat (Gratis)
3. Pre-Fiesta (Gratis)
4. Eliminar estilos globales (gratis)
5. Desactivar el Bloat de WordPress y WooCommerce (Gratis)
6. CAOS para análisis local (gratis)
7. Desactivador de complementos Freesoul (gratis)
8. Fragmentos fluidos (gratis)
9. A3 Lazyload o cualquier complemento con funcionalidad de carga diferida (gratis)
10. Control dinámico del ritmo cardíaco (gratis)
11. Habilitador de CDN (si se desea para reescrituras de URL de CDN) (Gratis)
12. Yabe Webfont (para fuentes alojadas localmente) (Gratis)
13. Desactivar las fuentes de Google (desactivar por completo las fuentes de Google si se desea) (gratis)
14. WPS Hide Login (Gratis)
15. Carga diferida de cualquier cosa (gratis)
16. Paquete de refuerzo de velocidad (gratis)
Nota: Debido a que se necesitan 16 complementos gratuitos para replicar completamente la funcionalidad de Perfmatters, recomiendo optar por Perfmatters, pero la combinación de complementos gratuitos funciona igual de bien si el dinero es un problema.
También recomiendo utilizar Yabe Webfont en lugar de Perfmatters u OMGF para alojar localmente fuentes de Google.
Hospedaje: VPSDime .
Archivos Javascript retrasados con perfmatters (siéntase libre de usar cualquier complemento con Javascript Delay, incluido Debloat):
https://pastebin.com/m94cSYku
Selectores CSS excluidos de Eliminar CSS no utilizados:
También puedes colocar las exclusiones del selector en el cuadro de exclusiones en Debloat, después de marcar el interruptor para eliminar el CSS no utilizado de todos los archivos.
Deberás implementar la desactivación selectiva de plugins y de recursos (hay secciones dedicadas a esto más adelante en la guía). No olvides desactivar los archivos innecesarios de WP Core. Deberás activar la configuración para desactivar los archivos de WP Core mediante una casilla de verificación en el panel de configuración de Limpieza de Recursos.
Un sitio con Elementor se puede optimizar a más de 90 en 20 minutos si se hace correctamente. ¡Fácil!
¡Esto se puede replicar en cualquier sitio de Elementor! Una vez que tengas la configuración establecida en el primer sitio, puedes exportarla e importarla a cualquier sitio de Elementor. Algunas funciones cargarán archivos adicionales (por ejemplo, las animaciones de Elementor), así que, dependiendo de si usas animaciones en el sitio o en otro, podrías tener que agregar algunos archivos más a la lista de retrasos o a la lista de exclusiones.
Nota
Deberá configurar manualmente la desactivación selectiva de activos y plugins de Asset Cleanup, retrasar JavaScript y eliminar las exclusiones de CSS no utilizadas. Se requiere una pequeña configuración para el almacenamiento en caché de los plugins.
Para el almacenamiento en caché de objetos, una vez instalado Docket Cache, debe acceder a la configuración de Docket Cache y habilitar manualmente el almacenamiento en caché de objetos. A continuación, vaya a la pestaña de configuración y habilite las funciones de optimización adicionales que desee utilizar. Pre-Party también debe configurarse manualmente. La configuración de la opción de carga automática de la base de datos debe configurarse manualmente mediante uno de los complementos de optimización de la base de datos.
Los otros 5 plugins no requieren configuración; simplemente actívalos y listo. Si desactivas Google Fonts, tendrás que cargar fuentes locales (si quieres fuentes personalizadas), que puedes descargar a través del enlace en la sección de fuentes. ¡No olvides crear subconjuntos para reducir el peso de los archivos de fuente!
Si algo falla al copiar y pegar mis listas de Delay JS y Remove Unused CSS, puedes eliminar los archivos de la lista de delay de javascript uno por uno (o unos pocos a la vez) hasta que identifiques el archivo que debe excluirse del delay y luego vuelve a agregar los archivos a la lista que son seguros para retrasar.
¿Por qué recibo errores en la consola después de retrasar los archivos en su lista?
Estoy retrasando intencionalmente el archivo JavaScript i18n.min.js, necesario para las traducciones. WordPress se bloquea en la consola cuando este archivo se retrasa, pero no afecta la funcionalidad del sitio a menos que uses traducciones. Puedes eliminar este archivo de la lista de retrasos si deseas eliminar los errores de consola, o puedes eliminarlo por completo con Asset Cleanup.
Archivos que pueden necesitar eliminarse de la lista de retrasos según su configuración:
wp-util.min.js
subrayado.min.js
i18n.min.js
ganchos.min.js
Constructores que se deben evitar
WPBakery
Simplemente… no lo hagas. Es difícil encontrar un plugin más problemático que WPBakery. Evítalo.
Constructor de castores
Beaver Builder está mal optimizado. Si bien su JavaScript se puede retrasar en gran medida sin problemas, funciones básicas como los separadores de formas nativos de Beaver Builder sobrecargan considerablemente el documento HTML. Además, los temas generan una gran cantidad de CSS innecesario sin usar para Beaver Builder, que se integra tanto en el documento HTML como en los archivos, lo que añade mucho código inservible que solo aumenta el peso de la página y ralentiza el sitio web.
135 KB de CSS para una sola sección en la página para implementar un divisor de forma que No se puede eliminar con la función «Eliminar CSS no utilizados» (Debloat, Flyingpress, Perfmatters, etc.) . Aunque el HTML está comprimido con GZIP y Brotli, y el tamaño final del documento HTML es de aproximadamente 240 kb, el documento HTML debe tener un máximo de 80 kb, preferiblemente 50 KB o menos. Beaver Builder = Cruft. Este documento HTML tiene al menos el triple de su tamaño normal.
Divi
Otro constructor extremadamente pesado. Puedes mitigar parte del impacto en el rendimiento de Divi, pero no todo. Este constructor mal optimizado también tiene errores irreparables, por lo que conviene evitarlo. Cabe reiterar que, aunque Elementor tiene un rendimiento bajo de fábrica, una vez optimizado es el constructor de arrastrar y soltar con mejor rendimiento.
Archivos de terceros
Alojar archivos localmente para reducir solicitudes externas y mejorar el rendimiento:
Los archivos de terceros son cualquier archivo que no sea proporcionado por su dominio.
Siempre deberías alojar todos los archivos posibles en tu servidor localmente. Esto incluye imágenes, incluso si usas una CDN para su distribución. Nunca cargues archivos de servidores externos si puedes evitarlo, ya que la carga será mucho más lenta.
No conviene que tu sitio descargue las fuentes de Google ni el archivo de Google Analytics para cada usuario desde un dominio externo. Esto genera latencia adicional y siempre habrá un retraso adicional al conectarse a cualquier sitio externo. Usa Perfmatters o Pre-Party para precargar las fuentes, los archivos CSS y JS que quieras cargar primero, como se mencionó anteriormente. Todas tus fuentes locales (que puedes identificar mediante el gráfico de cascada de GTMetrix/Debug Bear) si ves alguna extensión de fuente (WOFF, WOFF2, TTF, etc.) puedes precargarlas en Perfmatters. A continuación, se muestra una captura de pantalla del gráfico de cascada de GTMetrix para una prueba de velocidad del dominio CBDMD.
Youtube, fonts.gstatic.com y cdn.searchspring.net debajo de la columna de dominio en el gráfico de cascada son los dominios de terceros enumerados en esta captura de pantalla.
Quieres alojar la mayor cantidad posible de archivos de tus plugins localmente en tu sitio. Fotos, vídeos, todo lo que puedas. CAOS para Google Analytics, por ejemplo, descarga los archivos necesarios para Google Analytics localmente y los proporciona tu sitio, en lugar de descargarlos de los servidores de Google.
En ese sentido, las implementaciones normales de YouTube ralentizarán drásticamente la velocidad de tu sitio (usa WP YouTube Lyte, como se indica a continuación). Si tu cliente te exige usar YouTube y no puedes evitarlo, la velocidad de tu sitio se verá afectada independientemente del reproductor que uses. Sin embargo, parte de esa carga se puede mitigar con reproductores de YouTube optimizados.
El reproductor de vídeo tardará un poco en aparecer si se carga el vídeo de forma diferida (se cargará/aparecerá a medida que el usuario se desplaza hacia abajo), y posiblemente se aplique algún CLS debido a su gran tamaño (sobre todo en conexiones móviles), ya que tarda un poco en descargarse una vez que entra en la ventana gráfica, pero es mejor que ralentizar el tiempo de carga inicial de la página. Muchos plugins de YouTube ahora tienen imágenes de marcador de posición que impiden que el vídeo se descargue por completo hasta que el usuario interactúe con el iframe del reproductor mediante un clic o un toque.
Los tiempos de carga para los usuarios móviles (especialmente con video) se verán agravados por las lentas velocidades de Internet, por lo que si los sitios de sus clientes operan en áreas rurales, experimentarán un retraso aún más severo que las áreas pobladas, como las grandes ciudades.
¡Retrasa el WP Youtube Lyte JS para obtener los mejores resultados!
Alojar localmente scripts y estilos de terceros
Artículos
Artículo de Daan.dev
https://daan.dev/blog/how-to/host-js-locally-crontab
Artículo de WPFY
Scripts y estilos de caché GDPR (gratuitos)
Almacenar en caché localmente scripts y estilos CSS y JS externos de terceros.
Flyingpress (Pagado)
Todavía no hay documentación, pero esta es una característica agregada recientemente a Flyingpress que alojará localmente todos los archivos CSS y JS de terceros.
Alojar fuentes de Google localmente
Descargar manualmente archivos de fuentes de Google de forma local
Asistente web de fuentes de Google (gratis)
https://gwfh.mranftl.com/fonts
Las fuentes son archivos pesados que añaden mucho peso a la página, y al usar Google Fonts desde la CDN de Google, el usuario tiene que realizar solicitudes a su servidor externo, lo que supone un gran impacto en el rendimiento. Si utiliza un VPS rápido o un host administrado, sin duda querrá servir esas fuentes localmente.
Cada llamada externa a un dominio de terceros generará un retraso adicional. Minimice las llamadas de terceros al máximo. Las fuentes representan una gran oportunidad para reducir el retraso, por lo que este es un tipo de archivo clave para el autoalojamiento.
Revisa tu cascada de GTMetrix para identificar las fuentes que estás usando. Muchos plugins cargan fuentes que ni siquiera estás usando, así que te recomendamos desactivar la función de Google Fonts del plugin por completo y reemplazarlas con los archivos WOFF2 que descargaste (que son los más compatibles con los navegadores y los de menor tamaño).
Si usas Elementor, tienes una sección en la configuración para subir fuentes personalizadas. Al usar un elemento, selecciona la fuente en la configuración; debería aparecer al principio de la lista una vez que la subas. Otros constructores también deberían tener esta opción; consulta su documentación para saber cómo usarla en tu constructor si no usas Elementor.
Alojar automáticamente archivos de fuentes localmente
Fuente web Yabe (gratuita)
El mejor complemento para alojar localmente fuentes de Google.
OMGF (Gratis)
OMGF también alojará localmente tus fuentes web de Google, lo que elimina las llamadas externas a tus fuentes. Recomiendo usar Yabe.
Flyingpress (Pagado)
https://docs.flyingpress.com/en/article/optimize-google-fonts-1lotnj4
Flyingpress también puede alojar fuentes de Google localmente. No se pueden cargar fuentes locales especificadas manualmente; utilice OMGF o Yabe Webfont si desea cargarlas manualmente.
Sugerencias de recursos
Cuando no puede alojar archivos de terceros localmente, debe utilizar sugerencias de recursos para mejorar la velocidad y el rendimiento de la conexión al llamar a un archivo desde un dominio de terceros.
Pre-Fiesta (Gratis)
Este complemento permite a los usuarios incorporar de forma automática y sencilla sugerencias de recursos para mejorar el tiempo de carga de la página.
Sugerencias de recursos incluidas: se admiten funciones de precarga, preprocesamiento, preconexión, precarga y precarga de DNS.
Combinar con HTTP/2 Server Push (gratis)
HTTP/2 Server Push es más potente y tiene una ventaja en rendimiento sobre las sugerencias de recursos.
HTTP/2 y las sugerencias de recursos son complementarias y deben usarse juntas. Sin embargo, la sugerencia de recursos Rel=”preload” de HTTP/2 es más potente que la sugerencia de recursos Rel=”preload”, ya que con HTTP/2 Server Push, el servidor envía el recurso antes de que el navegador del usuario lo solicite (antes de que se sirva el documento HTML).
Por otro lado, las sugerencias de recursos se colocan dentro del documento HTML, lo que significa que el navegador del usuario debe solicitar el recurso para iniciar la transferencia primero. Las sugerencias de recursos ofrecen ventajas de rendimiento y deben usarse siempre que sea posible, pero Server Push ofrece ventajas de rendimiento adicionales y debe usarse en su lugar siempre que sea posible.
Explicación ampliada y comparación/contraste
https://docs.google.com/document/d/1ZHGvCrXyKxAFLwVqj-Y1nRtzIYmU_vur0G1Ro8TDEkk/edit?usp=sharing
Fuentes
Mejores prácticas
- Utilice WOFF/WOFF2, no TTF/otros formatos de fuente, ya que WOFF2 tiene la mejor compresión.
- Consolidar familias de fuentes, pesos e iconos.
- Desactive las bibliotecas de iconos de fuentes (woff2, ttf, etc.) y utilice archivos SVG individuales. Estas bibliotecas cargan el conjunto completo de iconos en lugar de solo los necesarios, lo que genera un volumen de página excesivo e innecesario.
- Aloje fuentes localmente (en lugar de fuentes de Google desde fonts.gstatic.com).
- Una vez alojados localmente, precargue los archivos de fuentes importantes cargándolos por encima del pliegue.
- Si su caso de uso exige que necesite cargar fuentes desde un dominio externo (como Google Fonts desde fonts.gstatic.com), asegúrese de configurar la preconexión (las sugerencias de recursos de pre-party, perfmatters y otros complementos tienen esta función) al dominio externo.
Alojar fuentes de Google localmente
Descargar manualmente archivos de fuentes de Google de forma local
Asistente web de fuentes de Google (gratis)
https://gwfh.mranftl.com/fonts
Las fuentes son archivos pesados que añaden mucho peso a la página, y al usar Google Fonts desde la CDN de Google, el usuario tiene que realizar solicitudes a su servidor externo, lo que supone un gran impacto en el rendimiento. Si utiliza un VPS rápido o un host administrado, sin duda querrá servir esas fuentes localmente.
Cada llamada externa a un dominio de terceros generará un retraso adicional. Minimice las llamadas de terceros al máximo. Las fuentes representan una gran oportunidad para reducir el retraso, por lo que este es un tipo de archivo clave para el autoalojamiento.
Revisa tu cascada de GTMetrix para identificar las fuentes que estás usando. Muchos plugins cargan fuentes que ni siquiera estás usando, así que te recomendamos desactivar la función de Google Fonts del plugin por completo y reemplazarlas con los archivos WOFF2 que descargaste (que son los más compatibles con los navegadores y los de menor tamaño).
Si usas Elementor, tienes una sección en la configuración para subir fuentes personalizadas. Al usar un elemento, selecciona la fuente en la configuración; debería aparecer al principio de la lista una vez que la subas. Otros constructores también deberían tener esta opción; consulta su documentación para saber cómo usarla en tu constructor si no usas Elementor.
Fuente web Yabe (gratuita)
Yabe es un complemento de alojamiento de fuentes locales muy flexible.
- Compatible con el RGPD/DSGVO : Puedes importar y alojar archivos de Google Fonts desde tu servidor a través de tu página de administración de WordPress. Menos motivos para preocuparte por el cumplimiento del RGPD/DSGVO.
- Fuentes de Google y Adobe Fonts listas: comience a utilizar cualquier fuente disponible en Google Fonts y Adobe Fonts.
- Fuentes personalizadas : Un gestor de fuentes personalizadas dedicado para WordPress. El lugar central para gestionar todas tus fuentes y tipografías.
- Ligero y rapidísimo : El sistema de gestión de fuentes utiliza la API REST de WordPress y un moderno framework JavaScript para una experiencia de usuario instantánea y responsiva. La caché de la página principal garantiza una carga rápida y reduce las consultas a la base de datos.
- Compatibilidad con fuentes variables : el formato permite que un solo archivo de fuente contenga múltiples variaciones estilísticas.
OMGF (Gratis)
OMGF alojará localmente sus fuentes web de Google, lo que elimina las llamadas externas a sus fuentes.
Flyingpress (Pagado)
https://docs.flyingpress.com/en/article/optimize-google-fonts-1lotnj4
Flyingpress también puede alojar fuentes de Google localmente. No se pueden cargar fuentes locales especificadas manualmente; utilice OMGF o Yabe Webfont si desea cargarlas manualmente.
Subconjunto de fuentes
Utilice un subconjunto de fuentes para eliminar los caracteres no utilizados de sus archivos de fuentes y así reducir su tamaño.
Subconjunto de fuentes Everything (gratis)
https://everythingfonts.com/subsetter
Subconjunto Aspose (gratuito)
https://products.aspose.app/font/generator
Subcompilador Typst (gratis)
https://github.com/typst/subsetter
Glyphhanger (Gratis)
https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts
https://github.com/zachleat/glyphhanger