Hoe om CSS-aflewering te optimaliseer - 7 eenvoudige stappe
Verby is die dae toe ontwerpskundiges en toonaangewende bloggers aanbeveel het om webbladsye nie meer as 30 kilobyte te bou nie …
U moet egter nie te veel op u "kilobyftelling" konsentreer as u bladsye vir u webwerf bou en ontwerp nie. Dit is belangrik om u bladsye by te hou new en noukeurig as u CSS skryf.
Optimalisering gaan nie net om die grootte van u lêers te verminder nie. Dit gaan daaroor om u bladsye vry van rommel en opblaas te hou en dit so georganiseerd en doeltreffend moontlik te maak. Namate u meer leer oor die beste praktyke vir CSS-optimalisering, sal u vind dat u outomaties kleiner lêergroottes skep.
Hier is 5 eenvoudige dinge wat u kan doen om u CSS nou te optimaliseer.
1 Hoe om CSS-aflewering ten volle te optimaliseer
1.1 1. Gebruik Korthand
1.2 2. Raak ontslae van die hakke
1.3 3. Wees slim oor die gebruik van Whitespace
1.4 4. Snoei resets en raamwerke
1.5 5. Toekomstige bewyse van u CSS
1.6 6. Hou altyd bygewerkte dokumentasie rakende u werk
1.7 7. Druk u lêers saam (CSS Optimization 101)
1.8 Jou beurt
Hoe om CSS-aflewering ten volle te optimaliseer
1. Gebruik Korthand
Skryf in 'n kort weergawe is 'n algemene praktyk. Dit is verreweg die eenvoudigste manier om u kode te verminder en hoe lank dit u neem om te kodeer. As u dit nog nie doen nie, is daar geen tyd soos die hede nie.
Daar is 'n menigte elemente waarvoor u 'n kort weergawe kan gebruik, maar die algemeenste is:
U kan ook waardes kombineer met behulp van korthand. Deur verskillende waardes te spesifiseer, sal die blaaier in wese 'n spesifieke manier gebruik om die reëls te interpreteer.
Met behulp van enige korthandige testament maak u algehele kode baie meer bondig. U slaan beide karakters en reëls op.
As u 'n kort weergawe in elke moontlike gebied gebruik, kan dit die totale lêergrootte dramaties verminder.
2. Raak ontslae van die hakke
Om IE-spesifieke CSS-reëls te dien, gee u die voordeel van die gebruik van voorwaardelike CSS-hacks die voordeel van 'n kleiner en skoner standaard CSS-lêer..
Dit help met die blaaier wat aan die standaarde voldoen. Die addisionele bladsigewig sal egter slegs afgelaai word deur die blaaiers wat dit benodig.
As u 'n hack moet gebruik, is dit noodsaaklik dat die kode wat u gebruik spesifiek is vir die weergawe van Internet Explorer waarop u gefokus is.
Daar is talle voorafgeskrewe kodes wat as hacks dien as u nie u eie wil skryf nie. Neem die tyd om regtig na die voorafgeskrewe kode te kyk en seker te maak dat dit akkuraat is anders kan dit nog meer probleme tot gevolg hê.
As u CSS kan gebruik om die gewenste resultate te kry, doen dit sonder enige probleme. Dit is natuurlik afhanklik daarvan dat alle ander dinge gelyk is. U algehele kode sal baie ligter en eenvoudiger wees as u minder hacks op u webwerf gebruik.
3. Wees slim oor die gebruik van Whitespace
Vir u CSS-kode, witruimte is noodsaaklik vir leesbaarheid.
Witruimte bevat elemente, soos oortjies, spasies en ekstra lynonderbrekings. Elke bietjie witruimte wat u kan uitskakel, is soortgelyk aan die uitskakeling van 'n karakter.
Dit word egter dikwels nie aanbeveel om op witruimte te skuif ter wille van 'n kleiner lêer nie. U moet nog steeds optimale leesbaarheid op u webblaaie handhaaf.
Witruimte is belangrik vir die formatering, dus u wil 'n balans vind. As u in groot blokke vir teks skryf om 'n mate van witruimte uit te skakel, deur die kort aandagspan van lesers op die internet sal hulle wegklik.
Een manier om 'n kleiner lêergrootte en leesbaarheid te bied, is om oortjies te verwyder en slegs 'n enkele reël tussen paragrawe te plaas. Dit bied voldoende witruimte vanuit 'n leesbaarheidsoogpunt, maar dit skakel ook 'n deel van die witruimte uit wat nie nodig is nie.
Nou, vir die produksieweergawe van u CSS-lêer, kan u die witruimte verwyder. Dit sal steeds in u werklêer aanwesig wees.
Dit is nog 'n manier om kompromie te tref, sodat u kleiner lêers en leesbare formatering het.
4. Snoei resets en raamwerke
As u 'n CSS-raamwerk gebruik, is dit noodsaaklik dat u die dokumentasie hersien.
Dit is ewe belangrik om na elke reël wat binne u CSS-lêer lê, te kyk. Daar is tye dat u sal agterkom dat daar 'n paar reëls binne die raamwerk is wat u nie vir u huidige projek wil hê nie. Dit kan verwyder word.
U kan vind dat u aanbiedingsdetail op 'n meer bondige en elegante manier kan bereik …
Dit is miskien nie wat u gewoonlik gebruik nie, maar as dit werk, kan dit skoner raamwerk moontlik maak. As u van hulle weet, help dit u ook om onbedoelde duplisering van reëlstelle te vermy.
Dieselfde inligting geld ook vir terugstelling. As u weer gebruik, help dit om die standaardstyl van 'n blaaier te neutraliseer. As u nou vertroud is met die webwerf wat u skep, is dit nie ongewoon om sekere verklarings te vind wat u weet dat u nie nodig het nie.
Byvoorbeeld, op 'n algemene blog sal u dit waarskynlik nie gebruik nie. Raak ontslae van alles wat u nie benodig vir die spesifieke werf wat u bou nie. Jy kan verseker beter geoptimaliseerde werk wanneer u 'n stel reëls gebruik rakende 'n terugstelling of raamwerk.
In hul standaardtoestand, moet hulle egter nie aanvaar word nie. Om u CSS-lêers leesbaar en maer te hou, kyk na elke verklaring afsonderlik en besnoei die wat onnodig is.
5. Toekomstige bewyse van u CSS
Nog 'n nuttige CSS-optimaliseringsopsie: skei die meerderheid van u reëls van u uitlegspesifieke verklarings.
Ken die uitleg aan sy eie lêer toe indien moontlik. Indien nie, kan dit ten minste voordelig wees om dit sy eie afdeling te gee.
Uiteindelik is die posisionering en drywings – wat die huidige metodes is met behulp van CSS – was nie bedoel om as uitleginstrumente te dien nie.
Sommige gaan so ver as om te sê dat dit eintlik soortgelyk is aan uitleghakke. Daar is nie 'n lewensvatbare alternatief op die oomblik nie, en die hoop is dat sodra ooreengekome uitlegstandaarde voorkom, hulle ondersteuning van die blaaiers sal kry.
Sodra hierdie ondersteuning plaasvind, moet dit nie baie moeilik wees om die eienskappe van die vakkiesmodel wat gekap is, uit te ruil vir diegene wat bedoel is vir uitlegte nie.
Op die oomblik is die die beste keuse is om u uitleg met die regte eienskappe te hanteer. Dit sal die gewig van die bladsy gewoonlik meer effektief kondenseer as om die beperkte aantal eiendomme wat tans beskikbaar is, te gebruik om te vergoed vir eienaardighede.
6. Hou altyd bygewerkte dokumentasie rakende u werk
Of u nou as 'n span of alleen aan 'n webwerf werk, dit is noodsaaklik om op hoogte te bly van alles wat u gedoen het.
Byvoorbeeld, alleen, kan jy iets vergeet wat jy gedoen het. As 'n span kan iemand dalk iets doen, en u sal dit miskien nie bewus wees voordat u veranderinge aanbring wat probleme met verskillende elemente van die kode kan veroorsaak nie.
Kode-duplikasies is 'n groot bron van kommer vir beide spanne en individuele ontwerpers, veral as u gewilde webwerfbouers gebruik. Wix, Squarespace, en ander webwerf-sagteware is bekend vir die duplisering van kode, of dit heeltemal in hul databasis gemis word.
Gebruik van stylbladsye en opsommingsgidse is lewensvatbare dokumente-keuses. U kan ook CSS-opmerkings gebruik. Dit is 'n ander opsie, en dit kan voordelig wees om die elemente van lang CSS-lêers te verdeel. As u dit in die styl- of opmerkingsgids plaas, kan dit nie die lêergrootte byvoeg nie.
Een van die vinnigste maniere om kode op te blaas, is deur twee keer dieselfde werk te doen. Kodering is ingewikkeld, daarom is dit noodsaaklik om akkurate dokumentasie te hou van alles wat u gedoen het.
As u alleen werk, is dit ideaal om hierdie dokumentasie te hersien elke keer as u gaan sit om te begin werk. As u as deel van 'n span werk, moet u seker maak dat almal in dieselfde dokument kodeer hou by 'n gemeenskapsstyl of nasiengids sodat koderingveranderings maklik deur almal in die groep verstaan ​​kan word.
7. Druk u lêers saam (CSS Optimization 101)
Kompressie: daar is 'n bietjie meer as dit …
Een effektiewe manier om CSS te optimaliseer, is deur kompressie te gebruik. Dit is 'n manier om te verseker dat u lêers blaaiervriendelik is, al is dit deur mense onleesbaar.
In vergelyking met die werkkopieë is dit 'n fraksie van die grootte. Daar is verskillende toepassings wat u kan benut om die kompressieproses te vergemaklik.
Dit sal take verrig, soos om enige CSS-eienskappe wat mekaar oorskryf, op te spoor en reg te stel, witruimte saam te pers en kanse te soek om CSS-korthand te gebruik.
Benewens die gemak van hierdie toepassings, kan hulle ook help om meer te wete te kom oor die take wat u met die hand kan doen as u verkies. U kan ook verskillende teksredakteurs gebruik om u CSS-lêers te formateer.
Hulle kan zip-weergawes van die verskillende CSS-lêers wat u het, bedien. Dit word gewoonlik met behulp van PHP gedoen. As u optimaliserings- en saamdrukgereedskap wil gebruik, maak seker dat u verskeie opsies hersien voordat u die regte een vir u kies.
Nou is hierdie toepassings gewoonlik goed om foute te verminder, maar is nie perfek nie. As gevolg hiervan, moet u altyd u CSS hersien nadat u 'n toepassing gebruik het om akkuraatheid te verseker. Kode wat geoptimaliseer en skoon is, is van kritieke belang vir lêergrootte, maar ook vir leesbaarheid en instandhouding.
Die beginsels wat hier bespreek word help egter met die ontwikkeling en die gebruikerservaring.
Die meeste goeie webhostingondernemings sal u help met CSS-optimalisering. Vinniger webwerwe maak u 'n gelukkige klant, maar kleiner lêers laai ook minder op hul bedieners.
Ons het elkeen van die Kanadese webhosters getoets en SiteGround aanbeveel. Nie net help hulle u om CSS-aflewering te optimaliseer nie, maar hul tegniese ondersteuning is ongeëvenaard.
Voorbij zijn de dagen dat ontwerpexperts en toonaangevende bloggers adviseerden webpagina's te bouwen van