- PageSpeed Insights
Testo tradotto dall'IA.
Riepilogo del post generato dall'IA di durumis
- Utilizzando strumenti di misurazione delle prestazioni dei siti web (PageSpeed Insights, Lighthouse) è possibile migliorare le prestazioni del sito web e ottenere un migliore posizionamento nei motori di ricerca. Gli indicatori Web Core Vitals sono fondamentali in questo processo.
- Per migliorare indicatori come CLS, LCP, FCP e FID, è possibile applicare tecniche come lo scheletro dell'interfaccia utente (UI Skeleton), l'ottimizzazione delle immagini, la rimozione degli elementi che bloccano il rendering, l'ottimizzazione dei font web e l'elaborazione asincrona di JavaScript.
- Oltre a illustrare i metodi per migliorare ogni indicatore, presentiamo varie tecniche per aumentare le prestazioni del sito web (compressione gzip, Web Worker, ecc.). In futuro, approfondiremo questi temi.
Tramite il sito fornito da Google
è possibile misurare facilmente le prestazioni del Web.
https://pagespeed.web.dev/
è possibile inserire l'URL per misurarlo o installare Lighthouse come estensione di Chrome per misurarlo.
Cosa comporta il miglioramento degli indicatori?
È possibile ottenere una migliore visibilità sui motori di ricerca. La SEO porta all'utilizzo frequente del rendering lato server, ma
se gli indicatori di prestazioni sopra menzionati sono bassi, l'effetto diminuirà drasticamente.
Come si migliora?
Il sito web.dev fornisce una descrizione dettagliata di come migliorare ogni indicatore.
In particolare, 3 indicatori hanno un impatto significativo sul punteggio. (Web Core Vitals)
Voglio registrare i tentativi di miglioramento degli indicatori.
Come si misura in locale?
export default () => { if (process.client && 'PerformanceObserver' in window) { let cumulativeLayoutShiftScore = 0; let largestContentfulPaint = 0; let firstInputDelay = 0; let firstContentfulPaint = 0;
// CLS const clsObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } }); }); // LCP const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; largestContentfulPaint = lastEntry.startTime; }); // FID const fidObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstInputDelay = firstEntry.processingStart - firstEntry.startTime; }); // FCP const fcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstContentfulPaint = firstEntry.startTime; }); clsObserver.observe({ type: 'layout-shift', buffered: true }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); fidObserver.observe({ type: 'first-input', buffered: true }); fcpObserver.observe({ type: 'paint', buffered: true }); window.addEventListener('onload', () => { console.log('Final CLS Score:', cumulativeLayoutShiftScore); console.log('LCP:', largestContentfulPaint); console.log('FID:', firstInputDelay); console.log('FCP:', firstContentfulPaint); }); } };
Inserisci il codice sopra. Nel caso di Nuxt, inseriscilo nei plugin e controlla la console log.
Cumulative Layout Shift (CLS)
Misura la variazione del layout durante il rendering.
Ad esempio, supponiamo che esista una pagina che riceve l'URL dell'immagine tramite una risposta API e renderizza un'immagine 400x400.
La posizione di un determinato layout si sposterà di 400 px a causa del rendering dell'immagine.
Questo è uno spostamento imprevedibile per l'utente, che non solo è negativo per l'esperienza utente, ma influenza anche indirettamente il browser durante il rendering dello schermo.
Ha un impatto negativo.
Esistono due semplici metodi di miglioramento.
1. Applicare lo scheletro dell'interfaccia utente
- La maggior parte dei siti web disegna uno scheletro adatto alle dimensioni dell'immagine o del componente. Considera questo aspetto durante lo sviluppo della schermata. Nel caso di Vue, utilizza v-if e v-else per disegnare uno scheletro adatto a ciascun elemento.
2. Riservare l'altezza
- Se lo scheletro contiene troppi stili, la manutenzione diventa complessa e può avere un effetto contrario. Anche solo impostando il valore min-height dell'elemento da renderizzare, è possibile ottenere un effetto positivo.
- Nel caso di web reattivo, ecc., in cui le dimensioni dell'immagine variano a seconda del dispositivo, è difficile fissare l'altezza in modo statico. In questi casi, è possibile utilizzare il dispositivo più piccolo come riferimento oppure vh o vw.
3. Specificare larghezza e altezza per gli elementi immagine
- È possibile inserire la larghezza e l'altezza per gli elementi immagine come segue.
<img src="image.jpg" width="400" height="400">
Anche se le dimensioni effettive dell'immagine non sono 400x400, informa il browser delle dimensioni previste dell'immagine.
4. Utilizzare font-display: swap per evitare variazioni di layout dovute ai font web
- Indicando un font sostitutivo, è possibile evitare lo spostamento del layout.
Largest Contentful Paint(LCP)
È il tempo impiegato per il rendering dell'elemento che occupa la maggior parte dello schermo. Di solito è un'immagine, quindi è intuitivo che la velocità di caricamento debba essere accelerata.
1. Ridurre le dimensioni dell'immagine.
- Controllare se le dimensioni dell'immagine non sono troppo grandi rispetto alle dimensioni di rendering.
- Ottimizzare il rendering delle immagini utilizzando estensioni come webp. WebP riduce le dimensioni del file di circa il 30% rispetto al formato JPEG se si utilizza la compressione con perdita e di circa il 20% rispetto al PNG se si utilizza la compressione senza perdita.
- È possibile prendere in considerazione anche il caricamento lazy a seconda della posizione di scorrimento.
2. Utilizzare la cache o la CDN.
3. Rimuovere gli elementi che bloccano il rendering.
- Poiché la maggior parte degli indicatori di misurazione è influenzata, è necessario rimuoverli. Quando il browser esegue il rendering dello schermo, acquisisce prima gli script nella sezione head e quindi esegue il rendering, quindi controlla se gli script all'interno della sezione head (generalmente script esterni) devono essere renderizzati per primi. L'utilizzo dei tag async e defer consente di gestirli facilmente.
* Scriverò un altro articolo sugli attributi degli script all'interno della sezione head in futuro.
4. Ridurre al minimo le dimensioni del bundle.
- Indipendentemente dalla lentezza del rendering delle immagini, se la trasmissione dal server è lenta, è necessario migliorarla.
Se si utilizza un server proxy come Nginx, è possibile utilizzare la compressione gzip.
* Scriverò un altro articolo sulla configurazione di Nginx in futuro.
First Contentful Paint(FCP)
Indica il momento in cui viene eseguito il rendering del primo contenuto nella pagina.
1. Allo stesso modo, rimuovere gli elementi che bloccano il rendering.
2. Ridurre al minimo le dimensioni dell'HTML.
- Se si avvolgono in modo incontrollato i tag div div, verrà creata una struttura ad albero molto nidificata e le dimensioni del file aumenteranno.
3. I font web esterni possono essere un problema. Utilizzare attivamente font-display: swap; per eseguire il rendering del font predefinito per primo.
First Input Delay(FID)
Indica il tempo impiegato dal browser per elaborare il primo input dell'utente (clic, scorrimento, ecc.) sulla pagina. A volte, anche se si preme un pulsante, potrebbe sembrare bloccato, ma in realtà potrebbe essere in attesa di una risposta API.
1. Utilizzare correttamente l'asincronia per evitare che il thread principale di JavaScript rimanga bloccato da operazioni complesse.
2. È possibile utilizzare i Web Worker per eseguire altre attività separatamente dal thread principale.
* Scriverò un altro articolo sui Web Worker in futuro.
A causa del limite di caratteri, terminerò qui.