Hoe CSS-levering te optimaliseren – 7 eenvoudige stappen

css optimalisatie vector afbeeldingVoorbij zijn de dagen dat ontwerpexperts en toonaangevende bloggers adviseerden webpagina’s te bouwen van niet meer dan 30 kilobytes …


Destijds was deze “cap” bedoeld voor HTML, JavaScript, afbeeldingen, CSS en Flash. Laten we eerlijk zijn, er is niet veel voor nodig om de 30 kb volledig te overschrijden.

Toen JavaScript en CSS populair werden, werd het gebruikelijk dat CSS alleen het plafond van 30 KB overschreed. Dit geldt vooral voor grotere websites.

U moet zich echter niet overdreven concentreren op uw “kilobyte-telling” bij het bouwen en ontwerpen van pagina’s voor uw website. Het is belangrijk om uw pagina’s te bewaren geoptimaliseerd en strak bij het schrijven van uw CSS.

Optimalisatie gaat niet alleen over het minimaliseren van de grootte van uw bestanden. Het gaat erom uw pagina’s overzichtelijk en efficiënt te houden en ze zo georganiseerd en efficiënt mogelijk te maken. Naarmate u meer leert over praktische tips voor het optimaliseren van CSS, zult u merken dat u automatisch kleinere bestandsgroottes maakt.

Hier zijn 5 eenvoudige dingen die u kunt doen om uw CSS nu te optimaliseren.

Hoe CSS-levering volledig te optimaliseren

1. Gebruik steno

In steno schrijven is een veel voorkomende praktijk geworden. Dit is verreweg de eenvoudigste manier om uw code te verminderen en hoe lang het duurt om te coderen. Als je dit nog niet doet, is er geen tijd zoals het heden.

css font-eigenschap

Er zijn een groot aantal elementen waarvoor u steno kunt gebruiken, maar de meest voorkomende zijn:

  • Marge
  • Vulling
  • Lettertype
  • Overzicht
  • Grens
  • Achtergrond
  • Lijststijl

steno configuratie waardenU kunt waarden ook combineren met steno. Door verschillende waarden op te geven, zal de browser in wezen een specifieke manier gebruiken om de regels te interpreteren.

Elke steno gebruiken maak uw algemene code veel beknopter. Je slaat zowel karakters als regels op.

Als u in elk mogelijk gebied steno gebruikt, kan dit de algehele bestandsgrootte drastisch verminderen.

2. Weg met de hacks

dwz css regelOm IE-specifieke CSS-regels te bedienen, biedt het gebruik van voorwaardelijke CSS-hacks het voordeel van het weergeven van een kleiner en schoner standaard CSS-bestand.

Het helpt bij de browsers die meer standaarden naleven. Het extra paginagewicht wordt echter alleen gedownload door de browsers die dit nodig hebben.

Als u een hack moet gebruiken, is het absoluut noodzakelijk dat de code die u gebruikt, specifiek is voor de versie van Internet Explorer waarop u zich richt.

Er zijn talloze vooraf geschreven codes die als hacks dienen als u die niet zelf wilt schrijven. Neem gewoon de tijd om echt naar de vooraf geschreven code te kijken en zorg ervoor dat deze juist is anders kan dit nog meer problemen opleveren.

Als je nu CSS kunt gebruiken om de gewenste resultaten te krijgen, doe dit dan zonder enige hacks. Dit is natuurlijk afhankelijk van het feit of alle andere dingen gelijk zijn. Uw algehele code zal veel lichter en eenvoudiger zijn wanneer u minder hacks op uw site gebruikt.

3. Wees slim in het gebruik van witruimte

Voor uw CSS-code, witruimte is absoluut noodzakelijk voor leesbaarheid.

Witruimte bevat elementen, zoals tabbladen, spaties en extra regeleinden. Elk stukje witruimte dat je kunt verwijderen, is vergelijkbaar met het verwijderen van een personage.

verwijder lege regelsHet wordt echter vaak niet aangeraden om op witruimte te beknibbelen omwille van een kleiner bestand. U moet nog steeds een optimale leesbaarheid op uw webpagina’s behouden.

