En av de gemensamma kritiken på ramar som Twitter Bootstrap är att de innehåller mycket mer kod än vad du faktiskt använder på din webbplats, vilket ger dig en uppblåst kodbas och dålig webbplatsprestanda. Det här är en möjlig fara, men Bootstraps anpassningssida ger ett utmärkt verktyg för att lösa problemet. Låt mig gå igenom processen med att anpassa dina CSS och JavaScript-filer för att minska deras filstorlek kraftigt.
Det tar hand om den första videon, i det andra ska jag gå igenom ett annat viktigt steg: klämma bitar ur dina bildfiler med hjälp av Yahoo! S Smushit-verktyg. Tillsammans kommer dessa två steg (optimera din kod och optimera dina bilder) att minska din webbplatss fotavtryck.
Vi använder Twitter Bootstraps anpassnings sida för att välja och hämta endast de CSS och JavaScript-komponenter vi behöver, vilket resulterar i mycket mindre filstorlekar.
Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + screencasts via iTunes eller YouTube!
Följande är skärmdumpar av val jag gjorde i skärmen.
När du har laddat ner och distribuerat dina anpassade CSS- och JS-filer kan du välja att göra ytterligare vinster genom att använda ett plugin som Dust Me Selectors för att identifiera återstående oanvända väljare, som du kan redigera av din CSS-fil för hand. Detta kommer att vara mycket lättare med den mindre anpassade filen än med den ursprungliga filen.
Medan vi optimerar filer kan vi också nämna ett ytterligare steg som hjälper dig med de största filerna på den genomsnittliga webbplatsen: bildfilerna. Det finns mycket att tänka på när man optimerar bilder på webben. Du kan bli förvånad att veta att inte alla komprimeringsverktyg är lika. Dialogen "Spara för webb och enheter" i Photoshop visar sig vara ett av de minst effektiva komprimeringsverktygen där ute.
Här använder vi Yahoo! S Smushit-verktyg för att hjälpa oss att uppnå vad Photoshop inte kunde göra.
Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + screencasts via iTunes eller YouTube!