35 optimizaciones de rendimiento para su sitio de WordPress
Una página creada con Canvas descarga el CSS y el JavaScript de los bloques que muestra, y nada más. Además, hay 35 optimizaciones, cada una con un interruptor que usted controla, con valores predeterminados conservadores y una explicación clara de lo que hace.
Actualizado el
Carga de recursos por bloque
La mayoría de los temas incluye una hoja de estilos grande y un script grande, y cada página asume el costo de cada función del tema. Canvas asigna cada uno de sus 314 bloques al CSS y al JavaScript que necesita ese bloque, y luego encola la unión de lo que la página realmente renderizó.
- Una página de precios nunca descarga el script del control deslizante
- Una página sin formulario nunca descarga el controlador de formularios
- El editor carga los estilos de los bloques de la misma forma
- Nada que configurar y ninguna forma de desactivarlo por accidente
Declarado, no adivinado
Cada bloque declara sus propios recursos. El mapa está en el bloque, así que no hay una lista central que alguien pueda olvidar actualizar.
Funciona con los bloques principales
Los bloques nativos y de terceros conservan su propio comportamiento de carga. Canvas no toma el control de sus recursos ni compite con WordPress por ellos.
Las plantillas también cuentan
Las cabeceras, los pies de página, los títulos de página y los sliders también son bloques, así que una página que usa una cabecera sencilla no carga el código del Megamenú.
Nada que comprar
La carga condicional no es una función premium ni un complemento. Así funciona la biblioteca en todos los planes y con una licencia vencida.
35 optimizaciones, agrupadas según lo que modifican
Aquí no hay magia ni nada oculto. Cada una hace algo concreto y verificable con la página que envía WordPress.
Cargando 7
Evite que el CSS y el JavaScript bloqueen el primer renderizado, y empiece a cargar la siguiente página antes.
- Cargar las hojas de estilo no críticas de forma asíncrona
- Diferir el JavaScript no crítico
- Retrasar JavaScript hasta la primera interacción
- Precargar la imagen más grande que aparece por encima del pliegue
- Preconectar con los orígenes que usará la página
- Prefetch de DNS para hosts de terceros
- Precarga especulativa, de modo que la siguiente página se descargue antes de que se haga clic en ella
Fuentes 3
El texto sigue siendo legible mientras llega una fuente web, y las fuentes de Google no tienen por qué ser una solicitud de terceros.
- Añada font-display swap a sus fuentes web
- Precargar las fuentes que necesita la primera pantalla
- Servir las fuentes de Google desde su propio servidor
Medios 6
Las imágenes son lo más pesado de la mayoría de las páginas y lo más fácil de hacer mal.
- Carga diferida de imágenes por debajo del pliegue
- Carga diferida de iframes e incrustaciones
- Defina la calidad JPEG que genera WordPress
- Limitar el ancho máximo de las imágenes cargadas
- Controle los conjuntos de imágenes responsivas que escribe WordPress
- Controle qué tamaños de imagen se generan, o si se generan
Limpieza 8
WordPress incluye funciones que todos los sitios tienen que cargar y que pocos sitios usan.
- Eliminar cadenas de consulta de los recursos estáticos
- Desactivar los scripts y estilos de emojis
- Desactivar el descubrimiento de oEmbed y el script de incrustación
- Desactivar Dashicons en la parte pública del sitio
- Desactivar XML-RPC
- Desactivar las fuentes RSS
- Eliminar jQuery Migrate
- Desactivar pingbacks propios
Base de datos 5
El lado administrativo de un sitio lento: revisiones, autoguardados y un heartbeat que nunca se detiene.
- Limitar cuántas revisiones conserva cada entrada
- Configure el intervalo de guardado automático
- Limitar la frecuencia o desactivar el heartbeat del área de administración
- Elimina de la base de datos las revisiones, los transitorios y el spam
- Restringir la API REST a los usuarios con sesión iniciada
WooCommerce 5
Una tienda carga sus scripts en cada página del sitio, incluidas las que no venden nada.
- Quitar el JavaScript de WooCommerce en páginas sin contenido de tienda
- Desactivar el seguimiento de atribución de pedidos
- Detener la consulta del script de fragmentos del carrito en cada página
- Dejar de cargar la biblioteca de fortaleza de contraseñas fuera de las páginas de cuenta
- Dejar de cargar la biblioteca Select2 incluida fuera del proceso de pago
Reescritura de la red de distribución de contenido 1
Apunte sus hojas de estilo, scripts, imágenes y fuentes a una red de entrega de contenido que ya paga, reescribiendo sus direcciones al renderizar la página. Canvas no le vende una red y no canaliza su tráfico a través de la nuestra.
Esto suma 35 interruptores en total, y las cinco de WooCommerce solo aparecen cuando WooCommerce está activo. Más sobre la integración con la tienda.
Cada una de ellas es un interruptor, y los valores predeterminados son conservadores
Canvas activa lo que es seguro para cualquier sitio web y deja el resto en sus manos, con el motivo escrito junto al control. La única opción que suele ser mala idea lo indica en el panel, justo donde se encuentra cuando decide.
Bases de SEO y accesibilidad
Una página que carga rápido, pero que no puede leerse, rastrearse ni usarse con teclado, no está terminada. Todo esto viene incluido en el tema, en todos los planes, sin nada reservado para planes superiores.
Metadatos de su contenido
Títulos, descripciones, tarjetas para redes sociales, URL canónicas, reglas de robots y un mapa del sitio, todo derivado de la página tal como se muestra. No hay una segunda copia de su contenido que mantener actualizada.
16 tipos de esquema
Organization, WebSite, WebPage, Person, migas de pan, Product, Brand, Offer, Review y calificación, dirección, coordenadas geográficas, horario de atención y búsqueda en el sitio, que se emiten donde corresponden.
Puntos de referencia semánticos
Regiones de cabecera, navegación, principal y pie, un enlace para saltar al contenido, encabezados que siguen su orden y foco visible en todo lo que se puede recorrer.
Menús con teclado
Los menús, los megamenús, los paneles laterales y las ventanas modales se abren, se mueven y se cierran con el teclado, y las animaciones respetan la preferencia de movimiento reducido del visitante.
La accesibilidad, la seguridad y la exportación de datos nunca son funciones premium. Siguen disponibles con una licencia vencida, porque un sitio web que deja de ser utilizable es un problema de soporte, nunca una decisión de licencias.
Cómo verificamos esto
Las afirmaciones sobre velocidad y accesibilidad son fáciles de hacer y fáciles de comprobar. Nosotros verificamos las nuestras, y aquí le explicamos cómo.
Las páginas se comparan con sus diseños en un navegador real
Cada página de demo se renderiza en un navegador y se mide frente al diseño de origen: altura del documento, anchos de sección, espaciado calculado y todo lo controlado por JavaScript, medido una vez que se ha ejecutado, nunca en la primera pintura.
Este sitio web se audita en tres anchos de pantalla
Cada página se somete a axe-core frente a WCAG 2.1 A y AA a 1440, 1024 y 390 píxeles, junto con las comprobaciones que axe no realiza: un único h1, niveles de encabezado que nunca se saltan, los cuatro landmarks, un enlace de salto que funciona, ningún desbordamiento horizontal, ningún texto menor de 12 píxeles, enlaces que se leen como texto y áreas táctiles de al menos 24 píxeles.
Lo que Canvas necesita para funcionar
WordPress
Canvas se basa en el editor de bloques, así que necesita un WordPress con el Editor del sitio. Versión 7.1 o posterior.
PHP
PHP 7.4 o superior. Una versión actual de PHP es la mejora de velocidad más económica que la mayoría de los sitios puede hacer.
Probado hasta
Canvas se prueba con WordPress 7.1, y se publica una actualización después de cada versión de WordPress.
Acerca del rendimiento
Incluida la que más nos preguntan, por eso no hay puntuaciones en esta página.
¿Todavía necesito un plugin de caché?
Probablemente sí, y esa es la respuesta honesta. Canvas controla lo que controlan un tema y WordPress: qué recursos carga una página, cómo se comportan las fuentes y las imágenes, y cuánto trabajo realiza la base de datos. La caché de página, la caché de objetos y la entrega por edge corresponden a su proveedor de hosting o a un plugin de caché. Son tareas distintas, así que usar ambos es la configuración habitual.
¿Activar estas opciones romperá mi sitio web?
Cada interruptor es reversible, y los que tienen más probabilidades de entrar en conflicto con otro plugin vienen desactivados. Cada interruptor explica qué hace y cuándo conviene no tocarlo, y el ajuste realmente riesgoso lo indica en el panel. Actívelos de uno en uno y recargue la web pública después de cada uno.
¿Tengo que configurar la carga de recursos por bloque?
No, no hay nada que buscar ni activar. Así funciona la biblioteca de bloques. Cada bloque declara el CSS y el JavaScript que necesita, y la página encola la unión de lo que realmente se renderizó.
¿Los demos llegan optimizados?
Una importación de Demo para todo el sitio adopta las Opciones del tema del Demo, e incluye las opciones de rendimiento, así que un Demo parte de la configuración con la que se creó y revisó. Puede cambiar cualquiera de ellas después.
¿Por qué esta página no publica puntuaciones de velocidad?
Porque una puntuación obtenida en una prueba sintética en nuestro hardware no le dice nada sobre su hosting, sus plugins, sus imágenes ni sus visitantes. Lo que publicamos es exactamente lo que hace cada optimización, para que usted la active y mida su propio sitio en su propia infraestructura.
Un sitio web rápido que todavía puede editar
Todos los planes incluyen la misma biblioteca de bloques, las mismas 35 optimizaciones y la misma carga condicional de recursos. No existe un nivel de rendimiento.