Share
Dai una spinta al tuo sito! Implementa tecniche di ottimizzazione cruciale che miglioreranno non solo le tue YSlow punteggio, ma anche il tuo rank di Google. In questo tutorial copriremo tutti gli aspetti della memorizzazione nella cache W3, ySlow, velocità della pagina di Google, sprite CSS e regole htaccess, per ottenere un punteggio ySlow elevato come quello che ho fatto sul mio blog.
Una breve nota prima di iniziare, anche se questo tutorial coprirà tutto con tutti i dettagli necessari, ci saranno (ove possibile) delle scorciatoie, per farti risparmiare tempo.
Installa un Caching Plugin: Per prima cosa, qualunque plugin di cache stai usando, spegnilo SUBITO! A meno che non sia il potente W3 Total cache, dato che è quello con cui lavoreremo qui. (Ok, quindi è venuto un po 'forte, ma ho usato molti plugin per la cache e W3 è il mio preferito. Se ne stai usando un altro per qualsiasi ragione, probabilmente va bene - ci sposteremo insieme al W3 raccomandazione però.) Vai nella sezione "Aggiungi nuovi" plugin di WordPress, cerca "W3 Total Cache" scaricalo, installalo ma non accenderlo ... beh, non ancora.
Installa un plugin per Database Manager: Successivamente avrai bisogno di un altro plug-in chiamato "WP-DBmanager" di nuovo, cerca e installa, assicurandoti di non avere altri plug-in del database installati.
Prima di andare avanti e iniziare a migliorare il tuo sito, vediamo prima di cosa si stava occupando. Apri Google Chrome o installalo se non lo hai già. Una volta installato, installa il plugin ySlow QUI una volta installato vedrai una nuova icona nella parte in alto a destra dello schermo. Cliccalo. (Assicurati di essere sulla homepage del tuo sito)
ySlow controllerà quindi il tuo sito, ti dirà cosa è buono, cosa c'è di male e tutto ciò che sta in mezzo. Vogliamo concentrarci innanzitutto su tutto ciò che è al di sotto del voto B. Di seguito, eseguirò tutte le impostazioni W3 necessarie per migliorare il tempo di caricamento dei siti.
Una volta attivata W3 Total Cache, verrà visualizzata una nuova scheda della barra laterale denominata "Prestazioni". Ora ovviamente eseguiremo tutte le diverse sezioni di W3 ma per risparmiare tempo potremo importare il file delle impostazioni W3, raggruppato nei "file sorgente" e passare al punto 2C.
Qui è dove siedono tutte le impostazioni per W3. Diamo prima un'occhiata alle "Impostazioni generali", dovrai spuntare le seguenti caselle (per abilitare):
Cache di pagine (selezionare "Disco: ottimizzato" nel menu a discesa) - Le pagine di cache ridurranno il tempo di risposta del sito e aumenteranno la scala del server Web.
Minify (Seleziona "Manual", lascia le altre impostazioni) - Minification può ridurre la dimensione del file di HTML, CSS, JS e feed rispettivamente di ~ 10% in media.
Non spuntare la cache del Database (lo riordineremo in un secondo momento tramite un metodo diverso)
Cache degli oggetti (selezionare "Disco" nel menu a tendina) - La memorizzazione nella cache degli oggetti aumenta notevolmente le prestazioni per i siti altamente dinamici (che utilizzano l'API della cache degli oggetti).
Browser Cache: attiva la compressione HTTP e aggiungi intestazioni per ridurre il carico del server e ridurre il tempo di caricamento dei file.
Lascia intatto il CDN, la vernice e la nuvola. (ancora una volta per fare questo veloce carica il file delle impostazioni incluso nei "file sorgenti" tramite l'opzione in fondo alle "Impostazioni generali")
Fare clic sulla scheda / collegamento "Minify" nella parte superiore del pannello / pagina W3. Nella sezione "HTML e XML" assicurati che le prime tre caselle siano spuntate. Quindi fare clic sul pulsante "Guida" in alto.
Una volta caricato questo popover, ti troverai di fronte a un elenco di file javascript, seguiti dai fogli di stile a cui il tuo sito si sta collegando. In sostanza, vogliamo provare a spuntare tutto eccetto:
File Jquery
Annunci Google (o qualsiasi annuncio pertinente)
Qualsiasi file stats.wordpress.js (ne avrai uno se hai installato jetpack
Tuttavia per i CSS è possibile selezionare in modo sicuro tutti loro. Ora questa non è una scienza esatta in quanto si tratta di minimizzare i file del tema (non ti preoccupare che non sia distruttivo) e ci sono molti temi diversi che utilizzano una vasta gamma di file, plugin e funzioni diversi. In pratica, visualizza in anteprima le modifiche prima di inviarle.
Minify è uno dei più grandi miglioramenti che integrerai, dopo aver selezionato tutti i tuoi file (e fatto lo stesso con ogni tema, se ne stai usando più di uno), fai clic su "Applica e chiudi", seguito direttamente da "Salva tutto impostazioni "(distribuirlo se il tuo sito sembra ancora / funziona allo stesso modo).
Una volta entrati nella scheda / pagina "Cache del browser" sarà necessario cambiare la durata di "Scadenza dell'intestazione" su 691200 secondi. Questo aumenterà immediatamente il tuo punteggio di ySlow.
Ora torna a "Impostazioni generali" e fai clic su "svuota tutte le cache", quindi vai alla tua home page ed esegui di nuovo il test di ySlow, dovresti vedere un bel miglioramento.
Sotto la scheda della barra laterale "Prestazioni" nel backend di WordPress dovrebbe esserci un'altra scheda con il nome "Database" (se non lo è, tornare indietro e attivarla).
Ora questo è molto semplice, devi fare tre cose, eseguire il backup, riparare, ottimizzare.
Per eseguire il backup fare clic sul "DB di backup", quindi in basso fare clic su "Backup" (non preoccuparti di gzipping).
In seguito vogliamo riparare il tuo database (solo in caso di necessità) quindi vai su "Repair DB" nella barra laterale. Fai clic sul pulsante "Ripara" in basso.
Infine, ottimizzalo. Fai clic sul pulsante della barra laterale "Ottimizza DB" e hai indovinato, fai clic sul pulsante "Ottimizza" in basso.
Per evitare questo processo, fai nuovamente clic sulla scheda della barra laterale "Opzioni DB". In fondo ci sarà una sezione "Programmazione automatica". Assicurati che i backup siano fatti OGNI GIORNO (non puoi fare troppa attenzione) e impostalo per ottimizzare dire ogni pochi giorni e riparare una volta alla settimana. Quindi salva le modifiche.
Ora in ySlow probabilmente avrete notato nella sezione "Crea meno richieste HTTP" una stringa di testo che dice qualcosa come "Questa pagina ha 10 immagini di sfondo esterne. Prova a combinarli con gli sprite CSS. "
Immagina i risparmi se tutte quelle piccole immagini potessero essere solo un'immagine ... Sarebbe sicuramente velocizzare le cose. Per questo useremo uno strumento gratuito chiamato "Spriteme" quindi vai sul sito QUI (fallo in una nuova scheda, assicurati di nuovo che il tuo sito sia sulla homepage).
Una volta aperta la pagina iniziale in una scheda e aperto lo spriteme in un'altra direzione trascinare il testo "SpriteMe" nella scheda contenente il sito. Una casella apparirà in alto a destra della scheda / finestra. Dovrai fare clic sul pulsante "Crea sprite" che si trova all'interno della casella "Sprites consigliati". Una volta eseguita la magia, scarica l'immagine che ha creato e caricala in qualche punto del tuo sito (preferibilmente all'interno del tema che stai utilizzando). 
Ora fai clic sul pulsante "Esporta CSS" in alto a destra del popover "SpriteMe", copia e incolla il codice css che ti ha dato (è tutto ADESSO) direttamente nella parte inferiore dei tuoi temi "style.css" o ovunque verrà utilizzato al posto del codice predefinito (in quanto non vogliamo sovrascrivere il codice del tema predefinito). Dovrai assicurarti che il secondo "background-image: url" sia cambiato da "http://www.jaredhirsch.com" a dove hai salvato l'immagine sprite da prima.
Una volta fatto, per favore, ancora una volta "svuota tutte le cache" nella scheda della barra laterale "Prestazioni".
Per la maggior parte personalmente utilizzo sempre Photoshop per comprimere le mie immagini prima del caricamento, ma per molti di voi questa non è un'opzione in quanto non si dispone di Photoshop. Quindi qui ti assisterò su come ridurre la dimensione del file delle tue immagini.
Prima di tutto vorrai assicurarti che tutte le immagini dei temi siano ottimizzate e puoi farlo acquistandole tutte e scottandole in questa fantastica piccola app chiamata "ImageOptim"
Una volta che le tue immagini a tema sono belle e compresse potresti voler guardare plugin come "Smush.it" per Wordpress che ottimizzeranno le immagini che potresti usare nei post e simili.
Questa è sicuramente una tecnica di ottimizzazione cruciale. Per abilitare la compressione PHP GZIP, modifica il php.ini (posizioni di esempio come in / etc / o / usr / local / lib) con qualsiasi editor di testo come vi, e individua la seguente direttiva:
zlib.output_compression
Il valore predefinito è Off, cambia l'impostazione su On per rendere la linea simile a quanto segue:
zlib.output_compression = On
Riavviare il server HTTPD Apache dopo la modifica. Ogni pagina Web prodotta da PHP verrà ora compressa prima di inviarla tramite Internet al browser Web per la decodifica.
PHP ha anche una direttiva che può essere utilizzata per regolare il livello di compressione. Per impostare il livello di compressione, utilizzare la riga seguente in php.ini, con valori validi compresi tra 1 e 9, dove 1 è il meno compresso e 9 è il più compresso. Il livello di compressione predefinito è 6, che fornisce la compressione migliore senza compromettere le prestazioni del server.
zlib.output_compression_level = 6
In precedenza, la compressione PHP si ottiene inserendo codice all'inizio di ogni script PHP. Il metodo non è raccomandato in quanto ogni script deve essere modificato. l'abilitazione di zlib in php.ini si applicherà a tutti gli script PHP sul server Web senza esclusione.
Se è impossibile modificare il file php.ini, o non ha il controllo su php.ini soprattutto su un hosting condiviso, la compressione GZIP di PHP può anche essere impostata tramite il file .htaccess, che si trova di solito nella root del sito. Per abilitare la compressione GZIP di PHP tramite Zlib, basta aggiungere la seguente riga al file .htaccess. Si noti che ogni sito Web deve essere modificato individualmente.
php_flag zlib.output_compression on
Lo svantaggio di abilitare la compressione GZIP tramite PHP è che solo le pagine Web generate da script PHP verranno compresse dalla codifica GZIP. Tutti i file CSS o JavaScript esterni non verranno compressi. Per abilitare la compressione GZIP su tutti i tipi di file, usa mod_deflate o mod_gzip sul web server HTTPD.
Verifica e verifica che la compressione GZIP funzioni correttamente
Mentre veniamo verso la fine di questo tutorial voglio solo passare attraverso alcune ultime cose. Ora che le tue immagini sono state troncate e gli sprite sono stati fatti, potresti voler cancellare sia la cache del browser che ancora una volta "svuota tutte le cache" nella scheda della barra laterale "Prestazioni".
Ora torniamo indietro, esci da WordPress, carica la home page dei siti e fai un test ySlow. Anche in questo caso dovrebbe essere aumentato, nella sezione CDN di ySlow avete l'opzione "Aggiungi come CDN" su alcuni componenti. Fare ciò aumenterà ulteriormente il tuo livello.
Se vuoi aggiungere correttamente un CDN dedicato, ti suggerisco di seguire questo TUTORIAL.
Ora le dita incrociate dovresti guardare un punteggio di prova di grado A e se lo paragoni con il test di velocità della pagina di Google, vedrai un punteggio molto sano.
Una sezione di ySlow che non ho coperto è il "dominio gratuito dei cookie" che è quando il browser effettua una richiesta di un'immagine statica e invia i cookie insieme alla richiesta, il server non ha alcun uso per quei cookie. Quindi creano solo traffico di rete senza una buona ragione. Assicurati che i componenti statici siano richiesti con richieste prive di cookie. Crea un sottodominio e ospita tutti i tuoi componenti statici.
Se il tuo dominio è www.example.org, puoi ospitare i tuoi componenti statici onstatic.example.org. Tuttavia, se hai già impostato cookie sul dominio di esempio example.org anziché su www.example.org, tutte le richieste su static.example.org includeranno tali cookie. In questo caso, puoi acquistare un dominio completamente nuovo, ospitare i tuoi componenti statici e mantenere questo dominio privo di cookie. Yahoo! usa yimg.com, YouTube usa ytimg.com, Amazon usa images-amazon.com e così via.
Un altro vantaggio dell'hosting di componenti statici su un dominio senza cookie è che alcuni proxy potrebbero rifiutarsi di memorizzare nella cache i componenti richiesti con i cookie. In una nota correlata, se ti chiedi se dovresti usare example.org o www.example.org per la tua home page, considera l'impatto dei cookie. Se ometti www non ti resta altra scelta che scrivere i cookie su * .example.org, quindi per motivi di prestazioni è meglio utilizzare il sottodominio www e scrivere i cookie su tale sottodominio.
Non entrerò in questo, ma quanto sopra dovrebbe darvi una buona idea. Approfondirò questo argomento in un tutorial successivo. Questo migliora il punteggio ma non è del tutto essenziale.
Questi sono i passi che faccio quando costruisci siti web e fanno una grande differenza quando si tratta di migliorare la velocità e consentire tempi di risposta rapidi. Per quelli di voi che necessitano di maggiori informazioni o che desiderano un po 'di aiuto nell'esecuzione delle procedure si prega di commentare qui sotto o mandarmi un messaggio tramite il mio profilo dell'autore.
Accentsconagua