Witruimte is belangrijk voor opmaak, dus je wilt een balans vinden. Als u in grote blokken naar tekst schrijft om wat witruimte te verwijderen, de korte aandachtsspanne van lezers op internet zorgt ervoor dat ze wegklikken.

Een manier om zowel een kleinere bestandsgrootte als leesbaarheid te bieden, is door tabs te verwijderen en slechts één regel tussen alinea’s te plaatsen. Dit biedt voldoende witruimte vanuit het oogpunt van leesbaarheid, maar elimineert ook een deel van die witruimte die niet nodig is.

Nu kunt u voor de productieversie van uw CSS-bestand de witruimte verwijderen. Het zal nog steeds aanwezig zijn in uw werkdossier.

Dit is een andere manier om compromissen te sluiten, zodat u zowel kleinere bestanden als leesbare opmaak heeft.

4. Snoei resets en frameworks

Wanneer u een CSS-framework gebruikt, is het absoluut noodzakelijk dat u de documentatie doorneemt.

Het is even belangrijk om naar elke afzonderlijke regel in uw CSS-bestand te kijken. Er zijn momenten waarop u zult ontdekken dat er enkele regels in het raamwerk zijn die u niet wilt voor uw huidige project. Deze kunnen verwijderd worden.

ongebruikte CSS-regels verwijderd

U zult merken dat u op een beknoptere en elegantere manier presentatiedetails kunt bereiken …

Dit is misschien niet wat u normaal gebruikt, maar als het werkt, kan dit zorgen voor een schoner raamwerk. Wanneer u hiervan op de hoogte bent, helpt dit u ook om onbedoeld dupliceren van regelsets te voorkomen.

Dezelfde informatie is ook van toepassing op resets. Wanneer u resets gebruikt, helpen ze bij het neutraliseren van de standaardstijl van een browser. Als u nu bekend bent met de website die u maakt, is het niet ongebruikelijk om bepaalde verklaringen te vinden waarvan u weet dat u ze niet nodig zult hebben.

Op een algemene blog zul je ze bijvoorbeeld waarschijnlijk niet gebruiken. Verwijder gewoon alles wat u niet nodig heeft voor de specifieke site die u aan het bouwen bent. Jij kan zorgen voor beter geoptimaliseerd werk wanneer u een reeks regels gebruikt betreffende een reset of raamwerk.

In hun standaardstatus mogen ze echter niet worden geaccepteerd. Om uw CSS-bestanden leesbaar en slank te houden, moet u elke verklaring afzonderlijk bekijken en bezuinigen op de onnodige.

5. Maak uw CSS toekomstbestendig

Css-syntaxis

Een andere handige optie voor CSS-optimalisatie: scheid het merendeel van uw regels van uw opmaakspecifieke verklaringen.

Wijs de lay-out toe aan zijn eigen individuele bestand als dit mogelijk is. Zo niet, dan kan het in ieder geval nuttig zijn om het een eigen sectie te geven.

Uiteindelijk zijn de positionering en drijvers – dat zijn de huidige methoden die CSS gebruiken – waren niet bedoeld als opmaakhulpmiddelen.

Sommigen zeggen zelfs dat deze eigenlijk vergelijkbaar zijn met layout-hacks. Er is op dit moment geen haalbaar alternatief en de hoop is dat zodra de overeengekomen lay-outnormen zich voordoen, ze ondersteuning van browsers gaan krijgen.

Zodra deze ondersteuning plaatsvindt, zou het niet erg moeilijk moeten zijn om de eigenschappen van het boxmodel die zijn gehackt uit te wisselen voor die bedoeld voor lay-outs.

Op dit moment, de de beste keuze is om uw lay-out af te handelen met de juiste eigenschappen. Dit zal het paginagewicht meestal effectiever condenseren dan het gebruik van de beperkte set eigenschappen die momenteel beschikbaar is om eigenaardigheden te compenseren.

6. Houd altijd bijgewerkte documentatie over uw werk

