Cerrar menu
Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook X (Twitter) Instagram
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Facebook X (Twitter) Instagram Pinterest Youtube
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Ver todas las categorias
    7. Post promocionado
  • Smartphone

    Comprendre les Différences entre les Chargeurs USB et les Chargeurs USB-C : Un Guide Complet

    Huawei Smartphones: Las Mejores Ofertas del Black Friday para Aprovechar

    Gadgets imprescindibles para tu configuración de oficina en casa

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    Tendencias en sistemas operativos en smartphone

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo

    Comprendre les Différences entre les Chargeurs USB et les Chargeurs USB-C : Un Guide Complet

    Huawei Smartphones: Las Mejores Ofertas del Black Friday para Aprovechar

    Gadgets imprescindibles para tu configuración de oficina en casa

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    Cómo limpiar la unidad C de archivos innecesarios

    Descubre el misterioso mundo del hash de archivos: ¡todo lo que necesitas saber!

    Los componentes fundamentales que todo PC debería tener

    Que es la tecla TAB

    Cifrado | Seguridad Local

    Maximiza tu productividad: Descubre el sistema interactivo que revolucionará la gestión de proyectos en tu empresa

    Cómo limpiar la unidad C de archivos innecesarios

    Como jugar online y resolver un sudoku

    Que es la tecla TAB

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Benefits Of Vertical Dual Monitors For Coding And Programming

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    Cifrado | Seguridad Local

    Descubre el misterioso mundo del hash de archivos: ¡todo lo que necesitas saber!

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    La ciberseguridad: Vital Para Las Apuestas Online en España

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    ¿Aburrido de tu viejo televisor? Descubre las últimas tendencias en televisores

    Generador de Video IA: La Revolución en la Creación Audiovisual

    Los últimos celulares para que estés a la última

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo

    Desarrolla un cuerpo fuerte y saludable

    ¿Qué es la forma física?

    Mejora los resultados de tu entrenamiento de estabilidad y fuerza

    Consejos para maximizar las caminatas diarias

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Consejos para aplicar pestañas postizas

    Consejos para una piel perfecta este invierno

    La nutrición y un cabello saludable

    Cosas que le pasan a tu cuerpo cuando comes salmón todos los días

    Batidos de proteínas pueden ayudar a mejorar sus hábitos alimenticios

    Batidos de proteinas - Una guía para principiantes

    Snacks nutritivos para cada antojo

    Inspiración de traje de otoño

    La dura verdad sobre las modelos de talla grande

    Razones por las que las marcas de moda de lujo son tan caras

    Cuales son las mejores frutas para adelgazar

    Como enseñar a leer y a escribir

    Como generar cuentas Disneyplus

    Calcular porcentajes con la Calculadora de Windows 10

    Bricolaje para la decoración del hogar

    Top 10 de posturas de yoga

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Inspiración de traje de otoño

    Consejos de belleza para lucir fresca en el verano

  • Marketing

    ¿Sirven de algo los diseñadores Web?… ¿y los redactores de contenido?

    ¿Qué es un Link Dofollow?

    ¿Qué es Nofollow?

    ¿Qué es el remarketing?

    ¿Qué es el posicionamiento web (SEO) y lo necesito para mi sitio web?

  • Juegos

    Para qué se pueden usar las Gafas VR PS4

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Sony prohíbe cuatro juegos de terceros en Xbox

    Prepárate para el futuro: Project Trinity llega a finales de 2024

  • Herramientas
Búsqueda extendida

Escriba arriba y presione Enter para buscar.

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK

o con Email

¿Has olvidado tu contraseña?

Diseño Web » Aprende cómo mejorar la velocidad de carga y L con el parámetro FetchPriority

Aprende cómo mejorar la velocidad de carga y L con el parámetro FetchPriority


0 Marzo 31, 2023
Compartir

Compartir
Twitter Pinterest LinkedIn Tumblr WhatsApp Email

