Semplici passi per velocizzare la tua immagine Sito Web pesante

Il proprietario del sito potrebbe eventualmente voler aumentare la velocità di download. Questo aumenta il ranking dei risultati di ricerca; inoltre, è più piacevole per i visitatori del sito lavorarci ottenendo una risposta più rapida alle loro azioni.

Alla ricerca di una soluzione rapida e diretta, i proprietari dei siti installano un vasto numero di plug-in, che a loro volta consumano risorse e ne rallentano solo il lavoro. Non abbiamo nulla contro i plugin di ottimizzazione, ma devono essere utilizzati al punto e con la conoscenza dei principi del loro lavoro.

Inoltre, i proprietari di siti che non hanno mai sperimentato l'amministrazione spesso hanno un malinteso sull'ottimizzazione. Nella loro comprensione, l'ottimizzazione è l'accelerazione dello script ad ogni costo. Il compito dell'ottimizzazione è produrre la velocità ottimale del sito al prezzo ottimale delle risorse. Pertanto, non possono esserci istruzioni universali per tutti i siti.

Rendere veloce il tuo sito web è un compito urgente per qualsiasi proprietario di risorse o webmaster. Dopotutto, la velocità di caricamento della pagina è uno dei fattori più critici per il successo di una risorsa web, insieme a contenuti di alta qualità e una bella grafica.

Il caricamento lento aumenta la probabilità di perdere utenti a volte. Soprattutto quando i visitatori provengono da dispositivi mobili. Semplici consigli per accelerare il caricamento del sito, che anche un utente inesperto può implementare nella pratica, aiuteranno a ridurre al minimo la probabilità di perdita di traffico.

1. Ottimizza codice HTML e CSS, file JS

L'ottimizzazione del download è impossibile senza preoccuparsi della "pulizia" del codice trasmesso al browser dell'utente al momento dell'accesso al sito. Un gran numero di caratteri nel codice sorgente influisce in modo significativo sulla velocità di caricamento, quindi la sua brevità è un fattore critico di successo.

Come ridurre al minimo il codice per velocizzare il caricamento del sito

Rimuovi i caratteri, gli elementi di markup e i tag del codice sorgente non necessari. L'automazione del processo aiuterà ad aggiungere un piccolo inserto all'inizio e alla fine del codice HTML del sito.

Questo metodo di buffering del contenuto HTML è abbastanza utile, ma può creare un carico aggiuntivo sulla memoria ad accesso casuale.

Raggruppa lo stesso tipo di file CSS e file JS. Le applicazioni PHP gratuite come JCH Optimize, Cloudflare o Minify, che vengono copiate in una directory separata e passano attraverso tutti i file del sito, aiuteranno a combinare gli elementi.

2. Rimuovere le richieste HTTP aggiuntive

Il caricamento di elementi della pagina (javascript, immagini, CSS e file flash) occupa la parte del leone delle risorse di sistema durante il caricamento di un sito. Le richieste HTTP per tali elementi rallentano notevolmente il sito.

Per evitare richieste “extra”, è necessario ridurre il numero di componenti della pagina. Ciò comporterà una diminuzione proporzionale delle chiamate al server e velocizzerà il caricamento del sito.

Questo può essere fatto in diversi modi:

• Combina più immagini in un unico file grafico (sprite CSS);
• Usa le immagini in linea (immagini in linea) nel foglio di stile della pagina;
• Più file CSS o script su una pagina si uniscono in un unico file;
• Riduci al minimo il numero di scenari e plugin.

3. Disporre JavaScript e CSS nell'ordine corretto

Si consiglia di posizionare i file CSS nella parte superiore del codice della pagina e il codice JavaScript in basso. Dopo questa ottimizzazione, verrà caricato prima il contenuto statico e poi solo la grafica dinamica.

Gli elementi Flash o le animazioni che richiedono più risorse per il download non si "estraggono" in avanti e rovinano l'impressione del sito sin dai primi secondi. Ciò garantirà un download fluido dei contenuti e aumenterà l'appeal estetico della risorsa.

