Martin Splitt de Google va participar en un seminari web sobre la representació de pàgines web i com afecta el SEO. La renderització és el que passa quan un navegador sol·licita una pàgina web, és una part clau de les puntuacions de Core Web Vitals. Comprendre això ajuda a treure part del misteri de Core Web Vitals.
Representació de pàgines web
La representació de pàgines web és el que passa entre el navegador i la pàgina web, el procés de creació d’una pàgina web. Un procés de representació eficient dóna com a resultat altes puntuacions de Core Web Vitals.
La representació menys eficient pot afectar fins a cert punt les vendes, els guanys publicitaris i fins i tot el rastreig de pàgines web.
Es va demanar a Martin Splitt de Google que definís què és la representació.
Captura de pantalla de Martin Splitt Explaining Rendering
Martin va respondre amb una analogia entre cuinar un menjar a partir d’una recepta i fer una pàgina web.
Publicitat
Continueu llegint a continuació
HTML significa llenguatge de marcatge d’hipertext. És un format per crear documents als quals es pot accedir amb un navegador mitjançant el procés de renderització.
Martin Splitt va explicar la interpretació:
“Si penseu en l’HTML com a recepta i teniu tots els ingredients:
Tens un munt de text
Tens un munt d’imatges
Tens un munt de coses
Però realment no la teniu a la recepta. La recepta és un tros de paper amb totes aquestes instruccions sobre com fer una cosa “.
La primera part de l’explicació de Martin és que l’HTML és com una recepta, les instruccions. El text i les imatges són les coses que s’utilitzen per crear el menjar acabat, que és la pàgina web.
Martin va continuar l’analogia comparant els recursos de la pàgina web amb els ingredients físics reals:
“Ara, els recursos d’un lloc web són els ingredients, com ara el CSS, els fitxers JavaScript, les imatges, els vídeos, tot allò que carregueu perquè la pàgina tingui l’aspecte que té després.
I el lloc web que coneixeu i que utilitzeu al navegador que veieu al navegador, aquest és el plat final “.
Publicitat
Continueu llegint a continuació
Captura de pantalla de Jason Barnard
La representació és com el procés de cuina
A continuació, Martin va comparar la representació amb el procés real de prendre els ingredients (recursos com ara imatges, CSS, etc.) i cuinar.
Va continuar:
“I representar és gairebé la cocció o el procés de preparació”.
Rastreig i renderització de Googlebot
A continuació, Martin explica què és la representació de Googlebot.
Martin va explicar Googlebot i la representació:
“Així que arrossegar fonamentalment entra en un gran llibre de receptes, només treu una pàgina amb una recepta i la posa al nostre regne, al nostre abast, com si bàsicament estiguéssim a la taula de la cuina … i esperem que comenci la cuina i el rastreig bàsicament només ens lliurarà una recepta.
I llavors la representació és el procés on es produeix la renderització, Aha! Interessant! Rastrejador per allà, em podeu aconseguir aquests deu ingredients?
I el rastrejador serà convenient, sí, tinc aquests deu ingredients que necessiteu.
Moltes gràcies!
I després comencem a cuinar.
Això és el que és la renderització ”.
Analitzant l’HTML per al muntatge de pàgines web
La següent part introdueix una paraula de programació, parse. L’anàlisi consisteix a prendre totes les parts del document HTML (JavaScript, CSS, elements HTML) i seguir les instruccions per crear la pàgina web.
Martin va continuar la seva discussió sobre la representació:
“Per tant, la representació analitza l’HTML.
L’HTML bàsicament, quan es tracta del rastreig, és només un munt de text, formatat convenientment, però … Text!
Per convertir-ho en una representació visual, que és realment el lloc web, hem de representar-lo, el que significa que hem d’anar a buscar tots els recursos, hem d’entendre fonamentalment com ens diu el text:
Aquí hi ha una capçalera, d’acord.
Després hi ha una imatge i al costat de la imatge hi ha un munt de text i després a sota de la imatge hi ha un altre títol, és un títol més petit, és un títol de nivell inferior … i després hi ha un vídeo i, a continuació, a sota d’aquest vídeo hi ha més text i en aquest text hi ha tres enllaços cap a aquí, aquí i aquí.
I tot aquest procés de muntatge, aquesta comprensió de què és i després aquest muntatge en una representació visual amb la qual podeu interactuar a la finestra del navegador, que està representant “.
Publicitat
Continueu llegint a continuació
El paper de JavaScript a la representació
Alguns JavaScript són fonamentals per representar (crear) la pàgina web. Una mica de JavaScript, com els scripts associats a un formulari de contacte, no són realment necessaris en la creació inicial d’una pàgina web interactiva que un visitant del lloc pugui desplaçar, llegir i fer clic en un menú de navegació.
Per tal d’accelerar la representació de la pàgina web (i millorar Core Web Vitals), alguns JavaScript no crítics es poden retardar o excloure totalment si no és necessari per a la pàgina web.
Hi ha alguns JavaScript que són importants per fer que la pàgina sigui visible i interactiva i d’altres que encara no són importants.
Martin va explicar:
“I com a part de la representació, en la primera fase executem JavaScript perquè JavaScript és bàsicament una recepta dins de la recepta.
Per tant, JavaScript pot ser com ara, ara pica aquestes cebes!
Ara, doncs, teniu les cebes com a matèria primera, però no poseu les cebes en conjunt al plat, les talleu.
I per això es necessita JavaScript, oi?
… L’execució de JavaScript és només una part de la renderització. “
Publicitat
Continueu llegint a continuació
Captura de pantalla de Bartosz Goralewicz
L’arbre de disseny
A continuació, Martin comença a parlar de l’arbre de disseny. Fa una referència al Model d’objectes de document, que és una disposició de totes les parts de la pàgina web en una representació jeràrquica.
Els diferents “trossos” d’una pàgina web són com les fulles d’un arbre. En HTML, les fulles del que Martin anomena l’arbre de disseny es diuen nodes.
Publicitat
Continueu llegint a continuació
Martin explica l’arbre de disseny:
“Però quan hagi finalitzat l’execució de JavaScript o si no n’hi ha hagut, també està bé.
Però el que passa és que estem muntant, com si estiguéssim descobrint aquests trossos i com ens agradés muntar-los a la pàgina i això condueix a una cosa anomenada, Layout Tree.
I l’arbre de disseny ens indica com de grans són les coses, on són les coses a la pàgina.
Si són visibles o si no són visibles, si hi ha una cosa darrere d’una altra cosa.
Aquesta informació també és important per a nosaltres, igual que l’execució de JavaScript, ja que pot canviar, suprimir o afegir contingut que no figurava a l’HTML inicial, ja que el servidor l’ha lliurat.
Per tant, això es representa en poques paraules.
Des que tenim una mica d’HTML fins que tenim potencialment un munt de píxels a la pantalla. Això és una representació “.
La renderització costosa pot afectar l’experiència de l’usuari
A continuació, Martin presenta la informació útil sobre l’impacte de JavaScript en el consum d’energia. Utilitza la paraula “car” per descriure el costós en temps i energia que pot tenir algun JavaScript.
Publicitat
Continueu llegint a continuació
Esmenta com s’ha comparat JavaScript amb el diòxid de carboni, un gas d’efecte hivernacle i com això afecta els usuaris i, en última instància, el resultat final dels editors i botigues de comerç electrònic.
Martin Splitt explica la representació cara
Martin explica l’impacte de la representació cara:
“La cerca de Google té exactament la mateixa lluita que un usuari del món real en aquest cas.
Perquè, per a un usuari del món real, fins i tot si teniu un telèfon modern i un telèfon molt ràpid, fantàstic i car, també més execució sempre, sempre, significa més consum d’energia.
Això és només el que passa. I … hi ha hagut gent que va anomenar JavaScript el CO2 d’Internet i no crec que sigui completament erroni.
… Com més car ho fas, pitjor ens resulta com a experiència.
A la Cerca de Google no li importa realment. Només hem d’invertir en els recursos que necessitem i fem moltes optimitzacions per assegurar-nos que estem perdent el mínim d’energia i temps possible.
Però, òbviament, si esteu optimitzant això, un efecte secundari agradable i realment bo és que els vostres usuaris també seran més feliços perquè necessiten menys bateria, el seu telèfon antic seguirà funcionant bé amb el que poseu aquí i podran Consumeu el vostre contingut web i potser no els vostres competidors, perquè als vostres competidors no els importa i, de fet, produeixen alguna cosa que sigui menys convenient d’utilitzar als seus telèfons.
Per tant, això no suposaria una diferència entre Google i l’experiència de l’usuari.
Això és com el mateix problema o el mateix repte i tots ens enfrontem, inclosa la Cerca de Google “.
Publicitat
Continueu llegint a continuació
Captura de pantalla de Martin Splitt de Google
Coneixements sobre la importància de la renderització
Core Web Vitals pot ser una mica abstracte i misteriós, especialment quan els tècnics parlen de models d’objectes de documents, arbres DOM i renderització.
Les analogies de Martin Splitt van ajudar a treure part d’aquest misteri d’una part important de la comprensió de les puntuacions de Core Web Vitals, que és la renderització.
Un altre avantatge de la seva discussió és crear consciència sobre el concepte de renderització costosa i com això pot afectar els visitants del lloc els telèfons dels quals poden ser més antics i tenir problemes per representar la pàgina. I no només són els telèfons més antics, sinó que els telèfons més nous poden tenir problemes en baixar una pàgina web si fa dies que estan encesos i la memòria RAM s’estén per diverses finestres obertes del navegador.
Publicitat
Continueu llegint a continuació
Per últim, va desmitificar el concepte de renderització. Això ajuda a avançar la conversa per millorar la velocitat de la pàgina web i el rendiment de Core Web Vitals perquè hi ha poques coses com l’argot tècnic per frenar o aturar el progrés en la comprensió d’alguna cosa important.
