Guida definitiva all'ottimizzazione Web (suggerimenti e best practice)

Ottimizzazione del Web è una parte vitale dello sviluppo e della manutenzione del web ma anche qualcosa che spesso viene ignorato dai webmaster. Pensa solo ai soldi che puoi risparmiare e in che modo può potenzialmente contribuire ad aumentare i tuoi lettori e il traffico quando sono fatti correttamente.

Se non hai ancora ottimizzato il tuo sito web (o blog) finora o se sei semplicemente curioso di sapere come può velocizzare il tuo sito, dai un'occhiata a questo elenco di suggerimenti per l'ottimizzazione che abbiamo messo insieme.

Abbiamo suddiviso le parti in 3 sezioni separate per una migliore leggibilità, rispettivamente ottimizzazione lato server, ottimizzazione delle risorse (che include componenti web come CSS, Javascript, immagini, ecc.) e piattaforma, dove ci concentreremo Ottimizzazione di WordPress. Nell'ultima sezione, inseriamo un paio di link che abbiamo ritenuto utili. Elenco completo dopo il salto.

Ottimizzazione: lato server

1. Scegli un web host decente

   Il tuo account di web hosting non ha alcuna relazione diretta con le ottimizzazioni che stai per realizzare, ma abbiamo pensato di scegliere il giusto account di web hosting così importante che abbiamo deciso di portarlo alla tua attenzione prima. L'account di hosting è la base del tuo sito web / blog in cui sicurezza, accessibilità (cPanel, FTP, SSH), stabilità del server, prezzi e supporto clienti giocano tutti ruoli importanti. Devi assicurarti di essere in buone mani.

   Lettura consigliata: Come scegliere un host Web di wikiHow è un ottimo articolo che ti dà consigli e passaggi che dovresti conoscere prima di acquistare qualsiasi account di web hosting.

2. Risorse host separatamente

   Quando menzioniamo le risorse, intendevamo componenti web come immagini e script statici che non richiede l'elaborazione lato server. Questi includono qualsiasi grafica web, immagini, Javascripts, Cascading Style Sheets (CSS), ecc. L'hosting di risorse separatamente non è un must, ma abbiamo visto un enorme risultato in termini di stabilità del server con questa implementazione quando il blog stava avendo un picco di traffico.

   Lettura consigliata: Massimizzazione di download paralleli nella corsia di Carpool.

3. Compressione con GZip

   In breve, i contenuti viaggiano dal lato server al lato client (vicer vs) ogni volta che viene effettuata una richiesta HTTP. La compressione del contenuto per l'invio riduce notevolmente il tempo necessario per elaborare ogni richiesta.

   GZip è uno dei modi migliori per farlo e varia in base al tipo di server che stai utilizzando. Per esempio, Apache 1.3 usa mod_zip, Apache 2.x usa mod_deflate ed ecco come lo fai nginx. Ecco alcuni articoli davvero buoni per familiarizzare con le compressioni lato server:

   • Accelerare un sito Web abilitando la compressione dei file Apache
   • Comprimi output Web utilizzando mod_gzip e Apache
   • Come ottimizzare il tuo sito con la compressione GZIP
   • Compressione lato server per ASP

4. Riduci a icona i reindirizzamenti

   I webmaster eseguono il reindirizzamento degli URL (sia che si tratti di reindirizzamenti Javascript o META) tutto il tempo. A volte lo scopo è indirizzare gli utenti da una vecchia pagina a una nuova o semplicemente guidare gli utenti alla pagina corretta. Ogni reindirizzamento crea un'ulteriore richiesta HTTP e RTT (round-trip-time). Maggiore è il reindirizzamento, l'utente più lento raggiungerà la pagina di destinazione.

   Lettura consigliata: Evita reindirizzamenti da Google Code ti offre una buona panoramica sull'argomento. L'articolo suggerisce anche alcuni modi pratici per minimizzare il reindirizzamento per aumentare la velocità di servizio.

5. Riduci le ricerche DNS

   Secondo Yahoo! Blog della rete degli sviluppatori, Occorrono circa 20-120 millisecondi per DNS (Domain Name System) per risolvere l'indirizzo IP per un determinato nome host o nome di dominio e il browser non può fare nulla finché il processo non viene completato correttamente.

   Autore Steve Souders ha suggerito che la suddivisione di questi componenti tra almeno due ma non più di quattro nomi host riduce le ricerche DNS e consente download paralleli di alto livello. Leggi di più sull'articolo.

Ottimizzazione: le risorse (CSS, Javascripts, Images)

1. Unisci più Javascripts in uno

   Gente a rakaz.nl condivide come puoi combinare più Javascripts come:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   In un singolo file cambiando l'URL in:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   manipolando il .htaccess e usando PHP. Clicca qui leggere di più.

