Velocità di caricamento del sito. 4 fattori principali.

Velocità di caricamento del sito. Come aumentare la velocità di download? Problemi principali.

Consigliato velocità di caricamento del sito Google - 2 secondi. (e ora guarda la tua velocità)

(Come controllare la velocità di caricamento del sito Web?Il modo più semplice e veloce è aprire strumenti per sviluppatori CTRL+MAIUSC+ISuccessivamente, seleziona la scheda "Rete", quindi aggiorna la pagina, per vedere la velocità di download necessaria per aggiornare la pagina, Aggiorna senza cache: devi premere CTRL + F5 / CTRL + R. E sotto sarà la velocità di download.)

Controlla la velocità di caricamento del sito
utilizzando un servizio di Google: PageSpeed ​​Insights

(infografica tratta da seoprofy ©2014)

I punti principali che colpiscono di più:

1. cache
2. css (stili)
3. JS (script)
4. immagini (il loro peso, dimensione - sì, esattamente la dimensione HxW, Metadati - sì, esiste una cosa, queste sono le loro informazioni come: Data, titolo, argomento, ecc.)

Per non dipingere molte informazioni inutili su piccoli momenti che non influiscono particolarmente o hanno un effetto trascurabile, non scriverò di loro.

# 1 CONTANTI

memorizzazione nella cache (ocache) è un buffer (un luogo) in cui vengono archiviati i dati. Nel nostro caso, si tratta di immagini, codice, stili e altro.

Il più facile quello che puoi fare da solo è abilitare la memorizzazione nella cache sull'hosting.
(Se hai l'hosting di Ukraine.com.ua, devi andare su "Impostazioni sito" -> "Impostazioni di base" e ci sarà una voce "Memorizzazione nella cache" e lì selezioni la quantità di tempo richiesta per la quale il tuo sito essere memorizzato nella cache Da me stesso consiglio di impostarlo su 2 settimane: con questo periodo di memorizzazione nella cache, le informazioni sulla velocità della pagina di Google aggiungono molti punti.)

altri metodi relativi a htaccess, tag del browser, ecc. possono essere trovati su Internet per parecchi articoli e non vedo il punto nel ridipingere. Puoi leggere i tipi di memorizzazione nella cache nell'articolo su Habré.

#2 CSS (stili)

CSS - (Fogli di stile a cascata - fogli di stile a cascata).
Cosa si può fare con gli stili?
Bene In primo luogo strizzarli.
In secondo luogo ridurre il numero di file, ad es. unisci il più possibile per ridurre il numero di chiamate al server.
In terzo luogoincorporare gli stili principali che interessano la visualizzazione della parte visibile della prima schermata direttamente in e lasciare il resto nel file.

Lascio anche un paio di link utili:

• servizi di compressione CSS
• come comprimere i file css

#3 JS (script)

Qui abbiamo anche diversi modi per ottimizzare gli script.

1. Posticipare il caricamento dello script. Sbuffalo il più in basso possibile, mettilo dietro o anche più in basso a volte aiuta, a volte non è un'opzione. Ma il punto numero 2 viene in soccorso.
2. ASYNC – caricamento asincrono degli script. Questo viene fatto usando il parametro "async".

   Ci sono maggiori dettagli sull'asincrono qui.
   Qualche informazione in più su JS e la sua influenza.

3. Punto minore.
   JS può anche essere compresso. Unisci anche in 1 file.

# 4 Immagini

Puoi sempre fare tre cose: guardare il fuoco, guardare l'acqua e ottimizzare le immagini.

L'argomento è piuttosto ampio, quindi cercherò di darti solo informazioni importanti.

Ottimizza il peso.

Come? Attraverso un programma o un servizio.

• Programma per il lavoro di massa con le immagini Immagine di pietra velocecon esso puoi
  Ridimensiona in blocco le immagini. Come e cosa già google c'è non è difficile.
  Scarica immagine Faststone.
  
• Servizio per ridurre le dimensioni delle immagini - Panda. O meglio TinyPNG e TinyJPG.
  Il principale vantaggio di ONLINE. Basta caricare i file e tornare in una versione compressa - La qualità non ne risente affatto (è Magic).
  Collegamenti: tinypng.com e tinyjpg.com

Ottimizza le dimensioni.

La dimensione come ho scritto sopra può essere modificata usando il programma immagine di pietra veloce.
La dimensione è Altezza x Peso (Altezza per Larghezza).

Esempio:

(Se vuoi saperne di più su questo, puoi leggere l'aiuto di Google su questo argomento. ARTICOLO da Google, ma ti avverto che è in una certa misura nerd)

Ad esempio abbiamo 2 immagini:
1) Peso 100kb, Dimensioni 500x500
2) Peso 100kb, Dimensioni 2500x2500
Sembrerebbe che differenza fa, pesano lo stesso, quindi caricarli dovrebbe essere ugualmente complicato o semplice, ma non c'era se lo controlli su google page speed insgiht, giurerà comunque a una risoluzione più alta Immagine.

Riassumendo: Le misure contano. Anche il peso. (il resto non è così importante, ma secondo le argomentazioni di alcuni esperti ha anche un impatto, ora parlo di Image Metadata)

Non ho scritto nulla sui metadati, beh, non c'è niente da scrivere qui ...
Basta cancellare tutti i metadati per tutte le immagini, secondo la legenda, puoi ridurre le dimensioni di 2 volte. L'ho scoperto di recente (riguardo all'effetto della dimensione del file, ho pensato che fosse abbastanza insignificante).

Brevemente sul rilascio:

• problemi più comuni di caricamento del sito web
• opzioni per risolverli
• a cosa devi prestare attenzione in modo che tutto vada bene

Andiamo al video:

PS
Se hai domande o non sei d'accordo con qualcosa, scrivilo nei commenti.