En un nou vídeo de Google, l’advocat del desenvolupador Alan Kent comparteix sis maneres d’optimitzar JavaScript per millorar el rendiment del vostre lloc web.
Kent identifica els problemes de rendiment habituals causats per JavaScript i repassa els passos que podeu seguir per solucionar-los.
1. Eviteu la proliferació de fitxers JavaScript
Eviteu la proliferació del nombre de fitxers JavaScript al vostre lloc.
El nombre de fitxers JavaScript podria arribar a ser excessiu si no aneu amb compte, sobretot si cada component de la interfície d’usuari es troba en un fitxer independent.
Reduir el nombre de fitxers JavaScript que ha de descarregar un navegador pot millorar el rendiment del lloc web.
Com detectar
El Oportunitat secció de la PageSpeed Insights L’informe inclou recomanacions específiques del vostre lloc.
Busqueu la recomanació a mantenir el recompte de sol·licituds baix i les mides de transferència petites.
Feu clic a la recomanació per obtenir un resum del nombre i la mida dels tipus de recursos sol·licitats, inclosos els fitxers JavaScript.
Com arreglar
Podeu solucionar aquest problema de diverses maneres diferents. Una opció que recomana Google és combinar fitxers més petits junts per tenir un sol fitxer més gran per descarregar.
Una altra solució és admetre HTTP2 al vostre lloc, ja que pot millorar el rendiment sense unir fitxers.
2. Eviteu les cerques de DNS excessives
Eviteu un nombre excessiu de cerques DNS per als fitxers JavaScript de referència, ja que això pot retardar la primera visita d’un usuari al vostre lloc.
Com detectar
PageSpeed Insights us pot mostrar una llista de noms de domini utilitzats als URL en seccions com ara reduir el temps d’execució de JavaScript.
La pestanya Xarxa d’Eines per a desenvolupadors de Chrome és una altra manera de veure tots els noms de domini als quals es fa referència.
Com arreglar
Per reduir el nombre de cerques de DNS, Google suggereix que considereu allotjar una còpia dels fitxers JavaScript referenciats externament al vostre lloc.
3. Elimina JavaScript ineficient
Reduïu o elimineu JavaScript ineficient, ja que pot alentir les pàgines web i provocar experiències deficients per als usuaris.
Com detectar
Cerqueu les oportunitats següents a l’informe PageSpeed Insights de Google:
- Redueix el temps d’execució de JavaScript: Això informa dels scripts on s’ha gastat una gran quantitat de temps de CPU analitzant o executant codi JavaScript.
- Elimineu els recursos que bloquegen la representació: Això inclou JavaScript que es pot executar abans que es pugui representar la pàgina, de manera que l’usuari espera més per veure qualsevol contingut.
- document.escriure: Si s’utilitza malament, això pot causar problemes de rendiment importants en una pàgina, ja que bloqueja altres operacions.
- No utilitza oients passius: un oient passiu és una pista per al navegador que el codi JavaScript no cridarà a una funció que impedeix el desplaçament, permetent al navegador desplaçar-se per la pàgina fins i tot mentre el JavaScript encara s’està executant.
Com arreglar
L’eliminació de JavaScript ineficient és un tema més ampli que va més enllà de l’abast del vídeo de Google.
Les solucions generalment impliquen escriure el codi JavaScript de manera diferent. Les tècniques inclouen crear perfils de codi existent i escriure les vostres pròpies versions reduïdes de components més potents.
4. Elimineu JavaScript no utilitzat
JavaScript no utilitzat també és ineficient, però Google diu que aquest problema és prou comú com per resoldre’l per si mateix.
La reutilització de codi entre llocs pot comportar la inclusió de JavaScript que no és necessari.
JavaScript que mai es fa servir encara s’ha de descarregar i analitzar pel navegador web, la qual cosa és un malbaratament de recursos.
Com detectar
Cerqueu les oportunitats següents a l’informe PageSpeed Insights de Google:
- Redueix JavaScript no utilitzat: us mostra JavaScript que no s’ha executat com a part de la càrrega d’una pàgina.
- Eviteu les càrregues útils de xarxa enormes: identifica les àrees de millora fent una crida a les descàrregues de biblioteques grans.
- Minimitzar el treball del fil principal: Inclou el temps dedicat a analitzar, compilar i executar JavaScript.
Com arreglar
Google recomana una tècnica anomenada tree-shaking que es pot utilitzar per identificar JavaScript que no s’anomena mai, que és segur d’eliminar.
5. Comprimiu fitxers JavaScript
Assegureu-vos que els vostres fitxers JavaScript estiguin comprimits quan els baixeu. Tot i que el navegador web ha de gastar més temps de la CPU per descomprimir el contingut del fitxer, Google diu que la compressió és una victòria general.
Com detectar
L’informe PageSpeed Insights té una secció que destaca els fitxers JavaScript que poden beneficiar-se de comprimir-se.
Fent clic Activa la compressió de text us mostrarà quins fitxers es recomana comprimir.
Com arreglar
La majoria de navegadors web o sistemes de gestió de contingut tenen suport integrat per comprimir les descàrregues si es configuren correctament.
6. Estableix durades de memòria cau adequades per al codi JavaScript
Comproveu que els vostres fitxers JavaScript es tornin amb les capçaleres de temps de caducitat de la memòria cau adequades.
Això ajuda els navegadors a evitar la sobrecàrrega de comprovar si els fitxers JavaScript de la memòria cau estan obsolets, cosa que millora el rendiment.
Com detectar
En el Treball en xarxa fitxa de Eines per a desenvolupadors de Chrome podeu comprovar les capçaleres de resposta HTTP dels fitxers JavaScript que es baixin. Busqueu capçaleres com ara Control de la memòria cau.
A PageSpeed Insights, cerqueu l’oportunitat titulada Doneu actius estàtics amb una política de memòria cau eficient. Si feu-hi clic, us mostrarà una llista de recursos, inclosos els fitxers JavaScript, que poden beneficiar-se de les capçaleres de memòria cau configurades adequadament.
Com arreglar
Una manera de millorar l’emmagatzematge a la memòria cau dels fitxers JavaScript utilitzats habitualment és fer referència a fitxers des d’una ubicació pública compartida.
Si un usuari visita llocs que reutilitzen el mateix fitxer JavaScript, el navegador pot utilitzar la còpia prèviament baixada del fitxer, la qual cosa millorarà el rendiment.
Per obtenir més detalls sobre qualsevol de les recomanacions anteriors per optimitzar JavaScript, vegeu el vídeo complet de Google a continuació:
Imatge destacada: Visual Generation/Shutterstock