2. Comprimi Javascript e CSS

   minify è un'app PHP5 in grado di combinare più file CSS e Javascript, comprimerne i contenuti (ovvero la rimozione di spazi non necessari / commenti) e offrire i risultati con la codifica HTTP (gzip / deflate) e le intestazioni che consentono un caching ottimale sul lato client.

   

   Comprimili online!Esistono anche alcuni servizi Web che consentono di comprimere manualmente i file Javascripts e CSS online. Qui siamo in pochi a sapere:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • CSS Optimizer (CSS)

3. Personalizza la Scadenza / Caching dell'intestazione

   Credito: httpwatch

   Utilizzando un'intestazione Expiry personalizzata, i componenti Web come immagini, file statici, CSS, Javascript hanno saltato la richiesta HTTP non necessaria quando lo stesso utente ricarica la pagina per la seconda volta. Riduce la larghezza di banda necessaria e sicuramente aiuta a servire la pagina più velocemente.

   Letture consigliate:

   • Yahoo! Blog di rete degli sviluppatori: aggiungi un'intestazione di scadenza
   • Come aggiungere buoni scade le intestazioni alle immagini in Apache 1.3
   • Cache HTTP
   • Tutorial di caching per autori Web e Webmaster

4. Off-load The Assets

   Per off-loading, intendiamo separare Javascripts, immagini, CSS e file statici dal server principale in cui è ospitato il sito Web e posizionarli su un altro server o fare affidamento su altri servizi web. Abbiamo visto miglioramenti significativi qui Hongkiat scaricando le risorse su altri servizi Web disponibili, lasciando che il server esegua principalmente l'elaborazione PHP. Ecco alcuni suggerimenti sui servizi online per il download:

   • immagini: Flickr, Smugmug, hosting a pagamento *
   • javascripts: Google Ajax Library, Google App Engine, hosting a pagamento *
   • Modulo Webs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Sondaggio e sondaggi: SurveyMonkey, PollDaddy

   * Hostings a pagamento - I servizi a pagamento hanno sempre maggiore affidabilità e stabilità. Se il tuo sito web richiede costantemente le risorse, devi assicurarti che siano in buone mani. Raccomandiamo Amazon S3 e Cloud Front.

5. Gestione di immagini Web

   Le immagini sono una parte importante del tuo sito web. Tuttavia, se non sono ottimizzati correttamente, possono diventare un peso e finire per utilizzare quantità di larghezza di banda in modo imprevedibile su base giornaliera. Qui ce ne sono alcuni migliori pratiche per ottimizzare le tue immagini:

   • Ottimizza le immagini PNGGente di Smashing Magazine descrive alcune tecniche intelligenti che possono aiutarti a ottimizzare le tue immagini PNG.
   • Ottimizzazione per il Web - Cose che devi sapere (i formati) Ulteriori informazioni su Jpeg, GIF, PNG e su come salvare le tue immagini per il Web.
   • Non ridimensionare le immaginiPratica sempre inserendo il larghezza e altezza per ogni immagine. Inoltre non ridimensionare un'immagine solo perché hai bisogno di una versione più piccola sul web. Per esempio: Non forzare la scala di un'immagine 200 × 200 px a 50 × 50 px per il tuo sito web modificando il file larghezza e altezza. Ottieni invece un 50 × 50 px.

   Ottimizzazione con servizi Web e strumenti. La buona notizia è che non è necessario essere un esperto di Photoshop per ottimizzare le tue immagini. Ci sono molti servizi web e strumenti per aiutarti a fare il lavoro.

   • Smush.itProbabilmente uno degli strumenti online più efficienti per ottimizzare le immagini. C'è anche un plugin per WordPress per questo!
   • Stripper JPEG e PNGUno strumento di Windows per rimuovere / pulire / rimuovere metadati non necessari (junk) da file JPG / JPEG / JFIF e PNG.
   • Strumento per ottimizzare le immagini onlineConsente di ottimizzare facilmente le gif, le gif animate, i jpg e le PNG, quindi caricano il più velocemente possibile sul tuo sito, tramite Dynamic Drive
   • SuperGIFRiduci facilmente tutte le tue immagini GIF e animazioni.
   • Ecco di più.