Of je nu als team of alleen aan een website werkt, het is absoluut noodzakelijk om alles bij te houden wat je hebt gedaan.

Alleen kun je bijvoorbeeld iets vergeten dat je hebt gedaan. Als team kan iemand iets doen en u weet het mogelijk pas als u wijzigingen aanbrengt die problemen kunnen veroorzaken met verschillende elementen van de code.

CSS-opmerking toevoegenCodeduplicaties zijn een groot probleem voor zowel teams als individuele ontwerpers, vooral bij het gebruik van populaire website-bouwers. Wix, Squarespace en andere software voor het bouwen van websites zijn bekend om het dupliceren van code of het volledig missen van hun database.

Het gebruik van stijlbladgidsen en markeringsgidsen zijn haalbare documentatiekeuzes. U kunt ook CSS-opmerkingen gebruiken. Dit is een andere optie en dit kan gunstig zijn voor het afsnijden van de elementen van CSS-bestanden die lang zijn. Als u deze in de stijl- of markeringsgids plaatst, voorkomt u dat ze de bestandsgrootte toevoegen.

Een van de snelste manieren om code op te blazen, is door tweemaal hetzelfde werk te doen. Codering is complex, dus het is absoluut noodzakelijk om nauwkeurige documentatie bij te houden van alles wat je hebt gedaan.

Als u alleen werkt, is het ideaal om deze documentatie elke keer dat u gaat zitten door te nemen om te beginnen met werken. Als je als team werkt, zorg er dan voor dat iedereen in hetzelfde document codeert houdt zich aan een community-stijl of opmaakgids zodat coderingswijzigingen gemakkelijk door iedereen in de groep kunnen worden begrepen.

7. Comprimeer uw bestanden (CSS-optimalisatie 101)

css compressie en optimalisatie gif

Compressie: er is meer aan de hand dan dit …

Een effectieve manier om CSS te optimaliseren is door compressie te gebruiken. Dit is een manier om ervoor te zorgen dat uw bestanden browservriendelijk zijn, ook al zijn die onleesbaar voor mensen.

Vergeleken met de werkkopieën zullen deze een fractie van het formaat zijn. Er zijn verschillende toepassingen waar u van kunt profiteren om het compressieproces gemakkelijker te maken.

Deze voeren taken uit, zoals het vinden en corrigeren van CSS-eigenschappen die elkaar overschrijven, het comprimeren van witruimte en het zoeken naar kansen om CSS-steno te gebruiken.

Naast het gemak van deze applicaties, kunnen ze u ook helpen om meer te leren over de taken die u met de hand kunt doen als u dat wilt. U kunt ook verschillende teksteditors gebruiken om uw CSS-bestanden te helpen opmaken.

Ze kunnen zip-versies weergeven van de verschillende CSS-bestanden die u heeft. Dit wordt meestal gedaan met PHP. Als u optimalisatie- en compressietools wilt gebruiken, moet u meerdere opties bekijken voordat u de juiste voor u kiest.

Nu zijn deze applicaties over het algemeen goed in het minimaliseren van fouten, maar ze zijn niet perfect. Daarom moet u uw CSS altijd controleren na gebruik van een applicatie om nauwkeurigheid te garanderen. Code die is geoptimaliseerd en schoon is van cruciaal belang voor de bestandsgrootte, maar ook voor leesbaarheid en onderhoud.

Jouw beurt

De hier besproken principes zijn solide overwegingen voor CSS, maar ook voor JavaScript, HTML en andere programmeertalen. Vergeleken met de weergave van uw website zijn CSS-bestanden niet zo prominent voor de eindgebruiker.

De hier besproken principes helpen echter bij zowel de ontwikkelervaring als de gebruikerservaring.

De meeste goede webhostingbedrijven zullen u helpen met CSS-optimalisatie. Snellere websites maken van u een tevreden klant, maar kleinere bestanden zijn ook minder belastend voor hun servers.

We hebben alle Canadese webhosts getest en SiteGround aanbevolen. Ze helpen u niet alleen bij het optimaliseren van CSS-weergave, maar hun technische ondersteuning is ongeëvenaard.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector