Come si migliora la velocità dei siti Web senza compromettere la progettazione e l'accesso?
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:
- Riduci il numero di elementi DOM - vale la pena guardare, dovresti essere in grado di ridurre la dimensione HTML mantenendo lo stesso design.
- Riduci al minimo il numero di iframe - probabilmente è meglio evitarli ovunque sia possibile.
- Ottimizza immagini - dovresti ottimizzare le immagini ove possibile, ma non esagerare a spese del tuo 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.
- Riduci al minimo il numero di richieste HTTP, ad es. assicurati di utilizzare gli sprite di immagini dove sei in grado, hai più file javascript o css caricati per ogni pagina? Combinali in uno solo
- Ci sono reindirizzamenti là fuori che puoi eliminare?
- Carica i fogli di stile nella parte superiore del documento, javascript nella parte inferiore
- Se il tuo sito è di grandi dimensioni, fornisci server geograficamente vicini alla tua più grande base di utenti.
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.