6. Gestire i CSS

   I siti Web moderni utilizzano i CSS come fondamento dello stile e dell'aspetto. Non solo i CSS offrono una grande flessibilità per i cambiamenti, ma sono anche minori in termini di codici necessari. Tuttavia, se sono mal codificati, potrebbe essere un ritorno di fiamma. Ecco alcune liste di controllo, o piuttosto guide per assicurarti che i tuoi CSS siano ottimizzati correttamente:

   • Mantenere i figli dei tuoi elementi in linea con la proleCome mantenere pulito il tuo markup con i selettori CSS.
   • Tieni corto CSSQuando danno lo stesso stile, i codici sono migliori quanto più sono brevi. Ecco un Guida stenografia CSS probabilmente avrai bisogno.
   • Usa CSS SpriteLa tecnica CSS Sprite riduce la richiesta HTTP ogni volta che una pagina viene caricata combinando più immagini (o tutte) su un singolo file immagine e controllandone l'output con i CSS background-position attributo. Ecco alcune guide e tecniche utili per creare CSS Sprites:
     • Generatore di sprite CSS online
     • Il miglior generatore di sprite CSS online e offline
   • Usando ogni dichiarazione solo una voltaQuando cerchi di ottimizzare i tuoi file CSS, una delle misure più potenti che puoi usare è usare ogni dichiarazione una sola volta.
   • Ridurre la quantità di file CSSIl motivo è semplice, più file CSS hai più richiesta HTTP che dovrà fare quando viene richiesta una pagina web. Ad esempio, invece di avere più file CSS come il seguente:

     Puoi combinarli in un singolo CSS:

   Letture consigliate:

   • Strumenti utili per controllare, pulire e ottimizzare il file CSSAlcuni degli strumenti utili che è possibile utilizzare per ottimizzare il codice CSS, anche se non si ha alcuna conoscenza della codifica CSS.
   • 7 principi del codice CSS pulito e ottimizzatoL'ottimizzazione non si limita a minimizzare le dimensioni del file, ma significa anche essere organizzati, ingombranti ed efficienti.
   • Best practice per ottimizzare i CSSConsidera questo articolo più come un esercizio accademico piuttosto che come suggerimenti per l'ottimizzazione della vita reale.

Ottimizzazione per WordPress

Di volta in volta, monitoriamo, analizziamo e analizziamo le prestazioni del nostro blog WordPress. Se il sito funziona lentamente, dobbiamo sapere perché. Ecco alcune modifiche di base che abbiamo fatto e abbiamo calcolato che aumenterà significativamente la velocità del tuo blog WordPress.

1. Cache Your Worpress Blog

   WP-Cache è un sistema di caching delle pagine WordPress estremamente efficiente per rendere il tuo sito molto più veloce e reattivo. Raccomandiamo anche WP Super Cache che migliora dal plugin citato in precedenza e fa anche un ottimo lavoro.

2. Disattiva ed elimina i plugin non utilizzati

   Quando noti che il tuo blog si sta caricando molto lentamente, verifica se hai installato molti plug-in. Potrebbero essere il colpevole.

3. Rimuovi i tag PHP non necessari

   Se dai un'occhiata ai codici sorgente del tuo tema, troverai molti tag come questi:

   Possono essere praticamente sostituiti con contenuti di testo che non causano il caricamento sul server. Check-out Michael Martin'S 13 tag da eliminare dal tuo WordPress Blog

Letture consigliate:

• 3 modi più semplici per accelerare WordPressJohn Pozadzides condivide il modo in cui il suo blog naviga senza intoppi attraverso il traffico di Digg.
• 13 ottimi consigli e trucchi per WordPress Speed ​​per MAX Performance Qui ci sono alcune cose da provare se si scopre che il tuo sito WordPress non si comporta bene a causa del traffico elevato o di problemi nascosti che non conosci.
• 40 suggerimenti per l'ottimizzazione di WordPressSuggerimenti per l'ottimizzazione nelle diapositive. 40 consigli in 40 minuti.

Ultimo, ma non per importanza…

Ecco alcuni utili servizi Web e strumenti che ti offrono una prospettiva più ampia e una migliore analisi per aiutarti nell'ottimizzazione del web.

• Yahoo! YSlow

  YSlow analizza le pagine Web e suggerisce modi per migliorare le loro prestazioni in base a un insieme di regole per le pagine Web ad alte prestazioni. Ti dà una buona idea su cosa deve essere fatto per caricare il sito più velocemente.

  (Necessario Firebug)

  

• Page Speed

  Simile a Yahoo! YSlow, Google Velocità della pagina è un componente aggiuntivo Firebug open source per valutare le prestazioni del sito Web e come migliorarle. (Necessario Firebug)

  

• Strumenti Pingdom

  Strumenti Pingdom caricare completamente il tuo sito web includendo tutti gli oggetti (immagini, CSS, JavaScript, RSS, Flash e frame / iframes) e mostra le statistiche generali sulla pagina caricata come il numero totale di oggetti, il tempo di caricamento totale e le dimensioni compresi tutti oggetti.

  

Letture consigliate:Qui ci sono più suggerimenti e strumenti da provare.

• Google Web Optimizer
• 15 strumenti per aiutarti a sviluppare pagine Web più veloci
• 15+ suggerimenti per velocizzare il tuo sito web e ottimizzare il tuo codice!