Share
Een van de veelgehoorde kritieken op frameworks zoals Twitter Bootstrap is dat ze veel meer code bevatten dan je op je site gebruikt, waardoor je een opgeblazen code en slechte site-prestaties hebt. Dit is een mogelijk gevaar, maar de Customize-pagina van Bootstrap biedt een uitstekende tool om het probleem aan te pakken. Ik zal u helpen bij het aanpassen van uw CSS- en JavaScript-bestanden om hun bestandsgrootte aanzienlijk te verminderen.
Dat zorgt voor de eerste video, in het tweede zal ik je door een andere belangrijke stap leiden: dingen uit je beeldbestanden knijpen, met behulp van de Smushit-tool van Yahoo! Samen zullen deze twee stappen (het optimaliseren van uw code en het optimaliseren van uw afbeeldingen) de voetafdruk van uw site aanzienlijk verminderen.
We zullen de Customize-pagina van Twitter Bootstrap gebruiken om alleen de CSS- en JavaScript-componenten te selecteren en downloaden die we nodig hebben veel kleinere bestandsgroottes.
Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes of YouTube!
De volgende zijn schermafbeeldingen van selecties die ik heb gemaakt in de screencast.
Nadat u uw aangepaste CSS- en JS-bestanden hebt gedownload en geïmplementeerd, kunt u ervoor kiezen om verdere voordelen te behalen door een plug-in zoals Dust Me Selectors te gebruiken om resterende ongebruikte selectors te identificeren, die u handmatig uit uw CSS-bestand kunt bewerken. Dit zal zijn veel gemakkelijker met het kleinere aangepaste bestand dan met het originele bestand.
Terwijl we bestanden optimaliseren, kunnen we net zo goed een extra stap noemen die u helpt met de grootste bestanden in de gemiddelde site: de afbeeldingsbestanden. Er is veel om over na te denken bij het optimaliseren van afbeeldingen voor internet. Het zal u misschien verbazen te weten dat niet alle compressietools gelijk zijn. Het dialoogvenster 'Opslaan voor web en apparaten' in Photoshop blijkt een van de minst effectieve compressietools te zijn die er zijn.
Hier gebruiken we de Smushit-tool van Yahoo! om ons te helpen bereiken wat Photoshop niet kon.
Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes of YouTube!
Accentsconagua