Plugins y temas mal codificados
Scripts PHP mal codificados en complementos y temas
Muchos temas y complementos que están mal codificados tienen una gran cantidad de scripts PHP, así como scripts PHP mal codificados que pueden saturar un servidor cuando experimenta incluso tráfico moderadamente alto.
Diagnóstico
F12 Profiler (Gratis)
https://wordpress.org/plugins/f12-profiler
F12 Profiler es un excelente plugin para diagnosticar el impacto en el rendimiento de plugins y temas. Añade una sección a la barra de administración de WordPress que muestra el impacto de cada uno en el tiempo de carga.
No se ha actualizado en bastante tiempo, pero según mis pruebas, todavía funciona perfectamente.
Code Profiler (Gratis y Pro)
Code Profiler se puede utilizar para diagnosticar qué complementos o temas están causando una alta carga de CPU y una presión excesiva de RAM.
Mala configuración o falta de almacenamiento en caché de página y/o servidor
Una configuración deficiente o la falta de almacenamiento en caché pueden afectar gravemente la carga de la CPU y provocar una presión excesiva en la RAM.
Una solución muy sencilla: simplemente habilite el almacenamiento en caché del servidor y de la página. Esto se explica más adelante en esta guía.
Enlace directo:
https://docs.google.com/document/d/1ncQcxnD-CxDk4h01QYyrlOh1lEYDS-DV/edit#heading=h.3cqmetx
Reinstalar WordPress Core (Gratis)
Artículo para principiantes de WP
https://www.wpbeginner.com/wp-tutorials/how-to-uninstall-and-reinstall-wordpress
Cuando todo lo demás falla, a veces reinstalar WordPress Core puede solucionar la alta carga de CPU y la presión excesiva de RAM. Esto rara vez es necesario.
Corregir cadenas de redireccionamiento
Siempre debe corregir las cadenas de redireccionamiento. Su sitio debe estar configurado para tener una única redirección https a https://yourdomain.com o una única redirección directa a la versión https://www.yourdomain.com .
Nunca debe tener una redirección intermedia entre la versión http sin SSL a la versión https www si elige usar www.
Por ejemplo, http>https://>https://www. Este salto adicional siempre generará latencia adicional. Asegúrate de eliminarlo.
Para reiterar, solo debe tener el enlace http simple que se redirige inmediatamente al enlace https correcto en su gráfico de cascada en gtmetrix.
Si es www, debería ser http://yourdomain.com > https://www.yourdomain.com. No debería haber una redirección intermedia a https://example.com .
Si su dominio no tiene un enlace WWW, debería ser http://yourdomain.com > https://yourdomain.com sin ninguna redirección intermedia en el medio.
Esto se puede hacer mediante una regla htaccess/nginx, un plugin de redirección o a través de tu CDN . Cloudflare te permite crear una regla de redirección que siempre redirija los enlaces http directamente a www, omitiendo la redirección intermedia. Tu plugin de SEO normalmente también incluye esta opción, pero hacerlo a través de WordPress añadirá latencia. Te recomendamos implementar esto a nivel de servidor o a través de tu CDN para lograr la menor latencia posible.
Opciones de complemento y artículos
Es casi seguro que tu plugin de SEO también tenga una opción para redirecciones. Las correcciones del plugin pueden tener un rendimiento ligeramente inferior al de implementar redirecciones mediante archivos de configuración .htaccess o NGINX, pero son más fáciles de administrar.
Identificación manual de redirecciones y cómo solucionarlas
https://prerender.io/blog/do-redirect-chains-hurt-seo
https://tillison.co.uk/blog/how-to-fix-redirect-chains-and-loops-in-wordpress
https://www.semrush.com/blog/301-redirect-htaccess
Supervisión del rendimiento de servidores y redes
Active New Relic solo cuando diagnostique problemas en su sitio en vivo o, preferiblemente, en la etapa de prueba.
New Relic y Signoz tienen un impacto negativo en el rendimiento de su servidor. Si es posible, active New Relic o SigNoz solo al solucionar, registrar o analizar problemas para evitar cualquier impacto en el rendimiento que puedan causar si se mantienen activos a largo plazo.
New Relic (Gratis y Pro)
Proyectos de código abierto de New Relic (gratuitos)
https://github.com/orgs/newrelic/repositories?type=all
New Relic cuenta con proyectos gratuitos de código abierto en GitHub, que también funcionan básicamente como una edición comunitaria gratuita. Una opción fantástica para la observabilidad y las estadísticas de rendimiento.
https://docs.newrelic.com/docs/network-performance-monitoring/get-started/npm-introduction
New Relic es una aplicación a nivel de servidor que monitoriza diversas estadísticas y tráfico de red, lo que proporciona un alto nivel de visibilidad en problemas de rendimiento y permite su resolución. New Relic es una herramienta de diagnóstico invaluable que cualquier desarrollador recomienda integrar en su conjunto de herramientas.
Supervisa todos los aspectos del rendimiento de su pila web.
Script de automatización para la instalación automática de New Relic de código abierto en la mayoría de las distribuciones de Linux
https://docs.google.com/document/d/1wtIcwh4vjAEIr_71WioxIUCV1q3DtIzhQKYxDz6RcbY
SigNoz (Gratis y Pro)
https://signoz.io/docs/install/docker
https://github.com/signoz/signoz
SigNoz cuenta con una versión comunitaria de código abierto, autoalojada y de uso totalmente gratuito. Una buena alternativa a New Relic. Ligeramente más fácil de instalar que New Relic.
Optimizaciones de WordPress
¿Debo aprovechar todas las oportunidades de optimización de esta guía simultáneamente?
¡Sí! Todas las funciones aquí mencionadas son complementarias y pueden y deben usarse juntas simultáneamente. Implementa todas las funciones posibles para obtener el mejor rendimiento. Contrariamente a la creencia popular, no existen «demasiados» plugins. Un plugin es simplemente un fragmento de código preempaquetado y desarrollado por un desarrollador. Un plugin podría ser simplemente una simple función PHP. Lo que importa es la calidad y el contenido del código dentro de un plugin.
Si el plugin es ligero y no interfiere con otros, no hay problema en ejecutar tantos plugins como se desee. Un sitio web bien optimizado podría ejecutar 90 plugins simultáneamente sin problemas de rendimiento. Los efectos negativos de los plugins no optimizados se acumulan, así que asegúrese de elegir solo plugins de calidad y optimizados para evitar ralentizar su sitio web.
Por otro lado, solo deberías tener los plugins de depuración y análisis activos cuando sean necesarios, ya que afectarán el rendimiento y ralentizarán tu sitio si se mantienen activos. Es preferible habilitarlos solo en un sitio de prueba para evitar ralentizaciones para los usuarios.
Incluso cuando los complementos de depuración están bien optimizados, hay muchos accesos a la base de datos, por lo que solo úselos en el sitio de prueba o habilítelos en su sitio en vivo durante el tiempo mínimo que sea necesario para obtener la información que necesita.
Usa la menor cantidad de plugins necesaria para lograr el diseño que desees, pero nunca sobran los plugins de optimización (ni otros plugins en general, si están bien optimizados). El objetivo de los plugins de optimización es mejorar el rendimiento, no perjudicarlo. No sobrecargarás tu sitio web ejecutando todas las herramientas de optimización simultáneamente. Implementar todas estas técnicas juntas es la clave para obtener resultados óptimos.
Mejores prácticas
Activa los complementos que estás probando en el entorno de pruebas.
No actives ningún plugin en tu sitio web en vivo que no estés seguro de necesitar. Pruébalos siempre en el entorno de pruebas o en un servidor local de desarrollo de WordPress. Es fundamental enfatizar esto. Algunos plugins generan retrasos que no se pueden eliminar por completo, ni siquiera limpiando las tablas de la base de datos, deshabilitando las opciones de carga automática o eliminándolas por completo.
Realice copias de seguridad periódicas
Crea copias de seguridad con frecuencia cuando trabajes en WordPress. No querrás perder el trabajo realizado por un error fácilmente evitable que te obligue a restaurar. Es recomendable crearlas después de cada cambio para evitar perder el progreso.
A veces, un complemento o un cambio genera un error crítico (relativamente raro), impide el acceso a una sección específica del panel de administración, impide que este se cargue por completo o presenta algún otro comportamiento extraño. Cuando esto ocurre, la única solución es restaurar una copia de seguridad que funcione.
He recuperado algo de rendimiento al eliminar las entradas de la base de datos que algunos complementos han creado, pero ha habido momentos en los que no puedes recuperar todo el rendimiento perdido y tendrás que volver a una copia de seguridad.
Pruebe siempre sus nuevos complementos en un entorno de prueba no en vivo antes de comprometerse con ellos e implementarlos en su sitio en vivo.
Elija complementos de calidad
Si hay varios plugins que se adaptan a tus necesidades para una tarea específica, elige el más optimizado, ya que funcionará mejor. Si hay tres plugins, uno de 300 kb, otro de 700 kb y otro de 1,2 MB, el de 300 kb suele tener el mejor rendimiento (aunque no siempre es así). Compara siempre el tamaño de los archivos de los plugins, pero la única forma de saberlo es probándolos uno por uno. Sin embargo, comparar el tamaño de los archivos para obtener una estimación del impacto en la velocidad de la página es una buena regla general. Los plugins con un tamaño de archivo menor suelen tener un mejor rendimiento, por lo que es una buena heurística para evaluar el impacto probable de un plugin.
Todos los plugins de esta guía están optimizados para un rendimiento óptimo. Los plugins para funciones específicas (gráficos, SEO, tablas, campos personalizados, copias de seguridad, gestión de usuarios, WooCommerce, formularios, LMS, plugins de soporte, etc.) que he incluido se han seleccionado intencionalmente, ya que tienen un código optimizado y de alto rendimiento. Si crea su sitio web únicamente con los plugins de esta guía, el peso de su página será bajo incluso antes de la optimización.
Deshabilitar opciones de carga automática de bases de datos innecesarias
Después de instalar un plugin, asegúrese de inspeccionar su base de datos con Advanced Database Cleaner para comprobar cuántas tablas y opciones se agregaron. Muchos plugins crean demasiadas opciones configuradas para cargarse automáticamente, lo que puede ralentizar considerablemente su sitio web. Generalmente, la mayoría de las opciones se pueden configurar para que no se carguen automáticamente sin afectar la funcionalidad, pero no siempre es así.
Deshabilitar la carga automática podría tener graves consecuencias negativas si se desactiva la opción incorrecta. En casos extremos, incluso podría quedar completamente bloqueado del backend y generar errores críticos en los plugins. Deshabilitar las opciones de carga automática por motivos de rendimiento siempre es recomendable, pero tenga cuidado con las que deshabilita y pruebe siempre los cambios primero en la prueba.
SIEMPRE prueba deshabilitar las opciones de carga automática de los plugins activos en el entorno de pruebas antes de publicar los cambios. Es un proceso de prueba y error, así que asegúrate de tener copias de seguridad antes de cambiar la configuración de carga automática en el sitio web.
Eliminar entradas de base de datos innecesarias
Si un complemento agrega demasiadas tablas y opciones a la base de datos y desea eliminarlo, debe eliminar las entradas de la base de datos con Advanced Database Cleaner u otro complemento de limpieza de bases de datos en la sección de base de datos después de eliminarlo, ya que la mayoría de los complementos dejan todas sus opciones y tablas en la base de datos al desactivarlos o eliminarlos. Muchos complementos configuran opciones para que se carguen automáticamente incluso si no es necesario, así que asegúrese de deshabilitar tantas opciones de carga automática como sea posible (sin afectar la funcionalidad).
Actualizaciones automáticas de complementos y temas
Mantenga los temas y complementos actualizados.
Mantén tus temas y plugins actualizados por motivos de seguridad y rendimiento. Los desarrolladores suelen publicar actualizaciones de rendimiento, funciones y seguridad para sus plugins, por lo que lo ideal es mantenerlos siempre actualizados.
Configura la actualización automática solo para algunos plugins que no tengan funciones críticas del sitio. Por ejemplo, no conviene actualizar automáticamente un creador de páginas. Algunas actualizaciones de plugins pueden afectar por completo ciertas funciones al introducir nuevos errores, por lo que es recomendable tener copias de seguridad antes de actualizar por si necesitas revertirlas. Prueba en el entorno de pruebas al actualizar los plugins. En casos muy raros, incluso un plugin no crítico puede afectar tu sitio, así que, como siempre, ¡realiza copias de seguridad con regularidad!
Las actualizaciones de temas también pueden dañar tu sitio, especialmente porque si estás siguiendo los consejos de esta guía, debes deshabilitar todo lo humanamente posible en tu tema y trabajar exclusivamente con algún tipo de generador de páginas o código personalizado para tu sitio si esa es tu preferencia.
Constante de límite de memoria de WP-Config
Puedes pegarlo en tu archivo wp-config justo encima de la línea «/* ¡Eso es todo, deja de editar! ¡Feliz publicación! */». Solo asegúrate de modificar el valor para que coincida con el que configuraste en la configuración de PHP.
P.ej:
define( ‘WP_MEMORY_LIMIT’, ‘256M’ );
Nota: El límite de memoria indica la cantidad de RAM que se puede asignar a un solo proceso PHP. No debería tener ningún plugin ni script que ocupe tanta RAM. Si lo hace, le recomiendo cambiar de plugin. La recomendación predeterminada en la mayoría de las guías es 256 MB. Si necesita aumentar el valor por encima de 256 MB, no lo configure para que supere los 512 MB. El límite debería ser de 512 MB.
Deshabilitar XML-RPC
Desactivar XML-RPC. Hay varias maneras de desactivarlo. Yo uso Asset Cleanup para ello, pero existen muchas opciones de plugins. Esto mejorará la seguridad de tu sitio y también evitará algunos ataques DDoS. Puedes simplemente eliminar el archivo; el 99 % de los sitios de WordPress no utilizan XML-RPC; solo conviene activarlo si es necesario para que un plugin funcione.
Diagnóstico y análisis
Herramientas de base de datos
Análisis de consultas de bases de datos
Monitor de consultas (gratis)
Ayuda a depurar consultas de bases de datos, errores de PHP, ganchos y acciones, bloques del editor de bloques, scripts y hojas de estilo en cola, llamadas a la API HTTP y más.
Complementos (gratis)
https://querymonitor.com/help/add-on-plugins
Colección de complementos de Query Monitor para ampliar la funcionalidad de Query Monitor.
Registrador de consultas fluido (gratuito)
Registrador de consultas con funcionalidad de registro selectivo.
Instantáneas de la base de datos de WP (gratis)
Las instantáneas de base de datos de WPvivid le permiten crear rápidamente instantáneas de todas las tablas en su base de datos de WordPress.
Crear una instantánea de la base de datos es mucho más rápido que hacer una copia de seguridad. Si necesita una solución de reversión más rápida para probar de forma segura los cambios relacionados con la base de datos de WordPress, utilice una instantánea.
Habilitar herramientas de base de datos (gratis)
Hace una cosa : le permite optimizar y reparar tablas InnoDB y MyISAM utilizando herramientas de base de datos integradas de WordPress.
Administración de bases de datos
Administrador de bases de datos (gratis)
https://github.com/qriouslad/database-admin
Reemplazo de administrador, ¡directamente desde el panel de administración de WordPress!
WP phpMyAdmin (Gratis)
PHP My Admin desde el panel de administración de WordPress.
Perfiles de rendimiento
Code Profiler (Gratis y Pro)
Code Profiler te ayuda a medir el rendimiento de tus plugins y temas a nivel de PHP y a detectar rápidamente cualquier problema potencial en tu instalación de WordPress. Resulta útil para solucionar problemas e identificar qué plugins que utilizas tienen un rendimiento deficiente.
Puede señalar las líneas de código y los plugins específicos que causan problemas de rendimiento. Resulta muy útil si creas tu propio plugin, quieres modificar el de otra persona para solucionar el problema, identificar un plugin que perjudica el rendimiento o informar del problema identificado a un desarrollador de plugins para que lo solucione.
F12 Profiler (Gratis)
https://wordpress.org/plugins/f12-profiler
Un complemento de creación de perfiles de código, no tan granular ni detallado como Code Profiler, pero que tiene algunas características interesantes que Code Profiler no tiene, como una barra de menú de administración de interfaz que muestra información de perfil para la página actual que estás viendo en la interfaz.
Perfilador de rendimiento AIO (gratuito)
Nota: No recomiendo activarlo en un sitio web en producción, actívelo en el de pruebas. Es útil para el diagnóstico, pero ralentizó mucho el sitio web en el que estaba trabajando, incluso una vez desactivado; nunca investigué el motivo. Sugiero usar este plugin solo en un sitio de pruebas.
Perfiles de rendimiento LAPS (gratuitos)
Perfilador de rendimiento ligero. Ofrece un resumen visual en la barra de herramientas de administración, fácil y rápido de inspeccionar.
Solucionar conflictos de complementos
Comprobar conflictos (gratis)
El complemento le permite deshabilitar/habilitar complementos y/o activar un tema predeterminado para verificar conflictos entre ellos solo para su IP; otros usuarios no verán ningún cambio durante las pruebas.
Plugin Detective (Gratis)
Ayuda a diagnosticar conflictos de complementos paso a paso.
Herramientas de WP (gratis)
El complemento WP Tools (wp-tools) presenta un panel completo que muestra las estadísticas del servidor, incluido un gráfico de errores, el tiempo de carga de la página también por página y cuenta con más de 47 herramientas diseñadas para simplificar sus tareas de administración de WordPress.
Panel de control del sistema (gratis)
Este complemento proporciona un panel central para supervisar diversos componentes, procesos y datos de WordPress, incluyendo el hardware, el software y el uso de recursos del servidor. Es compatible con Query Monitor.
Filtros y ganchos
Buscador de ganchos de WP (gratis)
Si revisas cualquier página o entrada de WordPress, verás que aparecen mediante la combinación de ganchos de acción y filtro. A veces son útiles para la depuración y el desarrollo de plugins.
Lista de complementos en uso por página
Lista de complementos (gratis)
El complemento inserta una lista XHTML en cualquier entrada o página mediante un código corto. Si te interesa la personalización, puedes especificar un argumento de formato e indicar el resultado exacto que buscas.
También hay una opción para mostrar los complementos inactivos.
- Un sistema de plantillas simple le permite formatear cómo desea que se muestre la información del complemento
- Las etiquetas de plantilla están disponibles para elementos vinculados automáticamente, así como para texto simple.
- Elija entre una serie de datos del complemento que se van a generar
- Muestra los complementos inactivos y activos si lo deseas
- Limite automáticamente las descripciones largas a longitudes específicas e incluso elimine emojis del resultado.
- La salida se almacena en caché para proporcionar una respuesta súper rápida
- ¡Un código corto independiente te permite mostrar cuántos complementos tienes!
Uso del bloque de Gutenberg
Encuentra mis bloques (gratis)
Búsqueda rápida de ubicaciones de bloques
Ahorre tiempo escaneando todo su sitio (incluidas publicaciones, páginas y tipos de publicaciones personalizadas) para localizar instancias de bloques de WordPress.
- Busque y reemplace bloques de forma segura con enlaces de edición y vista previa rápidas.
- Soporte completo para la edición de sitios web en WordPress. Se buscarán plantillas de bloques y partes de plantillas.
- Configuraciones de rendimiento para hosting de gama baja (alojamiento compartido) a gama alta.
- 100% gratuito y de código abierto.
Rastreador de problemas (gratis)
Issues Tracker le permite ver y buscar registros de depuración de WordPress, recibir consejos de seguridad, rastrear errores 404 y ver la configuración de su servidor.
Inspeccionar y bloquear solicitudes HTTP (gratis)
Monitorea todas las solicitudes HTTP realizadas mediante los métodos HTTP de WP (wp_remote_get y wp_remote_post). Bloquea cualquier solicitud con solo un clic.
Realizar un seguimiento del tiempo que toma una solicitud, como actualizar el núcleo, el complemento o el tema (puede ser útil para el análisis del consumo de ancho de banda)
Administrador de transitorios (gratis)
El administrador de transitorios le permite:
- Botón de la barra de herramientas para suspender escrituras transitorias
- Ver todos los transitorios en la base de datos
- Edite el nombre, la expiración y el valor de cualquier transitorio
- Eliminar cualquier transitorio
- Buscar transitorios por nombre
- Acciones masivas para eliminar: todos, transitorios vencidos, no vencidos o persistentes
Pruebas de rendimiento desde el panel de administración
La sección de pruebas de velocidad anterior es uno de los principales recursos que utilizará para diagnosticar problemas de rendimiento. Los gráficos de cascada son fundamentales para diagnosticar qué archivos deben retrasarse, deshabilitarse, comprimirse, cargarse de forma diferida o necesitan atributos de carga como aplazar.
Vibraciones (Gratis)
Un complemento de la suite PerfOps One, pruebas de faro gratuitas directamente desde el panel de administración, muy útil.
WP Speed Of Light (Gratis)
WP Speed Of Light es un plugin de optimización gratuito con pruebas de velocidad de página integradas. Existe una versión pro, pero es completamente innecesaria si se utiliza como plugin de optimización/almacenamiento en caché, además de la función de pruebas de velocidad. Todas las funciones pro están disponibles a través de plugins gratuitos en otras secciones.
Comprobador de WPO (gratis)
Agrega enlaces a herramientas externas de PageSpeed en la lista de páginas/publicaciones.
No se ha actualizado por un tiempo, actívelo en el entorno de pruebas para garantizar que no haya conflictos.
Speed Guard (Gratis)
Herramienta de pruebas masivas de PageSpeed Insights. Añade URLs para probar en el backend y se ejecutarán pruebas masivas de PageSpeed en todas ellas.
Advertencias: la funcionalidad para mostrar la puntuación LCP de cada página probada en la página de configuración del complemento no funciona y todos los informes de velocidad de página deben abrirse individualmente (no hay una descripción general) para ver las puntuaciones.
Herramientas de la barra de administración (gratis)
Agrega un enlace de Pagespeed Insights a la barra de administración para iniciar una prueba para cualquier página vista en la interfaz.
SEO Booster (de pago)
La versión paga de SEO Booster tiene la funcionalidad de prueba de Pagespeed Insights.
Probador de rendimiento de WP (gratis)
WPPerformanceTester se creó como una herramienta para evaluar WordPress en los benchmarks de rendimiento de hosting de WordPress (2015) de Review Signal. Los benchmarks actuales se encuentran en WPHostingBenchmarks.com. Fue diseñado para evaluar el rendimiento del servidor sometiendo a estrés PHP y MySQL, y ejecutando consultas $wpdb.
WPPerformanceTester realiza las siguientes pruebas
- Matemáticas: 100.000 pruebas de funciones matemáticas
- Manipulación de cadenas: 100.000 pruebas de manipulación de cadenas
- Bucles: 1.000.000 de iteraciones de bucle
- Condicionales: 1.000.000 de comprobaciones de lógica condicional
- MySql (conectar, seleccionar, versión, aes_encrypt): funciones básicas de MySQL y 5 000 000 iteraciones AES_ENCRYPT()
- \$wpdb – 250 operaciones de inserción, selección, actualización y eliminación a través de \$wpdb
- También le permite comparar el rendimiento de su servidor con nuestro índice de referencia del sector. Este índice de referencia es el promedio de todos los resultados de las pruebas enviadas.
Análisis del tamaño de página
GreenerWP (Gratis)
Escáner de tamaño de página a granel. Información poco detallada, pero ofrece una visión general del peso de cada página en varias páginas.
Explotación florestal
Registro de correo
Registro de correo de WP (gratis)
Usa este plugin para registrar todos los correos electrónicos salientes de tu sitio de WordPress. Si se produce algún error al enviar el correo desde tu sitio, nuestros registros lo detectarán y te lo mostrarán.
Registro de depuración
Administrador de registros de depuración (gratis)
- Analice el archivo debug.log y vea los distintos errores y cuándo ocurrieron por última vez
- Encuentre y filtre rápidamente errores más específicos para su trabajo de depuración.
- Haga que los detalles del error sean más fáciles de leer identificando la fuente del error
- Visualiza fácilmente los archivos donde se produjeron errores de PHP. Esto incluye archivos del núcleo, plugins y temas de WordPress.
- Habilite la actualización automática para cargar automáticamente nuevas entradas de registro.
- Limpie fácilmente el archivo debug.log para ahorrar espacio en disco y observar más fácilmente los nuevos errores que ocurren en su sitio.
- Mostrar un indicador en la barra de administración cuando el registro de errores esté habilitado.
- Agregue un widget de panel que muestre los últimos errores registrados.
- Utilice error_log() para generar información de error en su registro de depuración
Bugfu (Gratis)
Registre/depure el código PHP en su tema/complemento en la consola de su navegador (no se necesita extensión).
Depurar esto (gratis)
Proporciona una gran cantidad de información sobre su instalación de WordPress, todo desde la barra de administración del frontend.
- El objeto WP_Query actual
- Información y opciones del blog
- Proveedores de incrustación
- Archivos en HTML renderizado (CSS, imágenes, JavaScript)
- Filtros y acciones
- Tamaños de las imágenes
- Globales y constantes
- Menús
- Estadísticas de caché de objetos
- Complementos, complementos imprescindibles y dropins
- Reescribir las reglas
- Consultas
- Información de PHP y del servidor
- Archivos adjuntos de publicaciones
- Tipos de publicaciones
- Scripts y estilos en cola
- Códigos cortos
- Barras laterales y widgets
- Taxonomías y términos
- Temas
- Usuarios
- Programaciones y trabajos cron de WP
- Registro de depuración de WP
Barra de depuración (gratis)
Agrega un menú de depuración a la barra de administración que muestra consultas, caché y otra información de depuración útil.
Registro de acciones y auditorías
Registro de actividad principal (gratuito)
CoreActivity Log es un plugin gratuito para monitorizar y registrar diversas actividades. Es altamente modular, con eventos registrados y controlados por múltiples componentes.
Actualmente, el complemento cuenta con 28 componentes con un total de 174 eventos y se integra directamente con 12 complementos populares. De todas las opciones de registro de auditoría, esta es la más completa.
Log Dash (Gratis)
El registro de actividad ligero te permite supervisar y rastrear fácilmente todas las acciones en tu sitio de WordPress, incluyendo inicios de sesión de usuarios, cambios de contenido, actualizaciones de plugins y más. Su panel de control intuitivo te da acceso instantáneo a información crítica, lo que facilita la identificación y resolución de problemas rápidamente.
Transmisión (gratis)
El plugin registra las acciones de los usuarios y del sistema de WordPress en los registros de Stream. Cada acción de los usuarios conectados se muestra en un flujo de actividad y se organiza para facilitar su filtrado por usuario, rol, contexto, acción o dirección IP. Los administradores pueden destacar entradas en el registro de Stream, como la actividad sospechosa de un usuario, para investigar qué sucede en tiempo real. Stream también permite configurar alertas por correo electrónico y webhooks para integraciones como Slack e IFTTT, para notificar a tu equipo y a ti cuando algo sale mal.
La transmisión es completamente gratuita y no tiene plan profesional.
Registro de actividades de Aryo (gratis)
Otro complemento de monitorización de actividad, también totalmente gratuito.
DecaLog (Gratis)
Si bien DecaLog no registra específicamente eventos de usuario, registra varios eventos en un sitio que no registran ni Stream ni Aryo, lo que le brinda diferentes perspectivas sobre los procesos en segundo plano, lo que facilita la detección de malware y permite profundizar en los problemas de rendimiento.
Si tiene problemas para interpretar los resultados, le sugiero tomar una captura de pantalla de los registros y luego subirla a un bot de IA para que los interprete. Puede acceder a bots de IA de pago de forma gratuita a través de PoE .
Historia sencilla (gratis)
Registro de auditoría para WordPress, útil para diagnosticar cambios realizados por los usuarios, cuenta con registro detallado e integración directa con múltiples plugins.
Registro de eventos de Ajax
Registro de Amuga Ajax (gratis)
Registra llamadas Ajax. No se ha actualizado en mucho tiempo; úselo solo en pruebas para fines de diagnóstico.
Registro de cron
Cron Logger (gratis)
Este complemento le ayudará a identificar qué Cronjobs (si hay alguno) son problemáticos.
Análisis de rendimiento y WordPress
Monitor de consultas (gratis)
Ayuda a depurar e identificar consultas lentas a bases de datos, errores de PHP, ganchos y acciones, bloques del editor de bloques, scripts y hojas de estilo en cola, llamadas a la API HTTP y más. Una herramienta esencial para diagnosticar problemas de rendimiento.
Complementos de PerfOps One (gratuitos)
Un conjunto de complementos de WordPress gratuitos y de código abierto dedicados a la observabilidad y el rendimiento de las operaciones.
Administrador de OPcache (gratis)
Herramienta completa de gestión y análisis de OPcache. OPcache Manager permite supervisar y optimizar las operaciones de OPcache en un sitio web de WordPress.
Sesiones (Gratis)
Potente gestor de sesiones para WordPress con limitador de sesiones multicriterio e informes analíticos completos. Sessions se basa en el gestor de sesiones estándar de WordPress y añade funciones y controles adicionales.
Tráfico (Gratis)
Herramienta de informes analíticos con todas las funciones que brinda una supervisión precisa de todas las llamadas API entrantes y salientes realizadas hacia/desde un sitio de WordPress.
Vibraciones (Gratis)
Solución de monitorización de la experiencia del usuario y del rendimiento de la navegación que analiza el rendimiento percibido desde el punto de vista de los usuarios.
Maestro de llaves (gratis)
Administrador robusto de contraseñas de aplicaciones para WordPress con control de uso basado en roles e informes analíticos completos. Keys Master se basa en la función principal estándar de WordPress «Contraseña de aplicación» y añade funciones y controles adicionales.
Administrador de oEmbed (gratis)
Herramienta de gestión que ayuda a ajustar y activar de forma condicional el productor/consumidor de oEmbed del núcleo de WordPress. oEmbed Manager puede ayudar a lograr el cumplimiento del RGPD.
DecaLog (Gratis)
DecaLog, la pila estándar de facto para la observabilidad de WordPress, proporciona funciones de registro, monitoreo y seguimiento confiables y potentes para el núcleo de WordPress, PHP, bases de datos, complementos y temas.
Administrador de APCu (gratis)
Herramienta completa de gestión y análisis de APCu. APCu Manager le permite supervisar y optimizar las operaciones de APCu en un sitio de WordPress.
Localizador de IP (gratis)
Servicio de detección de país e idioma para WordPress. Rápido, fiable y listo para usar. IP Locator ofrece una API de personalización y detección condicional para el núcleo de WordPress y los plugins que la requieren.
Detector de dispositivos (gratis)
Herramienta de detección y gestión que detecta todos los dispositivos que acceden a un sitio de WordPress. Device Detector proporciona informes analíticos completos, personalización de CSS y una API de detección para el núcleo de WordPress y los plugins que lo requieren.
MailArchiver (gratis)
Herramienta de archivado automático de correos salientes que funciona perfectamente independientemente del proveedor de servicios de correo y la tecnología utilizada: API, SMTP, IMAP o PHP nativo
Estado e información de Apache (gratis)
Herramienta para activar y configurar URLs para los módulos de estado e información del servidor Apache. Además, Estado e información de Apache permite consultar la configuración de Apache desde WPadmin.
Optimización de imágenes
La mayoría de las opciones incluidas en esta sección son gratuitas.
Compresión manual de imágenes
Comprime siempre varias veces (tantas como sea posible) hasta que llegues al punto en que comprimir aún más degrade la calidad de forma inaceptable. He realizado entre 10 y 20 pasadas de compresión diferentes en una imagen sin una degradación apreciable de la calidad. Ejecuta TinyJPG y TinyPNG en las imágenes tantas veces como sea posible antes de cambiar a otro compresor.
Una vez que comprimas una imagen con un servicio alternativo, ¡puedes ejecutarla nuevamente a través de TinyPNG y TinyJPG para realizar más ejecuciones de compresión!
Como ejemplo: TinyPNG > TinyPNG > TinyPNG > TinyPNG > TinyJPG > TinyJPG > TinyPNG > TinyPNG > 11zon > TinyPNG > 11zon > TinyJPG > TinyPNG
Simplemente siga comprimiéndolo y haciéndolo rebotar entre servicios para comprimirlo aún más hasta que no pueda comprimir más la imagen en ningún servicio o la calidad se degrade más allá de un nivel aceptable.
Incluso cuando un servicio agota su capacidad de compresión tras varias ejecuciones, usar otro servicio para generar una imagen aún más comprimida a veces permitirá que el sitio de compresión anterior la comprima aún más. Convertir una imagen a otro formato siempre permitirá usar servicios de compresión para comprimirla aún más una vez convertida.
TinyPNG (Gratis)
Excelente sitio de optimización. Tinypng es único porque permite realizar múltiples pasadas de compresión. Por ejemplo, comprime la imagen una vez, descárgala y arrástrala inmediatamente de vuelta a Tinypng para comprimirla aún más. Tinypng suele realizar al menos tres pasadas. ¡Siempre realiza varias pasadas con Tinypng! Si Tinypng ya no puede reducir el tamaño, procesa la imagen con TinyJPG.
TinyJPG (Gratis)
Increíblemente similar a Tinypng, pero usa un algoritmo ligeramente diferente. Transfiere imágenes a TinyJPG después de TinyPNG (o viceversa).
Comprimir o morir (Gratis)
Compresión por lotes (gratis)
La compresión por lotes convierte archivos PNG a JPG y elimina cualquier efecto de transparencia en el PNG comprimido. Use la compresión por lotes solo si no necesita transparencia PNG.
Fotos comprimidas (gratis)
Comprimir imágenes por lotes
11zon (Gratis)
https://imagecompressor.11zon.com
Conversión gratuita (Gratis)
Nota
Te recomiendo que hagas rebotar las imágenes que estás comprimiendo a través de múltiples servicios, comprimiendo la imagen varias veces.
Es mejor comenzar con una imagen de alta calidad que tenga un tamaño de archivo grande, porque cuando la pasa por un compresor varias veces, la calidad se degrada con cada pasada.
Puedes reducir el tamaño de tus imágenes a menos de 100 kb con este proceso, incluso si la imagen pesa entre 4 y 9 MB. Es un poco complicado, pero funciona. La calidad se degrada con cada compresión, así que es mejor empezar con una imagen ultranítida y de alta calidad para que la degradación no sea perceptible. Una vez que empieces a pesar menos de 100 kb, comprueba la calidad de la imagen después de cada compresión para asegurarte de que se vea aceptable.
Algunos servicios de compresión son mejores que otros y producirán imágenes de mejor calidad en tamaños de archivo equivalentes.
Cuando note que la calidad de la imagen se degrada más allá del punto en que la considera aceptable (la foto se vuelve demasiado granulada), utilice la imagen comprimida con el peso de archivo más bajo (versión más comprimida) de la imagen que aún tenga una calidad visualmente alta.
Lo ideal es que las imágenes comprimidas tengan un peso inferior a 100 kb, si es posible. Cuanto menor sea el tamaño del archivo, mejor. Una diferencia de peso de 300-400 kb podría ser la diferencia entre una puntuación de entre 80 y 90 kb y una de entre 90 y 90 kb (por ejemplo, 490 kb de peso del archivo original frente a 90 kb de la imagen comprimida).
¡El peso del archivo de imagen definitivamente puede hacer una gran diferencia en tus puntajes de velocidad de página, así que comprime tus imágenes tanto como sea posible!
Complementos de compresión de imágenes
Control de calidad de imagen (gratis)
Pequeño complemento muy útil, personalizable y con uso ilimitado y gratuito.
Smush (Gratis y Premium)
Uno de los mejores plugins de optimización de imágenes. Su versión gratuita es extremadamente generosa (imágenes ilimitadas de menos de 5 MB) y cuenta con un conjunto completo de funciones de optimización. Smush Pro es útil porque permite que la optimización de imágenes se ejecute en segundo plano, lo cual es necesario si tienes una gran cantidad de imágenes en tu sitio (si eliges Smush).
PhastPress (Gratis)
Optimización de imágenes:
- Phast optimiza las imágenes utilizando cuantificación PNG (pngquant) y recodificación JPEG (libjpeg-turbo).
- Phast incorpora imágenes pequeñas (<512 bytes) en la página.
- Phast convierte imágenes JPEG a WebP para navegadores compatibles.
- Phast permite la carga diferida nativa para acelerar la carga de páginas y ahorrar ancho de banda.
Imágenes de vuelo (gratis)
Plugin gratuito de optimización de imágenes multifunción con compresión instantánea. Uso ilimitado y gratuito.
ShortPixel (Freemium)
Artículo de ThemeIsle
https://themeisle.com/blog/wordpress-image-optimizer-plugins-compared/#image-compression-winner
ShortPixel es el mejor complemento de optimización de imágenes según las pruebas de comparación de ThemeIsle.
Los dispositivos móviles son el objetivo de optimización, y ShortPixel supera ampliamente a Optimole. Si bien su compresión de imagen es aparentemente inferior a la de Optimole, ShortPixel ofrece mejores resultados generales y una mayor mejora del rendimiento.
Resmush it (Gratis)
El Optimizador de Imágenes ReSmush.it te permite optimizar imágenes de forma gratuita gracias a la API de reSmush.it . reSmush.it ofrece reducción de tamaño de imagen mediante varios algoritmos avanzados. La API acepta archivos JPG, PNG y GIF de hasta 5 MB.
Convertidor de medios (gratis)
Compresión y conversión de imágenes gratuita, totalmente local.
Optimización de imágenes de WP Vivid (freemium)
Plugin de optimización con todas las funciones, la mayoría de ellas gratuitas. 2000 imágenes al mes, cualquier tamaño de imagen inferior a 5 MB. Recomiendo ampliamente probarlo y compararlo con otras opciones.
WP-Optimize (Gratis)
Compresión de imágenes masiva gratuita
Reducir colores
Reducir la cantidad de colores utilizados en una imagen reducirá el tamaño del archivo. Es posible eliminar algunos sin afectar la calidad de la imagen; será necesario un poco de ensayo y error para encontrar los que se encuentren dentro de un umbral aceptable. La cantidad de colores que se pueden eliminar sin afectar la calidad de la imagen varía según la imagen.
Herramientas PNG en línea (gratuitas)
Disminuir el número de colores PNG
https://onlinepngtools.com/decrease-png-color-count
Reducir el recuento de colores de WebP
https://onlinetools.com/webp/reduce-webp-colors
Reducir colores JPG
https://onlinejpgtools.com/reduce-jpg-colors
COD (Comprimir o morir) (Gratis)
Software de compresión instalable
Software de compresión instalable en su dispositivo host (Windows, Mac, Linux)
LibVips (Gratis)
https://github.com/libvips/libvips
LibVips es una biblioteca de compresión y optimización de imágenes con una multitud de funciones, que se extiende más allá de la simple compresión de imágenes, permitiéndole comprimir/optimizar sus imágenes de forma profunda y granular.
GUI oficial
Nip2 (Gratis)
https://github.com/libvips/nip2
WSRV (Gratis)
https://github.com/weserv/images
wsrv.nl es un servicio de almacenamiento en caché y redimensionamiento de imágenes. Sus servidores redimensionan tus imágenes, las almacenan en caché globalmente y las muestran. Utiliza la biblioteca LibVips y la amplía con más funciones.
ImgProxy (Gratis)
https://github.com/imgproxy/imgproxy
Utiliza la biblioteca LibVips, tiene una multitud de funciones de optimización de imágenes.
Documentación
Carga diferida de imágenes y vídeos
La carga diferida evitará que las imágenes que se encuentran debajo del pliegue (fuera de la vista del usuario al cargar el sitio) se carguen hasta que la imagen entre en la vista del usuario (es decir, pueda verla en pantalla). Esto reduce el peso de las páginas que contienen imágenes y acelera significativamente su tiempo de carga. Esto es crucial si tienes un sitio web con muchas imágenes.
Excluir imágenes por encima del pliegue de la carga diferida
Las imágenes que se cargan en la parte superior de la página (imágenes que se cargan dentro de la ventana gráfica sin desplazarse) deben excluirse de la carga diferida. Solo se permite la carga diferida de imágenes en la parte inferior de la página. La mayoría de los plugins detectan automáticamente la ubicación de las imágenes, pero es posible que deba añadir exclusiones manuales. Perfmatters funciona bien (y es el que yo uso) al excluir automáticamente las imágenes que detecta, pero no es perfecto.
Todos los plugins de carga diferida funcionan igual en cuanto a la exclusión de imágenes. Habrá un cuadro de texto donde puedes pegar el nombre del archivo de la imagen para excluirla de la carga diferida; solo revisa la configuración.
Ajustes automáticos de tamaño para imágenes de carga diferida (gratis)
Este complemento implementa la especificación HTML para agregar tamaños=»auto» a las imágenes cargadas de forma diferida.
Para obtener más información, consulte: https://github.com/whatwg/html/issues/4654
Imágenes de vuelo (gratis)
Tiene una función de carga diferida, tanto nativa del navegador como de carga diferida de JavaScript.
Rocket Lazyload (Gratis)
A3 Lazyload (Gratis)
Plugins de optimización de pago
Todos los plugins de caché de pago permiten la carga diferida de imágenes. Muchos plugins de optimización de imágenes también la tienen.
Convertidores de imágenes
Conversor de medios (gratis)
Convierte automáticamente imágenes a WebP.
Conversor de formatos de imágenes por lotes
XnConvert (Gratis)
https://www.xnview.com/es/xnconvert
XnConvert es un conversor de imágenes por lotes multiplataforma rápido, potente y gratuito. Puedes convertir y comprimir tus imágenes, fotos e imágenes fácilmente, y aplicar más de 80 acciones (como redimensionar, recortar, ajustar el color, filtrar y más). Es compatible con todos los formatos de imagen y gráficos comunes (JPEG, TIFF, PNG, GIF, WebP, PSD, JPEG2000, JPEG-XL, OpenEXR, Camera RAW, HEIC, PDF, DNG, CR2). Puedes guardar y reutilizar tus ajustes preestablecidos para otra conversión de imágenes por lotes.
Seleccione el tamaño de imagen correcto
Una vez que hayas subido el archivo a WordPress, este creará automáticamente imágenes en varios tamaños. Si eliges uno de los tamaños más pequeños (mediano, medio-grande, etc.), si usas un creador de páginas como Elementor, puedes seleccionar el tamaño más pequeño (si corresponde) y el tamaño del archivo se reducirá aún más.
También puedes usar un complemento de imágenes adaptables/responsivas para cambiar su tamaño automáticamente.
Asegúrese de que la imagen tenga una calidad aceptable antes de publicarla en su sitio.
Imágenes de vuelo (gratis)
Imágenes voladoras para compresión de imágenes, WebP y carga diferida (gratis):
Puedes utilizar Flying Images para comprimir y optimizar mis imágenes.
Los sirve automáticamente desde una CDN basada en imágenes y los convierte automáticamente al formato WEBP sobre la marcha para los navegadores compatibles. No instale Flying Images si usa la carga diferida de WP-Rockets en lugar de la carga diferida de Flying Images, ya que cargará los archivos multimedia desde su sitio web en lugar de la CDN estática. Si desea usar Flying Images/la CDN estática, la carga diferida debe estar deshabilitada en otros plugins . Solo debe usar un plugin para la función de carga diferida.
Solucionar problemas de CLS relacionados con imágenes
Agregue los atributos de ancho y alto faltantes a sus imágenes
Agregar atributos de alto y ancho faltantes a sus imágenes ayudará a reducir la métrica de velocidad de página de Cambio de diseño de contenido (CLS).
Perfmatters (Pagado)
https://perfmatters.io/docs/missing-width-height-images
Flyingpress (Pagado)
https://docs.flyingpress.com/en/article/add-missing-width-and-height-i1n2w9
Agregar dimensiones de alto y ancho faltantes a sus imágenes reducirá significativamente el Cambio de diseño de contenido (CLS) en los puntajes de Velocidad de página.
¡Optimiza más! Imágenes (Gratis)
Agrega atributos de alto y ancho faltantes para mejorar las puntuaciones CLS.
Especificar las dimensiones de la imagen faltante (gratis)
Complemento gratuito, la única función es agregar las dimensiones de la imagen faltante
JCH Optimize (Gratis)
Complemento de optimización de funciones múltiples que puede agregar atributos de alto y ancho faltantes
Phastpress (Gratis)
Complemento de optimización multifunción, también puede agregar atributos de alto y ancho faltantes
Sin embargo, es necesario agregar exclusiones de imágenes en el cuadro de exclusión a todas las imágenes que se cargan en el contenido por encima del pliegue para que no se carguen de forma diferida en la configuración de WP-Rockets si usa su carga diferida.
No conviene cargar de forma diferida los archivos que se encuentran en la parte superior de la página, ya que esto ralentizará artificialmente su tiempo de carga, ya que se cargarán después del archivo js de carga diferida. Esto afectará negativamente el rendimiento si no se añaden las exclusiones, ¡así que no se olvide! Si no se olvida de añadir las exclusiones, la carga diferida mejorará significativamente el rendimiento de su sitio web.
Cambio de tamaño de la imagen
Insanidad (Completamente gratis)
Características:
- Escala automáticamente las cargas de imágenes grandes a un tamaño más «sensato»
- Función de cambio de tamaño masivo para cambiar el tamaño de las imágenes existentes
- Cambiar el tamaño de las imágenes de forma selectiva directamente en la Biblioteca multimedia (Vista de lista)
- Permite la configuración del ancho/alto máximo y la calidad JPG
- Opcionalmente, convierte archivos BMP y PNG a JPG para un mayor ahorro.
- Una vez habilitado, Imsanity no requiere ninguna acción por parte del usuario.
- Utiliza las funciones de escalado de imágenes integradas de WordPress
Optimizador de imágenes en masa (completamente gratuito)
https://wordpress.org/plugins/bulk-image-resizer
Comprime imágenes, las redimensiona y las convierte a WebP. Totalmente gratis, sin límites de tamaño de imagen, todo en el servidor, sin servicios de terceros.
Tamaños de imágenes simples (gratis)
Este plugin permite crear tamaños de imagen personalizados para tu sitio. Modifica el tamaño de tu tema directamente en la página de opciones multimedia.
Mejores tamaños de imagen (completamente gratis)
Este complemento le permite:
- Deshabilitar tamaños de imágenes generados automáticamente
- generar dinámicamente solo los tamaños de imagen necesarios solo para las imágenes necesarias
- Eliminar tamaños de imágenes generados desde este complemento individualmente o todos juntos
- Especifique diferentes puntos focales que estarán en el foco al crear versiones recortadas de la imagen
- Detecta automáticamente el punto focal mediante un algoritmo de detección de rostros.
- Deshabilitar el umbral de tamaño de imagen grande, por lo que las imágenes más grandes que 2560x2560px no se reducirán
ImgProxy (Gratis)
https://github.com/imgproxy/imgproxy
Imgproxy es un servidor independiente rápido y seguro para redimensionar, procesar y convertir imágenes. Los principios que rigen Imgproxy son la seguridad, la velocidad y la simplicidad.
Imágenes adaptativas
Imágenes adaptables (gratis)
Complemento gratuito de generación de imágenes adaptativas
Imágenes adaptables de ShortPixel (freemium)
Habilitar imágenes adaptables para Gutenberg (gratis)
Imágenes de vuelo (gratis)
Complemento de optimización de imágenes gratuito con interesantes funciones como CDN de imágenes gratuito, compresión de imágenes sobre la marcha, conversión webP sobre la marcha e imágenes adaptables.
Precargar imágenes
Carga diferida, precarga y más (gratis)
Se puede agregar el atributo de precarga así como el atributo de carga ansiosa.
La precarga es más potente que la prioridad de búsqueda y tiene prioridad sobre este atributo. Si necesita descargar una imagen lo antes posible, use la precarga en lugar de la prioridad de búsqueda.
Precargar imágenes destacadas (gratis)
Precarga automáticamente imágenes destacadas
Pre-Fiesta (Gratis)
Pre-Party puede agregar una variedad de atributos de carga, incluido el atributo de precarga.
Perfmatters (Pagado)
https://perfmatters.io/docs/preload
Perfmatters tiene una función de precarga integrada para imágenes
Prioridad de obtención de imágenes
Atributos de imagen personalizados (gratis)
Otro complemento para agregar atributos de imagen (incluida la prioridad de obtención).
Priorizador de imágenes (gratis)
Este plugin optimiza la carga de imágenes que constituyen el elemento LCP (Largest Contentful Paint), incluyendo tanto elementos img como elementos con imágenes de fondo CSS (donde existe un atributo style con la propiedad background-image). Diferentes puntos de interrupción en el diseño adaptable de un tema pueden resultar en que diferentes elementos sean el elemento LCP. El elemento LCP de cada punto de interrupción se captura para que se agreguen enlaces de precarga con alta prioridad de búsqueda y media queries, que priorizan la carga de la imagen LCP específica para la ventana gráfica del visitante.
Complemento Fetch Priority (gratuito)
https://wordpress.org/plugins/fetchpriority
Plugin Fetch Priority, desarrollado por el equipo de rendimiento de WordPress. Aplica automáticamente el atributo Fetch Priority a una sola imagen, determinada automáticamente. No requiere ajustes ni configuración.
Si necesita un control granular sobre el atributo de prioridad de obtención, le recomiendo comprar Perfmatters.
Perfmatters (Pagado)
https://perfmatters.io/docs/fetch-priority
Perfmatters le brinda control explícito sobre qué imágenes tienen el atributo de prioridad de búsqueda
SpeedSize (Pago)
Características únicas e interesantes. Podría ser bueno, pero aún no he tenido la oportunidad de probarlo.
Decodificación de imágenes
Imagen asíncrona de WordPress
Imagen en línea Base64 (gratis)
Con Inline Image Base64 puedes incorporar imágenes específicas directamente en el HTML como base64.
Nota: Use esto solo con imágenes extremadamente pequeñas, de menos de 20-30 kb (idealmente, menos de 10 kb). Mantenga el tamaño de archivo de las imágenes integradas aún más pequeño, si es posible.
Regeneraciones de miniaturas
Regenerar miniaturas (gratis)
Regenerar miniaturas le permite regenerar todos los tamaños de miniaturas de una o más imágenes que se hayan cargado en su biblioteca multimedia.
WebP y AVIF
Conversor de medios (gratis)
Convierte automáticamente imágenes a WebP.
CompressX (Gratis)
Plugin de conversión WebP y AVIF del equipo de WPVivid. Completamente gratuito, la compresión y conversión se realizan localmente en tu sitio.
QuickWebP (Gratis)
Plugin de conversión WebP totalmente gratuito. Convierte completamente a WebP, sin necesidad de respaldo.
PhastPress (Gratis)
Optimización de imágenes:
- Phast optimiza las imágenes utilizando cuantificación PNG (pngquant) y recodificación JPEG (libjpeg-turbo).
- Phast incorpora imágenes pequeñas (<512 bytes) en la página.
- Phast convierte imágenes JPEG a WebP para navegadores compatibles.
- Phast permite la carga diferida nativa para acelerar la carga de páginas y ahorrar ancho de banda.
Convertidores de formatos de imagen de última generación
WebP Express (gratis)
Sirva imágenes WebP generadas automáticamente en lugar de jpeg/png a los navegadores que admiten WebP.
WebP Express Plus (de pago)
Complemento para WebP Express que añade funciones adicionales. Requiere que el complemento WebP Express esté activo.
AVIF Express (Gratis)
Al subir, las imágenes se convierten al formato AVIF. El formato AVIF es nuevo y no es compatible con todos los navegadores. Las imágenes de respaldo están en formato WebP.
Miniaturas de imágenes remotas (gratis)
WP Remote Thumbnail es un plugin muy ligero para WordPress que se configura sin necesidad de configuración y se instala con un solo clic. Con este plugin, puedes configurar fácilmente cualquier imagen externa como imagen destacada de cualquier entrada/página o incluso de tipos de entradas personalizados.
Nota: asegúrese de usarlo junto con un complemento de sugerencias de recursos (pre-party) para agregar atributos de precarga y preconexión al dominio de terceros.
Almacenamiento dinámico en caché de imágenes
Almacenamiento local con blobs
Base de datos indexada
Pasos de implementación
Abrir una base de datos: Usa JavaScript para abrir una base de datos IndexedDB. Crea un almacén de objetos para tus imágenes si aún no existe.
Obtener y almacenar imágenes: Al obtener una imagen de la galería remota, guárdela en el almacén de IndexedDB. Puede que le interese codificarla con un identificador único, como una URL o un ID personalizado.
Revisar la caché primero: Antes de obtener una imagen, comprueba si existe en la caché de IndexedDB. Si existe, cárgala desde allí.
Estrategia de actualización: Decide una estrategia para actualizar las imágenes en caché. Para fotos en tiempo real, podrías necesitar una comprobación periódica para ver si hay versiones más recientes disponibles.
Filtros de imagen
Filtros de imagen fáciles (gratis)
Complemento ligero y gratuito para agregar filtros de imagen
Imágenes gratuitas de alta calidad
Imágenes instantáneas (gratis)
Imágenes gratuitas de alta calidad
Marca de agua de imagen
Marca de agua de imagen (gratis)
Complemento de marca de agua de imágenes ultraligero.
Optimización de iconos
Iconos SVG gratuitos
Puedes descargar SVG gratis desde aquí:
FontAwesome (Gratis)
https://fontawesome.com/download
FlatIcon (Gratis)
Buscador de iconos (gratis)
Comprimir archivos SVG
Utilice Vecta.io y SVGOMG juntos para reducir el tamaño de sus íconos SVG tanto como sea posible.
Vecta.io (Gratis)
Compresor SVG
SVGOMG (Gratis)
https://jakearchibald.github.io/svgomg
Otro optimizador SVG. Recomiendo usarlo junto con Vecta.io.
Optimización de vídeo
Carga diferida de iframes
Integración diferida (gratuita)
El complemento Lazy Embed pospone la carga de cualquier recurso necesario para la reproducción del vídeo hasta que se solicita su reproducción. Para ello, añade un atributo srcdoc al iframe, que se muestra en lugar del contenido normal del iframe.
Otros complementos
Además de Lazy Embed, muchos plugins permiten la carga diferida de iframes de vídeo. Perfmatters, Flyingpress y una amplia variedad de otros plugins gratuitos también pueden hacerlo.
Compresión de vídeo
Freno de mano (gratis)
Un programa instalable de código abierto que puede comprimir tus vídeos.
Convierte vídeos a WebM para comprimir aún más el tamaño del archivo de vídeo
Los archivos de vídeo WebM son aproximadamente un 30 % más pequeños que los MP4. Handbrake te permite convertir tus vídeos al formato WebM. WebM es el equivalente en vídeo de las imágenes WebP.
Compresor de vídeo gratuito (gratis)
https://www.freeconvert.com/video-compressor
Artículo sobre optimización de vídeo de 10web.io
Excelente artículo con más consejos de optimización para sitios con vídeos.
Complementos de reproductor de vídeo
Presto Player (Gratis)
Reproductor de vídeo ligero. Compatibilidad con vídeos HTML5, YouTube y Vimeo.
Super Video Player (Gratis)
Super Video Player es un complemento de reproductor de video autohospedado, liviano y totalmente personalizable que admite MP4/OGG, así como múltiples pistas de subtítulos o archivos de subtítulos.
Reproductor de vídeo HTML5 (gratis)
Otro reproductor de vídeo ligero.
Paquete de videos (gratis)
Reproductor de vídeo ligero, alojamiento local.
Compresor de animación Lottie
Plugin ligero de animación Lottie
AM Lottie Player (Gratis)
El reproductor Lottie gratuito más completo hasta el momento.
AM LottiePlayer es fácil de usar, liviano y le brinda control total sobre cómo implementar animaciones nítidas y vectorizadas en su sitio web.
Optimización de Lottie
Lottiemizer (Gratis)
Comprime tus animaciones de Lottie
Optimizador JSON de Lottie (gratis)
https://lottiefiles.com/tools/lottie-json-to-optimized-lottie-json
Optimice sus archivos JSON de Lottie.
dotLottie (Gratis)
dotLottie es un formato de archivo de código abierto que agrupa uno o más archivos Lottie y sus recursos asociados en un solo archivo. Son archivos ZIP comprimidos con el método de compresión Deflate y llevan la extensión «.lottie».
Cómo crear animaciones interactivas de Lottie
Tutorial de Youtube (Gratis)
Tutorial sobre cómo hacer que Lottie sea interactivo
GIFs
Conversión gratuita (Gratis)
https://www.freeconvert.com/gif-compressor
Ezgif (Gratis)
Otro compresor de gifs
Compresor de GIF (gratis)
Compresor de GIF
Xconvert (Gratis)
https://www.xconvert.com/compress-gif
ILoveIMG (Gratis)
https://www.iloveimg.com/compress-image/compress-gif
Veed.io (Gratis)
https://www.veed.io/tools/video-compressor/gif-compressor
Animately (Gratis)
https://animately.co/tools/compress-gif
Optimizar incrustaciones
Optimizador de incrustación (gratis)
El propósito de este plugin es optimizar el rendimiento de las incrustaciones en WordPress, como vídeos de YouTube, TikToks, etc. Inicialmente, esto se logra mediante la carga diferida de las mismas solo cuando aparecen.
Esto mejora el rendimiento, ya que las incrustaciones suelen consumir muchos recursos, por lo que su carga diferida garantiza que no compitan con los recursos al cargar la página. Se planean otras optimizaciones para el futuro.
Temas
Usuarios de Pagebuilder
Tu tema te está frenando
Si usas un Page Builder, los temas son un lastre . No aportan absolutamente nada al diseño, ya que todo el CSS y el JavaScript necesarios para una página los genera el propio Page Builder. Astra, por ejemplo, insertará cientos de kb de código innecesario e inútil en tu HTML, CSS y JavaScript cuando no necesitas ni una sola línea. Eliminar un tema pesado es problemático en sí mismo. Incluso sin usar toda la funcionalidad del tema, deshabilitar los archivos CSS y JavaScript generados por el tema dañará el diseño y la funcionalidad de tu sitio, ya que se entremezclan con el CSS del Page Builder, lo que crea una cadena de dependencias que impide eliminar el CSS y el JavaScript en línea del tema sin afectar el sitio.
El sistema de temas es fundamental en WordPress y no se puede desactivar, por lo que no puedes quedarte sin tema. Debes seleccionar el tema más optimizado que cargue la menor cantidad de código desde el principio para minimizar el impacto del sistema de temas al máximo. Aun así, necesitarás eliminar el CSS no utilizado y el código JavaScript de retraso con un plugin, pero los resultados serán mucho mejores.
Si usas un constructor, crea la página desde cero o con plantillas importadas directamente en el constructor. Para Elementor, por ejemplo, se trata de «kits de plantillas» o plantillas de la biblioteca de plantillas.
Nunca uses complementos de tema ni ninguna función que este ofrezca, y desactiva las opciones que afecten al rendimiento desde el panel de configuración si es posible. Todo esto añade sobrecarga que se cargará en la interfaz. Los complementos instalados a través del tema (generalmente ocurre con temas de pago) son adecuados si están bien optimizados, pero se deben evitar las funciones específicas del tema.
Mi recomendación es usar Hello Elementor o Picostrap. Ambos consumen muy poco código en el frontend. Personalmente, prefiero Hello Elementor; el archivo zip del plugin es tres veces más pequeño que el de Picostrap y consume muy poco código. Sin embargo, Picostrap es sin duda una opción fantástica, y ambos son increíblemente rápidos. Recomiendo probar ambos para ver cuál se adapta mejor a tu caso.
Temas con rendimiento optimizado
Hola Elementor (Gratis)
Hola Elementor es un tema básico muy, muy ligero.
Picostrap (Gratis)
Picostrap es un tema muy ligero. Si estás empezando a crear tu sitio web, te lo recomiendo encarecidamente.
Temas a evitar
Astra (Gratis y Pro)
Ya no puedo recomendar Astra. Evita usar Astra para nuevas compilaciones si tu sitio web aún no está basado en él. Astra añade una cantidad desmesurada de CSS y JavaScript, lo que reduce drásticamente el rendimiento de PageSpeed. Añade más de 300 KB de JavaScript/CSS a un sitio web optimizado con Beaver Builder. Retrasar el JavaScript también afectará la funcionalidad (encabezado, menús, etc.). No lo uses siempre que sea posible.
Optimización de Astra
Si debe utilizar Astra, aquí hay algunos pasos que puede seguir para optimizar el rendimiento de Astra.
No necesitas la versión pro, hará que tu sitio sea más lento.
Según mi experiencia, estas son las configuraciones óptimas para Astra que deberías habilitar con Asset Cleanup. Si tu experiencia puede variar, prueba a fondo y vuelve a habilitar los archivos si es necesario:
También deberías descargar el tema secundario astra: