Si us pregunteu per què la vostra puntuació de Lighthouse és baixa! no esteu sols. Molts desenvolupadors web i professionals del contingut s’enfronten a aquest repte! especialment quan tracten llocs web de màrqueting on la velocitat de la pàgina! l’experiència de l’usuari i el SEO tenen un paper crucial. Aprofundim en alguns factors clau que afecten la vostra puntuació Lighthouse i explorem solucions viables per millorar-la.
Consell núm. 1: optimitzeu els vostres actius
Els actius no optimitzats poden alentir significativament el vostre lloc! afectant tant l’experiència de l’usuari com la classificació de cerca. Aquí és on els formats de fitxer eficients com WebP esdevenen inestimables. WebP ofereix potents capacitats de compressió que redueixen substancialment la mida dels fitxers en comparació amb els formats tradicionals com JPEG o PNG! tot sense sacrificar la qualitat de la imatge.
WebP té avantatges addicionals! inclòs el suport per a Lighthouse és baixa imatges animades lleugeres! cosa que no té en Dades actualitzades del número de telèfon mòbil del 2024 PNG! ja que es limita a imatges estàtiques. Tots dos formats són àmpliament compatibles amb els principals navegadors! però WebP ha guanyat un suport creixent a Chrome! Firefox! Edge i Opera! mentre que PNG continua oferint compatibilitat universal a totes les plataformes.
Més enllà de triar el format adequat! és important optimitzar i dimensionar correctament els vostres actius. Serveis com TinyPNG poden ajudar amb la compressió bàsica d’imatges. A més! eviteu utilitzar imatges massa grans! com ara una imatge 4K per a la capçalera d’una targeta! ja que això pot augmentar innecessàriament els temps de càrrega. Amb una compressió eficient! WebP pot reduir significativament els temps de càrrega mantenint la fidelitat visual (per exemple! la imatge WebP següent només fa 17 kB).
Auditoria de Lighthouse és baixa contingut:
tingueu una visió general clara de l’estat del vostre contingut
És important optimitzar i dimensionar correctament els vostres actius amb el format WebP: aquesta imatge només té 17 kB.
Consell núm. 2: feu una ullada als serveis i scripts de tercers al vostre lloc
Els serveis i els scripts de tercers poden ser inestimables per afegir funcionalitats! coneixements i funcions interactives al vostre lloc. Però també tenen un cost. Molts d’aquests scripts! sovint implementats mitjançant eines com Google Tag Manager (GTM)! permeten als venedors inserir eines útils com Intercom o Hotjar sense necessitat d’implicar desenvolupadors. Aquesta flexibilitat és convenient! però pot acumular-se ràpidament a centenars de kilobytes o fins i tot megabytes de dades addicionals ! encallant el temps de càrrega del vostre lloc i afectant la vostra puntuació Lighthouse.
Cada script de tercers que es carrega immediatament.
competeix pels recursos! alentint la rapidesa amb què apareix el contingut principal a la pantalla. Per contrarestar-ho! prioritzeu l’ús Defer i Async els atributs sempre que sigui possible. Quan s’estableix en scripts no crítics! Defer es carregarà l’script després que l’HTML s’hagi analitzat completament i Async baixarà l’script juntament amb l’anàlisi HTML! només l’executarà un cop estigui llest. Ambdós paràmetres asseguren que el vostre contingut bàsic es carregui primer! cosa que millora l’experiència de l’usuari i manté un perfil de rendiment més net i ràpid.
Per a un control encara millor! avalueu quins scripts són realment necessaris i considereu alternatives o solucions combinades per reduir la redundància. Si utilitzeu GTM! creeu Lighthouse és baixa regles per carregar scripts només a pàgines específiques on siguin necessaris! la qual cosa limita l’impacte del rendiment a tot el vostre lloc.
Consell núm. 3: utilitzeu un analitzador de paquets
Un analitzador de paquets és una eina que us ajuda a visualitzar què hi ha dins del vostre paquet final (em refereixo al paquet complet de fitxers que s’entreguen a l’usuari final quan carreguen una pàgina web o una aplicació). És Lighthouse és baixa especialment útil per identificar quines parts del codi afegeixen més a la mida del fitxer del paquet.
Webpack Bundle Analyzer és una de les eines més populars per analitzar i visualitzar la mida i la composició dels vostres paquets.
Proporcionaré un exemple específic: quan esteu desenvolupant un lloc web! normalment feu servir npm (Gestor de paquets de nodes) per incloure diverses biblioteques i paquets per ajudar-vos amb diferents funcionalitats. Per exemple! és possible que necessiteu Moment.js ! una biblioteca popular que s’utilitza per analitzar! manipular i donar Dades del mòbil format a dates i hores. Podeu utilitzar-lo per formatar una marca d’hora UTC (com la que obteniu de Kontent.ai) en un format més fàcil d’utilitzar! com ara mostrar-la com a “24 de febrer de 2025”.
El problema amb Lighthouse és baixa biblioteques com Moment.js és que poden ser bastant grans en termes de mida del fitxer. Quan aquests paquets s’inclouen al vostre projecte! augmenten la mida general del vostre paquet. Els paquets més grans triguen més a carregar-se! cosa que pot alentir el vostre lloc web o aplicació web.
Aquí és on l’analitzador de paquets és útil. T’ajuda a:
Visualitzeu quines biblioteques i paquets fan que el vostre paquet sigui més gran.
Identifiqueu si determinats paquets (com Moment.js) són innecessàriament grans o si els podeu substituir per alguna cosa més lleuger.
Optimitzeu el vostre projecte reduint la mida del paquet! cosa que pot millorar el rendiment de la vostra aplicació.
Consell 4: aprofita l’arquitectura de l’illa
Si esteu treballant en un lloc de màrqueting estàtic! és clau utilitzar JavaScript mínim. No necessiteu JavaScript per representar HTML o CSS! de manera que sobrecarregar el vostre lloc amb seqüències d’ordres innecessaris Lighthouse és baixa només el retardarà. Una solució és adoptar l’ enfocament de l’arquitectura insular ! que es pot implementar de manera eficient amb marcs com Astro .
En aquest model! es prioritza el contingut estàtic i només els components específics! com ara formularis o finestres emergents! utilitzen JavaScript. En aïllar JavaScript allà on realment es necessita! minimitzeu la càrrega i milloreu la vostra puntuació Lighthouse.
Tal com s’il·lustra! seccions com la barra de navegació superior! el control lliscant de la targeta i l’acordió de preguntes freqüents utilitzen JavaScript! mentre que la secció d’heroi! les llistes de productes i el peu de pàgina romanen estàtics.
Consell núm. 5: utilitzeu la importació dinàmica
Quan treballeu amb aplicacions web complexes que inclouen molts components interactius! com ara formularis de registre! modalitats o finestres emergents! podeu millorar Lighthouse és baixa el rendiment mitjançant importacions dinàmiques . Aquest enfocament garanteix que només es carregui el codi necessari quan realment es necessita! en lloc de la càrrega inicial de la pàgina.
Per exemple! imagineu que teniu un formulari Iibso rasaasta de registre amagat darrere d’un modal. Per defecte! quan un usuari visita la pàgina! es baixa el codi del formulari (inclosos tots els seus camps)! encara que l’usuari no faci clic per obrir el modal. Això vol dir que el temps de càrrega de la pàgina augmenta perquè està obtenint un codi amb el qual l’usuari pot no interactuar immediatament.
Amb les importacions dinàmiques
el codi d’aquest formulari només es carregarà quan l’usuari Lighthouse és baixa faci clic al botó per obrir el modal. Això pot reduir significativament el temps de càrrega inicial de la vostra aplicació web! ja que no esteu baixant codi innecessari per endavant.
