Come velocizzare il tuo sito web
La velocità del sito è una delle cose più importanti nella creazione di contenuti web e applicazioni web.
Infatti, è stato notato da vari analisti di Google che le persone non siedono spesso per i primi 30 secondi di un video, tanto meno i primi 15, quindi sarebbe saggio da parte tua ottenere il contenuto del tuo sito come Il più velocemente possibile in modo che le persone possano esprimere un giudizio e accettare o usarlo o meno.
Può essere un po 'superficiale che le persone giudichino i siti così velocemente, ma è spesso il caso, e non dovremmo darlo per scontato.
Ottimizzare il tuo sito dovrebbe essere una priorità assoluta, e spesso quando usi WordPress e altri motori hanno dei buoni plugin che aiutano. Presumo però che potresti non utilizzare WordPress, perché ce ne sono molte che non lo sono, e ti darò alcuni dei modi migliori per ottimizzare qualsiasi sito, indipendentemente da dove è ospitato.
immagini
L'ottimizzazione delle immagini può essere un argomento difficile, ma che in realtà ha molti aspetti tra cui scegliere. Esistono formati di file, strumenti di ottimizzazione delle immagini e le migliori pratiche di codice / CSS da seguire per assicurarti di salvare e agire con le immagini nel miglior modo possibile.
Voglio dare un esempio del perché questo è importante, quindi prendiamo un esempio recente. Di recente è diventato evidente a vari sviluppatori iOS e creatori di app che le app che utilizzano le immagini Retina ready occupano da 2 a 4 volte tanto spazio sul telefono della persona rispetto alle versioni precedenti, e sta causando la chiusura dei telefoni delle persone. spazio da semplici download di app.
Questo non è così rilevante per noi sviluppatori e progettisti web, ma vi mostrerà quanto sia importante gestire correttamente le immagini su qualsiasi piattaforma. Di seguito sono riportati alcuni di quelli che ritengo siano gli argomenti più importanti da ricordare quando si ottimizzano le immagini per il Web.
Formati di immagine
La formattazione delle immagini è un tema scottante e sembra che tutti credano che un formato diverso aumenterà la velocità, ma su questo c'è una scuola di pensiero piuttosto diffusa, e possiamo sempre usarlo come standard de facto. Le immagini JPEG sono per fotografie, le GIF sono per immagini a colori bassi / immagini a colori piatte e le PNG sono per tutto il resto. La maggior parte dei web designer e sviluppatori che conosco preferiscono usare PNG per quasi tutto, a meno che non abbiano un pulsante che forse ha uno o due colori, per cui trovano che le GIF funzionino alla grande.
Ora, naturalmente, puoi giocare con quelle specifiche, ma ricorda sempre che si tratta di standard per ciò che salverà più piccolo e più leggero rispetto a più grande e più pesante. Se stai facendo un sito di fotografia, però, caricherà abbastanza lentamente, indipendentemente da altri siti, quindi prova alcuni di questi metodi per aumentare l'ottimizzazione dell'immagine nel suo complesso.
Codice immagine
Una delle cose peggiori che possiamo fare per il tempo del server durante il caricamento delle immagini è lasciare che il codice esegua il dimensionamento per noi. Bene, questo si potrebbe dire per qualsiasi cosa riguardante "lasciare che il codice faccia ____ per noi". Il detto comune è "Se puoi farlo, allora fallo" ed è dannatamente buono. Usando cose come width='50px' height='30px' può davvero sbarazzarsi del tempo di caricamento del server per quanto riguarda l'immagine, perché il server sta analizzando la pagina e vede che c'è un compito che deve compiere - uno che potrebbe essere stato fatto dal creatore. Quindi assicurati di andare avanti e farlo con tutte le tue immagini.
Strumenti per l'ottimizzazione delle immagini
Gli strumenti sono sempre utili. Bene, la maggior parte del tempo. A volte sono un peso e una distrazione, ma in questo caso sembra che siano spesso molto utili. Se riesci a trovare un ottimo strumento per l'ottimizzazione delle immagini, prima di tutto, collegalo nei commenti perché siamo tutti a caccia, ma alcuni dei miei preferiti stanno seguendo. io amo ImageOptim per Mac e rivolta per Windows. Questi due strumenti sono molto diversi, ma svolgono un compito simile.
Puoi inserire le immagini e decifrerà un modo e un metodo per ottimizzarle, fallo, e quindi sputa indietro il risultato finale per tutto il tempo salvando il formato con cui le hai inviate. Sono davvero molto carini e ci sono molte altre cose là fuori. In effetti, c'è un gruppo che analizzerà la bitmap di un'immagine e dirà quale formato è il migliore. Si può facilmente dire che queste sono alcune delle cose più utili in un secchio di strumenti per i web designer diverso da un editor di testo e un programma di progettazione, e giustamente.
Ottimizzazione del server basata su immagini
Non sono un esperto quando si tratta di creare server, ma ho certamente abbastanza esperienza su piccola scala per dare questo consiglio. Non avere massicci carichi di immagini memorizzati localmente. Cioè, non lasciare un database di immagini memorizzate sui tuoi server da cui stai servendo gli altri file del sito. Prendi nota delle tecnologie come Amazon S3 o dei server di Flickr e usa quelle per servire i tuoi file da.
Di recente ho implementato un bucket Amazon S3 per il server dei nostri file, ed in effetti era abbastanza semplice, quindi sentitevi liberi di provarlo. È un ottimo metodo Il motivo principale è che non si desidera che si verifichi un collo di bottiglia del database in un'istanza da cui si stanno caricando più carichi, perché può essere un incubo diagnostico. È buona norma archiviare file separati su server diversi (se sottoposti a un carico enorme) a meno che, naturalmente, non si tratti di un semplice database di archiviazione di stringhe di carattere generale o qualcosa di simile.
Ottimizzazione CSS e JavaScript
CSS e JavaScript sono lingue molto importanti quando si tratta di web design, e specialmente quando si tratta di creare contenuti dinamici. Penso che le persone dimentichino spesso che possono ottimizzare i loro contenuti dinamici e dimenticano che possono ottimizzare JavaScript e CSS. Queste non sono le cose più significative per i siti più piccoli, ma con siti più grandi è davvero importante, specialmente quando si tratta di siti che si basano su molto design. Passiamo attraverso alcune delle "Regole CSS e JavaScript" che sono piuttosto standardizzate quando si tratta di creare applicazioni web.
Prima regola di CSS e JavaScript
Se puoi farlo in CSS, fallo
Spesso ci dimentichiamo di avere degli strumenti straordinari proprio di fronte a noi, e direi che i CSS si classificano come uno dei più sorprendenti web designer. Direi anche che i designer saltano troppo velocemente in photoshop per natura (ma è il loro lavoro quindi chi può biasimarli). Tieni presente però che mentre progetta hai qualcosa nel tuo browser che può fare anche finte mock up: CSS3. Approfittane! Avere un posto dove fare quick mockup aiuta davvero, e in seguito ti porterà lontano dal fare cose hackerate in HTML. Invece di "" Sono sicuro che puoi trovare un modo per aggiungere quello spazio nei CSS, quindi fallo!
Seconda regola di CSS e JavaScript
Minify, Minify, Minify!
La minificazione del codice è forse una delle cose migliori e più semplici che puoi fare per velocizzare il tuo sito. Tenete a mente, stiamo parlando di millisecondi, ma ha comunque un effetto notevole - e specialmente se state usando qualcosa come una libreria jQuery. Ricorda che se aggiungi mai plugin per JavaScript / CSS e ti viene data la possibilità di scaricare la versione minificata (e non è necessario modificarla), fallo . Alcuni dei miei strumenti preferiti per farlo sono, Code Minifier per Mac, minify per Windows e JSCompress / CSSCompressor per quelli di voi che vogliono alcune soluzioni multipiattaforma basate su browser. Minifying felice!
Terza regola di CSS e JavaScript
In-line è un no-no
È una cattiva pratica usare CSS o JavaScript in linea, ma soprattutto quando si tratta di CSS. La ragione di ciò non è solo dovuta a problemi legacy, ma anche perché se lasciamo il CSS all'interno del codice HTML (specialmente in-line) esso leggerà come tale: HTML / CSS / HTML / CSS / HTML / CSS / HTML / CSS invece di un semplice HTML => CSS. Come si può vedere, questo è davvero pessimo per i tempi di caricamento del server e spesso può andare a scapito della maggior parte delle applicazioni web se un designer si rifiuta di utilizzarlo in un file separato. Certamente non causerà l'arresto anomalo del tuo sito, ma causerà un altro dipendente e lo estrarrà: è così importante. Quindi ricorda sempre di essere colui che lo sta estraendo, non colui che lo lascia per farlo estrarre dagli altri.
Quarta regola di CSS e JavaScript
Spostalo verso il basso
Se devi inserire il tuo JavaScript nella pagina con l'HTML stesso, e non averlo intorno, mettilo nella parte inferiore del documento HTML . Ciò aiuta anche a velocizzare il tempo di caricamento del sito, perché possiamo eseguire tutte queste funzioni e altri gadget JavaScript dopo che la pagina stessa è stata caricata. Un'altra cosa è che questo diminuisce la probabilità di un bug che schiaccia le prestazioni dell'intero sito, perché quando c'è un bug con il JavaScript in una vista spesso mangerà memoria come no domani. Quindi è una buona pratica assicurarsi che il tuo sito non lo stia facendo, e mettere in guardia contro eventi futuri in cui ciò potrebbe accadere - nessuno di noi vuole che le persone visitino il nostro sito e poi si blocchino i loro browser.
Quinta regola di CSS e Javascript
Ottimizzazione DOM
Se possibile, riduci il DOM. Prendiamo ad esempio un esempio che stai usando un sacco di jQuery che punta a vari elementi DOM o legge attraverso tutti i DOM per trovare qualcosa - può rallentare il tuo sito un po '. C'è un piccolo detto che ho sempre amato e che si adatta qui, "Se stai facendo le cose perché è l'unico modo in cui sai come, allora ci sono probabilmente modi migliori per farlo." Potresti anche dire "Se stai facendo perché è l'unico modo in cui sai come, quindi stai sbagliando ", ma quella versione è un po 'più dura.
Ricerca e trova quelle cose in questo caso. Se stai lavorando con un div in HTML solo perché ne hai bisogno per una piccola cosa ed è l'unico modo in cui sai come farlo, allora potrebbe non essere il modo migliore. Ora, naturalmente, capisco che usare tag div perché ne hai bisogno per il tuo CSS è del tutto comprensibile, ma forse puoi rimuoverne alcuni e trovare un modo più ampio di gestire quel problema di stile.
L'ho appena fatto da solo, visto che sto attualmente lavorando a un progetto Ruby on Rails. All'inizio della settimana ho annidato circa 5 div uno dentro l'altro in HAML di tutte le cose, solo per fare qualcosa che volevo (una scatola in una scatola in una scatola dentro qualcos'altro in questo caso). E l'ho solo guardato, sapevo che era una merda, ma non sapevo un modo migliore per farlo, così ho scartato tutto per rifarlo. Dovendo rifare ciò è diventato molto più difficile, ma mi ha costretto a imparare un nuovo modo di gestire quel problema. E alla fine ho imparato molto da esso e raccomanderei la soluzione a chiunque in futuro. Vai avanti e prendi una di quelle conoscenze pepate per te! Sono certamente frutta bassa appesa.
Ottimizzazioni generali
Questi sono più argomenti di ampio respiro che non si adattano a nessun altro, ma mi sento ancora meritevole di attenzione. In effetti, alcune di queste potrebbero essere le cose più importanti che puoi fare per velocizzare un'applicazione o un sito web.
Slash sui collegamenti
Questo è notevolmente importante. Quando un utente apre un collegamento senza una barra alla fine da un sito Web, il server deve letteralmente capire che tipo di file o pagina si trova a quell'indirizzo. Il server includerà quindi la barra, ma se lo aggiungi tu stesso, riduci i millisecondi di tempo di caricamento. Questi millisecondi si sommano, lo prometto. Spesso capita spesso che i progettisti, che non ci pensano, pensano che il loro codice non ottimizzato non appesantisca nulla, ma alla fine lo fa. Se salvi i quarti per 10 anni avrai sicuramente un sacco di soldi, e lo stesso concetto si applica qui - solo su una scala più piccola o più grande a seconda del traffico del tuo sito.
favicons
I browser fanno sempre un pull per un file favicon.ico al livello root del tuo server, quindi puoi anche andare avanti e includerlo. Anche se è qualcosa di temporaneo, è sempre bene avere. Se non lo fai, il browser stesso fornirà un '404 interno', e solo lo memorizzerà nella sezione favicon.ico del browser, e sappiamo tutti come ridurre la velocità di caricamento del 404.
Riduci la dimensione del cookie
Questo potrebbe non essere applicabile a tutti noi, ma se stai sviluppando applicazioni web, la riduzione della dimensione dei cookie è davvero importante. Ad esempio, in ciò che ho familiarità con le applicazioni Ruby on Rails, puoi utilizzare i cookie (o altri metodi) per l'autenticazione da una sessione all'altra e spesso le persone preferiscono utilizzare gli altri metodi perché possono ridurre i tempi di caricamento degli utenti con loro .
Ora, un cookie implica che si memorizzino nella cache cose sul tuo computer, quindi potresti pensare che aumenterebbe il tempo di caricamento, ma in genere tutto ciò che è utile è l'autenticazione delle sessioni utente o il monitoraggio del Web (come Google e Facebook sono stati accusati di ). Se devi lavorare con i cookie, però, assicurati di mantenere le dimensioni basse e usali con il tuo giudizio migliore. Se necessario, impostare la data di scadenza più breve per ridurre il tempo di caricamento.
nascondiglio
Questo è un argomento enorme e uno di cui non sono un esperto. Il caching è un concetto piuttosto semplice. Memorizza file (in genere codice HTML / CSS) dai siti che visiti di frequente sul tuo computer in modo da non doverli caricare ogni volta che visiti.
È davvero una tecnologia incredibilmente utile e che molte applicazioni Web stanno iniziando a utilizzare negli ultimi anni. Ci sono state un certo numero di soluzioni di database per il caching e probabilmente il più notevole è memcached . In questo modo è possibile archiviare una copia dei file di database sul browser mentre si utilizza un'applicazione Web. Quindi, ad esempio, se hai vari profili che visiti spesso, puoi memorizzare le immagini del profilo sul tuo computer, e la bellezza di Memcached arriva nella fase successiva. Nel tuo codice, puoi effettivamente chiamare (prima di estrarre dal DB) dai server Memcached e vedere se riesci a estrarre una versione cache dei file. E se no, naturalmente, estrarrà il file dal Database e, se non è già nella cache, lo aggiungerà per risparmiare tempo la prossima volta. Questo è un bell'esempio di memorizzazione nella cache su larga scala e ha aiutato moltissime aziende a velocizzare server e database negli ultimi 2 anni.
E questo lo riassumerà. Quelli non sono tutti modi per accelerare il tuo sito, ovviamente, ma dovrebbe iniziare a dare il massimo alla tua curiosità e farti cercare tutte le grandi cose là fuori che lo faranno.