En webbplats-administratör kan använda verktyg som Google Search Console (GSC) och Bing Webmaster Tools för hitta information om vilka sökningar som har lett till exponeringar i sökmotorn och vad användarna har sökt på för att din sajt ska komma med i sökresultatet. Man kan också se genomsnittlig click-through-rate och man kan per indexerad webbsida som finns på webbplatsen se hur många användare som har gått vidare från sökresultatet genom att klicka på länkarna till sajten.
Viktiga Webbvärden” (Core Web Vitals)
Denna typ av verktyg visar också en annan typ av information som inte är uppenbart kopplad till sökmotorer. Detta handlar om tekniska data om webbplatsen som sökmotorerna hittar under sina beräkningar när de söker av och indexerar sajten. Google kallar dessa tekniska data för “Viktiga Webbvärden” (Core Web Vitals), se [1]. Dessa värden representerar faktorer som på olika sätt påverkar användarupplevelsen. Värdena påverkar även sajtens SEO ranking så att en sajt med bättre värden premieras och kommer att hamna högre upp i sökresultatet jämfört med likvärdiga sajter som har sämre värden, se [2]
Vi har tittat på den här typen av data för sajten narkoswebben [3] och där framkommer att sajten fungerar utan anmärkning när den visas på desktop medan två av värdena inte är helt optimala för vissa av sajtens sidor när de visas på en mobiltelefon.
Google Search Console delar in de indexerade sidorna på sajten narkoswebben i dessa tre klasser:
- Antal sidor som behöver förbättras (82 av 152 sidor)
- Antal sidor som redan är bra (70 av 152 sidor)
- Antal sidor som som är dåliga (0 sidor)
Det finns två typer av problem registrerade för mobilversionen av Narkoswebben:
- Problem med INP – Interaction to Next Paint (INP), se [4]
- Problem med CLS – Cumulative Layout Shift (CLS), se [5]
I den här artikeln kommer vi nu beskriva lite mer om vad ett av de här problemen, “Cumulative Layout Shift” innebär.
Problem med Layout Shift
“Problem med CLS: fler än 0,1 (mobil)” – Cumulative Layout Shift (CLS)
GSC visar ett intervall istället för det exakta värdet som sökmotorn mäter fram vid indexering av sajten. Intervallet ligger mellan 0.1 och 0.25. Se denna illustration:
På sidan [5] finns detaljerad information om vad det här mätvärdet betyder. Det handlar i korta drag om att något element på sidan är ostabilt och flyttar sig på ett sätt som kan innebära problem med användarnas interaktion med sidan. Ett allvarligt exempel på en tänkbar konsekvens av ostabila element är att en användare kan råka klicka på knappen ’Skicka iväg order’ istället för den avsedda knappen ’Avbryt’ om dessa två knappar är placerade nära varandra.
GSC listar sidan ’Efter operation’ [6] som ett exempel på en sida med ett icke-optimalt värde. Sidan innehåller bara text och bilder, vilket så klart inte kan orsaka så allvarliga problem som de ovan beskrivna. På en mobiltelefon kan man inte heller se med blotta ögat att sidan beter sig instabilt eller avviker på något annat sätt när den ritas om.
Vad kan man göra för att åtgärda och förbättra värdet?
Det finns två artiklar [7] och [8] och en Youtube video [9] som i detalj beskriver vad man göra men för att ge ett enkelt exempel på en åtgärd som jag tror skulle kunna eliminera varningen för sidorna på narkoswebben så är det att börja med att korrigera html koden för sidan så att dess bild element blir optimerade för responsiv design [10]. Man kan till exempel specificera html attributen srcset, width och height där srcset ska innehålla en lista av bilder i olika upplösning beroende på hur stor skärm användaren har, se [11]
Referenser:
[1] https://support.google.com/webmasters/answer/9205520
[2] https://www.cloudflare.com/learning/performance/what-are-core-web-vitals/
[3] https://www.narkoswebben.se/
[4] https://web.dev/articles/inp
[5] https://web.dev/articles/cls
[6] https://www.narkoswebben.se/sv/efter-operationen/
[7] https://web.dev/articles/optimize-cls
[8] https://developers.google.com/publisher-tag/guides/minimize-layout-shift
[9] https://www.youtube.com/watch?v=AQqFZ5t8uNc
[10] https://en.wikipedia.org/wiki/Responsive_web_design
[11] https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/art_direction