Share
Una delle critiche comuni a framework come Twitter Bootstrap è che includono molto più codice di quello che effettivamente usi nel tuo sito, lasciandoti con una base di codice gonfia e prestazioni del sito scadenti. Questo è un possibile pericolo, ma la pagina Personalizza di Bootstrap fornisce uno strumento eccellente per affrontare il problema. Lasciate che vi guidi attraverso il processo di personalizzazione dei file CSS e JavaScript per ridurre notevolmente le dimensioni del file.
Questo si prende cura del primo video, nel secondo ti guiderò attraverso un altro passo importante: spremere i bit dai tuoi file immagine, usando lo strumento Smushit di Yahoo !. Insieme, questi due passaggi (ottimizzazione del codice e ottimizzazione delle immagini) ridurranno notevolmente l'ingombro del tuo sito.
Useremo la pagina Personalizza di Twitter Bootstrap per selezionare e scaricare solo i componenti CSS e JavaScript di cui abbiamo bisogno, risultando in tanto dimensioni dei file più piccole.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!
Di seguito sono riportati gli screenshot delle selezioni effettuate nello screencast.
Dopo aver scaricato e distribuito i tuoi file CSS e JS personalizzati, puoi scegliere di ottenere ulteriori guadagni usando un plug-in come Dust Me Selectors per identificare i selettori inutilizzati rimanenti, che potresti modificare a mano dal tuo file CSS. Questo sarà tanto più facile con il file personalizzato più piccolo rispetto al file originale.
Mentre stiamo ottimizzando i file, possiamo anche menzionare un ulteriore passaggio che ti aiuterà con i file più grandi nel sito medio: i file immagine. C'è molto da pensare quando si ottimizzano le immagini per il web. Potresti essere sorpreso di sapere che non tutti gli strumenti di compressione sono uguali. La finestra di dialogo "Salva per web e dispositivi" in Photoshop risulta essere uno degli strumenti di compressione meno efficaci.
Qui utilizzeremo lo strumento Smushit di Yahoo !, per aiutarci a realizzare ciò che Photoshop non è in grado di fare.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!
Accentsconagua