4 Suggerimenti per migliorare le prestazioni della tua pagina

Feb 9, 2026

Come si fa

Web-performance expert Henri Helvetica sitting with his laptop

Analista performance web Henri Helvetica. condividerà i suoi PRO suggerimenti su come aumentare le prestazioni del tuo sito a Genera New York 2018. Ottieni il tuo biglietto ora .

Le prestazioni stanno finalmente diventando una parte maggiore della conversazione in web design e sviluppo. Tuttavia, può ancora essere una sfida per ottenere le persone a consumare effettivamente il grande contenuto che è là fuori e adotta un approccio prestazionali su base più regolare.

Fortunatamente, sviluppatore freelance e analista di performance Web Henri Helvetica (nome reale Henri Brisard), è a disposizione per offrire i suoi migliori consigli su una sorso della performance del tuo sito.

01. Effettuare la misura

Helvetica suggerisce che prima di tutto devi assicurarti di misurare. "Non puoi mai migliorare ciò che non misuri," spiega. "Una volta che hai le tue misurazioni e i dati disposti, devi capire quali elementi importanti da misurare. Potresti avere due pagine che caricano in nove secondi, ma si può avere il punto di vista pieno di più velocemente, quindi hai un'esperienza utente migliore.

"Devi misurare ciò che è importante nel processo di caricamento per il tuo sito e la tua impresa commerciale. Pensa a ciò che è importante per i tuoi utenti interagire. Ogni sito ha le sue esigenze individuali".

Una volta che ha dato un'occhiata a un carico di pagina, che lo aiuta a riprendere come e quando alcuni elementi si caricano, il prossimo passo di Helvetica è solitamente per attivare i devtools cromati per valutare esattamente cosa sta succedendo. È una scelta ovvia, perché è proprio lì ed è gratis - non è necessario saltare in un altro strumento per cercare di scoprire perché una pagina potrebbe essere lenta. Eppure molti sviluppatori lo usano a malapena. "Devtools è un po 'come un rilevatore di fumo", sostiene Helvetica. "Se c'è un fuoco, Devtools ti dirà. Ti mostrerà almeno dove si trova il fumo. "

02. Perdere un po 'di peso della pagina

Quindi Helvetica guarda la cascata, che indicherà varie questioni come la dimensione di un bene e la latenza che è stata coinvolta nel caricarlo. Se il sito contiene immagini scarsamente di dimensioni, ad esempio, di solito vedrai una cascata molto lunga, che è uno dei più facili punti di dolore per riprendere rapidamente. Le immagini sono uno dei più grandi colpevoli per un sito di caricamento lento: un problema che può essere risolto abbastanza facilmente. Poiché sono la più grande fonte di dati, le immagini sono anche la più grande fonte di risparmio di dati.

"Tenerei sempre conto del tuo peso della pagina", spiega Helvetica. "Non importa come ti affeziona, se hai un'immagine che è 3 MB, o anche tre immagini a 1 MB ciascuna, probabilmente avrai una sfida per esperienza utente.

Web-performance expert Henri Helvetica coding on his laptop

"Quel peso della pagina sarà anche vittima della tua rete, perché una rete cellulare non può mai essere previsto. Quindi vuoi assicurarti che le tue risorse siano piccole e ottimizzate per la vista, il che significa che non dovresti essere in grado di vederne Attività di dimensioni desktop su un dispositivo mobile. "

Helvetica raccomanda anche il caricamento pigro, una tecnica che ritarda il caricamento di un oggetto fino a quando non è necessario. "Non tutti gli utenti lo farà in fondo a una pagina", avverte. "Abbastanza spesso potresti caricare beni che non saranno mai visti. L'impiego di carico pigro sarà molto utile perché stai risparmiando su dati e scarico della batteria o gestione della memoria. Se non stai caricando l'immagine, non avrai alcuna memoria per usurpare sul dispositivo. "

03. Vedi come si impila

Un'altra ragione per cui Helvetica favorisce Devtools è perché ora fornisce anche metriche come la prima vernice (il tempo necessario per l'utente per vedere il primo pixel del contenuto) e la prima vernice significativa (il tempo necessario per il contenuto primario della pagina per diventare visibile ).

Poi c'è il filmstrip (sia in DevTools o Strumento di prestazione WebPageTest) che mostra screenshot incrementali del browser che rendono un sito, in modo da poter vedere come appare una pagina quando si carica. Esaminandoli puoi capire quali attività sono state caricate quando e esaminano modi per caricarle alcuni di loro in un momento precedente nella timeline.

In WebPageTest - quale Helvetica loda per il suo livello di dettaglio ispiratori - puoi anche esportare un video del carico e confrontare il filmstrip con quello di un concorrente. "Una volta che colleghi i punti, è possibile esplorare come migliorare l'esperienza dell'utente portando queste attività nella vista più velocemente", spiega Helvetica.

04. Taglia la confusione

Helvetica evidenzia che le decisioni di progettazione hanno anche un impatto sulle prestazioni e che il tuo primo carico nella vista idealmente non dovrebbe essere il più veloce possibile ma anche il più libero possibile.

Per questo motivo è necessario comprendere la serie di eventi che hanno luogo per rendere la vista iniziale di una pagina Web - il percorso di rendering critico. Questi eventi possono essere ottimizzati evitando attività di caricamento che non sono necessarie e prendendo decisioni attorno alla selezione di caratteri Web e formati di immagine.

"Assicurati di mantenere il tuo svg come il più libero possibile di complessità", suggerisce Helvetica a titolo di esempio. "Allora avrai meno codice quando rendi il tuo svg. Sento questo dagli sviluppatori tutto il tempo. Otterranno un SVG dai designer e dovrà inviarlo indietro perché influenzerebbe le prestazioni. "

Questo articolo è stato originariamente pubblicato in emissione 303 di NET, la rivista best-seller del mondo per i web designer e sviluppatori. Acquistare Edizione 303. o Iscriviti a Rete. .

Vuoi ulteriore approfondimento della minestra sulla velocità del tuo sito?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Henri Helvetica sta dando il suo talk pianeta delle API: una storia di performance e amplificatore; Esperienza utente a Genera New York dal 25 al 27 aprile 2018

Se sei interessato a garantire che le tue pagine caricano il fulmine velocemente, assicurati di prendere un biglietto per Genera New York . Henri Helvetica dovrà performare la presente giornata e persino le pratiche sperimentali impiegate nella misurazione delle app Web e fornendo esperienze utente performanti, oltre a offrire più informazioni su misurazioni come la prima vernice, la vernice e il tempo significativi per interattivi.

Genera New York avviene dal 25 al 27 aprile 2018. Ottieni il tuo biglietto ora .

Articoli Correlati:

7 Suggerimenti per esperti per le perni di inchiodatura
3 strumenti principali per testare le prestazioni web
Perché le prestazioni web devono sentirsi veloci

4 Suggerimenti per migliorare le prestazioni della tua pagina

01. Effettuare la misura

02. Perdere un po 'di peso della pagina

03. Vedi come si impila

04. Taglia la confusione

Vuoi ulteriore approfondimento della minestra sulla velocità del tuo sito?

Come si fa - Articoli più popolari

Come correggere una composizione difettosa

Come progettare figure grafiche

Anatomy MasterClass: perfette le tue figure

Genera tavolozze di colori senza fine con Khroma

Come iniziare con dattiloscritto

Come sviluppare creature mitiche

Crea un etch digitale uno schizzo

Come ottenere il tuo modello Zbrush in Maya

Categorie