Come migliorare la velocità di caricamento dei siti Web senza uccidere il design e l'accessibilità? Compressione dei file, CDN, Gzip? Quali sono gli strumenti migliori per farlo?
Ad esempio, Google ha ottimizzato il proprio sito senza compromettere il design. Inoltre, molti siti Web possono uccidere la purezza delle loro immagini con la compressione.
Esiste un modo, più o meno best practice, per aumentare la velocità senza compromettere il design e l'accessibilità?
Nota: mi dispiace di essere così vago ma non so come altro pronunciare questa domanda.
Gzip è probabilmente la cosa più drastica che puoi fare.
Assicurati che tutti i tuoi file css e js siano minimizzati aiuta. controlla di non caricare librerie js o CSS che non ti servono. La maggior parte degli utenti li memorizzerà nella cache, quindi dopo la prima pagina non è poi così importante.
A parte questo, assicurati che la memorizzazione nella cache funzioni correttamente, come non ripetere l'analisi di una pagina per ogni richiesta che non necessita di essere riesaminata. se nessasary comunque
Praticamente tutte le Best Practices di Yahoo possono essere implementate senza nemmeno toccare il design del sito in alcun modo. Riduci al minimo le richieste HTTP combinando tutti i CSS in un file e tutti i JS in un file. Usa Gzip. Impostare buone intestazioni Scade.
Queste regole potrebbero influire sul design:
Più che minimizzare i CSS/JS, combinali in un unico file per ogni formato il più possibile. Meno download, meglio è. Se ciò è impossibile, spostali su altri nomi di dominio, ospitati sullo stesso server o su una rete CDN.
Gzip, come detto, è incredibilmente potente.
Sposta il tuo JS nella parte inferiore del documento e assicurati che tutto il CSS sia nel head
. Evita JS e CSS in linea.
Esegui la cache di tutto e imposta Expires
headers ed ETags.
Velocità pagina. Questo è il plug-in di Google per FireBug. Se lo esegui sul tuo sito, ti dirà dove devi migliorare. Segue principalmente il consiglio dato dalle migliori pratiche di Yahoo, ma ti dirà dove devi migliorare.
Ho visto il massimo miglioramento della velocità nel ridurre la dimensione delle mie immagini . Per fare ciò puoi usare "Salva per Web e dispositivi" in Photoshop O un altro buon programma per Mac che può ridurre le tue immagini è ImageOptim .
Sulla falsariga di Yahoo Best Practices (YBP) potresti voler dare un'occhiata a YSlow Firefox Add-on . Ti fornirà una rapida panoramica di come sta andando un sito per quanto riguarda l'YBP.
Ho scritto un articolo dettagliato sull'ottimizzazione della velocità che potresti trovare utile.
http://www.elevatelocal.co.uk/blog/17-rules-of-speed-optimisation-0501511
Utilizzare un CDN per file statici come javascript, css e immagini. Sia RackspaceCloud che Amazon ne hanno di abbastanza economici.
Uso la memorizzazione nella cache in ASP.NET e ciò può far risparmiare un sacco di tempo evitando duplicati di chiamate al database, chiamate di funzione e persino pagine.