Lezioni dai framework React e Vue per Page Speed

Nella nostra continua ricerca della velocità della pagina, spesso ci ritroviamo a tornare allo stesso punto. Nonostante gli sforzi dei team di prodotto, marketing e crescita per motivare i team tecnici, le attività che potrebbero migliorare le prestazioni del sito vengono spesso rinviate a causa della necessità di refactoring e, anche quando vengono completate, non sempre producono risultati completi. In questo ciclo, è utile considerare alcune prospettive approfondite sul raggiungimento di prestazioni reali. Ad esempio, quali lezioni possiamo imparare dalla velocità di React.js e Vue.js o dalle loro estensioni SSR (rendering lato server) come Next.js e Nuxt.js rispetto ad altre piattaforme? Non è ora di ottimizzare i MB dei file jQuery e CSS? Quando si sveglieranno le grandi aziende che sacrificano le loro prestazioni web a sviluppatori front-end male informati? Affrontiamo queste domande una per una.

Perché i siti basati su Next.js e Nuxt.js sono veloci?

Le piattaforme Next e Nuxt, strutture SEO friendly costruite su React e Vue, si distinguono per prestazioni di velocità. Ma perché queste piattaforme sono così veloci?

React.js e Vue.js sono framework basati su componenti che suddividono ogni pagina in sottocomponenti, come mostrato di seguito.

Prendiamo un esempio reale per illustrare questo punto: una pagina di elenco di un e-commerce. Si può pensare che questa pagina di elenco abbia i seguenti sottocomponenti:

• testata
• Annuncio
  • Informazioni sulla voce dell'elenco
    • Titolo della pagina
    • Breadcrumb
    • Conteggio prodotti
  • Filtro
    • Filtro di categoria
    • Filtro Prezzo
    • ...
  • ordinamento
  • Schede prodotto
    • Foto del prodotto
  • Dettagli del prodotto
    • Nome prodotto
    • Prezzo del prodotto
      • Prezzo barrato
      • Prezzo di vendita
    • Tasso di sconto
    • Informazioni sulla campagna
  • Impaginazione
  • Contenuto della categoria
• footer

Quando si crea un'applicazione basata su componenti con Nuxt.js, ciascuno di questi componenti viene codificato separatamente e incluso nella pagina master. Ad esempio, considera un file denominato ProductPhoto.js. Qualunque siano le funzioni necessarie per le foto dei prodotti (carosello, visualizzazione di immagini reattive, ecc.), il codice JS è scritto all'interno di questo componente. Allo stesso modo, sono inclusi solo i file CSS utilizzati da questo componente. Ciò significa che solo i file richiesti da ciascun componente vengono eseguiti se il componente viene utilizzato.

Come viene attualmente gestito questo processo sulla maggior parte delle piattaforme web?

Un file script.js include il codice per qualsiasi cosa, dall'iscrizione, ai filtri e alle pagine del carrello fino al menu, che viene eseguito su tutte le pagine. Il risultato? 

Siti web con a File JS da 3 MB e CSS da 1.5 MB file. Il problema principale non sono solo le dimensioni dei file, ma il fatto che non puoi aspettarti che la CPU di un dispositivo mobile Android medio esegua migliaia di righe di codice in millisecondi. Eseguendo solo il codice necessario, puoi ottenere miglioramenti in termini di prestazioni.

Come eliminare le risorse che bloccano il rendering?

Oggi, il 32% del milione di siti web più importanti utilizza la libreria di caratteri Font Awesome, che ha una dimensione media di circa 1 KB. Considerando che il caricamento asincrono non è preferibile a causa dell'effetto flick, pensa a quanti caratteri sono visibili nella prima schermata di una pagina quando si apre su dispositivo mobile o desktop. Un breve studio su 250 piattaforme diverse ha rilevato una media di 50 icone utilizzate (più comunemente: carrello, utente, menu, notifica). Pertanto, per caricare solo quattro icone senza problemi, carichiamo l'intera libreria.

In che modo i framework JS avanzati gestiscono tutto questo? Importando solo il formato SVG delle icone utilizzate nel relativo componente, eliminando la necessità di caricare interi font o librerie CSS.

Cosa ci dicono l'utilizzo di Bootstrap e React JS?

La libreria Bootstrap JS ha una quota di mercato del 26% su tutti i siti in tutto il mondo, mentre l'utilizzo di React è di circa il 4%. Bootstrap è popolare per la sua flessibilità e facilità d'uso, consentendo uno sviluppo rapido. Tuttavia, questa flessibilità ha un costo: nel tuo progetto sono incluse funzioni JS generali, un'ampia copertura del codice e funzioni per funzionalità che potresti non utilizzare mai.

Chiediamoci quindi: cosa significa un aumento di utilizzo superiore al 100% da parte di indicano i primi 10,000 ai primi 1,000 siti? Ciò dimostra che i migliori sfruttano i dettagli a proprio vantaggio per essere ancora migliori.

In sintesi, invece di riscrivere i nostri siti con tecnologie simili Successivamente, Nuxt, Angular, React, Vue, ecc., dovremmo capire cosa fanno queste tecnologie per migliorare la velocità e applicare queste migliori pratiche alle nostre applicazioni web.