Google va publicar un article en què animava els desenvolupadors i els editors a utilitzar el nou (i experimental) atribut d’indicació de prioritat “importància” que pot ajudar a millorar Core Web Vitals i l’experiència de l’usuari.
L’equip del navegador Chrome va compartir un exemple en què una imatge de fons carregada amb l’atribut HTML Priority Hint estalviava 1,9 segons en el temps de descàrrega, només en aquesta imatge.
El problema que resol les pistes de prioritat
Els editors poden accelerar el descobriment de recursos de la pàgina web utilitzant i també pot dirigir com i quan es descarreguen i s’executen els scripts amb l’ús del “asíncron” i “ajornar” atributs.
Però els editors no poden enviar un senyal per dir al navegador quins recursos són importants i quins no.
Google ofereix aquests exemples dels problemes que soluciona Priority Hints:
“Les imatges d’heroi dins de la finestra gràfica comencen amb una prioritat baixa. Un cop completat el disseny, Chrome descobreix que es troben a la finestra gràfica i augmenta la seva prioritat (malauradament, les eines de desenvolupament només mostren la prioritat final; WebPageTest mostrarà totes dues).
Això normalment afegeix un retard important a la càrrega de la imatge. Proporcionar la pista de prioritat a l’etiquetatge permet que la imatge comenci amb una prioritat alta i comenci a carregar-se molt abans.
El navegador assigna CSS i tipus de lletra una prioritat alta, però és possible que tots aquests recursos no siguin igual d’importants o necessaris per a LCP. Podeu utilitzar consells de prioritat per reduir la prioritat d’alguns d’aquests recursos”.
Anunci
Continueu llegint a continuació
La pista de recursos d’atribut d’importància
En HTML, les parts que formen una pàgina web s’anomenen Elements. Aquest seria el div, els encapçalaments, les etiquetes de paràgraf, les etiquetes d’imatge, l’element d’enllaç, etc.
Estic bastant segur que tot el que s’anomena etiqueta HTML és en realitat un element HTML, que és una manera fàcil de recordar què és un element.
Cada element es pot modificar amb el que s’anomena un Atribut. Recordeu l’atribut nofollow? L’atribut nofollow modifica l’element .
L’atribut d’importància modifica els elements de la pàgina web donant al navegador web una pista sobre si un element de la pàgina web és important, no important o simplement deixa que el navegador decideixi.
L’atribut d’importància s’anomena una pista de prioritat. L’atribut dóna al navegador una pista que un element especificat és important (o no és important) i per donar-li una prioritat més alta (o més baixa).
Els valors que el “importànciaL’atribut que es pot comunicar són:
Anunci
Continueu llegint a continuació
La pista de recurs d’atribut d’importància és aplicable als elements següents:
Com les pistes de recursos milloren els valors vitals bàsics del web
Els navegadors calculen automàticament els nivells de prioritat per descarregar recursos.
Les eines actuals com l’atribut “precarrega” ajuden a donar consells sobre recursos per a la descàrrega de recursos importants com, per exemple, fonts i imatges.
Altres consells de recursos són asíncrons i diferits.
Tot això ajuden a accelerar la descàrrega del document total i a fer que el document sigui visible i interactiu més ràpid.
Però el navegador encara ha de decidir quin és el més important.
Segons Web.dev, es baixarà una imatge carregada prèviament, però el navegador li assignarà una prioritat baixa i es retardarà.
Aquesta és l’explicació:
“Preneu una imatge de pintura de contingut més gran, que, quan es carregui prèviament, encara tindrà una prioritat baixa.
Si altres recursos primerencs de baixa prioritat l’han rebutjat, l’ús de Priority Hints encara pot ajudar-vos amb la rapidesa en què es carrega la imatge.
Un exemple de com és útil l’atribut d’importància és quan una pàgina web té un carrusel d’imatges a la part superior de la finestra gràfica (la part del navegador que veu actualment el visitant del lloc).
Si el carrusel conté cinc imatges, totes es poden carregar prèviament. Però si al primer se li assigna el “alt” atribut d’importància i els altres donat el “baix”, la pàgina web es mostrarà més ràpid perquè ara el navegador sabrà donar una alta prioritat a la primera imatge.
Un altre exemple donat per Google és la imatge destacada a la part superior de la pàgina web. El navegador dóna a la imatge una prioritat baixa i només la representa després que s’hagi completat la resta del disseny de la pàgina web.
Google explica:
“Oferir la pista de prioritat a l’etiquetatge permet que la imatge comenci amb una prioritat alta i comenci a carregar-se molt abans.
Tingueu en compte que la precàrrega encara és necessària per al descobriment precoç d’imatges LCP incloses com a fons CSS i es pot combinar amb consells de prioritat si inclou l’import=’alta’ a la precàrrega, en cas contrari, encara començarà amb la prioritat “Baixa” per defecte per a les imatges. .”
Anunci
Continueu llegint a continuació
El mateix passa amb els scripts que es descarreguen com a asincrònics o diferits, a tots dos se’ls assigna una prioritat baixa.
En afegir una pista de prioritat als scripts importants, el navegador podrà renderitzar la pàgina més ràpid i oferir una millor experiència d’usuari.
Els visitants del lloc experimentaran una càrrega més ràpida
El Priority Hints està passant pel que Google anomena una prova d’origen. Chrome va fer una prova fa dos anys, però no va cridar gaire atenció.
Chrome està implementant-ho a Chrome 96, que està previst que es publicarà el 21 de novembre de 2021. Els consells prioritaris ja estan disponibles a Chrome Canary, que és la versió de prova de Chrome.
Aquestes funcions es poden activar a les versions actuals de Chrome escrivint el següent a la barra d’adreces:
chrome://flags/
i després desplaçant-se cap avall i habilitant la secció anomenada: Funcions de la plataforma web experimental
Captura de pantalla: característiques de la plataforma web experimental
Com revisar el nivell de prioritat dels recursos
Els nivells de prioritat dels recursos estan disponibles per revisar-los a qualsevol versió de Chrome, a les Eines de desenvolupament, a la pestanya Xarxa.
Anunci
Continueu llegint a continuació
Feu clic als tres punts (menú amb punts suspensius) a l’extrem superior dret, > Més eines > Eines per a desenvolupadors (a continuació, seleccioneu la pestanya Xarxa).
Des d’allà carregueu una pàgina web, feu clic amb el botó dret a una de les columnes (com ara Temps o Cascada) i seleccioneu Prioritat i podreu veure els nivells de prioritat.
Quan us registreu per a la prova de Priority Hints, podeu utilitzar Chrome Canary per veure la prioritat actualitzada dels recursos i també a la versió 96 de Chrome quan es desplega.
Quan participeu en aquesta prova, es mostraran els consells prioritaris als navegadors dels visitants del vostre lloc i qualsevol millora a Core Web Vitals es reflectirà a partir d’això.
Tanmateix, és important tenir en compte que es tracta de pistes prioritàries i no d’una directiva.
Això vol dir que el navegador no ha de seguir estrictament els consells de prioritat. El navegador pot optar per ignorar les pistes i assignar i ordinador el seu propi ordre.
Això es pot comprovar a Chrome Dev Tools a la pestanya Xarxa tal com es descriu anteriorment.
Anunci
Continueu llegint a continuació
Com registrar-se a la prova de consells prioritaris
Els editors s’han de registrar a Chrome per participar en les proves d’origen per obtenir consells prioritaris.
El formulari de registre de Priority Hints és aquí:
https://developer.chrome.com/origintrials/#/view_trial/365917469723852801
Prova d’origen de consells prioritaris
Aquesta és la segona versió d’aquesta prova d’origen. La primera vegada que es va provar no hi va haver molta resposta. Però aquesta vegada podria ser diferent a causa de Core Web vitals.
La prova està oberta per registrar-se ara i s’allargarà fins al 22 de març de 2022. L’objectiu de la prova és mesurar l’interès dels desenvolupadors i veure si es produeixen millores significatives.
Que la funció continuï després d’aquesta data depèn dels vostres comentaris. Aquesta és una gran oportunitat per millorar l’experiència de l’usuari i ser un dels primers a utilitzar aquesta nova funció.
Citacions
Llegiu l’anunci de la prova d’origen dels nous consells prioritaris
Optimització de la càrrega de recursos amb Priority Hints
Registra’t per participar a la prova d’origen
Pàgina de registre de consells prioritaris
Anunci
Continueu llegint a continuació
Seguiu el progrés dels consells prioritaris de Chrome
Pàgina d’estat de suggeriments de prioritat de Chrome
