Näkymäalueen koko (Viewport size): Pienemmät näytöt muuttavat sitä, mikä elementti tunnistetaan LCP-elementiksi. Työpöytäversion pääkuva (hero image) saattaa mobiilissa kutistua tekstilohkon alapuolelle, mikä muuttaa optimointikohteen täysin.
CoreDashin laitetyyppien jakautuminen
CoreDash-projekteissa tyypillinen liikenteen jakautuminen on 65 % mobiilia ja 35 % työpöytää. Verkkokauppasivustoilla painotus on vahvemmin mobiilissa (70–75 %), kun taas B2B SaaS -tuotteissa nähdään usein 50\/50-jako tai jopa työpöydän dominanssi.
Suorituskyvyn kuilu CoreDash-datassa heijastaa globaalia trendiä. Mobiililaitteiden p75 LCP on keskimäärin 2,8 s verrattuna työpöydän 1,9 sekuntiin. INP:n kohdalla ero on vielä suurempi: mobiilin p75 on noin 220 ms, kun taas työpöytä liikkuu 120 ms:n tuntumassa.
Metriikkakohtainen analyysi
Largest Contentful Paint (LCP)
Mobiilin LCP on lähes aina huonompi kuin työpöydän. Ensisijainen syy on Load Delay: mobiiliselaimet löytävät LCP-kuvan myöhemmin, koska HTML:n saapuminen kestää kauemmin (korkeampi TTFB) ja preload-skanneri joutuu kilpailemaan resursseista hitaammalla suorittimella. Jos työpöydän LCP on alle 2,0 s, mutta mobiilin yli 3,0 s, syy on harvoin itse kuvatiedostossa. Kyse on toimitusketjusta (delivery pipeline).
Interaction to Next Paint (INP)
Tässä laitteiden välinen kuilu tuntuu kaikkein voimakkaimmin. JavaScriptin tapahtumankäsittelijät (event handlers), jotka tuntuvat välittömiltä työpöydän i7-suorittimella, voivat jumiuttaa pääsäikeen yli 300 millisekunniksi Snapdragon 665 -suorittimella. Suodata mobiililaitteiden mukaan, lajittele INP-vaikutuksen perusteella, ja löydät ne nimenomaiset vuorovaikutukset, jotka eivät toimi oikeissa puhelimissa. Näen tätä jatkuvasti: kehittäjät testaavat MacBook Prolla ja julkaisevat vuorovaikutuksia, joita on mahdoton käyttää laitteilla, joita 65 % heidän käyttäjistään todellisuudessa kantaa mukanaan.
Cumulative Layout Shift (CLS)
Laitetyyppien väliset CLS-erot juontavat yleensä juurensa responsiiviseen suunnitteluun. Mainospaikat, jotka varaavat tilaa työpöydällä, saattavat mobiilissa luhistua tai muuttaa kokoaan. Fonttien korvausmetriikat (font fallback metrics), jotka täsmäävät työpöydällä, aiheuttavat näkyviä siirtymiä pienemmillä näkymäalueilla. Verkkofontit renderöidään eri tavalla mobiili- ja työpöytäselaimissa, ja fyysinen pikselitiheys vaikuttaa sub-pixel-pyöristyksiin.
Tutkimuksen työvaiheet
- Aloita jokainen tutkimus laitesuodattimella: Ennen kuin katsot mitään muuta ulottuvuutta, jaa data laitetyypin mukaan. Jos kokonais-LCP on 2,5 s, saatat huomata, että työpöydällä se on 1,8 s ja mobiilissa 3,1 s. "Ongelma" koskee siis yksinomaan mobiilia.
- Vertaa jakautumia, älä vain p75-arvoa: Tarkista "good\/needs-improvement\/poor"-jakautuma kullekin laitetyypille. Työpöytä, jossa 85 % on hyvää, ja mobiili, jossa 45 % on hyvää, kertovat täysin eri tarinan kuin pelkkä p75-arvo.
- Yhdistä muihin ulottuvuuksiin: Kun olet eristänyt laitetyypin, lisää toinen suodatin. Laitetyyppi + Maa (Country) paljastaa, onko mobiilikuilu globaali vai keskittynyt alueille, joissa on hitaammat verkot. Laitetyyppi + Navigaatiotyyppi (Navigation Type) näyttää, toimiiko mobiilin back-forward-navigaatioiden välimuisti oikein.
Tekninen nyrkkisääntö
- Mobiilin LCP alle 2,5 s: Tämä on Googlen "hyvän" tuloksen kynnysarvo. Jos työpöytäsi läpäisee mutta mobiili ei, keskity Load Delay -arvon pienentämiseen (fetchpriority, preload) ja TTFB-arvon parantamiseen (edge caching, CDN).
- Mobiilin INP alle 200 ms: Testaa jokainen interaktiivinen ominaisuus oikealla keskihintaisella Android-laitteella. Chrome DevToolsin suorittimen rajoittaminen (4x) on lähellä tätä, mutta testaus oikealla laitteella on parempi.
- Älä koskaan optimoi vain työpöydälle: Jos mobiililiikenteesi ylittää 50 % (ja lähes varmasti se tekee niin), mobiilisuorituskyky on hakukonearviointisi peruste. Google käyttää mobiili-CrUX-dataa sijoitusten määrittämiseen.
Laitetyyppi ei ole vain "mukava lisä" suodattimena. Se on ensimmäinen kysymys, joka on esitettävä: "Onko tämä mobiili- vai työpöytäongelma?" Jokainen optimointipäätös kumpuaa tuosta vastauksesta.
[include]sidebarcoredash.html[\/include]