Semplici passaggi per velocizzare il tuo sito Web pesante di immagini

4

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

Alla ricerca di una soluzione rapida e semplice, i proprietari dei siti installano un vasto numero di plug-in, che a loro volta consumano risorse e ne rallentano solo il funzionamento. 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 fraintendimento dell'ottimizzazione. Nella loro comprensione, l'ottimizzazione è l'accelerazione del copione 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 un bel design grafico.

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, contribuiranno a ridurre al minimo la probabilità di perdita di traffico.

1 Ottimizza il codice HTML e i file CSS e JS

L'ottimizzazione del download è impossibile senza preoccuparsi della "pulizia" del codice trasmesso al browser dell'utente quando si accede al sito. Un numero elevato 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 non necessari, gli elementi di markup e i tag del codice sorgente. Automatizzare il processo aiuterà ad aggiungere un piccolo inserto all'inizio e alla fine del codice HTML del sito.

Questo metodo di memorizzazione nel buffer del contenuto HTML è piuttosto utile, ma può creare un carico aggiuntivo sulla memoria ad accesso casuale.

Raggruppa lo stesso tipo di file CSS e file JS. 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 Rimuovi richieste HTTP aggiuntive

Il caricamento degli elementi della pagina (javascript, immagini, CSS e file flash) occupa la maggior parte 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 o script CSS su una pagina si uniscono in un unico file;
  • Riduci al minimo il numero di scenari e plug-in.
3 Disporre JavaScript e CSS nel giusto ordine

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

Elementi o animazioni flash che richiedono più risorse per il download non "tireranno fuori" in avanti e rovineranno l'impressione del sito fin dai primi secondi. Ciò garantirà un download regolare dei contenuti e aumenterà l'aspetto 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.

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

5 Abilita Risciacquo

Questa funzionalità PHP consente di non attendere che il server dell'utente carichi le informazioni dalla risorsa, ma di emetterle in parti. Durante la trasmissione dei dati al browser, la finestra aperta non rimarrà vuota ma si riempirà agevolmente 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 l'intestazione. Dall'intestazione, il contenuto HTML si aprirà più velocemente e puoi anche abilitare il caricamento parallelo di elementi CSS e JavaScript.

6 Memorizza nella cache le pagine

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

Puoi abilitare la memorizzazione nella cache aggiungendo un'intestazione di scadenza al codice HTML. I siti WordPress vengono 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, è preferibile utilizzare la memorizzazione nella cache solo dopo la piena prontezza per il lancio. Se abiliti la funzione durante lo sviluppo, ulteriori modifiche potrebbero non essere visualizzate correttamente sul sito.

7 Utilizzare un 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 dall'archivio del server più vicino 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 di interfaccia;
  • PNG – per schemi e loghi non vettoriali;
  • JPG – per foto e immagini;
  • MPEG4 – per video e animazione.

Anche per i video e le 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 c'è supporto nel browser macOS / iOS Safari). Pertanto, si consiglia di utilizzare un file WEBM come sorgente video prioritaria e installare MPEG4 come sorgente alternativa. Puoi anche utilizzare solo 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: riduzione delle dimensioni dell'immagine.

Molti popolari CMS, 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 successivamente ridimensiona l'immagine al volo.

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

Passaggio 2: comprimere il file prima di scaricarlo.

Anche dopo aver ottimizzato la dimensione dell'immagine, il suo "peso" è solitamente ancora lontano dall'essere ottimale. Servizi convenienti e gratuiti come ImageResize o TinyPNG aiutano a ridurre le dimensioni senza perdita di qualità dell'immagine. La maggior parte dei processi qui sono automatizzati. L'utente deve solo caricare 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 salvare le 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, il modulo mod_gzip è disponibile per i webmaster, per 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 mina tutti i tentativi di accelerare il sito sulla vite.

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

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ù, allora questo è un motivo per pensare ad accelerare il caricamento del sito.

Devi anche capire che ci sono due parametri per la velocità di caricamento della pagina.

Il primo è la velocità con cui viene visualizzato il contenuto (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).

Inoltre, la seconda è la velocità di formazione effettiva della pagina, quando tutto ciò che doveva essere connesso 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. È lui che fin 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 la fedeltà ad essa.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More