Om du använder (någon form av) cookiebanner på din webbplats kommer webbplatsens hastighet att bli lägre på grund av mängden extra skript som måste laddas. Här är några tips på hur du kan förbättra din sidhastighet:
Teknisk optimering
Använd en lång cachningstid
Du kan ställa in hur länge skript ska cachelagras under Meny > CMP:er > Övrigt. Standardinställningen här är 30 minuter. Genom att använda högre värden möjliggör du längre cachelagring och undviker att användarna behöver begära koderna på nytt för ofta.
Använd halvautomatisk blockeringskod
CMP erbjuder dig två kodversioner: automatisk och halvautomatisk/manuell blockeringskod. Den halvautomatiska blockeringskoden laddas asynkront och kommer därför att ha en mindre inverkan på din sidas prestanda. Vi rekommenderar alltid att du använder den halvautomatiska blockeringskoden.
Lägg till koden direkt på sidan
Det rekommenderas alltid att lägga till CMP-koden direkt i webbplatsens kod istället för att lägga till den via en TagManager eller liknande. Användningen av en tag manager fördröjer sidladdningen med cirka 200–500 ms och påverkar därför dina CLS/LCP-poäng negativt (se nedan).
Placera CMP-koden så tidigt som möjligt på din webbplats
För att CMP:n ska laddas snabbt bör du lägga till CMP-koden så tidigt som möjligt i din <body> eller <head> -taggen.
Använd preconnect
För att minska laddningstiderna kan du lägga till följande kod i din <head>:
<link rel="preconnect" href="https://delivery.consentmanager.net">
<link rel="preconnect" href="https://cdn.consentmanager.net">
Observera: Beroende på dina kontoinställningar kan de URL:er som din CMP använder vara olika. Se till att alltid lägga till hela underdomänen (t.ex. a.delivery.consentmanager.net) som en preconnect.
Designoptimering
Cumulative Layout Shift (CLS)
För Googles sökmotor är kumulativ layoutförskjutning (CLS) en relevant rankningsfaktor. För att minska CLS-effekten på din webbplats rekommenderar vi följande:
- Använd inte externa teckensnitt (utan endast egenhostade teckensnittsfiler om det behövs) i din anpassade CSS för din ConsentManager-design
- Använd inte externa bilder (eller några bilder alls) i din anpassade HTML-kod för din ConsentManager-design. Använd om möjligt inbyggda SVG-bilder för att undvika en extra nedladdning av bildfilen.
- Använd inte extern CSS (@import-regler) i din anpassade CSS för din ConsentManager-design
- Använd inte ConsentManagers layoutläge "Push down" (CMP > Designs > Box settings) som visas högst upp i fönstret
Largest Contentful Paint (LCP)
I likhet med CLS (ovan) är LCP en annan rankningsfaktor. För att minska CMP:s påverkan på din webbplats rekommenderar vi följande:
- Följ de tekniska rekommendationerna ovan (kodplacering, preconnect etc.)
- Använd whitelabel-proxyläge där det är möjligt
- Försök utforma samtyckeslagret så att det tar så lite plats som möjligt (vanligtvis endast möjligt med desktop-layouter)
- Ställ in CMP-inställningarna så att samtyckeslagret endast visas i EU/EES-länder för att minska LCP-påverkan i andra länder
- Om laddningshastigheten är avgörande rekommenderar vi att du inte använder import (konfigurationsvariabeln cmp_waitforimport) och ställer in samtyckesomfånget till domänspecifikt samtycke (Meny > CMP:er > Juridiska inställningar > Samtyckesomfång)
- Undvik design med bakgrundsbilder (t.ex. design med cookie-illustrationer)
- Minska storleken på den största texten genom att använda flera
<div>eller<p>-element istället för en enda stor text - Du kan ställa in Meny > Design > Redigera > Beteende så att lagret endast visas efter x sekunder och/eller vid musrörelse. Detta kan hjälpa till att hantera LCP.
Interaction to Next Paint (INP)
INP beskriver den tid som webbläsaren behöver för att beräkna mellan användarens interaktion (t.ex. klicka på acceptera) och det ögonblick då gränssnittet reagerar. I din ConsentManager-konfiguration påverkas detta främst av a) antalet leverantörer och b) de designalternativ som du använder. Här är några rekommendationer för att öka INP-värdet:
- Använd så få leverantörer som möjligt
- Gruppera leverantörerna jämnt efter syfte (det går till exempel snabbare att använda 10 leverantörer per 10 syften än 100 leverantörer grupperade under 1 syfte).
- Undvik växlingsanimationer genom att antingen inte visa växlingsknappar på det första lagret (visa endast text/lista) eller genom att inaktivera animationen via Meny > CMP:er > Allmänna inställningar och ställa in animationen till 0:
- Använd en design som inte visar leverantörerna i det första lagret (t.ex. ingen utökad leverantörslista i det första lagret)
- Använd en design som endast visar en del av leverantörerna på det andra lagret (preferenslagret). Du kan ställa in detta i designinställningarna genom att expandera rutan "Anpassade inställningar" > Meny. Använd en design med en meny och undvik designer utan meny eller designer med expanderad karusell.
