Het minimaliseren van de bestandsgrootte van de CSS-stylesheet is door velen gezien als een goede manier om de laadsnelheid van uw site te verhogen. Inderdaad, door het CSS-bestand met enkele kilobytes te verkleinen, duurt het laden van de server korter en resulteert dit in een snellere webpagina.
In het geval dat uw artikelen de Digg-voorpagina raken, kan dit ook een van de weinige beslissende factoren zijn (er zijn er veel meer) of uw server vastloopt of niet.
Enkele van de meest gebruikte methoden om een CSS-stylesheet te minimaliseren / optimaliseren, zijn het elimineren van ongebruikte selectors, ongewenste witruimte, tabbladen, opmerkingen en het wijzigen van de lange-afstandsverklaring in steno-notaties.
Ik weet dat sommigen van jullie hier niet technisch onderlegd zijn om je eigen CSS-code te bewerken, dus hier zal ik je enkele van de nuttige hulpmiddelen bieden die je kunt gebruiken om je CSS-code te optimaliseren, zelfs als je helemaal geen kennis hebt van CSS-codering.
Controleer uw CSS-code
W3C CSS Validator
De W3C CSS-validator is een hulpmiddel dat u kunt gebruiken om uw CSS te valideren. U kunt de Java-validator downloaden naar uw computer en deze offline gebruiken, of het online formulier gebruiken om uw CSS-code te controleren.
CSS Validator Firefox-add-on
Om het voor u gemakkelijker te maken om uw CSS-code te valideren, is er deze Firefox-extensie - CSS Validator - die u in uw browser kunt installeren. Na installatie kunt u eenvoudig en snel uw code controleren met een rechtermuisknop.
CSSCheck
Hoewel uw CSS-code is gevalideerd, betekent dit niet dat deze geen fouten bevat. De validatie betekent alleen dat het voldoet aan de CSS-standaarden die zijn ingesteld door de W3C. Als je wilt valideren en een paar problemen met browsercompatibiliteit met je stylesheet wilt bekijken, dan is CSSCheck een goede tool voor je.
CSS Analyzer
CSS Analyzer is een handig hulpmiddel waarmee u uw stylesheet kunt valideren aan de hand van de W3C-norm, een kleurcontrasttest kunt uitvoeren en een test kunt uitvoeren om ervoor te zorgen dat relevante groottes worden gespecificeerd in relatieve maateenheden.
In het geval dat je je afvraagt, is de kleurcontrastentest om te controleren of de voorgrond- en achtergrondkleurencombinaties voldoende contrast bieden wanneer ze worden bekeken door iemand met kleurenstoornissen, of wanneer ze op een zwart-wit scherm worden bekeken.
Ruim je CSS-code op
Dust-Me Selectors
Dust-Me Selectors is een Firefox-extensie die ongebruikte CSS-kiezers op de pagina die u bekijkt vindt. Terwijl u de volgende pagina's van hetzelfde domein test, wordt het resultaat vergeleken met de vorige gegevens en worden alle aanwezige selectors uit de lijst verwijderd. Je kunt het gebruiken om afzonderlijke pagina's te testen of om het de hele site te laten spinnen.
Uiteindelijk krijg je een rapport over de selectors die nergens op de site worden gebruikt. U kunt vervolgens die selectors uit uw stylesheet verwijderen (kleinere code betekent kleinere bestandsgrootte).
CSS Redundancy Checker
Vergelijkbaar met Dust-Me Selectors, controleert dit hulpprogramma uw site op ongebruikte en overtollige CSS-kiezers. Het enige dat anders is, is dat u de URI handmatig moet invoeren voor elke pagina die u wilt testen.
Optimaliseer en comprimeer uw CSS-code
Nadat u de geldigheid van uw CSS hebt gecontroleerd en onnodige code hebt opgeschoond, wordt het tijd om het CSS-bestand te optimaliseren en het zo klein mogelijk te maken.
CSS Tidy
CSS Tidy is een open source-software die u kunt gebruiken om uw CSS-bestand te optimaliseren en te comprimeren. Het is beschikbaar in .exe-indeling (alleen Windows) en een gecomprimeerde php-scriptindeling (alle platforms, voor webontwikkelaars). Wat CSS Tidy doet, is vooral de opmerking verwijderen, onnodige witruimte en een deel van de code in steno veranderen. Tijdens compressie kunt u kiezen tussen leesbaarheid van de code of maximale compressie. Afhankelijk van de lengte van uw code, kunt u eenvoudig een compressieverhouding van maximaal 30% of meer bereiken.
Omdat CSS Tidy een open source-project is, zijn er verschillende websites die de code gebruiken en deze hebben omgezet in een online tool die mensen kunnen gebruiken. Hier zijn er een aantal:
- SCHONE CSS
- Code Beautifier
- CSS Formatter en Optimizer van CSS Portal
Andere CSS-optimalisatoren
FlumpCakes CSS Optimizer
Een eenvoudige optimizer met verschillende opties waaruit u kunt kiezen.
Robson CSS-compressor
Hoewel het er hetzelfde uit kan zien als andere, heb ik de compressieratio voor Robson CSS Compressor als het hoogste van allemaal gevonden. Hoewel het wordt geleverd met verschillende opties om de instelling te wijzigen, blijven alle opties onaangeroerd (alle opties aangevinkt) levert altijd het beste resultaat op.
CSS Drive CSS-compressor
De CSS Compressor aangeboden door CSS Drive wordt geleverd in twee modi die u kunt gebruiken: Normaal en Geavanceerd. In de normale modus hoeft u alleen maar te selecteren welk compressieniveau u wilt (Light, Normal of Super Compact) en de CSS Compressor doet de rest. In de geavanceerde modus krijgt u meer opties en meer zeggenschap over hoe u uw stylesheet wilt optimaliseren.
CSS Optimizer
De CSS Optimizer van mabblog.com is een opdrachtregeltoepassing voor Mac en Linux. Het is bedoeld voor diegenen die meer vertrouwd zijn met de terminal in plaats van een online interface. Er is ook een eenvoudige online versie beschikbaar voor diegenen die het snel willen overnemen en klaar zijn met.
Hopelijk zijn de hier genoemde hulpmiddelen voldoende om uw CSS-stylesheet aan te passen en te optimaliseren. Als u andere hulpmiddelen heeft gebruikt die nuttiger zijn dan de hierboven genoemde, deel deze dan met ons in de opmerkingen.