Långsam av misstag kontra långsam av design

Långsam av misstag kontra långsam av design.

När du anlitar mig för att fixa eller prata om Core Web Vitals kommer du vid något tillfälle att höra mig prata om långsam av misstag kontra långsam av design.  Jag tycker att det är en viktig distinktion att göra och i den här artikeln kommer jag att förklara hur detta hjälper dig att förbättra Core Web Vitals.

Långsam av misstag

Jag älskar antimönster av typen 'långsam av misstag'. Du gjorde något som saktade ner sidan. Du gjorde ett misstag. Du visste inte att det finns ett mycket snabbare sätt att göra detta. Inga problem, jag kan fixa misstag. 

Att kategorisera dessa 'misstag' är därför logiskt. Det ger mig en lista med enkla att fixa, högeffektiva förbättringar som jag kan skicka till ditt utvecklingsteam (eller fixa själv). Det behövs vanligtvis väldigt lite diskussion. Att förbättra dessa antimönster är helt enkelt logiskt ur alla perspektiv. När de väl är fixade kommer Core Web Vitals att förbättras.

Här är några exempel på antimönster som jag stöter på dagligen. När jag förklarar vad och varför får jag vanligtvis svaret 'åh, jag visste inte att detta skulle sakta ner sidan'.

1. Icke-lazy laddade bilder

Det vanligaste antimönstret är icke-lazy laddade bilder. Bilder som inte är lazy loaded kommer att ställas i kö för nedladdning under de tidiga stadierna av sidladdningen. Detta kommer att använda nätverks- och CPU-resurser. Det är inte rimligt att tilldela värdefulla resurser till bilder som inte ens är synliga, eller hur? 

2. Tredjepartstypsnitt

3. Tredjepartsskript

4. Bakgrundsbilder

5. Stora stilmallar

Långsam av design

Långsam av design är den del som du borde oroa dig för. Du har gjort strukturella val som saktade ner sidan.  De involverar vanligtvis UX-designval eller JavaScript-kod som modifierar den synliga delen av sidan i sådan utsträckning att det inte finns några bra lösningar.

Problemet med 'långsam av design' är att det inte omedelbart kan åtgärdas genom att göra små ändringar. Det kräver mer planering och omskrivning av vissa kärnfunktioner på sidan. 

Det första jag behöver göra är att ta reda på avsikten: Varför gjorde du detta? Vilka var övervägandena och vad exakt avsåg du att uppnå? Och sedan inom dessa parametrar hitta ett bättre alternativ!

Här är några exempel på de vanligaste 'långsam av design'-misstagen.

1. Sliders

Sliders fungerar vanligtvis så här: När sidan renderas injicerar ett JavaScript slidern på sidan. Utan detta JavaScript kommer sidan att se helt annorlunda ut.  Detta orsakar en längre Largest Contentful Paint, förmodligen en Layout Shift och troligtvis problem med First Input Delay.

Det finns ingen snabb lösning. Att skjuta upp JavaScript förbättrar paint-mätvärdena men fördröjer slidern och orsakar en layout shift. Att göra slider-skriptet kritiskt fixar Layout Shift men saktar ner paint-mätvärdena.

Lösningen är att progressivt förbättra sidan. Se först till att slidern renderas utan JavaScript och förbättra sedan sidan och omvandla den redan befintliga sliderbilden till en fullständig slider. 

Det roliga är: 9 gånger av 10 när jag förklarar detta föreslår sidägaren omedelbart att ta bort slidern. Det är därför det är viktigt att fråga om avsikterna och övervägandena bakom dessa sliders. Vanligtvis 'var de bara där'.

2. Produktzoom

Produktzoom fungerar så här: i en genomsnittlig webbshop hovrar du över en produktbild och du kan zooma in på en del av produkten.  'Produktzoom' har vanligtvis samma problem som sliders.  En JavaScript-kod tar dina bilder, döljer dem och skriver sedan om dem på sidan som zoombara bilder. Detta orsakar en längre Largest Contentful Paint, förmodligen en Layout Shift och troligtvis problem med First Input Delay.

Skillnaden mot slidern är att ingen produktägare någonsin kommer att säga: \"ta bara bort den här funktionaliteten\". Den är viktig och ökar konverteringen.

Lösningen är densamma som slider-fixen. Zoom-skriptet bör inte dölja originalbilderna utan utöka produktbildsfunktionaliteten. Tyvärr är zoom-funktionaliteten vanligtvis inte enkelt åtgärdad och kräver  en del arbete för att få den helt rätt.

3. inline jQuery / inline JavaScript-beroenden

Inline jQuery är ett problem som började som 'långsam av misstag' men blev värre med tiden. Ungefär 50% av de webbplatser jag tittar på lider av detta problem. Eftersom inline-skript beror på ett tidigare skript (vanligtvis jQuery) kan du inte längre skjuta upp jQuery. Detta fördröjer alla paint-mätvärden.

Lösningen är enkel: Flytta bara dessa skript till ett externt skript. Nu kan du skjuta upp både jQuery och det anpassade skriptet. 

Varför placerade jag då detta i kategorin 'långsam av design'? När jag frågar om avsikt och övervägande får jag vanligtvis 'åh, jag vet inte'. Och det är det verkliga problemet. Det finns en brist på kunskap om hur JavaScript fungerar.  Jag kan vara ganska säker på att detta misstag kommer att upprepas i framtiden. Det betyder att lösningen inte är densamma som fixen. Jag behöver utbilda utvecklingsteamet om JavaScript-beroenden och timing.

4. Stora (hero-)bilder

Ett annat långsam av design-problem är stora bilder. Vissa webbplatser behöver helt enkelt 'imponera på publiken' med massor av bilder i full storlek. Tänk dig att du säljer posters. Du skulle förmodligen vilja visa högkvalitativa, stora bilder för dina besökare. Dessa bilder, oavsett hur mycket du optimerar dem, kommer alltid att ta längre tid att ladda ner än mindre bilder. 

Vid det här laget (förutsatt att alla bilder är optimerade) är det enda jag kan göra att se om det finns något utrymme. Behöver vi verkligen 4k-bilder eller skulle full-hd också räcka?

5. Interaktiva kartor

Ett annat problem jag ofta stöter på är interaktiva kartor. När en sida har en interaktiv karta är hela avsikten med sidan att få besökaren att interagera med kartan. Självklart kommer det att ta lite tid för kartan att laddas. 

Det finns inget sätt att komma runt detta. Vi måste acceptera viss långsamhet. Men det finns saker vi kan göra. Vi kan se till att kartorna laddas med högsta prioritet. Vanligtvis är dessa sidor inte optimerade för tidig JavaScript-exekvering. I det här fallet var det fel val. Vi behöver skriptet att laddas ner och exekveras så tidigt som möjligt!

6. Långsamma API:er

Slutsats

Det kan vara användbart att skilja mellan långsam av misstag och långsam av design när det gäller Core Web Vitals. Långsam av misstag är vanligtvis enkelt att fixa medan långsam av design kräver ett mer grundligt flerdimensionellt tillvägagångssätt.