4. Ridurre il numero di script esterni

Gli script esterni sono parti di codice (testi) a cui si accede tramite un collegamento esterno. I collegamenti creano richieste aggiuntive a molti server diversi, il che alla fine rallenta il sito. Per evitare ciò, si consiglia di utilizzare principalmente script locali incorporati nella struttura del codice sorgente della pagina.

Naturalmente, concentrarsi sugli script locali creerà alcune limitazioni nell'aspetto e nella funzionalità del sito. Ma il vantaggio risultante in termini di velocità di download vale questi "sacrifici".

5. Abilita Lavaggio

Questa funzionalità PHP consente di non attendere che il server dell'utente carichi le informazioni dalla risorsa, ma di emetterle in parti. Mentre i dati vengono trasmessi al browser, la finestra aperta non rimarrà vuota ma verrà riempita senza problemi di elementi caricabili del sito. Tale accelerazione è particolarmente necessaria per le risorse Web con un'interfaccia complessa e un traffico elevato.

È meglio posizionare la funzione flush all'inizio del codice sorgente della pagina, subito dopo la testa. Dall'intestazione, il contenuto HTML si aprirà più velocemente e puoi anche abilitare il caricamento parallelo di elementi CSS e JavaScript.

6. Memorizza le pagine nella cache

La memorizzazione nella cache salva alcune informazioni dalle pagine del sito (flash, grafica, JavaScript e CSS) al browser dell'utente. Nella prossima esecuzione, questi file vengono scaricati istantaneamente dal browser, dando al sito una velocità extra.

Puoi abilitare la memorizzazione nella cache aggiungendo un'intestazione di scadenza al codice HTML. I siti WordPress possono essere facilmente memorizzati nella cache utilizzando l'installazione di plug-in con funzionalità gratuite o parzialmente gratuite, come W3 Total Cache, Cache Enabler o Zen Cach.

Per i nuovi siti, è meglio utilizzare la memorizzazione nella cache solo dopo la completa preparazione per l'avvio. Se abiliti la funzionalità durante lo sviluppo, ulteriori modifiche potrebbero non essere visualizzate correttamente sul sito.

7. Utilizzare una CDN

Content Delivery Network: una catena di server sparsi nei data center di tutto il mondo per aumentare la velocità con cui i contenuti vengono trasferiti ai visitatori. Più il visitatore è geograficamente vicino ai server CDN, più velocemente vengono trasmessi i pacchetti di dati dal sito.

L'uso della CDN è particolarmente importante per i contenuti e i portali ad alto carico, il cui pubblico principale è molto lontano dai server fisici. Questo servizio riduce al minimo i tempi di attesa per i download da siti esteri, contribuendo ad aumentare il loro posizionamento nei risultati di ricerca locali. Dopotutto, il contenuto viene scaricato dalla memoria del server più vicina all'utente nel suo paese.

8. Ottimizza grafica e video

È necessario selezionare la grafica e il formato video corretti, poiché il formato del file influisce direttamente sulla velocità con cui le informazioni vengono presentate ai visitatori.

Formati consigliati per diversi contenuti web:

• SVG – per loghi vettoriali e semplici elementi dell'interfaccia;
• PNG – per schemi e loghi non vettoriali;
• JPG – per foto e immagini;
• MPEG4 – per video e animazione.

Anche per video e animazioni è disponibile un formato WEBM relativamente nuovo. Nella maggior parte dei casi, fornisce una dimensione video più piccola con la stessa qualità. Tuttavia, il modulo ha un supporto browser limitato (ad esempio, non esiste supporto nel browser Safari macOS / iOS). Pertanto, si consiglia di utilizzare un file WEBM come sorgente video prioritaria e installare MPEG4 come sorgente alternativa. Puoi anche utilizzare l'unico MPEG4 se la condivisione è inaccettabile o scomoda.

Separatamente, notiamo che il formato vettoriale (SVG) consente il ridimensionamento senza perdita di qualità grafica.

Fasi di ottimizzazione dell'immagine

Passaggio 1: ridurre le dimensioni dell'immagine.

