Ottimizzazione delle prestazioni delle pagine web

Ascolta questo articolo

I siti Web sono generalmente divisi in due parti: front-end e back-end. Possiamo capire che lo sfondo viene utilizzato per implementare le funzioni del sito Web, come: eseguire la registrazione dell'utente, modificare le password, commentare articoli e così via. Ma per quanto riguarda il frontend? In effetti, dovrebbe essere una funzione di prestazione. La maggior parte dei fattori che influenzano l'accessibilità dell'utente sono legati all'ottimizzazione delle pagine esterne del sito. Ottimizzazione della pagina – questo articolo fornirà una panoramica di questo processo.

Il contenuto dell'articolo:

• 1. Ottimizzazione del tempo di caricamento della pagina
• 2. Comprimi tutte le risorse comprimibili
• 3. Ottimizzazione della cache del sito
• 4. Percorso di rendering critico

1. Ottimizzazione del tempo di caricamento della pagina

Migliore ottimizzazione della pagina - questo è quando le risorse non vengono caricate affatto. Pertanto, cerca di ridurre al minimo il numero di risorse non necessarie scaricate.

1. Valuta se alcune delle dipendenze del tuo sito sono necessarie e soppesa i pro ei contro.
2. Il percorso di caricamento dipendente è affidabile e bloccherà l'intera pagina quando non è disponibile.

2. Comprimi tutte le risorse comprimibili

1. Il codice deve essere tutto compresso.
2. Elimina le immagini indesiderate.
3. Usa css3 al posto delle immagini.
4. Usa immagini con un rapporto di compressione più elevato. Soprattutto le GIF, alcuni formati video (H.264 o WebM) sono molto più piccoli delle GIF.
5. Usa font WordArt, non immagini.
6. Fornire formati di immagine più moderni per gli utenti con browser più recenti (ad esempio: WebP).
7. Bitmap con più risoluzioni per diverse dimensioni di pagina.
8. Specificare una larghezza e un'altezza per l'immagine, altrimenti potrebbe verificarsi il ritaglio.
9. Usa HTTP/2. Ad esempio, uno sprite è una grande immagine composta da molte piccole immagini, che possono ridurre il numero di richieste HTTP. Tuttavia, è difficile memorizzare nella cache e la modifica dell'immagine piccola invaliderà la cache di tutte le immagini piccole. HTTP/2, più richieste possono essere avviate da un collegamento, eliminando la necessità di sprite.

3. Ottimizzazione della cache del sito web

Meccanismo di memorizzazione nella cache del browser:

1. Visita la pagina, richiedi varie risorse e il browser controlla se è presente una cache locale.
2. In tal caso, controlla se la risorsa è scaduta. Non scaduto, usa direttamente la cache. Quando scade, viene effettuata una richiesta al server.
3. I campi etag e intestazione dell'ultima modifica verranno inclusi nella richiesta inviata.
4. Il server utilizzerà l'Etag e l'ultima modifica per determinare se la risorsa memorizzata nella cache dal browser non è disponibile.
5. Se la risorsa è ancora valida, restituire un codice di risposta 304 per indicare al browser di utilizzare la cache. Altrimenti, restituisci la risorsa aggiornata.

Secondo questo insieme di logica, puoi pianificare la cache del tuo sito web.

Come posso notificare al browser di aggiornare una risorsa se la risorsa scade in anticipo?

Questo di solito non è possibile perché il browser vede che la risorsa non è scaduta e non effettua affatto la richiesta. Ma questo può essere ottenuto modificando l'URL della risorsa. Pertanto, è necessario aggiungere un numero di versione o un tag casuale al nome file della risorsa. Ad esempio style.12.css. Cioè, non lasciare che il browser memorizzi nella cache il file html, altrimenti il browser non interrogherà il server fino alla scadenza.

4. Percorso di rendering critico

Il browser visualizza la pagina Web con i seguenti passaggi:

1. Elabora il markup HTML e crea l'albero DOM.
2. Elabora il markup CSS e crea l'albero CSSOM.
3. Combina DOM e CSSOM in un albero di rendering.
4. Layout in base all'albero di rendering per calcolare le informazioni sulla geometria di ciascun nodo.
5. Disegna ogni nodo sullo schermo.

Ottimizzare il percorso di rendering critico significa ottimizzare il processo di rendering in modo che la pagina web possa essere renderizzata il più rapidamente possibile.

css

I file CSS bloccano il rendering. Dopo che il browser ha creato l'albero DOM, deve attendere il completamento dell'albero CSSOM. Un tag nella parte superiore del documento per impedire CSS non standard e consentire al browser di richiedere il file CSS il prima possibile.

Evita di usare @import nei file css perché il browser troverà e caricherà il css importato solo dopo che il file contenente l'importazione è stato caricato e compilato. Prendi in considerazione l'utilizzo di CSS in linea che non richiede richieste aggiuntive e non blocca il rendering del contenuto principale.

js

Lo script Java non inizierà l'esecuzione fino a quando non viene creato il CSSOM. js impedisce anche la creazione dell'albero DOM. Se async non è contrassegnato nel tag.

Ora capirai cos'è l'ottimizzazione della pagina e come è costruita. Comprendere questi processi ti aiuterà a ottimizzare rapidamente le pagine del tuo sito, a ridurre le richieste e ad accelerare il caricamento.

Leggendo questo articolo:

• Ottimizzazione CSS: 21 modi per velocizzare il tuo sito web
• Ottimizzazione del codice del sito JS e CSS online: una guida dettagliata

Grazie per aver letto: AIUTO SEO | NICOLA.TOP