¿Cómo se procesa y analiza el L de una página web? El jаvascript, el CSS, las imágenes, iframes y otros recursos pueden influir en la velocidad de carga de una web, lo que afecta la primera impresión de los s y la usabilidad general. 


Aprende cómo mejorar la velocidad de carga y L con el parámetro FetchPriority

Por eso, Google creó la métrica de pintado del contenido principal (L) para medir la rapidez con la que se muestra el contenido principal. El contenido principal para L suele ser el elemento más grande ubicado encima del pliegue (Above the fold). Esto puede ser una imagen, un video o un bloque de texto. De todas estas opciones, el texto es la mejor opción para el rendimiento de L, ya que se carga y procesa más rápido que un vídeo o imagen debido al peso de los archivos.


Los navegadores siguen una ruta crítica de renderizado para analizar el documento HTML y los recursos a los que hace referencia (CSS, JS, imágenes, etc.) para mostrar el contenido en la pantalla. Los navegadores construyen un árbol de renderizado usando DOM y CSSOM, y la página se procesa una vez que todos los recursos que bloquean el renderizado, como CSS, archivos de fuentes y scripts, han sido analizados y procesados.

<!-- Cargue la hoja de estilo que hará referencia a la imagen L -->
<link rel="stylesheet" href="styles.css">

<!-- Precargue la imagen L con una alta prioridad de búsqueda para que comience a cargarse con la hoja de estilo. -->
<link rel="preload" fetchpriority="high" as="image" href="tu-imagen.webp" type="image/webp">
<img fetchpriority="high" src="tu-imagen.webp" alt="" width="450" height="338">

Es una buena idea configurar fetchpriority="high" a un elemento <img> si cree que es probable que sea el elemento L de su página.



Los navegadores tienen una jerarquía predeterminada de recursos para descargar y procesar. Esto comienza con el documento HTML, que se solicita y descarga primero. Luego, los navegadores se basan en estas prioridades predefinidas para determinar qué descargar a continuación y en qué orden. Esto asegura que los recursos se carguen de forma óptima para una experiencia de óptima.


Los recursos deben priorizarse de la siguiente manera: el recurso principal (normalmente un documento HTML) debe tener la prioridad más alta, seguido por los archivos de fuentes, scripts (si se solicitan antes de cualquier archivo de imagen no precargado) y elementos con el parámetro preload. Las imágenes de la parte visible del dispositivo deben tener prioridad media. Los scripts con el parámetro async, los medios e imágenes, los documentos SVG y los css adicionales deben tener prioridad baja. Los css y scripts (carga posterior) deben tener prioridad media, si se solicitan después de cualquier archivo de imagen no precargado.


Optimizar el rendimiento de una página web da como resultado beneficios como más conversiones, tráfico y una mejor experiencia de . Por ello, es recomendable hacer algunos ajustes adicionales para mejorar el rendimiento más allá de los valores por defecto. Por ejemplo, el atributo preload de los elementos HTML link permite optimizar el rendimiento de carga asegurándonos de que el navegador descargue y almacene en caché el recurso antes. Sin embargo, esto no da un control granular sobre un tipo de recurso en particular. Por ejemplo, si estamos cargando dos hojas de estilo que bloquean el renderizado, podemos indicarle al navegador que el archivo style.css es más importante que el archivo style-plugin.css sin recurrir a la utilización de jаvascript o alguna otra solución.


¡El atributo HTML fetchpriority viene al rescate! 

Esta nueva característica nos permite asignar una prioridad relativa a prácticamente cualquier elemento HTML que cargue algún tipo de recurso, como imágenes y scripts. Aquí es importante tener en cuenta que solo podemos establecer la prioridad dentro del mismo tipo de recurso, por lo que no podemos decirle a los navegadores que carguen imágenes antes que el jаvascript que bloquea el renderizado.


Además, hay que aclarar que fetchpriority no garantiza que un recurso de mayor prioridad se cargue antes que otros recursos (de menor prioridad) del mismo tipo. Por lo tanto, no deberíamos usarlo para controlar el orden de carga, como por ejemplo, para que se cargue una dependencia de jаvascript antes que el script que la use.


