Hur man optimerar CSS-leverans – 7 enkla steg

css optimeringsvektorbildBorta är de dagar då designexperter och branschledande bloggare rekommenderade att bygga webbsidor högst 30 kilobyte …


Då förväntades denna “cap” hantera HTML, JavaScript, bilder, CSS och Flash. Låt oss vara ärliga, det krävs inte mycket för att helt överskrida 30 kb.

Eftersom JavaScript och CSS fick popularitet, blev det vanligt att CSS enbart överskred taket på 30 kB. Detta gäller särskilt för större webbplatser.

Du bör dock inte vara alltför fokuserad på ditt “kilobytantal” när du bygger och utformar sidor för din webbplats. Det är viktigt att behålla dina sidor optimerad och tätt när du skriver din CSS.

Optimering handlar inte bara om att minimera storleken på dina filer. Det handlar om att hålla dina sidor fria från röran och uppblåsning, göra dem så organiserade och effektiva som möjligt. När du lär dig mer om bästa metoder för CSS-optimering kommer du att upptäcka att du automatiskt skapar mindre filstorlekar.

Här är fem enkla saker du kan göra för att optimera din CSS just nu.

Hur man optimerar CSS-leveransen helt

1. Använd Shorthand

Att skriva i korthet har blivit en mycket vanlig praxis. Detta är överlägset det enklaste sättet att minska din kod och hur lång tid det tar dig att koda. Om du inte gör det ännu, finns det ingen tid som nuet.

css teckensnittegenskap

Det finns en mängd element som du kan använda kort för, men de vanligaste inkluderar:

  • Marginal
  • Stoppning
  • Font
  • Översikt
  • Gräns
  • Bakgrund
  • List-style

korta konfigurationsvärdenDu kan också kombinera värden med korthet. Genom att ange olika värden kommer webbläsaren i huvudsak att använda ett specificerat sätt för att tolka reglerna.

Använda alla korta tester göra din övergripande kod mycket mer kortfattad. Du sparar både tecken och linjer.

Om du använder korthet i alla möjliga områden kan detta dramatiskt minska den totala filstorleken.

2. Bli av med hackorna

dvs css regelFör att betjäna IE-specifika CSS-regler, med villkorade CSS-hack ger du fördelen att servera en mindre och renare standard CSS-fil.

Det hjälper med webbläsare som är mer standardkompatibla. Den extra sidvikten kommer dock bara att laddas ner av de webbläsare som kräver det.

Om du måste använda en hack, är det viktigt att koden du använder är specifik för den version av Internet Explorer du är fokuserad på.

Det finns många förskrivna koder som fungerar som hacks om du inte vill skriva din egen. Ta dig bara tid att verkligen titta på den förskrivna koden och se till att den är korrekt annars kan detta resultera i ännu fler problem.

Om du nu kan använda CSS för att få de resultat du önskar, gör detta utan några hacks. Naturligtvis är detta beroende av att alla andra saker är lika. Din övergripande kod kommer att bli mycket lättare och enklare när du använder färre hack på din webbplats.

3. Var smart när du använder Whitespace

För din CSS-kod, whitespace är absolut nödvändigt för läsbarhet.

Whitespace innehåller element, till exempel flikar, mellanslag och extra radavbrott. Varje bit av utrymme som du kan eliminera liknar att eliminera en karaktär.

ta bort tomma raderDet rekommenderas emellertid ofta inte att skissa på vitrummet för en mindre fil. Du måste fortfarande behålla optimal läsbarhet på dina webbsidor.

Whitespace är viktigt för formateringen, så du vill hitta en balans. Om du skriver i stora block till text för att eliminera lite vitrum, det korta uppmärksamhetsintervallet för läsare på internet får dem att klicka bort.

Ett sätt att tillhandahålla både en mindre filstorlek och läsbarhet är att gräva flikar och bara lägga en enda rad mellan stycken. Detta ger tillräckligt med utrymme ur en läsbarhetssynpunkt, men det eliminerar också en del av det vita området utan att behöva.

För din CSS-fils produktionsversion kan du nu ta bort whitespace. Det kommer fortfarande att finnas i din arbetsfil.

Detta är ett annat sätt att kompromissa så att du har både mindre filer och läsbar formatering.

4. Beskär återställningar och ramverk

När du använder ett CSS-ramverk är det viktigt att du granskar dokumentationen.

Det är lika viktigt att titta på varje rad som finns i din CSS-fil. Det finns tillfällen då du kommer att upptäcka att det finns några regler inom ramen som du inte vill ha för ditt nuvarande projekt. Dessa kan tas bort.

tagit bort oanvända css-regler

Du kanske tycker att du kan uppnå presentationsdetaljer på ett mer kortfattat och elegant sätt …

Det kanske inte är det du vanligtvis använder, men om det fungerar kan det möjliggöra renare ramverk. När du vet om dem hjälper detta dig också att undvika oavsiktlig duplicering av regeluppsättningar.

Samma information gäller också för återställningar. När du använder återställningar hjälper de till att neutralisera standardformatet för en webbläsare. Om du nu känner till webbplatsen som du skapar är det inte ovanligt att hitta vissa förklaringar som du vet att du inte kommer att behöva.

