Kuvien määritetyt koot

Silktide tarkistaa, että sivusi kuville on määritetty niiden koko, jotta selain voi varata jokaiselle niistä oikean määrän tilaa ennen lataamista. Kuvat, joille ei ole määritetty kokoa, saavat sivun hyppimään niiden latautuessa.

<!-- Ongelma: kokoa ei ole määritetty, joten selain ei varaa tilaa -->
<img src="hero.jpg" alt="Kevätmallisto">

<!-- Korjattu: selain varaa heti 1200 × 600 -kokoisen tilan -->
<img src="hero.jpg" alt="Kevätmallisto" width="1200" height="600">

Miksi tämä on tärkeää

Ennen kuin kuvatiedosto saapuu, selain ei voi tietää, kuinka suuri kuva on, ellei sivu kerro sitä. Ilman tätä tietoa se renderöi sivun ilman tyhjää tilaa ja siirtää sitten kaikkea alaspäin jokaisen kuvan latautuessa. Tällöin teksti hyppää kesken lauseen ja kävijät napauttavat väärää kohdetta, kun kohteet liikkuvat viime hetkellä.

Tätä hyppimistä mitataan asettelun siirtymänä, joka on osa Googlen -mittareita ja vaikuttaa myös hakusijoitukseen. Kuvien määrittämättömät koot ovat sen yleisin yksittäinen syy.

Korjaaminen

Lisää width- ja height-attribuutit jokaiseen kuvaan ja videoon siten, että ne vastaavat tiedoston todellisia mittasuhteita. Selain käyttää niitä varatakseen tilaa oikeassa kuvasuhteessa, vaikka skaalaa kuvan responsiivisesti.
Säilytä attribuutit responsiivisissa kuvissa ja anna CSS:n, kuten max-width: 100%; height: auto;, hoitaa skaalaus. Varattu tila skaalautuu sen mukana.
Jos et voi lisätä attribuutteja, varaa tila CSS:llä käyttämällä kuvan tai sen säilön aspect-ratio-ominaisuutta.
Tarkista : useimmat sisällönhallintajärjestelmät lisäävät mitat automaattisesti, kun kuvia lisätään editorin kautta. Puuttuvat koot johtuvat siksi usein käsin kirjoitetusta :stä, malleista tai upotetusta sisällöstä.

Miten Silktide testaa tämän

Lataa sivu oikeassa selaimessa käyttäen nopeustesteillesi määritettyä laitetyyppiä, yhteysnopeutta ja testisijaintia.
Etsi kaikki kuvat, jotka renderöidään ilman määritettyä kokoa: niillä ei ole käyttökelpoisia width/height-attribuutteja eikä niiden mittoja määrittävää CSS:ää.
Raportoi jokainen kuva, jolle ei ole määritetty kokoa, sekä sen sijainti sivulla.

Vianmääritys

Sivu näyttää hyvältä, kun lataan sen

Välimuistissa olevien kuvien tai nopean yhteyden kanssa kuvat voivat saapua niin nopeasti, ettei mitään näytä hyppivän. Hitaammissa verkoissa olevat kävijät näkevät saman sivun rakentuvan pala palalta. Varattu tila ei maksa mitään, kun kuva latautuu nopeasti, ja estää hyppimisen silloin, kun se ei lataudu nopeasti.

Eivätkö määritetyt koot riko responsiivista suunnitteluani?

Eivät. Nykyaikaiset selaimet käsittelevät width- ja height-attribuutteja kuvan kuvasuhteena, eivät kiinteänä kokona, joten CSS voi silti skaalata kuvan mille tahansa näytölle sopivaksi. Attribuutit ja CSS toimivat yhdessä.