Tead seda tunnet, kui laed kodulehele selle ühe uhke, kõrge resolutsiooniga fotoning ning kohe on näost näha, et kallis fotograaf, kena valgus, kõik on super … ja siis leht lihtsalt … jääb pooleli laadima? Või veel hullem: keegi pani hero-sektsiooni taustaks autoplay video, sest “see näeb ju nii äge välja”, ja nüüd laeb su avaleht kauem kui Netflixi sari? See pole juhuslik probleem ja sellel on põhjuslik seos ning kui oled lugenud minu teisi artikleid CTR-ist, LCP-st ja sellest, kuidas Google Navboosti kaudu su lehte salaja hindab, siis tead juba, kuhu mu lugu praegu sihib.Aeglane leht ei ole ainult disaini-flopp, vaid see on otsene löök su Google positsioonile ja su rahakotile.
Räägime nüüd piltidest – ja lõpus ka videost, sest seal on täpselt sama probleem, lihtsalt suuremas mahus. Ilus ei pea alati tähendama suurt (mahukat) ja proovin siin veidi nõu anda, kuidas hoida leht kaunis, ilma et see aeglaseks jääks.
Miks pilt on nii tihti see, mis kogu peo ära rikub?
Fotod on kodulehe kõige emotsionaalsem osa – need panevad su brändi tundma inimlik ja usutav. Aga just samad omadused, mis teevad pildi ilusaks (teravus, sügavus, värvirikkus), teevad selle ka raskeks. Ja raske fail teeb viis asja korraga halvasti:
- Aeglustab lehte. Iga lisandunud sekund enne, kui leht laadib, on veel üks külastaja, kes jõuab mõelda “ah, ei viitsi” ja sulgeb vahekaardi. See on täpselt sama mehhanism, millest rääkisin LCP (Largest Contentful Paint) artiklis – kui su hiiglaslik hero-pilt on lehe kõige suurem element, “läbid” tehniliselt Google’i mõõdiku, aga kaotad päris inimese.
- Rikub mobiilikogemuse. Enamik su külastajatest on telefonis. Suur pilt, mis pole mobiilile optimeeritud, kas venib moonutatult või laeb piinavalt aeglaselt – kummalgi juhul jätab see amatöörliku mulje, ükskõik kui professionaalne fotograaf pildi tegi.
- Lööb SEO-le vastu näppe. Google mõõdab lehe kiirust ja mobiilisõbralikkust otse positsiooni osas. See on sama lugu, mida rääkisin pogo-stickingust: aeglane leht = pettunud kasutaja = kiire tagasiklõps = Google märkab.
- Süüakse su serverimahtu ja see kukub kulusid tekitama. Kindlasti tasub lugeda mu lugu ka hostingu hinnast. Suured failid ei koorma ainult külastaja kannatust, vaid ka sinu enda serveriressurssi.
- Mõjub lõpuks lihtsalt… ebaprofessionaalselt. Venitatud, valesti kärbitud või piksliseks tihendatud pilt räägib sinust rohkem kui su hoolikalt kirjutatud “Meist” lehekülg iial suudaks.
Ehk kokkuvõte on lihtne: pilt, mis pidi looma usaldust, hakkab selle asemel usaldust lõhkuma. Ja see kõik on lahendatav ühe asjaga – optimeerimisega, mitte pildi ilu ohverdamisega.
Milline pilt kuhu käib (ja kui suur see tohib olla)
Siin tuleb see osa, mille kohta enamik inimesi arvab, et see on liiga tehniline neile mõeldud – aga tegelikult on see lihtsalt tabel, mida saad kasutada nagu retsepti.
| Pildi tüüp | Soovituslik laius | Failisuurus | Sobiv formaat |
|---|---|---|---|
| Hero-pilt (esilehe suurim) | 2000–2500 px | max ~400–500 KB | WebP või AVIF |
| Sisu kõrval olev pilt | 800–1200 px | ~100–300 KB | WebP või JPG |
| Galeriifoto | 1000–1500 px | ~150–300 KB | WebP, JPG |
| Tootefoto | 500–1200 px | ~200–500 KB | WebP, PNG (läbipaistvusega) |
| Logo/ikoon | 100–300 px | ~10–15 KB | SVG (ideaalne) või PNG |
| Meeskonna/portreepilt | 600–800 px veebis | ~150–250 KB | WebP, JPG |
Pane tähele mustrit: peaaegu miski siin ei ole “nii suur kui võimalik”. Isegi su kõige tähtsam hero-pilt jääb alla poole megabaidi. Kui su praegune esilehe pilt kaalub mitu megabaiti, pole probleem selles, et pilt on “liiga hea” – probleem on selles, et keegi ei optimeerinud seda enne üleslaadimist.
Nii teed selle korda (ilma et peaksid ise fotograafiat õppima)
- WebP või AVIF, mitte JPG vaikimisi. Uuemad formaadid pakivad sama kvaliteedi väiksemasse faili. WordPress oskab seda nüüdseks paljuski automaatselt teha, kui lased tal.
- Ära lae üles suuremat pilti, kui vaja. 5000 pikslit laia pilti 800-pikslises kastis on nagu sõiduauto asemel veoauto parkima – tehniliselt mahub, aga kulutab liiga palju ruumi asjata.
- Kasuta optimeerimispluginat. Smush, ShortPixel või Imagify teevad WordPressis suurema osa tööst automaatselt ära – lisad pildi, plugin pakib selle kokku.
- Lazy loading sisse. Pildid, mis on lehe alumises osas, ei pea laadima enne, kui külastaja sinnani kerib. See kiirendab esmast laadimist märgatavalt.
- Failinimed ja alt-tekstid korda. “IMG_4821.jpg” ei ütle Google’ile midagi. “wordpress-arendaja-tallinn.jpg” koos korraliku alt-tekstiga ütleb hoopis teise loo – ja see on täpselt sama teema, millest rääkisin ligipääsetavuse ja SEO artiklis.
Aga pildid on veel armuline probleem – video on see, mis päriselt tapab
Kui pildid on kodulehe kiiruse tavaline kurjategija, siis video on see, mis teeb sama asja kümnekordse jõuga. Üks 20-sekundiline taustavideo kaalub kergesti sama palju kui sada optimeerimata pilti kokku – ja paljud panevad selle autoplay’ga otse hero-sektsiooni, ilma et mõtleksid, mida see külastaja mobiiliandmeside ja kannatuse arvelt maksab.
Mõned reeglid, mis säästavad su lehe video käest samamoodi, nagu optimeerimine säästis selle piltide käest:
- Ära majuta videot ise, kui saad seda vältida. Laadi see YouTube’i või Vimeosse ja embeddi lehele – nemad tegelevad kompressiooni, striimimise ja erinevate seadmete jaoks kohandamisega. Sinu server ei pea selle koormat kandma.
- Kui vajad autoplay taustavideot, hoia see lühike ja väike. 5–10 sekundit, ilma helita, kõrge kompressiooniga MP4 või WebM. See pole koht, kus “kõrgeim kvaliteet” on eesmärk – eesmärk on tunne, mitte teravus.
- Lisa alati “poster” pilt. See on staatiline kaadripilt, mis näidatakse enne, kui video ise laadib – nii ei vaata külastaja tühja musta kasti, kuni video end kokku klabib.
- Ära lase videol blokeerida lehe muu sisu laadimist. Täpselt nagu piltide puhul, peab ka video laadima laisalt (lazy loading) – kui see pole kohe ekraanil nähtav, ei pea see kohe alla laadima.
- Mobiilis kaalu videot üldse ära jätta. Paljud lehed näitavad mobiilis staatilise pildi asemel videot, kuigi mobiilikasutaja saab täpselt sama emotsiooni palju kiiremini laaditavast pildist – ja tema andmeside/aku tänab sind selle eest.
Sama loogika, mis kehtis piltide puhul, kehtib siin lihtsalt suuremas mastaabis: emotsioon ja kiirus ei pea konkureerima, kui keegi mõtleb enne üleslaadimist läbi, mida see fail päriselt maksma läheb.
Kokkuvõte: ilu ja kiirus ei pea olema vaenlased
Hea pilt ja kiire leht ei ole omavahel vastuolus – need lihtsalt eeldavad, et keegi enne üleslaadimist mõtleb kaasa. Kui su fotograaf saatis sulle 12 MB kaaluva meistriteose, on see suurepärane. Ära lihtsalt lae seda otse serverisse üles nagu see oleks e-kirja manus. Anna see enne läbi optimeerimise – siis saad sama ilusa pildi, ainult et sinu külastaja jõuab selle ka päriselt näha, enne kui otsustab lahkuda.
Ja kui see kõik tundub jälle nagu järjekordne tehniline nimekiri, mida sa lihtsalt ei viitsi ise läbi käia – tead juba, kust mind leida.