Mejora la velocidad de carga de WordPress con la propiedad CSS contentvisibility

3 visibilidad dinámica y condiciones dinámicas gratuitas

–cisD: 100vw / 1920 * 1720.4271240234375;Lo que hacen las fórmulas es escalar la altura cacheada de la fila dividiendo la anchura actual de la ventana gráfica por la anchura de la ventana gráfica en el momento de guardar la página (con mi page builder) y multiplicando eso por la altura de la fila en el momento de guardar la página.Para aplicar el lazy-rendering correctamente, decidí que es mejor aplicar content-visibility: auto sólo a las filas que tienen contain-intrinsic-size especificado. El CSS se coloca en línea en la parte superior de <head>, porque es CSS crítico. @media (max-width: 575.98px) {

Usar content-visibility: auto; mientras se salta a anclas o por cantidades específicas no funciona correctamente, así que aplicaré la clase disable-lazy-render al body siempre que el usuario quiera saltar a un ancla en particular, o cuando use atajos de teclado como Page up, Page down, Home y End. Así es como lo hice:function twParsedUrl(url) {

El relleno básicamente permite a los elementos desbordar la caja de contenido y entrar en la caja de relleno sin salirse del modelo de caja en su conjunto y quedar cortados.Rendered heights reset after scrolling out of rangeDespués de renderizar una fila que contiene content-visibility: auto;, la altura renderizada se restablecerá después de desplazarse fuera del rango. Esto significa que volverá a la altura que has proporcionado para contain-intrinsic-size. Esto se puede solucionar desactivando el renderizado perezoso para las filas que ya han entrado en la ventana gráfica, incluyendo el umbral del 50% de la altura de la ventana gráfica. Así es como lo he conseguido:var windowInnerHeight = window.innerHeight;

  TubePress: Galerías de Vídeos en tu Blog WordPress

Lazy Load Text | Optimizar la velocidad del sitio web para un mejor rendimiento

Para permitir .child-class para ese párrafo, introduciría .child-class en el cuadro de texto. Aunque referirse a ella con .parent-class .child-class puede entenderse en otros contextos, no funcionará para UCSS Allowlist porque no aparece así en el código CSS. Tenga cuidado con las pseudoclases (como :hover, :active, :visited, etc.). El motor UCSS ignora los selectores de pseudoclases en el contenido CSS (con la excepción de :not). Si desea incluir un selector de pseudoclase en el resultado de UCSS, debe añadir el selector principal a UCSS Allowlist, pero no incluya la pseudoclase ni los dos puntos (:). Ejemplo .example-class {

Carga perezosa de imágenes y carga asíncrona de imágenes

La propiedad CSS content-visibility controla si un elemento renderiza o no su contenido, además de forzar un fuerte conjunto de contenciones, permitiendo a los agentes de usuario omitir potencialmente grandes cantidades de trabajo de diseño y renderizado hasta que sea necesario.

  Impresionante recopilación de recursos WordPress

El siguiente ejemplo muestra el uso de auto para omitir el pintado y renderizado de secciones fuera de pantalla. Esto ayuda tanto a la carga como a las interacciones en la página, ya que el contenido fuera de la ventana gráfica no se renderiza.

@viewportDeprecated: Esta función ya no se recomienda. Aunque algunos navegadores todavía la soportan, puede que ya haya sido eliminada de los estándares web relevantes, puede que esté en proceso de ser eliminada, o puede que sólo se mantenga por motivos de compatibilidad. Evite utilizarla y actualice el código existente si es posible; consulte la tabla de compatibilidad al final de esta página para orientarse. Tenga en cuenta que esta función puede dejar de funcionar en cualquier momento.min-zoom (@viewport) css reference

Mejora la velocidad de carga de wordpress con la propiedad css contentvisibility online

Al fin y al cabo, hay otras optimizaciones, como la mejora de los tiempos de respuesta del servidor, la reducción del tamaño de los archivos y la priorización de las cargas de archivos, que proporcionan una mejora visible inmediata. Además, la renderización es un proceso interno de los navegadores al que los desarrolladores web no tienen acceso directo.

Ahora es aún más fácil influir en los procesos de renderizado de los navegadores gracias a la nueva propiedad CSS content-visibility. Básicamente, esta propiedad cambia la visibilidad de un elemento y gestiona su estado de renderizado.

  ¡Chicos!, hora de ir a clases

La capacidad clave de la visibilidad del contenido es que nos permite posponer la renderización de los elementos HTML que elijamos. Por defecto, los navegadores renderizan todos los elementos dentro del árbol DOM que pueden ser vistos por el usuario.

Los usuarios pueden ver los elementos que caben en su ventana gráfica y ver los demás elementos de la página desplazándose. Renderizar todos los elementos a la vez permite al navegador calcular las dimensiones de una página correctamente, manteniendo el diseño de la página y la barra de desplazamiento consistentes en toda la página.