it.hideout-lastation.com
Come misurare le prestazioni del sito Web front-end
Parlare di processo di ottimizzazione è quasi inesistente tra i web designer new age. Anche molti web designer che sono in attività da un decennio o più non comprendono appieno l'importanza dell'ottimizzazione del sito.
Dopo un periodo prolungato di tempo un sito Web inizierà a impantanarsi. I file di frontend possono contenere blocchi di codice esagerati o bit nascosti bloccati. Questo è più comunemente visto accadendo all'interno di file o immagini JavaScript. Potrebbe essere importante creare un sito Web gradevole per l'esperienza utente, ma senza un sito web ottimizzato il design potrebbe non avere nemmeno la possibilità di caricare completamente gli utenti impazienti.
I suggerimenti qui sotto sono per gli sviluppatori web di livello intermedio interessati a ottimizzare al massimo le loro pagine . Ci sono molte tecniche disponibili e ognuna si comporterà in modo diverso a seconda di quali problemi il tuo sito web sta soffrendo. Prova a sfogliare alcune aree e vedi se è possibile applicare queste tecniche nei propri marchi.
Richieste HTTP
Ogni volta che il tuo sito web viene caricato, invia una richiesta HTTP a un server remoto. Questo tipo di trasferimento dati è chiamato protocollo di rete utilizzato specificamente per la distribuzione e la memorizzazione di file di testo in chiaro. Questi includono spesso il tuo codice di base come HTML, CSS e JavaScript.
Una volta inviata la richiesta, il tuo browser analizzerà ogni elemento della pagina. A seconda del motore di analisi, ciascun sito Web verrà caricato in modo diverso e gli elementi verranno visualizzati in ordine variabile in base alle velocità di trasferimento. Ad esempio, Internet Explorer renderà le pagine Web diverse da Chrome o Safari e tutte queste eseguiranno motori di analisi leggermente diversi da Firefox o Opera.
Ciò che deve essere considerato è la durata del tempo richiesto per ogni file e se questa tendenza è costante. Considera di ricevere fino a 100k o 1 milione di visitatori in un mese. È compito del browser mettere insieme ogni elemento della pagina e caricare i file esterni nella memoria.
Spesso i fattori che tengono premuto il codice JavaScript ottimizzato di velocità di un sito Web includono o file di immagine di grandi dimensioni. Con la diffusione di Verizon FiOS è normale che le velocità di Internet raggiungano i 600kbps e continuino a salire! Sfortunatamente questa non è la norma e anche con connessioni ad alta velocità è possibile riscontrare difetti di ottimizzazione.
Rimedi alle prestazioni del sito
Non siamo soli nel campo dello sviluppo web e dell'ottimizzazione del frontend. Per il corretto lavoro da completare ci sono alcuni strumenti necessari per gestire il lavoro.
Google ha rilasciato un progetto intitolato Page Speed che è stato creato per aiutare gli sviluppatori a ottimizzare i loro siti Web e verificare i migliori livelli di prestazioni. Originariamente il progetto è iniziato come un componente aggiuntivo Firebug open source ed è ora accettato come riferimento di terze parti per i test del sito web.
Un'altra opzione per gli utenti Firebug è l'add-on YSlow di Yahoo! Lo script analizza ogni richiesta di pagina Web e suggerisce i metodi più comuni per migliorare le prestazioni. Questi suggerimenti sono basati su Yahoo! Risorse per gli sviluppatori per le migliori pratiche di ottimizzazione nel web design.
Il programma può essere un po 'abrasivo all'inizio poiché contiene così tante informazioni. Basta attenersi alle nozioni di base e seguendo una semplice documentazione il processo dovrebbe essere un gioco da ragazzi.
Gli sviluppatori sono sempre interessati a saltare su un progetto per abbattere il codice, quindi questo dovrebbe essere un gioco da ragazzi. Per un piccolo aiuto è possibile consultare la guida di YSlow.
Tecniche di velocità
Ci sono alcuni semplici trucchi che puoi applicare immediatamente al tuo sito web per velocizzare le prestazioni. Il primo e più semplice modo è quello di separare i file CSS e JavaScript.
Il codice CSS appartiene all'intestazione del tuo documento. Questo è utile perché le proprietà CSS devono essere analizzate mentre il DOM sta caricando. Una volta che un browser Web riconosce gli stili CSS nell'intestazione, aspetterà di visualizzare completamente la pagina Web finché tutti gli stili non saranno stati caricati. Inoltre, qualsiasi immagine utilizzata per icone o disegni di sfondo richiederà tempo per essere caricata e dovrebbe farlo prima.
D'altra parte, spostare tutti i file JavaScript nel piè di pagina del sito può risolvere drasticamente i tempi di attesa. Molti browser bloccano i download paralleli, il che significa che prima di eseguire il rendering della pagina il browser Web dell'utente può fermarsi per 4 secondi per caricare completamente gli include JS esterni.
Questo non è sempre possibile, né è sempre necessario per ogni sito web. Se le tue pagine caricano lo stesso con tempi di risposta uguali a prescindere dai posizionamenti di file inclusi, non preoccuparti di manovrare eventuali giochi.
Il contenuto dinamico non può essere caricato fino a quando non viene completato l'intero DOM, ma a volte questo restituirà errori. Prova CSS / JS include per vedere se è possibile restituire eventuali vantaggi di ottimizzazione.
Compressione delle dimensioni del file
La compressione di file di grandi dimensioni è diventata molto popolare. Ora può anche essere utilizzato nelle pagine Web per ridurre i tempi di caricamento e mantenere le dimensioni dei file molto basse. Gran parte del lavoro è già stato fatto e con strumenti come YUI Compressor i mini-size file sono un processo senza energia.
Ci sono molti altri servizi gratuiti sul web per aiutare con questo compito pure. Minify CSS ha un'intera interfaccia di compressione CSS per semplificare il processo. Lo stesso sito Web ha anche un compressore JavaScript personalizzato che svolge molte delle stesse attività ma mantiene organizzati gli script.
Potresti anche considerare di comprimere le immagini più grandi nelle tue pagine web. Questo può essere fatto con qualsiasi software di fotoritocco come Adobe Photoshop o GIMP semplicemente ricampionando l'immagine a una risoluzione più bassa. Le immagini PNG verranno esportate in media molto più piccole rispetto ai formati jpg o TIFF. Ci sono anche molti strumenti online come Image Optimizer per aiutare nel processo di compressione.
Controllo e metriche di origine
Questa è una routine spesso non praticata dagli sviluppatori web che possono offrire risultati sorprendenti. Analizzando tutti gli elementi della pagina nel tuo sito web puoi vedere quale impiega più tempo a caricare e l'ordine in cui ogni pezzo è stato caricato.
Lo strumento più popolare Mozilla Firebug è un plug-in per il browser Firefox. Questa app installa una piccola barra degli strumenti nella parte inferiore del browser per controllare i tempi di risposta, le informazioni di intestazione, gli elementi della pagina e gli script per ciascun sito Web. Lo script è stato anche convertito in Firebug Lite come estensione per Google Chrome.
Apache con mod_pagespeed
Non tutte le configurazioni eseguiranno un server Web Apache, quindi questa opzione non è sempre disponibile. Questo modulo è direttamente correlato al monitoraggio della velocità della pagina di Google menzionato in precedenza. In effetti, il codice per mod_pagespeed era originariamente basato su molte librerie dai database di Google Code.
Apache consente agli amministratori dei server di installare piccoli pacchetti chiamati moduli per migliorare le prestazioni dei loro server. mod_pagespeed è uno di questi moduli che esegue automaticamente le tecniche di ottimizzazione in fase di runtime. Ci sono troppi processi da elencare, sebbene alcune delle principali applicazioni includano la compressione al volo HTML / CSS / JS e la memorizzazione nella cache delle immagini.
Il progetto è attualmente ospitato da Google ed è aperto agli sviluppatori. Google ha lavorato con GoDaddy per implementare mod_pagespeed in tutti gli account di hosting che eseguono il server Apache HTTP.
Sebbene molte altre opzioni siano disponibili, il lavoro di sviluppo di frontend è tra le più intense, soprattutto considerando la pre-ottimizzazione per le pagine Web cruciali. Ottimizzare le intestazioni dei siti e le immagini di grandi dimensioni può essere un compito estremamente noioso ma gratificante.
Considera alcune delle tecniche introdotte in questo articolo e scopri come queste potrebbero essere applicate ai tuoi progetti web. Spesso gli sviluppatori non prendono abbastanza tempo per apprezzare il loro lavoro e ripulire vecchi bit di codice. Se hai ancora bisogno di alcuni suggerimenti, dovresti leggere la nostra guida definitiva sull'ottimizzazione del web per i suggerimenti sulla manutenzione del frontend e sul miglioramento delle prestazioni.
20 modelli di icone senza cuciture gratuiti per i progettisti
Molte tendenze del web design vanno e vengono, ma i pattern e le trame sono sempre in giro in forme diverse. L'uso corretto di un modello può aggiungere profondità, personalità e interesse al tuo design. La differenza tra pattern e texture è che la maggior parte dei pattern sono creati digitalmente, e ci sono molti esempi da illustrare in questo post.Ecc
M-Commerce: perché andare in mobilità è importante per le aziende
Tutti sanno che l'e-commerce è una parte in costante crescita del più vasto panorama del commercio al dettaglio, ma lo sapevate che il commercio mobile sta crescendo a un ritmo ancora più veloce? Dato il numero crescente di utenti di smartphone e tablet, questo è comprensibile, ma ci sono ancora molti rivenditori di e-commerce che non hanno tenuto il passo con i tempi e stanno ancora scontando negozi online non ottimizzati e non responsivi agli utenti di dispositivi mobili che può facilmente allontanare i clienti mobili.Non
