Share
Nella prima parte di questa serie, abbiamo esaminato il caching e l'ottimizzazione del database. In questa seconda parte, parleremo di compressione, minificazione e utilizzo di un CDN.
Cominciamo!
È semplice: se la dimensione della tua pagina è 1 MB, un visitatore con una connessione a 10 Mbit può caricarlo in 800 millisecondi. Quindi, se puoi ridurre la dimensione della tua pagina a, ad esempio, 600 KB, ci vorrebbe solo mezzo secondo per caricarla dal visitatore.
Fortunatamente, ci sono molti modi per comprimere e minimizzare l'output CSS, JS e HTML delle tue pagine. Vediamo come:
I formati di compressione HTTP come gzip e deflate sono utilizzati da quasi tutte le piattaforme server (inclusi Apache e Microsoft IIS) e accettati praticamente da ogni browser, quindi è probabile che la compressione HTTP venga eseguita su tutti i dispositivi e tutti i server. (Il tuo server potrebbe anche abilitarlo per impostazione predefinita. Per controllarlo, cerca "controllo compressione http", fai clic su uno dei risultati e digita il tuo indirizzo web.)
Quindi, come abilitiamo la compressione HTTP? Ci sono diversi modi per farlo, ma penso che questi due possano aiutare tutti:
1. Abilita la compressione tramite .htaccess: Se il tuo server non ha abilitato la compressione HTTP per impostazione predefinita, puoi abilitarlo incollando il seguente codice nel tuo .htaccess file (preso dal file HTML5 Boilerplate):
# Forza compressione per intestazioni storpiate. # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Contrassegna determinate risorse come compresse per: # 1) impedire ad Apache di ricomprimerli # 2) assicurarsi che siano serviti con l'header di risposta HTTP # "Content-Encoding" corretto SetEnvIfNoCase ^ (Accept-EncodXng | X-cept-Encoding | X 15 | ~ 15 | - 15) $ ^ ((gzip | deflate) \ s *,? \ S *) + | [X ~ -] 4,13 $ HAVE_Accept-Encoding RequestHeader append Accept-Encoding "gzip, deflate" env = HAVE_Accept-Encoding AggiungiEncoding gzip svgz # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Comprime tutte le uscite etichettate con uno dei seguenti tipi di media . # IMPORTANTE: per le versioni di Apache sotto 2.3.7 non è necessario abilitare # 'mod_filter' e rimuovere il ''&' '# linee come' AddOutputFilterByType 'è ancora nelle direttive principali.AddOutputFilterByType DEFLATE "application / atom + xml" \ "application / javascript" \ "application / json" \ "application / ld + json" \ "application / manifest + json" \ "application / rss + xml" \ "application / vnd .geo + json "\" application / vnd.ms-fontobject "\" applicazione / x-font-ttf "\" applicazione / x-web-app-manifest + json "\" application / xhtml + xml "\" applicazione / xml "\" font / opentype "\" immagine / svg + xml "\" immagine / x-icona "\" testo / cache-manifest "\" testo / css "\" testo / html "\" testo / plain "\" testo / vtt "\" testo / x-componente "\" testo / xml "
2. Abilita la compressione HTTP con i plugin: Se non sai come modificare il tuo .htaccess file (o semplicemente non si vuole farlo), è possibile abilitare la compressione HTTP utilizzando i due popolari plug-in di memorizzazione nella cache: WP Super Cache e W3 Total Cache. Entrambi offrono la possibilità di abilitare la compressione HTTP tramite le loro pagine delle impostazioni.
Le risorse mininarie sono importanti quasi quanto comprimerle. Nei file PHP, gli spazi bianchi non sono molto importanti poiché vengono analizzati e compilati; ma lo spazio bianco nei file HTML, CSS e JS aumenta la dimensione del file, il che significa che i visitatori scaricheranno file più grandi. Per evitare ciò, è possibile eliminare tutti i caratteri non necessari nei file HTML, CSS e JS.
Oltre a ridimensionarli, puoi anche combinare più file CSS e JS in un unico file CSS e JS. In questo modo si ridurrà il numero di ricerche DNS e i browser non scaricheranno separatamente ogni file CSS e JS.
Minimizzando e combinando le tue risorse manualmente è considerato una cattiva pratica e potrebbe essere impossibile in alcuni casi. Fortunatamente, è davvero facile ottenerlo automaticamente con i plugin. Se si utilizza il plug-in W3 Total Cache, è possibile abilitare la minimizzazione e combinare i file CSS e JavaScript tramite la pagina Impostazioni del plugin. Se non lo stai utilizzando, puoi installare un plug-in separato: il mio preferito è Autoptimize. L'ottimizzazione automatica fa il lavoro perfettamente e ha alcune opzioni molto utili che puoi gestire. Sto usando questo con WP Super Cache e sono estremamente soddisfatto dei risultati.
Se il tuo blog è di più visivo della media, se le tue pagine sono piene di immagini, o anche se sei un blogger regolare e vuoi caricare le tue immagini più velocemente, puoi (e dovresti) utilizzare le reti di distribuzione dei contenuti (che sono comunemente chiamate CDN).
La logica alla base delle reti di distribuzione dei contenuti è quella di servire i contenuti in modo più efficiente utilizzando "edge server" in tutto il mondo. Questi server possono contenere il contenuto scaricabile (come immagini, file CSS e simili) e quando un utente visita la tua pagina, il server edge più vicino al visitatore serve i file. Con prezzi bassi su larghezza di banda (anche gratuita, a volte) e server veloci e fiammanti, la consegna dei tuoi contenuti sarà più veloce che mai.
Ci sono più di alcuni plugin là fuori che forniscono la sincronizzazione delle tue risorse con CDN diversi, ma ne nominerò solo alcuni:
In questa seconda parte della serie, abbiamo proceduto alla compressione e alla minimizzazione delle risorse e all'utilizzo di un CDN in WordPress. Nel prossimo (e ultimo) articolo, vedremo l'importanza dell'ottimizzazione dell'immagine, e chiuderemo con alcune considerazioni sull'uso di WordPress con il buon senso.
Cosa ne pensi di accelerare WordPress? Condividi i tuoi pensieri qui sotto nella sezione commenti. E se ti è piaciuto l'articolo, non dimenticare di condividerlo.
Ci vediamo nella prossima parte!
Accentsconagua