Share
Sappiamo tutti che ci sono innumerevoli motivi per cui i tempi di caricamento delle pagine Web salgono alle stelle, tuttavia, individuare il problema può essere costoso in termini di tempo e denaro. Quindi, perché sprecare gli sforzi quando qualcun altro, o qualcos'altro, può fare tutto il lavoro sporco per te?
Incontrare Yahoo YSlow, un analizzatore di pagine web gratuito per Firefox.
YSlow ha due requisiti:
YSlow piggyback su Firebug, quindi dovrai installare i componenti aggiuntivi nell'ordine elencato sopra prima di continuare.
Web designer, sviluppatori e copywriter si sforzano di avere i contenuti più unici e interessanti rispetto ai loro concorrenti.
Potresti aver passato giorni a perfezionare il tuo nuovo post sul blog e quasi caderti dalla sedia con eccitazione nel vederlo per la prima volta. Ma, dopo che un torrente di visitatori ha invaso il tuo sito web, noti che le cose non funzionano più senza intoppi. Sotto pressione, il tuo nuovo sito web potrebbe rispondere come un Commadore 64.
Gli strumenti di analisi del sito Web generalmente rientrano in due categorie:
YSlow si inserisce nel secondo. Utilizza set di regole predefinite per valutare le prestazioni di una pagina Web e strumenti di terze parti (come Smush.it e JS Minifiers) per aiutare a risolvere eventuali problemi.
Ci sono tre punti di vista:
YSlow include sei strumenti utili: questi vanno dal test del codice JavaScript all'ottimizzazione delle immagini tramite Smush.It (un'altra applicazione web gratuita di Yahoo). L'intera applicazione è racchiusa nella finestra a comparsa di Firebug, che può essere aperta e chiusa da una comoda icona nella barra delle applicazioni del browser.
Facciamo un salto con un'occhiata più da vicino alla vista "Grade".
Usando la home page di Envato come esempio, che è un sito a traffico relativamente basso, vediamo che il punteggio complessivo delle prestazioni è valutato a 74 su 100, con un "C" giallo. Ma cosa significa veramente? Dopo tutto, la pagina web si presenta perfettamente nel browser. Bene, dobbiamo dare un'occhiata più da vicino alle regole a sinistra della vista per capirlo.
Le regole sono suddivise in categorie: contenuto, cookie, CSS, immagini, JavaScript e server. Poiché YSlow ha controllato gli elementi del DOM, ha classificato ciascuno su un set di regole predefinito (in questo caso YSlow V2). Più un elemento è vicino alle regole, più alto è il punteggio. Dopo aver raccolto tutti i punteggi, è stato assegnato il voto finale.
Nel caso di Envato, tutte le regole dell'interfaccia utente hanno ottenuto un punteggio elevato, ma le regole del server sono state eseguite in modo meno efficiente. Questo ha abbassato il voto finale.
Per fortuna ogni regola spiega dove si trova il problema e fornisce una spiegazione dettagliata su come risolvere il problema. Questa funzione fornirà un enorme sollievo a chiunque sia nuovo nell'ottimizzare i siti web.
Per alcuni, alcune regole sono più importanti di altre. YSlow ti fornisce un set di regole predefinito, ma ti consente anche di passare a "classico", "piccolo sito o blog" o crearne di tuoi. Se non ti interessa usare Content Delivery Networks, allora modifica semplicemente un set di regole e rimuovi quella funzione. Davvero non potrebbe essere più facile.
La vista dei componenti elenca gli elementi di un'analisi in una tabella di dati pulita ed espandibile.
Sebbene questa sezione fornisca un'analisi più approfondita, dati come la data di scadenza di un file o il tempo di risposta possono essere utili per comprendere le aree problematiche. Se hai attivato la compressione GZIP, puoi visualizzare qui la differenza di dimensione del file.
Tutti amano un grafico. Anche YSlow.
La pagina delle statistiche è un modo semplice e veloce per comprendere il peso totale delle tue richieste HTTP. In parole povere, ci sono due grafici: cache vuota e cache innescata. Questi grafici interrompono il tuo sito web in HTML, JavaScript, immagini e così via. Le dimensioni dei file di ciascuna vengono quindi visualizzate come segmenti di torta. Empty Cache rappresenta la prima visita del browser alla pagina web. Prime Cache indica quali componenti sarebbero o meno nella cache del browser durante la revisione. Pulito, chiaro ed efficace.
Finalmente, abbiamo gli strumenti. Immediatamente, noterai una mancanza di specificità verso la pagina web analizzata, ma non farti ingannare. Ogni strumento è un potente risparmio di tempo quando si tratta di ridurre, ridurre e comprimere il contenuto. Se hai familiarità con il concetto di ottimizzazione, allora potresti aver trovato strumenti simili prima.
Quando si riducono i tempi di caricamento delle pagine, è importante rimuovere lo spazio bianco e i commenti dai documenti e ottimizzare le immagini.
Per fortuna questi strumenti eseguono tutto il duro lavoro per te, perché farlo a mano ti porterà senza dubbio nella notte. Nessuna quantità di energy drink ti impedirà di impazzire dopo aver cancellato per errore una funzione JavaScript per la centesima volta.
Ci sono otto strumenti del tutto; coprendo tutti loro avrebbero preso un paio di articoli. Quindi, mi concentrerò su Yahoo! Smush.it come esempio.
Yahoo! Smush.it è una piccola applicazione web che può essere utilizzata con YSlow o direttamente dal tuo browser.
Molto semplicemente, Smush.it è un ottimizzatore di immagini senza perdita di dati. YSlow carica le immagini per te, che sono "arrossate" e presentate in una tabella in cui puoi visualizzare la nuova immagine, la dimensione e la percentuale di risparmio della compressione.
È anche possibile mantenere i file nella stessa struttura di directory e scaricarli tutti come un pratico file zip.
Ci sono molte applicazioni gratuite con strumenti simili, ma quelli con YSlow sono un'aggiunta gradita.
Come accennato in precedenza, il punteggio di YSlow delle prestazioni di Envato è 74 con un grado di C. Dedichiamo un po 'di tempo ad analizzare i risultati di YSlow e cosa potrebbe essere fatto per migliorare il punteggio finale.
Ecco i loro miglioramenti suggeriti, partendo dall'alto:
Questa regola passa al dettaglio che ci sono sei script JavaScript esterni e 17 immagini di sfondo esterne. Il loro suggerimento è di combinare i file e utilizzare gli sprite CSS per risolvere il problema.
La prima cosa da fare è dare un'occhiata alla Vista Componenti e, in particolare, ai file JS.
Come mostrano gli URL, solo un file JavaScript è ospitato sullo stesso server della pagina analizzata, questo contiene JavaScript personalizzato per WordPress. Due sono richiesti per JQuery e Google Analytics e gli ultimi tre provengono da formspring.com.
Se i file JavaScript fossero miei, potrei considerare di combinare i file personalizzati application.js e formspring JS in uno e ospitarli localmente. Tuttavia, solo il file application.js sembra essere personalizzato. Quindi, davvero non voglio giocare con il lavoro di qualcun altro. Soprattutto perché alcuni di questi file mancano di informazioni su licenza / copyright.
Anche l'utilizzo dell'hosting di Google per jQuery è considerato una buona pratica, tuttavia, dovrebbero essere aggiornati alla versione più recente di jQuery: 1.4.2.
Quindi, in questo caso, è probabilmente meglio ignorare questa regola poiché qualsiasi modifica ai metodi attuali potrebbe causare alcuni problemi in futuro. La mia unica vera preoccupazione è il tempo di risposta per due dei file FormStack, in questo momento, ognuno di essi parla per oltre 360 ms per rispondere. Se continua così, potrebbe valere la pena trovare un metodo per ospitarli localmente.
Successivamente esaminiamo le immagini; tutti sono ospitati localmente, rispondono entro 40 ms e sono di dimensioni piuttosto ridotte. Questo ci dice che individualmente, questi file sono già ottimizzati per questa pagina. YSlow suggerisce di combinare queste immagini e utilizzare gli sprite CSS per migliorare il nostro voto.
Se non conosci gli sprite CSS, puoi fare clic sul link "Leggi di più", che ti porterà alle migliori pratiche di Yahoo per accelerare la pagina del tuo sito web.
In questo caso, utilizzando un'immagine ottimizzata dovremmo vedere un miglioramento nel tempo di risposta delle immagini. Gli sprite CSS funzionano combinando le immagini di sfondo con una sola e poi usando i CSS per allineare quell'immagine con immagine di sfondo e posizione di sfondo. Non c'è nulla di speciale nel CSS usato, quindi dovrebbe essere compatibile con tutti i principali browser.
Molti siti Web avranno un voto F per questa regola, a causa del fatto che ci vuole un po 'di lavoro per l'installazione; tuttavia, i benefici valgono più del costo del tempo. Inoltre, servizi come Amazon offrono hosting sorprendentemente economico. Mentre Envato utilizza assolutamente CDN per i suoi siti ad alto traffico, come Nettuts +, potrebbero aver deciso che non è necessario per un sito con traffico inferiore.
Di nuovo, ci troviamo di fronte a una regola che riguarda le richieste HTTP. Scadono le intestazioni, perché consentono ai componenti di essere memorizzati nella cache. I componenti memorizzati nella cache (immagini, JavaScript, ecc.) Consentono di risparmiare tempo e larghezza di banda per le visite ripetute a una pagina Web. Vale quindi la pena implementare le date di scadenza per i tuoi contenuti.
YSlow ha trovato 55 componenti "senza una data di scadenza futura" dopo aver analizzato Envato.com. La maggior parte dei componenti sono immagini di sfondo. Sappiamo dal primo suggerimento, "Riduci le richieste HTTP", che possiamo usare gli sprite CSS per ridurre il numero di immagini di sfondo, migliorando automaticamente questo grado.
L'impostazione di intestazioni "Scade" è generalmente un processo semplice e in genere richiede solo una rapida aggiunta al file .htaccess. Una volta applicati, tutti i componenti dovrebbero ora disporre di intestazioni di scadenza appropriate senza ulteriori manipolazioni o modifiche dei file. Per avere una visione completa del tuo file .htaccess e delle intestazioni, è necessario un articolo a parte. Piuttosto che entrare nei dettagli qui, ho incluso una serie di link utili per ulteriori letture:
YSlow ha trovato un foglio di stile al di fuori dell'elemento Head per Envato. Per fortuna, questa è la regola più semplice da rettificare. Mantenendo i fogli di stile nella parte superiore della pagina Web, si aumenta automaticamente la velocità di caricamento della pagina Web. Una volta spostato, YSlow dovrebbe riportare un voto A per questa regola.
La rimozione dello spazio bianco inutilizzato nei documenti riduce la dimensione del documento e aumenta quindi la velocità di download del file. Come accennato in precedenza, YSlow ci fornisce uno strumento di minificazione, quindi tutto il duro lavoro può essere fatto per noi.
Vai alla vista Strumenti e seleziona YUI CSS Compressor. In un batter d'occhio, i tuoi file CSS sono miniati e disponibili per il download. Veloce, pulito e semplice.
Gli ETag forniscono un modo per convalidare una versione specifica di un componente di una pagina Web (immagini, JavaScript, ecc.). Funzionano con il server Web per abbinare il contenuto della cache di un browser con il contenuto sul server web. Sfortunatamente, YSlow ha raccolto due ETAG mancanti per i file ospitati su formspring.com. A causa di ciò, potrebbe essere meglio seguire il suggerimento di YSlow e rimuovere completamente gli ETag. Questo può essere fatto aggiungendo "FileETag nessuno"al tuo file di configurazione di Apache. Ora dovresti vedere un miglioramento in questo livello di regole.
Ci sono molte alternative quando si tratta di analisi del sito web, e non sarei sorpreso se tu avessi i tuoi preferiti. Insieme a YSlow, utilizzo altri quattro analizzatori gratuiti. Come ci si potrebbe aspettare, ognuna offre caratteristiche uniche e, per questo motivo, penso sia importante ricordare che nessuno strumento può fornire un rapporto assolutamente a prova di proiettile.
Per darti un'idea di come ognuna di queste differenze generi un risultato finale, ho incluso una breve descrizione e il punteggio dato al sito web di Envato.
Fornito da AOL, questa applicazione aggiunge una varietà di impostazioni all'analisi. Puoi simulare la versione del browser, la velocità di connessione ed eseguire confronti visivi con altri URL. È una funzionalità eccezionale se desideri iniziare il test A / B.
Punto: N / A. Fornisce una lista di controllo di ottimizzazione e tempi di caricamento.
Page Speed è un altro componente aggiuntivo per Firefox e Firebug. Questo appare anche nello stesso menu di YSlow e fornisce un'analisi simile. Come YSlow, utilizza regole e report su quanto bene ogni componente esegue. Ottimizzerà e ridurrà anche i tuoi contenuti.
Punto: 76/100
Ancora in versione beta, questa applicazione web gratuita controllerà i tuoi contenuti, il ranking di Alexa, il traffico, l'ottimizzazione dei motori di ricerca, i metadati geografici e altro ancora. Ancora una volta, vengono forniti suggerimenti utili ad ogni analisi. Puoi persino aggiungere un widget al tuo sito web, mostrando il tuo "punteggio nascosto".
Punto: 65.8 / 100
Grader è un'altra applicazione web gratuita, disponibile anche per iPhone. Questo strumento è abbastanza simile a WooRank, con un'interfaccia pulita e dettagliata. C'è anche uno strumento dedicato per analizzare i blog: una caratteristica unica tra le cinque elencate in questo articolo.
Punto: 99/100
Applicazioni come YSlow offrono un'analisi rapida ed efficace delle pagine web. Possono generare report dettagliati dalle informazioni raccolte, fornire suggerimenti o strumenti per risolvere i problemi e potrebbero finire per insegnarti qualcosa lungo il percorso. Ma YSlow e le sue alternative avranno sempre una competizione: uno sviluppatore web esperto o esperto o esperto di SEO.
Niente batte conoscenza e pratica; come abbiamo visto, diversi strumenti di analisi presenteranno sempre diversi report.
Non c'è una vera soluzione quando si tratta di ottimizzazione dei motori di ricerca o di aumentare i tempi di caricamento delle pagine web. Tuttavia, una mano come YSlow può alleggerire il tuo carico di lavoro e salvare te o il tuo cliente molto tempo e, soprattutto, denaro, a lungo andare.
Accentsconagua