Share
En av de vanlige kritikkene til rammer som Twitter Bootstrap er at de inneholder langt mer kode enn du faktisk bruker på nettstedet ditt, og gir deg en oppblåst kodebase og dårlig ytelse. Dette er en mulig fare, men Bootstraps Tilpass side gir et utmerket verktøy for å løse problemet. La meg gå gjennom prosessen med å tilpasse CSS- og JavaScript-filene dine for å redusere filstørrelsen betydelig.
Det tar vare på den første videoen, i det andre går jeg gjennom et annet viktig trinn: klemme biter ut av bildefilene dine, ved hjelp av Yahoo! S Smushit-verktøy. Sammen, disse to trinnene (optimalisering av koden din og optimalisering av bildene dine) vil redusere nettstedets fotavtrykk betydelig.
Vi bruker Twitter Bootstraps Tilpass side for å velge og laste ned kun CSS og JavaScript-komponentene vi trenger, noe som resulterer i mye mindre filstørrelser.
Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!
Følgende er skjermbilder av valgene jeg lagde i skjermbildet.
Når du har lastet ned og distribuert dine tilpassede CSS- og JS-filer, kan du velge å gjøre ytterligere gevinster ved å bruke et plugin som Dust Me Selectors for å identifisere gjenværende ubrukte selektorer, som du kan redigere ut av CSS-filen for hånd. Dette vil bli mye lettere med den mindre tilpassede filen enn med den opprinnelige filen.
Mens vi optimaliserer filer, kan vi også nevne et ekstra trinn som hjelper deg med de største filene i det gjennomsnittlige nettstedet: bildefiler. Det er mye å tenke på når du optimaliserer bilder på nettet. Du kan bli overrasket over å vite at ikke alle komprimeringsverktøy er like. Dialogen "Lagre for web og enheter" i Photoshop viser seg å være et av de minst effektive komprimeringsverktøyene der ute.
Her bruker vi Yahoo! S Smushit verktøy for å hjelpe oss å oppnå hva Photoshop ikke kunne.
Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!
Accentsconagua