Oanvänd CSS

Silktide läser in dina sidor i en riktig webbläsare och mäter hur mycket av varje stilmall som faktiskt används för att visa sidan. Stilmallar med en stor mängd oanvänd formatering rapporteras, tillsammans med den möjliga besparingen.

Varför detta är viktigt

Webbläsare kan inte visa en sida förrän de har laddat ned och bearbetat dess , så varje regel som inte används fördröjer fortfarande ögonblicket då ditt innehåll visas. Oanvänd CSS byggs naturligt upp: teman och ramverk levereras med format för alla funktioner, oavsett om du använder dem eller inte, och gamla format tas sällan bort när designen ändras. Resultatet blir att besökare väntar på formatering som aldrig används.

Så åtgärdar du det

Ta bort format som du inte längre använder. Byggverktyg kan göra detta automatiskt genom att genomsöka dina mallar och behålla endast den CSS som de refererar till.
Dela upp stora stilmallar så att varje sida bara läser in de format den behöver, i stället för ett paket som innehåller formateringen för alla sidor.
För de format som en sida behöver ska du prioritera dem som återger den första delen av skärmen och låta resten läsas in utan att blockera:

<!-- Läses in utan att blockera den första visningen -->
<link rel="preload" href="rest.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="rest.css"></noscript>

Var försiktig med automatisk borttagning: format som endast används av , eller endast på andra sidor som delar stilmallen, kan tas bort av misstag.

Så testar Silktide detta

Läs in sidan i en riktig webbläsare och registrera vilka CSS-regler som tillämpas medan sidan läses in.
Mät för varje stilmall hur många av dess byte som aldrig användes.
Rapportera varje stilmall med betydande slöseri och visa dess aktuella storlek, den oanvända procentandelen och de byte du skulle kunna spara.

Felsökning

CSS används, men inte omedelbart

Mätningen omfattar den inledande sidinläsningen. Format som endast tillämpas senare – vid hovring, i modaler eller efter att JavaScript visar innehåll – räknas som oanvända även om sidan behöver dem så småningom. Det är ändå användbar information: dessa format behöver inte blockera den första visningen, så de kan läsas in separat.

Stilmallen delas på hela webbplatsen

En delad stilmall är till största delen ”oanvänd” på en enskild sida. Det kan vara en rimlig kompromiss, eftersom filen efter den första sidvisningen. Väg kostnaden vid det första besöket mot bekvämligheten innan du delar upp den.