Molti CMS popolari, come WordPress o Joomla, hanno plug-in integrati per ottimizzare le immagini dall'originale. Ma questo metodo crea un carico aggiuntivo e può rallentare il sito. Ogni volta che la pagina viene caricata, il browser accede prima al codice sorgente e solo dopo ridimensiona l'immagine al volo.

Per evitare una perdita di velocità durante il caricamento delle immagini, saranno utili gli editor grafici integrati nel sistema operativo, come Preview (Mac) o Microsoft Paint (Windows), nonché i servizi online con funzionalità simili. Lavorare con loro richiederà competenze minime nel lavoro con la grafica.

Passaggio 2: comprimi il file prima di scaricarlo.

Anche dopo aver ottimizzato la dimensione dell'immagine, il suo "peso" è generalmente ancora lontano dall'essere ottimale. Servizi convenienti e gratuiti come ImageResize o TinyPNG aiutano a ridurre le dimensioni senza perdere la qualità dell'immagine. La maggior parte dei processi qui sono automatizzati. L'utente deve solo caricare i file e scaricare già compressi alla dimensione ottimale dell'immagine.

9. Applicare la compressione del file Gzip

Gzip è un metodo semplice per comprimere i file del sito per risparmiare risorse del canale e velocizzare il caricamento. Utilizzando Gzip, i file vengono compressi in un archivio che il browser può scaricare più velocemente, quindi decomprimere e visualizzare il contenuto.

Abilitare l'uso di Gzip è abbastanza semplice: devi solo aggiungere alcune righe di codice al file .htaccess. Ad esempio, quando si utilizza il web server Apache, per i webmaster è disponibile il modulo mod_gzip, per poter attivare Gzip, in questo caso è necessario aggiungere tale codice a .htaccess

La compressione del file Gzip viene eseguita per ridurre il numero di richieste al server da un browser. In parole povere, questa tecnologia riduce il peso iniziale dei file al 70% per velocizzare il download.

Modo per incorporare la compressione Gzip

Aggiungi il seguente frammento di codice al file di configurazione del server web ".htaccess".

Su server Apache

# BEGIN GZIP COMPRESSION
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION

Sul server Nginx

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

10. Cambia hosting

Il metodo più semplice per velocizzare i download è cambiare il provider di hosting. Il risparmio sull'allocazione delle risorse porta spesso a un significativo deterioramento della qualità dei servizi, che vanifica tutti i tentativi di velocizzare il sito sulla vite.

Se le manipolazioni con contenuto, codice e plug-in non portano risultati, è tempo di pensare a scegliere una "casa" più decente per il sito. Su un hosting di qualità con disponibilità elevata e supporto tecnico premuroso, la risorsa Internet riceverà un potente impulso per aumentare la velocità del lavoro. E questo sarà apprezzato da un pubblico riconoscente.

La cosa più importante è...

È necessario sforzarsi di accedere al sito per non più di 2-3 secondi. Non importa se il sito si apre per 2 o anche 3 secondi, ma se ce n'è di più, e quindi questo è un motivo per pensare di accelerare il caricamento del sito.

È inoltre necessario comprendere che esistono due parametri per la velocità di caricamento della pagina.

La prima è la velocità di visualizzazione dei contenuti (a questo punto la pagina è già aperta e mostrata all'utente, mentre l'indicatore di pagina trasparente è ancora visualizzato finché tutti i file statici e gli script asincroni non sono collegati).

La seconda, inoltre, è la velocità di formazione effettiva della pagina, quando tutto ciò che doveva essere collegato era connesso. È necessario concentrarsi sul primo parametro, ovvero non devono trascorrere più di tre secondi prima che venga visualizzato il layout del sito.

Conclusione

Non puoi ignorare una cifra come la velocità di caricamento del sito. È stato lui che, sin dai primi secondi, crea un ambiente confortevole per i visitatori. Più velocemente l'utente ottiene il contenuto desiderato, maggiore è la probabilità che si formi un'immagine positiva della risorsa e si costruisca fedeltà ad essa.