Imaginem que tenim una eina que creiem útil i que ens ajudarà a millorar les vendes. Imaginem, a més, per un moment, que podem fer servir aquesta eina amb la web de la competència i “comparar-nos” per veure qui és millor. A qui no li agradaria tenir una cosa així? Però aquesta situació, completament imaginària, ve acompanyada d’una cosa molt real, molt humana, molt nostra: comprem una eina nova, la traiem de la capsa i la comencem a fer servir…
“Les instruccions? Bah, no són per a mi. Ja sé com funciona.”
– Un humà
Imaginem ara que Google Page Speed Insights és aquesta eina. Imaginem que és un comptaquilòmetres per veure qui és més ràpid, qui arriba abans a la meta.
“He vist que la web de la competència és millor que la meva!! Ho diu Google!!”
– Un humà amb una web
Si et dediques a la maquetació web i/o al màrqueting online, això et sona, i molt. No són imaginacions teves 😉 A mi també m’ha passat, i per això vaig decidir investigar una mica més per conèixer-la i veure què podem fer per millorar-hi els resultats.
Com que desconec com funciona internament l’eina i quins criteris fa servir per al testing, em disposo a fer una immersió total amb una sèrie de proves per determinar què espera aquesta eina d’una web. Per no condicionar la meva opinió, he decidit no buscar informació a internet ni llegir la documentació oficial (manual d’instruccions? Bah!) i fer aquest testing “a cegues”. Crec que així és més divertit.
NOTA: Aquest post està basat en fets reals. Tot el que veureu a continuació ha passat de debò, i cronològicament tal com està escrit.
Condicions de l’anàlisi / comparativa (primera conclusió)
Tota l’anàlisi es basa en la comparativa entre una web real i un clon d’aquesta, allotjat al mateix servidor i en les mateixes condicions: mateixes dades que la web real, mateix codi, mateixos plugins actius, etc. En teoria són la mateixa web.
Amb aquesta situació, faig la primera anàlisi de Google Page Speed a totes dues webs i obtinc el resultat següent en mòbil:
NOTA: el resultat de l’esquerra és la web real, el de la dreta és la web clonada sobre la qual aniré fent experiments. Serà així durant tot el post.
Com que l’eina fa una anàlisi cada vegada que s’executa i fa el càlcul al moment, els torno a executar per assegurar-me que juguem en igualtat de condicions, o més o menys… i aquest és el resultat que obtinc:
Com es pot veure, són uns resultats molt semblants en tots dos casos.
NOTA: si l’executes de nou immediatament, respon amb l’última anàlisi en memòria cau, així que cal assegurar-se de treure el focus de la pàgina i deixar passar una estona o analitzar una altra URL
D’aquest últim test també extrec les dades principals de l’experiment, que queden així:
WEB REAL
WEB CLONADA
Per no quedar-me només a la portada, també analitzo una pàgina amb poc contingut i principalment text pla, com la de l’avís legal.
Sense cap explicació raonable, el resultat obtingut és aquest:
En canvi, la resta de dades de l’anàlisi són molt semblants:
WEB REAL
WEB CLONADA
Torno a executar l’anàlisi de totes dues pàgines, i el resultat és el següent:
Primera conclusió:
Aquesta eina és menys estable que la connexió a internet a la Xina
El cas que ens ocupa
La web que faig servir per a l’anàlisi és tot el contrari del concepte minimalista. No és neta, no respira… i si quedés un forat en algun lloc, encara miraríem si es pot omplir amb algun bàner més… i si les coses es mouen una mica, encara millor…
Em recorda una mica a això:
Actualment, des d’aquesta web, a més de peticions pròpies o als nostres CDN, es fan peticions a 18 dominis externs per recollir dades i/o fer servir eines de tercers per incorporar un xat, mètriques, cercador intel·ligent i “marketing automation”, entre d’altres…
Una de les primeres sospites que teníem quan ens vam llançar a aquesta anàlisi era que les eines incorporades a la web podien interferir en el resultat del test segons com estiguessin aplicades i/o per la seva pròpia naturalesa.
Ara, a poc a poc, aniré desconnectant eines i codis JavaScript de seguiment a la web clonada i tornaré a analitzar comparativament totes dues webs al mateix moment.
Cercador intel·ligent
En primer lloc, opto per desactivar aquesta eina, que funciona com un plugin JavaScript sobre la botiga. Comprovo que des de la web clonada ja no es fan peticions al domini del cercador i llavors analitzo totes dues webs alhora.
El resultat obtingut és el següent:
Com que no em crec el que veuen els meus ulls… el torno a executar:
(Quadern de bitàcola. Dia 1. Nota 1. M’estic tornant boig. No sé si podré aguantar això ni un minut més…)
Com que estic al·lucinant, el torno a executar:
(Quadern de bitàcola. Dia 1. Nota 2. Definitivament aquesta feina és massa dura per a mi…)
Segona conclusió:
Aquesta eina té la mateixa credibilitat que un polític en campanya
I aquí podria acabar aquesta anàlisi… no sé si cal perdre més temps amb una cosa que no és fiable… Tot i així, li dono una última oportunitat i torno a provar… i aquest és el resultat:
(Quadern de bitàcola. Dia 1. Nota 3. Realment no sé per què continuo amb això… M’estic replantejant seriosament el meu futur…)
Au, va, una última vegada i ho deixo… últim resultat:
Per no continuar donant cops de cap a la paret, faré com els equips de Clemente, “pilotada i endavant”, i consideraré que el canvi no ha millorat els resultats de la web clonada respecte a l’original.
Valoracions i opinions
A continuació desactivo el plugin que permet als compradors opinar sobre la web i les compres que han fet. Comprovo que des de la web clonada ja no es fan peticions al domini en qüestió i llavors analitzo totes dues webs alhora.
El resultat obtingut és el següent:
Al·lucinant… trec coses de la web clonada i “millora” la real… he hagut de tornar a mirar si m’equivocava de lloc en desconnectar coses… però no…
(Quadern de bitàcola. Dia 1. Nota 4. Hauria d’haver agafat la pastilla blava, seria molt més feliç en una realitat falsa…)
Ho torno a intentar, i aquest és el resultat:
I per última vegada:
I per no tornar-me més boig… continuaré endavant com si no hagués vist res…
La desconnexió següent correspon a l’àmbit de les mètriques de trànsit provinent de xarxes socials i la seva conversió. Comprovo que des de la web clonada ja no es fan peticions al domini de la xarxa social i llavors analitzo totes dues webs alhora.
El resultat obtingut és el següent:
I ara mateix em sento així:
Torno a executar tots dos tests:
(Quadern de bitàcola. Dia 1. Nota 5. Si no en surto viu, digueu a la meva família que l’estimo…)
A aquestes altures de l’experiment, la web clonada ha reduït una mica les peticions i el pes.
Continuem! (Quin remei…)
Mètriques generals
Ara em disposo a desconnectar una eina de mètriques generals (no Google Analytics). Comprovo que des de la web clonada ja no es fan peticions al domini de l’eina i llavors analitzo totes dues webs alhora.
El resultat obtingut és el següent:
Deu ser hora punta a AWS ara mateix…
Tornaré a provar… no sé ni per què… però ho faig:
Ni cas… endavant…
Marketing automation 1
Ara desconnectaré la primera eina de marketing automation, d’aquelles que ho fan tot a la teva web i automàticament vens més i tens més clients i més de tot… Paraula!
Comprovo que des de la web clonada ja no es fan peticions al domini de l’eina i llavors analitzo totes dues webs alhora.
El resultat obtingut és el següent:
I, encara no sé per què, el torno a executar:
(Quadern de bitàcola. Dia 1. Nota 6. No sento res, només hi ha silenci… No veig res, només hi ha foscor…)
Marketing automation 2
Ara desconnectaré la segona eina de marketing automation, que també és d’aquelles que ho fan tot a la teva web i automàticament vens més i tens més clients i més de tot… però millor… o no… Què sé jo?
Comprovo que des de la web clonada ja no es fan peticions i llavors analitzo totes dues webs alhora.
El resultat obtingut és el següent:
Deu ser un miratge… un oasi, ho ha de ser… Torno a provar:
Això no es paga amb diners… he vist tortures més suaus… no calia gens…
Arribats a aquest punt, la web clonada ha baixat unes 40 peticions i un parell de MB de pes respecte a la situació original (tot i que la mida transferida no ha baixat tant)
Més mètriques generals
Comprovo que des de la web clonada ja no es fan peticions a aquesta eina i llavors analitzo totes dues webs alhora.
El resultat obtingut és el següent:
Més del mateix… fa una estona que desconnecto coses, ho juro… però estic igual que al principi… començo a sospitar que busco al lloc equivocat…
Ho torno a executar:
M’ho crec? O no m’ho crec? La meva intuïció em diu que no, les proves em diuen que no, la vida em diu que no… així que, per què creure-ho?
(Quadern de bitàcola. Dia 1. Nota 7. M’estic plantejant seriosament la mort com a solució a tot això…
En cas de judici per assassinat, això s’hauria de considerar un atenuant.)
Una força estranya dins meu m’empeny a executar de nou el test:
Em remeto a les dues primeres conclusions per expressar la meva opinió sobre el que estic presenciant.
Eina de xat
Aquesta web fa servir un conegut plugin de xat per incorporar aquesta funcionalitat i donar servei als seus clients. Desconnecto l’eina, comprovo que des de la web clonada ja no es fan peticions i llavors analitzo totes dues webs alhora.
El resultat obtingut és el següent:
Hòstia! (amb perdó) he superat la barrera psicològica dels 40 🙂 Com amb l’edat, és aquí on comença de debò la vida… però… m’hauria de creure el que veuen els meus ulls? O continua sent una enganyifa de Google Skynet per desviar la meva atenció?
Déu (vull dir… Google), si estàs jugant amb mi, que sàpigues que no té cap gràcia.
El meu seny està en joc, i així no ajudes.
(Quadern de bitàcola. Dia 1. Nota 8. Nota mental: començar a fer servir Yahoo com a cercador)
Un altre cop, torno a executar-ho, per si de cas. No és que no me’n refiï… ja saps…
I… una última vegada:
Sé que no m’hauria de fer il·lusions… però m’agrada el que veig… qui s’hi pot resistir? Al cap i a la fi, la vista és el més influent dels sentits… Em netejaré les ulleres, per si de cas…
Per curiositat, l’executo una vegada més:
(Quadern de bitàcola. Dia 1. Nota 9. Què és aquella llum? M’atrau… no m’hi puc resistir…)
Situació actual després de la desconnexió massiva de tercers
A aquestes altures del test, només queden a la web els trackers relacionats amb Google. El pes de la web i les dades transferides s’han reduït notablement, i la càrrega és molt més lleugera.
Tot i que no em crec res, perquè l’eina ha demostrat ser molt irregular en els resultats, la desconnexió de l’eina de xat sembla haver donat certa estabilitat als resultats, amb una millora de la web clonada respecte a la web real (i als seus propis resultats inicials)
NOTA: He de dir que en aquest moment el test triga aproximadament la meitat de temps a executar-se a la web clonada. (Cosa normal, entenc…)
Google Tag Manager
Dins de GTM trobem Analytics, Google Ads i les altres eines relacionades.
Desconnecto el tracker, comprovo que des de la web clonada ja no es fan peticions a cap dels dominis de Google i llavors analitzo totes dues webs alhora.
El resultat obtingut és el següent:
Sembla continuista, dins del seu caos aleatori…
Comparativa des d’un altre punt de vista
I, com que m’estic creient el que veig malgrat la mala experiència del passat, ho vull corroborar amb una altra situació. Així que tornaré a testar les pàgines amb poc contingut que he analitzat al principi, però amb aquesta nova situació:
I aquí és quan torno a al·lucinar amb el rigor científic de l’eina…
Ehem… algú té una explicació? Per què tant de dolor?
Què li he fet jo al món? Per què a mi?
Malgrat el resultat de la web real, això s’acosta més al que esperava trobar…
Sembla constant… tot i que de nou la web real ha baixat molt respecte al que s’esperava… encara que, amb aquesta eina, ja no sé què és el que s’espera…
Tornaré a testar la portada a veure què hi veig:
Continua com la vaig deixar… Com si no hagués passat res… Com si l’eina sabés el que fa…
Tornant a connectar-ho tot
Si ens refiem dels resultats obtinguts, la conclusió més clara seria que el xat és el tercer que més afecta el resultat que obtenim en desactivar els tercers.
Intentaré confirmar si aquesta conclusió és correcta. Per fer-ho, tornaré a connectar tot el que he desconnectat excepte l’eina de xat. Tornem a xifres semblants a les de l’inici pel que fa a pes i peticions.
I ho provo:
WTF? De debò… això no és normal… a veure, una altra vegada:
Això ja s’assembla més al que esperava… Però qui se’n pot refiar, d’això?
Bé… una última vegada…
I si tornem a l’inici? (tercera conclusió)
Torno a connectar l’eina de xat per tornar a la situació inicial.
I executo les proves:
(Quadern de bitàcola. Dia 1. Nota 10. Han tornat les al·lucinacions…)
El resultat de la botiga real és absurd… així que torno a executar la prova…
No puc fer servir l’adjectiu “normal”, però això ja s’acosta més al que s’esperava…
Bé… doncs sembla clar… tot i així, el torno a desconnectar de la web clonada i testo:
Sospitós… El resultat esperat a la primera! A veure… una altra vegada:
Per què, eina de xat?! Per què?!! Se suposava que eres aquí per ajudar-me!!
No m’ho puc creure, em resigno… ho he de tornar a intentar, no puc viure sense tu!!
Així doncs, després de la meva representació dramàtica, arriba la tercera conclusió d’aquest estudi:
Tercera conclusió:
Fer servir segons quin xat a la teva web és com anar a treballar amb un tràiler:
Arribar, hi arribaràs… però… a quin preu? I… on aparcaràs?
Què més podem fer?
D’acord, aquella eina de xat és el dimoni i ha quedat demostrat. Però ens en conformarem?
Està clar que, a part del xat, la resta de tercers té una interferència en el resultat que es pot desestimar en un estudi d’optimització.
Així doncs, passo al següent experiment.
El màxim a què podem aspirar? Primer experiment
El primer que em plantejo és: fins on podem arribar? 99? 100?
Aquest primer experiment consisteix a deixar el codi de la botiga “buit”, de manera que carregui tot el codi JS i CSS comú que el nostre sistema necessita per executar-se, juntament amb el de la mateixa botiga, però que no renderitzi res.
El resultat és una pàgina en blanc, amb tots els trackers i la base CSS+JS de common. En aquest punt, l’eina de xat és l’única que no està activa.
I el resultat de l’execució del test és sorprenent:
L’executo un parell de vegades més, perquè ja ha quedat demostrat que val més fer una mitjana dels resultats…
Em pregunto quina afectació percentual tindran ara els trackers que han quedat connectats. Així que em disposo a desconnectar-los tots de nou. TOTS alhora.
I el pes i els temps de càrrega queden en mínims… I el resultat continua sorprenent… no és un 100!
Segon experiment
Així que em plantejo una última volta de rosca… Trec a la botiga la configuració de la política de cookies i RGPD (que mostra contingut dinàmicament amb JavaScript) i hi poso un “contingut” en HTML pla.
El resultat és una web que no llegeix ni crea cookies i que renderitza text pla directament de l’HTML en lloc de fer-ho per JS.
Vull creure que això és el mínim que podem obtenir d’una “botiga” creada amb el nostre sistema (tot i que no sigui realista)
Seria l’equivalent a tenir un fitxer HTML al servidor i llegir-lo, però passant pel nostre llenguatge de servidor, creant una sessió d’usuari i tota la resta de processos necessaris.
(Quadern de bitàcola. Dia 1. Nota 11. El doble de res és res… això m’ha ensenyat Google)
Però això serveix per a alguna cosa? Bé, som més a prop d’alguna cosa… sigui el que sigui…
Tercer experiment
Per descartar que els temps de procés del servidor web i/o de la base de dades estiguin afectant, em creo un fitxer HTML amb el mateix contingut que el que es renderitza dinàmicament i hi executo un test.
El resultat és pràcticament idèntic, excepte que a les captures, des de la primera, ja tenim “contingut” renderitzat.
I amb això em pregunto: per què diu que triga 1,7 s a lliurar el primer renderitzat amb contingut si és un HTML pla?
Així que li trec la càrrega dels JS i torno a provar.
D’acord… 100… Però l’eina ha trigat 1,6 s a renderitzar??
I sense CSS??
Uau, és ràpid… però personalment 0,6 segons per renderitzar un HTML pràcticament buit em sembla molt… Entenc que aquest és el temps “mínim” al qual aspirem amb aquesta eina…
I ja que hi som… amb JS però sense CSS?
Triga el mateix en el primer renderitzat, però 2,6 s a ser interactiva.
Amb això tinc prou informació per continuar amb tests més “reals”.
Ara el mateix, però a l’inrevés
D’acord, he arribat al mínim comú denominador. Ara necessito el màxim comú múltiple.
(Quadern de bitàcola. Dia 1. Nota 12. D’acord… torno a delirar… ho hauria de deixar abans que sigui massa tard…)
Recuperaré la portada de la web tal com estava i aniré traient elements per veure quina afectació poden tenir. Recordo que en aquest punt la web no té cap tracker ni eina JavaScript incorporada.
L’únic que no puc treure és el nostre codi comú de JS i CSS. En els experiments anteriors hem vist quin és el mínim esperable en aquest cas:
- 1,7 s fins al primer renderitzat
- 2,6 s fins a ser interactiva
Quart experiment
Trec de la web tot el JavaScript que prové de la mateixa botiga. Així la web està completa, però només té el JS del motor del nostre sistema comú.
I aquest és el resultat:
Cinquè experiment
Trec de la web tots els CSS i també el JavaScript que prové de la botiga. Així la web està completa, però només té el JS/CSS del motor del nostre sistema comú.
I aquest és el resultat:
Tampoc no està gens malament… però… hi ha alguna cosa que no em quadra…
Les comparacions són odioses
En aquest moment em ve al cap que tenim un codi base de demo sobre el qual construïm les botigues i els experiments. Un codi net però complet i funcional.
Preparo un nou entorn i hi poso una botiga amb aquest codi per poder-hi fer un test amb aquesta eina. I…
Aquesta web també carrega CSS i JS del nostre motor comú. També té CSS i JS propis, també executa accions quan el DOM està “ready” i té dinamisme… Llavors? Què està passant?
La dura realitat (sisè experiment)
Havent arribat fins aquí encara amb el cap al seu lloc, cosa que ja és tot un èxit, només em falta posar la cirereta al pastís amb un gran final, dramàtic, emocionant, amb cert suspens i, sobretot, “revelador”.
I si la culpa de tot la té… el disseny!? Bé… el responsive! Bé… tampoc… o també… No el concepte, però sí com s’“entén” en molts casos i on ens porten els clients…
(Bé és cert que l’eina de Google té una manera curiosa de mesurar, que més endavant intentaré explicar amb teories conspiranoiques)
I per intentar demostrar-ho, el millor és fer algun experiment més, com aquest:
La web que analitzo té un mega menú complex. Tant, que la seva “conversió a mobile” no és possible perquè jeràrquicament són molt diferents. (En HTML ocupa unes 700 línies de codi i carrega 54 imatges)
Per tant, en realitat la web té 2 menús, i se’n mostra un o l’altre segons el dispositiu. Això vol dir que en mobile s’està carregant tot l’HTML, les imatges i la resta del menú desktop, encara que no es faci servir.
Què passa si trec el menú desktop del codi? En aquest punt, el codi conté tot el JS i el CSS, excepte els plugins i l’eina de xat.
De sobte sembla que el motor de renderitzat de mobile va més lleuger, es carreguen menys imatges i menys HTML, i el resultat és millor.
He obtingut un resultat millor que sense carregar cap JS a la web…
(Quadern de bitàcola. Dia 1. Nota 13. Ja no distingeixo el bo del dolent, així que tot és bo)
L’experiment definitiu?
I a partir d’aquí, només puc tornar a la tècnica de construir un HTML amb el resultat que he obtingut dinàmicament, per intentar incorporar canvis que puguin optimitzar el resultat obtingut fins ara.
Parteixo de la base de l’experiment anterior (web sense xat, sense trackers i sense menú desktop)
Primer de tot, comprovo que el resultat continuï sent l’esperat:
Part 1
Moure tots els CSS al final de tot del codi:
Millora el resultat, però a canvi que la web estigui una mica més de temps sense estils i es vegi “una mica lletja”.
El primer renderitzat és ràpid; la resta es manté com fins ara.
Part 2
Modificar les crides a CSS per fer-les asíncrones
Millora una mica el resultat, però a canvi que la web estigui una mica més de temps sense estils i es vegi “una mica lletja”.
Part 3
Modificar les crides a JS per fer-les asíncrones
Un altre cop, millora una mica el resultat, però a canvi que la web estigui una mica més de temps sense estils i es vegi “lletja”.
Part 4
I si a tot això hi torno a afegir el xat?? Ho provaré un parell de vegades a veure…
Llucifer!!!! Allunya’t de la meva web!!!!
Tornant a la realitat (quarta conclusió)
Durant aquesta odissea pel ciberespai de la velocitat de càrrega potser hem perdut el contacte amb tota realitat. És normal. És el que voldria Google.
(Quadern de bitàcola. Dia 2. Nota 1. No he arribat fins aquí per res… les generacions futures valoraran tot això…)
Amb tot el que hem “après” fins ara, que no és poc, ens faltaria tornar a la realitat. Què podem fer per millorar la puntuació de la web que estem analitzant?
Un altre cop, només puc tornar a la tècnica de construir un HTML amb el resultat de la web real, per intentar incorporar canvis que puguin optimitzar el resultat.
En aquest cas parteixo de zero. És a dir, la web té tots els seus trackers i plugins, xat inclòs.
Primer de tot, comprovo que el resultat continuï sent l’esperat:
De moment bé, cap “sorpresa”. L’eina fa el que ha de fer, cosa que s’agraeix a aquestes altures…
Posaré els CSS al final de tot, a veure què aconsegueixo. Ho provo un parell de vegades:
Què passa? Ahir era el dia dels Sants Innocents o què? De sobte l’eina ha decidit ser “estable”…
Òbviament apareix el “problema” estètic de no tenir la web ben formada fins que passa una estona, cosa que és “lletja” però s’hi podria trobar un apanyo.
Ara modificaré les crides a CSS per fer-les asíncrones. No hauria de ser gaire rellevant un cop el CSS és al final de la càrrega, però com que se suposa que “puntua”, doncs ho farem… 🙂
Correm un estúpid vel…
Ara modificaré les crides a JS per fer-les asíncrones.
Correm un altre estúpid vel…
(Quadern de bitàcola. Dia 2. Nota 2. Cada caiguda em fa més fort… cada error, més savi… cada intent, més desequilibrat…)
I si li trec el xat?
I si li trec el mega menú desktop?
WTF?? Ja he dit que odio aquesta eina? Google… et maleeixo!
Quarta conclusió:
Aquesta eina és com un nen amb diners en una botiga de llaminadures: sap el que vol, però no sap el que vol…
Part 8 – El que li agradaria a Google…
D’acord, torno enrere… deixo el mega menú i la resta com estava… tot…
Ara faré el que realment li agradaria a Google que fes aquesta pàgina…
Fora CSS! Fora JS!
Tatxaaaannnnnnnn!!!!
Benvinguts a l’Era d’AMP Ultron
Tant és tot: pes de les imatges, nombre d’imatges, pes de l’HTML… Tot!! Aquesta web pesa gairebé 2 MB i fa 111 peticions!!
L’únic que importa és quant de temps triga el motor de renderitzat a posar la web a disposició de l’usuari fictici.
Ho teníem allà mateix, i no ho volíem veure…
(Quadern de bitàcola. Dia 2. Nota 3. Han estat jugant amb mi… Ho sabien tot des del principi!)
De la bogeria al seny: els manaments
Tot aquest viatge psicotròpic no podia ser en va. Era imprescindible aprendre alguna cosa… adquirir coneixement i poder-lo aplicar. I, sobretot, distingir la línia fina entre la bogeria i el seny.
Què espera aquesta eina de les nostres pàgines?
Simplicitat, i que l’usuari tingui disponible el contingut com més aviat millor i hi pugui interactuar. Com més complexa sigui una pàgina, menys puntuació aconseguirà, tret que s’intenti “dissimular” davant de l’eina de mesura.
Com ho aconseguim?
A canvi de treure interactivitat inicial i elements de la web per simplificar-la i permetre que inicialment no es vegi bé. Fent servir càrregues posteriors al primer resultat “interactiu per a l’usuari”.
Una versió mobile exclusiva ajudaria a treballar un codi més net per a aquest test i obtenir millor nota. Sobretot si, per disseny, el responsive de la web no és “gaire natural” i hi ha molts elements duplicats perquè és impossible “transformar-los” dinàmicament.
Que aquesta versió mobile fos AMP ajudaria encara més.
Hi ha altres alternatives?
Com passa amb Google i el posicionament SEO, en aquesta eina hi ha desenes de variables per analitzar. No tot és JS i CSS, però sí el que més “frena”.
Simplificar la web ajuda, però si es pugen dues imatges de 2 MB cadascuna, ens penalitzaran… per tant, no tot el que es pot millorar depèn del codi.
Prova d’això és el fet que el codi “base” té una puntuació molt bona i, en canvi, arrossega tot el codi JS/CSS de base com la botiga analitzada…
Per què? Perquè és molt senzill. Quan comencem a complicar el disseny responsive d’una web —mega menú, header sticky, cercador interactiu, desenes de bàners + categories + productes a la portada, elements dinàmics generats per JS com popups, acceptació de cookies, etc.— és quan s’introdueixen elements que alenteixen el motor de renderitzat de l’eina.
Com dimonis puntua aquesta eina?
Des del meu punt de vista, i això és una teoria, la funció de l’eina és donar-te una puntuació basada en la “millora” que considera que es pot fer a nivell de codi i recursos respecte al resultat que ha obtingut. Una cosa com: “Si jo hagués de fer una web com la que estic veient, la faria així… i tu l’has feta aixà… les comparo i et dic la diferència…”.
Per això una web horrorosament pesada i lletja, però sense interpretació de CSS/JS, obté una puntuació de 100. Google no la sabria fer millor! 😀 (Probablement tampoc pitjor…)
En aquest punt, faig el que hauria d’haver fet al principi: llegir-me el manual d’instruccions. Extracte de la documentació oficial de Google sobre aquesta eina:
https://developers.google.com/speed/docs/insights/about?hl=es-419
“PSI determina fins a quin punt una pàgina segueix les pràctiques recomanades de rendiment més habituals, i la puntua del 0 al 100, una qualificació que indica de manera aproximada el marge de rendiment”
I encara més: “Amb la puntuació d’optimització es calcula de manera aproximada el marge de millora del rendiment de les pàgines”
I per acabar de demostrar que aquesta eina no mesura la velocitat de la nostra web ni és un indicador de si altres webs són més ràpides que la nostra:
“És possible que una pàgina lenta tingui una puntuació d’optimització elevada perquè la proporció de recursos que bloquegen el renderitzat respecte al total de recursos de la pàgina és baixa. I també es pot donar el cas contrari: una pàgina ràpida pot tenir una puntuació d’optimització baixa per tenir molts recursos que bloquegen el renderitzat en relació amb els seus recursos totals”
Uf… si m’hagués llegit el manual abans de començar, no hauria patit aquest calvari…
Però per què els resultats són tan diferents per al mateix test?
La meva teoria és que, segons el moment en què llances el test, el servidor encarregat de fer-lo triga més o menys a executar-lo i, segons el cas, a accedir a tots els dominis on ha de fer peticions, i això acaba bloquejant el temps de càrrega… Però només és una teoria…
Una altra podria ser que el test en realitat no fa res i treu un número aleatori basat en el temps de càrrega total… Sense més… xDD I que darrere de tot això hi ha un ninot de mico tocant els platerets…
He de fer cas d’aquesta eina?
Sí i no.
Què esperaves? Després de la bogeria que he viscut…
És important almenys donar-hi un cop d’ull i comprovar que no hem comès errors que ens penalitzin absurdament. Imatges molt pesades, tècniques millorables…
Però alhora és important no obsessionar-se amb els resultats. Al cap i a la fi, no és una eina estable. I, a més, el seu resultat està condicionat per variables que en molts casos són fora del teu control.
Aleshores et preguntaràs: val la pena invertir per treure més bona puntuació?
I la meva resposta, un altre cop, serà: depèn. Per millorar un desastre, òbviament sí. És senyal que alguna cosa no està del tot bé. Per millorar respecte a altres: òbviament no. En aquest cas no estàs comparant coses iguals.
I finalment, que no se n’oblidi ningú: millorar el resultat de la portada de la teva web no farà que la resta de la web canviï de puntuació. Google està experimentant amb l’ús d’aquesta eina en la navegació de la teva web, de TOTA, no només de la portada.
Així que, si et vols centrar en alguna cosa, intenta que siguin millores estructurals i generals per optimitzar de debò la teva web, no per estar “per davant dels altres”.
Una mica més de lectura per acabar
Ara que he tret les meves pròpies conclusions, he buscat una mica d’informació per veure si algú més hi ha arribat. Us recomano una mica més de lectura, si no en heu tingut prou:
- La gran mentida del Google Page Speed i la velocitat de la teva web: és útil per al SEO? https://blogger3cero.com/google-page-speed/
- Per què t’has d’oblidar JA de PageSpeed, WP Doctor i de mesurar tant la teva web https://hormigasenlanube.com/olvida-pagespeed-wpdoctor/
Són realment interessants, creieu-me.
(Quadern de bitàcola. Dia 2. Nota 4. Tot té un final… espero que aquest no sigui el meu)
Espero que t’ho hagis passat tan bé llegint aquest post com jo fent-lo. Gaudir d’una cosa tan feixuga deu ser digne d’estudi.
