Webbutveckling
Now Reading
10 CSS tips för snabbare laddning av webbplatsen
0

10 CSS tips för snabbare laddning av webbplatsen

by Daniel Norin29 april, 2015

Optimera allt 😉 För att ladda webbplatser snabbt så gäller det att bygga och skriva koden rätt. Här är några riktigt bra tips på hur du laddar CSS snabbare.

1. Externa stylecheets

Ingen vits att skriva css inline utan lägg det i externa filer och gör anropen i HEAD taggen för att ladda in dessa.

2. En enda CSS

Går det att ladda en enda CSS så blir det mindre requests och snabbar upp laddningen av sidan.

3. Ladda CSS först

Ha för vana att CSS ska laddas först. Så lägg in <link rel=”stylesheet” href=”http://domain.com/style.css” type=”text/css” /> direkt i början på HEAD taggen.

4. Små CSS filer

Ta bort allt skräp som inte behövs från CSS filerna. Behöver man verkligen styla varenda element? Sedan är CSS3 riktigt nice men kommer en hel del fluff fluff som slöar till det.

5. Använd selectors på rätt sätt

Lär dig att förstå hur man kan skriva CSS kod för att minimera den.

Exempel:

margin-top: 0px; margin-bottom: 0px; margin-left: 2px; margin-right:2px;

Kan skrivas som

margin: 0 2px;

Och det där var lite basic tips men nedan kommer lite med hardcore tips ett suveränt litet verktyg för att se vilken den av CSS koden som inte används.

[sociallocker]6. Komprimera CSS filer

Det går givetvis att komprimera filer manuellt även om det finns en hel del bra verktyg för det. Ta bort ”white spaces” och CSS kommentarer.

7. Se vilken del av koden som inte används

En av de bättre tricken är att se vilken kod som faktiskt inte används.
Använd Gmatrix (http://gtmetrix.com/remove-unused-css.html) för att se.

8. Används CDN (Content delivery network)

Suvernt att köra t.ex Amazon som CDN för CSS och bilder. Har man en internationell site så är det nästan ett måste för att alla som besöker den ska få en bra laddningstid.

9. Undvik versioner

För att få bättre CSS casching så kör enkla urlér. Att lägga till ”query parametrar” för att visa versioner gör cachningen svårare.

Exempel:
<link rel=”stylesheet” href=”http://domain.com/style.css?1368887361″>

10. Lär dig CSS3

Helt underbar version av CSS som har några riktiga hardcore element ;)[/sociallocker]

Din reaktion
Inspirerad
0%
Räddade dagen
100%
Ska delas med världen
0%
Förstod inte
0%
Riktigt trist
0%
Fick en tår i ögat
0%
About The Author
Daniel Norin
Gillar allt inom marknadsföring med inriktning på analys och sökmotoroptimering. En #¤% på att bygga datorer och åka skateboard.

Leave a Response