Till exempel på en allmän blogg kommer du sannolikt inte att använda dem. Bli av med allt du inte behöver för den specifika webbplats du bygger. Du kan säkerställa bättre optimerat arbete när du använder en uppsättning regler när det gäller återställning eller ramverk.

Men i deras standardtillstånd bör de inte accepteras. För att hålla dina CSS-filer läsbara och smala, titta på varje deklaration individuellt och skär ned de som är onödiga.

5. Framtidssäker din CSS

Css syntax

Ett annat användbart CSS-optimeringsalternativ: separera majoriteten av dina regler från dina layoutspecifika deklarationer.

Tilldela layouten till sin egen enskilda fil om detta är möjligt. Om inte, åtminstone kan det vara fördelaktigt att ge den sin egen sektion.

I slutändan positionering och flyter – som är de nuvarande metoderna med CSS – var inte avsedda att fungera som layoutverktyg.

Vissa går så långt som att säga att dessa faktiskt liknar layouthacks. Det finns inget hållbart alternativ för närvarande och hoppet är att när överenskomna layoutstandarder inträffar börjar de få stöd från webbläsare.

När detta stöd har hänt, bör det inte vara särskilt svårt att byta ut box-modellegenskaperna som är hackade för de som är avsedda för layouter.

Just nu, det bästa valet är att hantera din layout med rätt egenskaper. Detta kondenserar vanligtvis sidvikten mer effektivt än att använda den begränsade uppsättningen egenskaper som för närvarande är tillgängliga för att kompensera för besvär.

6. Fortsätt alltid uppdaterad dokumentation om ditt arbete

Oavsett om du arbetar på en webbplats som ett team eller ensam, är det absolut nödvändigt att hålla reda på allt du har gjort.

Till exempel kan du bara glömma något du har gjort. Som team kan någon göra något, och du kanske inte är medveten förrän du gör ändringar som kan orsaka problem med olika delar av koden.

lägger till css kommentarKodduplikationer är ett enormt område för både team och enskilda designers, särskilt när man använder populära webbplatsbyggare. Wix, Squarespace och annan webbplatsbyggnadsprogramvara är känd för att duplicera kod, eller helt saknas i sin databas.

Att använda formatmallguider och markeringsguider är genomförbara dokumentationsval. Du kan också använda CSS-kommentarer är ett annat alternativ och det kan vara fördelaktigt för att dela upp elementen i CSS-filer som är långa. Om du sätter dessa i stil- eller markeringsguiden förhindrar de att lägga till filstorleken.

Ett av de snabbaste sätten att uppblåsa kod är genom att göra samma arbete två gånger. Kodning är komplex, så det är absolut nödvändigt att ha korrekt dokumentation av allt du har gjort.

Om du arbetar ensam är det perfekt att granska den här dokumentationen varje gång du sätter dig ner för att börja arbeta. När du arbetar som en del av ett team, se till att alla som kodar i samma dokument följer en communitystil eller markeringsguide så att kodändringar lätt kan förstås av alla i gruppen.

7. Komprimera dina filer (CSS Optimization 101)

css komprimering och optimeringsgif

Komprimering: det finns lite mer än det här …

Ett effektivt sätt att optimera CSS är genom att använda komprimering. Detta är ett sätt att säkerställa att dina filer är webbläsarvänliga även om de är oläsliga av människor.

Jämfört med arbetskopiorna kommer dessa att vara en bråkdel av storleken. Det finns olika applikationer som du kan dra fördel av för att underlätta komprimeringsprocessen.

Dessa kommer att utföra uppgifter, som att hitta och fixa alla CSS-egenskaper som skriver över varandra, komprimerar vitt utrymme och letar efter chanser att använda CSS-kort.

Utöver bekvämligheten med dessa applikationer kan de också hjälpa dig att lära dig mer om de uppgifter du kan göra för hand om du föredrar det. Du kan också använda olika textredigerare för att formatera dina CSS-filer.

De kan servera zip-versioner av de olika CSS-filer du har. Detta görs vanligtvis med PHP. Om du vill använda optimerings- och komprimeringsverktyg, se till att granska flera alternativ innan du väljer rätt alternativ för dig.

Nu är dessa applikationer generellt bra på att minimera fel, men de är inte perfekta. På grund av detta bör du alltid granska din CSS efter att du har använt en applikation för att säkerställa noggrannhet. Kod som är optimerad och ren är avgörande för filstorlek, men också för läsbarhet och underhåll.

Din tur

De principer som diskuteras här är solida överväganden för CSS, men också för JavaScript, HTML och andra programmeringsspråk. Jämfört med rendering av din webbplats är CSS-filer inte lika framträdande för slutanvändaren.

Emellertid hjälper principerna som diskuteras här med både utvecklingsupplevelsen och användarupplevelsen.

De flesta bra webbhotellföretag hjälper dig med CSS-optimering. Snabbare webbplatser gör dig till en lycklig kund, men mindre filer belastar också mindre på deras servrar.

Vi har testat alla kanadensiska webbhotell och rekommenderar SiteGround. De hjälper dig inte bara med att optimera CSS-leveransen, utan deras tekniska support är oöverträffad.

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

About the author

Adblock
detector