Este atributo acepta los siguientes 3 valores: 

  • low para disminuir la prioridad relativa del recurso, 
  • high para aumentarla,
  • auto para permitir al navegador decidir la prioridad. 

Por ejemplo, podemos usarlo para indicarle al navegador que queremos que el archivo style.css tenga una prioridad más alta que el archivo style-plugin.css.

<link rel="stylesheet" href="style.css" fetchpriority="high" />
<link rel="stylesheet" href="style-plugin.css" fetchpriority="low" />

Utiliza fetchpriority con precaución

No es recomendable asignar el parámetro fetchpriority a cualquier recurso. Los navegadores ya realizan un trabajo excelente, por lo que deberías usarlo con cautela y solo para casos de uso muy específicos en los que queremos priorizar solicitudes para mejorar el L, priorizar un recurso diferido sobre otro del mismo tipo, priorizar solicitudes de precarga, etc. Abusar de este atributo, o realizar una optimización prematura, podría perjudicar el rendimiento, así que antes de aplicarlo, asegúrate de realizar pruebas de rendimiento para verificar que los resultados son los esperados y, sobre todo, necesarios para la web.

Se espera que otros navegadores la incorporen a su funcionalidad pronto.


Aprende cómo mejorar la velocidad de carga y L con el parámetro FetchPriorityConclusión

La velocidad de carga y el L son factores importantes para mejorar la experiencia de de una página web. El parámetro FetchPriority de Google Chrome puede ayudar a mejorar la velocidad de carga y el L de una página web. Esta herramienta permite a los desarrolladores web priorizar los recursos para mejorar el rendimiento de la página web. Implementar esta herramienta puede ayudar a mejorar la primera impresión de los s y la usabilidad general de una página web.


Tener esto en cuenta, fetchPriority debería usarse solo en situaciones específicas, como: optimizar el rendimiento de L para imágenes y otros elementos multimedia; cambiar la prioridad de los enlaces y scripts; reducir la prioridad de fetch para solicitudes de jаvascript que no sean esenciales para el contenido o la funcionalidad; y disminuir la prioridad de los elementos iframe. ¡Así que, mantén esto en mente cuando decidas usar fetchPriority!

Síguenos en
Google News Flipboard
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
Da publicidad a tu negocio para que puedas vender más
Los visionarios detrás de Tor han revolucionado la navegación en línea con su nuevo navegador basado en VPN
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: Mi nombre es Alexander y soy el fundador y CEO de este sitio. Me gusta considerarme un Geek entusiasta de la informática y la tecnología. Esta pasión me llevó a crear este sitio con el fin de compartir conocimientos en línea a través de cursos, tutoriales y videotutoriales. Estoy muy agradecido por el trabajo realizado hasta el momento y me siento muy entusiasmado con toda la información que he descubierto y compartido con otros. Estoy comprometido a seguir compartiendo mi conocimiento con la mayor de las dedicaciones. Leer mas...
Tutoriales en línea

Artículos Relacionados


¿Cuáles son las principales tendencias de desarrollo web PHP en 2023?

¿Cuáles son las principales tendencias de desarrollo web PHP en 2023?

¿Cómo encontrar el mejor servicio de desarrollo web?

¿Cómo encontrar el mejor servicio de desarrollo web?

Domina el diseño web con estas últimas tendencias

Domina el diseño web con estas últimas tendencias


Comentarios



Información
s que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Lista IPTV con canales para colombia

Mayo 23 43 856

Como instalar SS IPTV en una Smart Tv Samsung

Ene 22 10 381

Como podemos conseguir proxies

Jun 21 11 617

Historia de los sistemas operativos

Mayo 16 31 053

Lo mas leidos

Herramientas SEO para posicionamiento de nuestra web 2024

Por 17-06-24

Herramienta online de generador de datos estructurados

Por Tutoriales En Linea 17-06-24

Las 7 mejores páginas para descargar películas en .torrent en español

Por 26-09-24

Etiquetas

Diseñadores Web




Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? ar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • ar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.