La velocità è usabilità.
Per dirlo in modo più preciso, la velocità del sito Web è una parte importante dell'usabilità. L'interfaccia più intuitiva mai creata dalla mente dell'uomo non ti farà bene se l'utente viene pisciato dal tempo che carica.
Questo è tutto. L'articolo è finito ... Ok, quindi c'è molto di più, ma quella prima frase è circa la metà di quello che devi sapere. Dobbiamo rendere i nostri siti web veloci.
Potrei usare molte espressioni superlative come "rapidissimo" o "estremamente veloce", o anche "più veloce di un proiettile acceleratore", ma sarebbero inadeguate. È più semplice dire che non esiste "troppo veloce".
Abbiamo bisogno di prendere un minuto per parlare del tipo di velocità a cui mi riferisco. In breve, tutta la velocità. Più specificamente, tre tipi di velocità:
Questo sarebbe il tempo necessario affinché tutte le informazioni vengano scaricate sui dispositivi degli utenti. Ciò è influenzato principalmente dalla velocità della connessione Internet e dalla dimensione effettiva dei file.
Non puoi fare molto per la connessione, ma puoi fare molto sulla dimensione del file.
Dopo che i tuoi file sono stati scaricati, devono essere elaborati e resi dal browser. Tutta l'elaborazione e il rendering sono influenzati dal modo in cui il tuo codice è stato scritto e da tutto il resto sul telefono, sul tablet o sul laptop / desktop dell'utente.
L'unica cosa che puoi controllare è il tuo codice, ma questo fa una grande differenza.
E poi c'è il fattore psicologico. I siti Web veloci possono sembrare lenti. I siti Web lenti possono essere fatti sentire un po 'più velocemente con l'applicazione giudiziaria di alcuni trucchi.
Questa parte è dedicata allo studio del tuo utente e alla comunicazione di ciò che accade quando interagiscono con il tuo sito web o la tua app.
È necessario prestare attenzione a tutti e tre gli aspetti della velocità del sito Web per rendere il tuo sito come se fosse veloce. E più grande è il sito, più c'è da ottimizzare.
Iniziamo, allora.
Molte volte, specialmente su quei progetti sperimentali più piccoli che amo così tanto, mi trovo a passare più tempo sul CSS che su qualsiasi altra parte del codice. Spesso c'è anche più CSS scritto di HTML o JavaScript. In questo modo, proprio lì, c'è un indicatore di quanto il tuo CSS possa influenzare le dimensioni del file.
Poi, naturalmente, c'è la questione della velocità con cui il tuo sito web verrà effettivamente eseguito sul desktop, sul laptop, sul tablet o sul telefono dell'utente. Gran parte del "lavoro" effettivo o del rendering di una pagina web viene svolto dal software, con un piccolo aiuto dalla GPU.
Potrebbe caricarsi rapidamente, ma scorrere lentamente. Il modo in cui il tuo CSS è scritto ha un effetto diretto sulla velocità con cui un particolare dispositivo è in grado di visualizzare effettivamente la pagina web una volta che i file sono stati scaricati.
Quando si ottimizza un sito Web per correre più velocemente, il CSS è solitamente un buon punto di partenza.
I CSS che si trovano nel tuo foglio di stile e non fanno nulla rendono i tuoi file inutilmente più grandi. Ok, quindi questo potrebbe sembrare un gioco da ragazzi; ma succede ancora al meglio di noi.
Togli alcuni contenuti e dimentica di cancellare il vecchio CSS. Si modifica la classe o l'ID di un elemento contenitore e si dimentica di eliminare il vecchio CSS. Scrivi dei CSS, comprendi che c'è un modo migliore e dimentica ... hai capito.
Getta più sviluppatori front-end nel mix e hai una ricetta per un foglio di stile ingombrante, ingestibile o una raccolta di essi, se non stai attento. Il codice non utilizzato rallenta il caricamento della pagina in virtù della sua stessa esistenza come dati. Rallenta lo sviluppo perché può confondere le persone che leggono il foglio di stile.
Può anche significare tempi di rendering più lenti, perché è solo un numero maggiore di CSS per il browser da guardare mentre corrisponde a tutti i CSS ai relativi elementi HTML appropriati.
Sia che tu riveda ed elimini manualmente tutti i vecchi CSS, usa strumenti automatici per aiutarti a trovare selettori CSS inutilizzati, o semplicemente elimini le cose a caso fino a quando qualcosa non si rompe (non farlo), devi prendere quel vecchio codice.
Parlando di come il browser corrisponda al CSS con l'HTML appropriato, è tempo di guardare i selettori CSS. Molto è stato scritto su quali selettori rendono il più veloce, quali sono lenti, se dovresti preoccuparti di quelli lenti, e così via.
Il problema è che molte di queste informazioni sono vecchie. Nel 2000, Dave Hyatt (uno sviluppatore che lavorava su Safari e membro attivo del CSS Working Group del W3C) scrisse questo:
La triste verità sui selettori CSS3 è che in realtà non dovrebbero essere utilizzati se ci si preoccupa delle prestazioni della pagina.
Se darai un'occhiata a il documento da quella citazione, vedrai che stava parlando di selettori come : first-child e altri pseudo-selettori. E aveva ragione.
Lo è ancora; ma negli ultimi quindici anni i computer sono avanzati un po '. Al giorno d'oggi, lo sforzo extra richiesto al computer per rendere il CSS non dovrebbe essere evidente da nessuno, tranne quelli che utilizzano il più economico dei dispositivi mobili economici.
Questa è una preoccupazione di per sé, quindi, in realtà, dipenderà dal progetto in questione, dai dati demografici target e così via. In parole povere, usa il tuo miglior giudizio e forse non esagerare con gli pseudo-selettori.
In caso contrario, a meno che le tue pagine non raggiungano la lunghezza del libro, i selettori che utilizzi dovrebbero avere un impatto minimo sulle prestazioni del tuo sito. Ancora, dai un'occhiata al documento collegato sopra e prendi familiarità con ciò che rende il più veloce e cosa no. È ancora possibile trovare le informazioni utili.
Puoi anche vedere Questo articolo da CSS-Tricks per una presa leggermente più recente sull'argomento.
Naturalmente, ci sono anche proprietà CSS che impiegano più tempo a renderizzare rispetto ad altre. Le proprietà classiche come larghezza, altezza e colore sono ancora le più veloci. Quelle che tendono a richiedere un po 'più tempo (e possono variare da browser a browser) tendono ad essere proprietà CSS3 come box-shadow.
Il processo di aggiunta di un'ombra esterna a un elemento è complesso, per quanto riguarda il rendering delle pagine Web. Ciò che è interessante notare è che, come sottolineato Rocce HTML5 , la potenza di elaborazione richiesta può variare notevolmente a seconda delle dimensioni specifiche dell'ombra esterna.
Questo articolo indica che lo stesso vale per altre proprietà come border-radius e transform.
Ancora una volta, questi avrebbero un piccolo effetto sul rendering di una pagina sul desktop o laptop medio. Tuttavia, i dispositivi mobili potrebbero avere un successo maggiore e l'esperienza potrebbe risentirne. Tutti odiano lo scrolling incerto.
Tuttavia, questo deve essere valutato rispetto al costo dell'uso delle immagini per produrre gli stessi effetti. Qualcuno ricorda le cose che abbiamo fatto per ottenere angoli arrotondati, una volta?
Basta non esagerare, e il tuo stile dovrebbe essere abbastanza veloce.
Ora entriamo in altro territorio. Le animazioni CSS possono essere incredibilmente veloci, oppure possono rallentare il browser al punto che le piattaforme di gioco hanno difficoltà a tenere il passo.
Questo è parzialmente perché non tutte le animazioni sono rese ugualmente. Alcuni dei lavori pesanti sono fatti dall'hardware, mentre altri tipi di animazione devono essere resi interamente dalle funzioni del browser stesso. Questo è particolarmente costoso sui dispositivi mobili.
In un altro articolo su HTML5 Rocks, le proprietà CSS che sono le più veloci da animare sono la posizione , la scala , la rotazione e l' opacità.
Controlla l'articolo per una panoramica più completa di ciò che può essere animato mantenendo basso il "costo".
Ecco dove ti offro il consiglio più pratico che io, l'autore, posso darti. Utilizza i preprocessori CSS come LESS, SASS e Stylus. Certo, se li usi male, puoi generare fogli di stile più grandi di quelli che intendi; ma i benefici potenziali ne valgono la pena.
Ad esempio, se si desidera ridurre il numero di richieste HTTP effettuate al server (sempre una buona idea), includere tutti i ripristini, i framework, in un file LESS / SASS. Quando si compila, sarà tutto in un unico foglio di stile. Inoltre, la maggior parte dei preprocessori offre la possibilità di generare tutti i CSS in forma ridotta.
In questo modo, puoi utilizzare tutti i file diversi necessari per scopi di organizzazione del codice, senza influenzare indebitamente le dimensioni del file.
JavaScript può essere molto lento. Per essere più specifici, JavaScript può avere un effetto molto più diretto sulla parte "elaborazione" dell'equazione della velocità rispetto al CSS. Peggio ancora, JS può diventare esponenzialmente più pesante in termini di dimensioni del file al fine di ottenere cose apparentemente banali.
È un doppio tripudio di dolorosa lentezza, ei nostri utenti sono spesso le vittime, specialmente quelle sui browser mobili. Questo non è, tuttavia, la colpa della lingua. Quanto è rovinato il nostro JS ottiene è spesso in proporzione diretta alla nostra ignoranza della programmazione in generale.
Sono un non sviluppatore. Ho spesso usato librerie come jQuery o singoli plugin JS stand-alone per fare cose. Più ho bisogno di fare, più plug-in ho bisogno per far funzionare tutto. Questi plugin e framework sono dotati di opzioni e caratteristiche extra che non potrò mai utilizzare.
C'è l'ingombro della larghezza di banda, proprio lì.
Inoltre, i plugin potrebbero non funzionare bene insieme. Potrebbero rallentarsi a vicenda, o si potrebbe impedire a un altro di lavorare del tutto.
C'è la potenza di elaborazione sprecata, proprio lì.
Se vuoi veramente velocizzare il tuo sito web, eliminando i millisecondi (o interi secondi, in alcuni casi) ecco cosa devi fare:
Come i CSS, è meglio mantenere JS in file esterni e collegati al tuo HTML. Potresti non pensare che sia un grosso problema se non hai molto codice JS, e aggiunge una richiesta HTTP, ma ecco la cosa: i file CSS e JS esterni vengono memorizzati nella cache dal browser.
Pertanto, quando viene richiesta di nuovo quella stessa pagina o vengono richieste altre pagine del sito che utilizzano lo stesso CSS o JS, i file esterni memorizzati nella cache vengono utilizzati anziché essere nuovamente scaricati. Questo è un tempo di caricamento del sito più rapido e un'elaborazione leggermente più veloce. Vale la pena la chiamata in più al server ogni tanto.
Fondamentalmente, la teoria va in questo modo: il browser rende prima quello che si trova all'inizio del codice sorgente di una pagina. Questo è il motivo per cui le cose come il tag si avvicinano alla cima.
I file JavaScript, tuttavia, possono rallentare il tutto interrompendo il browser dal rendering del codice HTML fino al momento del caricamento. Dal momento che la maggior parte degli effetti JS e dei plug-in di JS comunemente utilizzati devono funzionare solo dopo che il resto della pagina è sullo schermo, questo non è l'ideale.
Migliora l'esperienza dell'utente e riduci i tempi di caricamento percepiti collegandoti a quei file esterni nella parte inferiore della pagina, subito prima del tag.
Nel momento in cui un utente interagisce con tutto ciò che richiede JS, dovrebbe essere pronto.
Se stai progettando un'applicazione a tutti gli effetti, allora puoi e forse dovresti ignorare questa sezione. Una struttura buona, flessibile e leggera può dare agli sviluppatori un vantaggio enorme. Per i siti web di piccole e medie dimensioni, tuttavia, includere un framework JavaScript potrebbe essere eccessivo. Su questi siti Web, JS verrà principalmente utilizzato nel back-end del CMS per l'amministrazione dei contenuti. Sul front-end, potresti avere un cursore immagine, o un layout in muratura o due. Se sei davvero fantasioso, potresti avere il completamento automatico sulla barra di ricerca.
La maggior parte dei contenuti non ha bisogno di essere immaginata e animata in questo modo. JavaScript dovrebbe, per quanto possibile, essere riservato per migliorare l'esperienza dell'utente. Affidarsi semplicemente alla bellezza di un sito può risultare in un sito lento e lento, in particolare sui dispositivi mobili.
In un certo senso, tutti i framework di codice sono tutti uguali, che si tratti di JavaScript, PHP, Python, HTML o CSS: ogni caratteristica è un po 'di codice. Quando scegli un framework o un plug-in per un lavoro, chiediti se hai intenzione di utilizzare tutte le funzionalità che offre o anche la maggior parte di esse.
In caso contrario, la struttura è modulare? Puoi scegliere e solo le parti di cui hai effettivamente bisogno? Se è così, e tu credi che il valore delle dimensioni del file ne valga la pena, allora con tutti i mezzi per farlo! Altrimenti, è meglio fare in modo di vedere cosa si può eliminare più di ciò che si può stipare.
Non permanentemente! Pensaci in questo modo, c'è qualche contenuto o funzionalità sul tuo sito nascosto da JS? Le persone possono accedervi senza avere abilitato JS nei loro browser?
Se è così, allora fantastico. Tuttavia, se le persone non possono vedere informazioni importanti, contattarti o navigare correttamente senza JavaScript, hai un problema. Certo, puoi contare sulla maggior parte delle persone che lo hanno ancora abilitato, ma hai sempre avuto questi casi limite.
In che modo questo si riferisce alla velocità del sito web? Immagina come si otterrà una navigazione lenta se improvvisamente una parte del tuo sito web non funziona.
No seriamente, se non sei uno sviluppatore e hai il budget per uno, prendi uno, anche per lavori piccoli e semplici. A lungo termine è più economico assumere una persona esperta per farlo bene, una volta.
Nel caso in cui le cose vadano davvero male (e qui stiamo parlando di computer, quindi qualcosa andrà storto), scopriranno cosa è andato storto più velocemente. Avranno esperienza nel trovare quei tipi di problemi e risolverli. Se non altro, faranno meglio a cercare su quei particolari argomenti.
Soprattutto, sapranno come fare ciò che deve essere fatto con meno codice. Meno codice (di solito) funziona più velocemente e (sempre) scarica più velocemente. Questo è il consiglio più semplice che posso dare.
(Se sei uno sviluppatore, o stai imparando, ho compilato un elenco di tutorial che si trovano in fondo a questo articolo. Sono incluse alcune guide per principianti per scrivere JavaScript che funziona velocemente.)
Quando estrai il video dall'equazione, la cosa più importante in un determinato sito basato sui contenuti sono le immagini. Le immagini tendono ad essere grandi, ingombranti e lente come l'inferno quando non sono ottimizzate.
Ora, con la proliferazione degli schermi retina che ci costringono a usare immagini più grandi se vogliamo che le cose sembrino a posto su ogni dispositivo, il problema non sarà più facile da risolvere. E peggio, è un problema facile da dimenticare fino a quando non si finisce per spendere più del previsto sulla larghezza di banda.
Quando ogni byte conta, non possiamo permetterci di dimenticare.
La buona notizia è che questo non è un nuovo problema in alcun modo. Perché è buono? Significa che ci sono un sacco di potenziali soluzioni tra cui scegliere e puoi usarne più di una alla volta. In effetti, è generalmente una buona idea.
Quindi, fino a quando gli ISP e le società di hosting inizieranno a darci tutta la larghezza di banda illimitata (non trattenere il respiro), ecco alcune cose che puoi fare:
In poche parole, fai il più possibile, visivamente parlando, con CSS e JavaScript prima di passare alle immagini. Il codice sarà sempre più economico da trasferire rispetto alle immagini, quindi segui il più possibile. Nonostante la potenza di elaborazione consumata da ombre, gradienti e simili, basati su CSS, prendi in considerazione i trade-off.
Inoltre, tieni presente che le immagini SVG contano, in questo caso, come "codice", perché è tutto ciò che sono: codice XML che viene reso come un'immagine. Quindi dovrebbero essere usati ogni volta che hai bisogno di qualcosa di correlato al vettore.
Ora, tornando a quegli schermi retina di cui sopra, cosa facciamo su di loro? Come possiamo risparmiare sulla larghezza di banda lì?
Qui è dove ci rivolgiamo all'elemento e alla proprietà dell'insieme di immagini . Sono relativamente nuovi e non completamente supportati, ma consentono ai browser di scegliere le dimensioni appropriate per il dispositivo che viene utilizzato.
Quindi, anche se questo non ti farà risparmiare larghezza di banda per chi guarda il tuo sito nel loro iMac, non è un grosso problema dato che molto probabilmente hanno la banda larga. Qualcuno sul proprio telefono, nel frattempo, ottiene una versione più piccola della stessa immagine, impedendole di aspettare troppo a lungo.
Molti problemi con le dimensioni delle immagini vengono corretti dopo aver appreso quale formato di immagine utilizzare in una data situazione. Potrei andare avanti sui formati di immagine specifici, su come funziona la compressione e così via, ma devi solo ricordare un paio di cose:
Questo è tutto. Se si esegue questa operazione e si utilizzano le impostazioni di ottimizzazione quando si salvano le immagini, è possibile ottenere spesso una qualità discreta con file di dimensioni relativamente ridotte.
Tuttavia, esiste un nuovo formato chiamato WebP, supportato automaticamente da Chrome e Opera. Google reclami i file WebP sono inferiori del 26% rispetto ai PNG e il 25-34% più piccoli in base a un paio di fattori.
Questa è una grande notizia, tranne due cose: Firefox e IE. Ora, se non ti dispiace usare fallbacks e uno script extra, puoi usare il formato WebP adesso, oggi. Basta scaricare WebPJS e sei a posto.
WebPJS utilizza JavaScript e un po 'di Flash ( sigh ... ma è solo per IE) per farlo funzionare, ma funziona. Potresti prenderlo in considerazione se devi servire molte e grandi immagini velocemente, con il lato negativo che non funzionerà senza il JS.
Ci sono due tipi di compressione che puoi usare sulle tue immagini. Innanzitutto, abbiamo una compressione con perdite . Questo è usato su formati con perdita di dati come JPEG. Ti permette di comprimere qualsiasi immagine quanto vuoi con la consapevolezza che la qualità peggiorerà sempre di più. Le cose verranno pixelate e perdono definizione.
La compressione senza perdita di dati viene utilizzata su formati come PNG e può ridurre la dimensione del file in una certa misura. Tuttavia, ha i suoi limiti. Arriva sempre un punto in cui è impossibile ridurre l'immagine senza perdere qualità.
Se hai Photoshop o un editor di immagini avanzato in modo simile, è spesso meglio usarli per comprimere le tue immagini in modo che tu possa vedere come sarà l'output quando hai finito.
(Gli strumenti automatici, in particolare gli strumenti online, nella mia esperienza, tendono a comprimere le cose forse un po 'troppo in là. Tuttavia, inserirò i migliori strumenti di compressione che ho trovato nella sezione dei link qui sotto.)
Se stai usando un CMS come WordPress, ridimensionerà automaticamente le immagini troppo grandi. È anche facile trovare plugin che li comprimano automaticamente per te.
Intendiamoci, raccomando solo la compressione automatica nei casi in cui sai che stai per caricare un sacco e molte immagini di qualità simile per lo stesso scopo. Un blog fotografico è un esempio.
Se stai eseguendo un sito in cui gli utenti caricano le proprie immagini, beh ... il ridimensionamento automatico e la compressione sono assolutamente necessari, ed è per questo che tutti i social network lo fanno.
Ecco alcuni consigli che non si adattavano a nessuna delle tre categorie precedenti.
"Minimizzare" il tuo codice significa solo che tutti gli spazi extra e le interruzioni di riga vengono eliminati. Questo può ridurre le dimensioni del file piuttosto significativamente.
Potrebbe sembrare un sacco di lavoro, ma ci sono strumenti per minimizzare CSS e JS automaticamente e mantenere separati i file minificati per i tuoi file sorgente, per ragioni abbastanza ovvie.
Come accennato in precedenza, vari preprocessori CSS possono generare tutto il codice in forma ridotta in primo luogo.
A condizione che il tuo server sia impostato correttamente, tutto il tuo codice può essere inviato al browser in un formato compresso. I file di testo si comprimono molto bene, riducendo notevolmente la dimensione dei file inviati.
Ora, il tuo server deve impiegare un istante o due per comprimere i file che invia e il browser dell'utente deve decomprimerli, ma questo di solito vale il vantaggio della larghezza di banda.
Per una spiegazione completa di come funziona, vedi Come ottimizzare il tuo sito con la compressione GZIP .
Il caching del browser avviene automaticamente in una certa misura grazie ai browser moderni. Un browser visita un sito e memorizza temporaneamente le immagini e altre informazioni che trova lì.
In questo modo, se lo stesso utente ritorna entro un determinato periodo di tempo, il browser non deve chiedere di nuovo le stesse immagini. Carica solo quelli che già possiede e richiede ogni nuova immagine che potrebbe non avere.
C'è, tuttavia, qualcosa che puoi fare per dire ai browser cosa memorizzare nella cache e per quanto tempo, come visto in questa guida .
E poi c'è il caching del server. In pratica il caching del server prende solo il tuo sito e ne mette una sorta di "copia" tra i tuoi utenti e il tuo server attuale. Perché dovresti preoccuparti?
Bene, è particolarmente utile per le persone che utilizzano i sistemi di gestione dei contenuti su larga scala. Avere gli utenti accedono a una copia temporanea del tuo sito invece che la cosa reale riduce il numero di chiamate al tuo database. Le informazioni vengono visualizzate e caricate più velocemente perché non devono essere rielaborate ogni volta.
A seconda di come è configurato, il caching del server può anche ridurre i costi della larghezza di banda in generale. Fondamentalmente, più grande è il tuo sito, maggiore è il motivo per cui devi cercare nella cache.
E ora, la sezione che stavate aspettando: la lista dei link! Abbiamo a disposizione tutorial e guide, soprattutto, e un paio di strumenti di compressione delle immagini da consigliare.
Yahoo! potrebbe non essere un grosso problema come una volta, ma la loro rete di sviluppatori ha un sacco di cose buone su di esso. Questo include il loro Best practice per accelerare il tuo sito web , che copre alcune delle cose basilari che puoi fare. Alcuni di essi coprono la stessa base di questo articolo, ma c'è anche altro.
Nell'introduzione ho menzionato la velocità del sito percepita, nota anche come perfomance percepita. Se vuoi saperne di più, dai un'occhiata Una guida per principianti alle prestazioni percepite: 4 modi per far sentire il tuo sito mobile come un'app nativa .
Effeckt.css è un set di animazioni basate su CSS progettate per il rendering veloce, indipendentemente dalla piattaforma su cui si trova l'utente.
Questo è una guida per assicurarti che il tuo CSS venga scaricato ed elaborato il più velocemente possibile dal browser.
Quando sei appena agli inizi, imparare a codificare correttamente può essere un grande incremento di velocità come qualsiasi suggerimento casuale di trucchi che potresti imparare. Il codice errato costa di più in termini di tempo di elaborazione, quindi impara a fare le cose nel modo giusto.
Ecco un guida di base che si concentra più specificamente sulla scrittura di JavaScript che corre veloce.
Proprio come dice il titolo, Questo è tutto un consiglio mirato specificamente a JavaScript V8.
E a volte, probabilmente finirai per usare jQuery. Se hai intenzione di farlo, almeno dovresti sapere come scrivere selettori jQuery che non ti rallenteranno. Ed ecco dove Sitepoint ha coperto .
Leggi questo per ulteriori informazioni sui formati di immagine sul web. Le informazioni sono un po 'vecchie, ma comunque valide e buone da sapere.
Questo è una guida più tecnica all'ottimizzazione delle immagini fornita dalla Rete degli sviluppatori di Google.
Compressor.io è uno degli strumenti più impressionanti che ho incontrato personalmente. È un'app online, quindi dovrai caricare tutti i file che vuoi comprimere, ma può fare miracoli per i JPG. Offre sia opzioni di compressione lossy che lossless, ognuna con risultati sorprendenti e può anche processare in batch.
Trimage è specializzato nella compressione lossless, ma può essere installato sul proprio computer, su Windows, Mac o Linux. Poiché si installa sul tuo computer (e sì, viene fornito con varie opzioni della riga di comando e una GUI), può essere facilmente eseguito automaticamente come parte di un flusso di lavoro di sviluppo.
Come sempre, c'è molto altro da imparare. Ma, armati delle informazioni che abbiamo fornito e delle risorse a cui ci siamo collegati, sarai sulla buona strada per creare siti e app che non infastidiscano l'inferno dei tuoi utenti.
E questo è il primo passo per impressionarli.