Ett nytt CSS-test rullas ut

Webperf-communityt har tagit fram ett nytt test för att mäta standarden av CSS (Cascading Style Sheets) på webbplatser. CSS är vad som på svenska ofta kallas för stilmallar.

Vad är CSS?

CSS är ett programmeringsspråk som används för att styla och formatera webbsidor. Det bestämmer hur HTML-element ska visas på skärmen.

Med CSS kan du kontrollera:

• Färger och bakgrunder
• Typsnitt och textstorlekar
• Layout och positionering av element
• Animationer och övergångar
• Responsiv design för olika skärmstorlekar

CSS kan skrivas direkt i HTML-filen eller i en separat .css-fil som ett HTML-dokument hämtar in. Det är oftast bättre att ha CSS i en separat fil eftersom det gör koden mer organiserad och lättare att underhålla.

Varför ett nytt CSS-test?

Behovet av ett nytt CSS-test har växt fram under en tid. Vårt tidigare CSS-test (#7) är W3C-baserat och har varit en trotjänare, men många i Webperf-communityt har känt att det har stagnerat och inte längre håller måttet. Svaret på detta är communityts egna test – nummer 27 – en ny sorts CSS-test designad med fokus på precision och relevans. Att ha mer än ett test av samma typ är egentligen inte särskilt konstigt. Vi brukar vilja ha en mångfald för att de jämnar ut varandra. Som att vi kör både Pa11y (#18) och Lighthouse Axe (#10).

Det nya testet har släppts öppet idag, den 24 januari 2025, och är redan implementerat i Webperf.se’s betygssystem. Det innebär att från och med nu kommer det att påverka totalbetyget för alla webbplatser som analyseras av Webperf.se för både dig med premiumtjänsten och du som listas på Webperf.se.

Hur påverkar CSS-test 27 din webbplats?

En viktig aspekt av Webperf.se är dess helhetsbedömning av webbplatser. Med det nya testet introduceras en ytterligare parameter i analysen. Det handlar inte bara om att få ett bättre mått på hur effektivt en webbplats hanterar CSS, utan det är även en del av kategoribetyget ”webbstandard" – och helhetsbetyget påverkas förstås.

Varför spelar CSS-optimering roll?

CSS är en central komponent i hur webbplatser renderas och visas för användare. Dåligt skriven CSS kan inte bara sakta ner sidladdningen utan även skapa problem som påverkar användarupplevelsen direkt, såsom layoutöverskridanden och fördröjd rendering av innehåll.
För att ligga i framkant med prestanda och SEO (sökmotoroptimering) är det avgörande att minimera renderingsblockerande CSS, undvika onödig kod och utnyttja moderna tekniker som exempelvis CSS Grid och flexbox på rätt sätt. Det nya testet hjälper dig att identifiera brister och se var det finns utrymme för förbättring.

Här hittar du resurserna

För att lära dig mer om Webperf-communityts tester och få insyn i den bakomliggande tekniken kan du besöka vår dokumentation och kod på Github: Webperf Core.

Github-repot innehåller allt från detaljerad information om hur testerna fungerar till kodexempel och verktyg du kan använda direkt i dina egna projekt. Att engagera sig i communityt är dessutom ett fantastiskt sätt att hålla sig uppdaterad om det senaste inom webbutveckling.