Myndir: oftast stærsti sigurinn

Of stórar myndir eru algengasta ástæðan fyrir hægum WordPress-vef. Hér lærirðu að velja rétta stærð og snið, þjappa myndum og láta vefinn hlaða þeim aðeins þegar þörf er á.

Ef þú lagar bara eitt atriði á vefnum, lagaðu þá myndirnar. Á flestum vefjum eru myndir meirihlutinn af því sem vafrinn þarf að sækja, og stærsta myndin efst á síðunni ræður oft LCP-tölunni sem við fórum yfir í síðasta kafla. Ein mynd beint úr síma getur verið 4 til 6 MB, á meðan sama mynd í réttri stærð og vel þjöppuð er kannski 100 til 200 KB, án þess að nokkur sjái muninn á skjánum.

Rétt stærð áður en þú hleður upp

Nýir símar taka myndir sem eru 4.000 dílar á breidd eða meira. Fæstir vefir birta myndir breiðari en 1.200 til 2.000 dílar, jafnvel á stórum skjá. Það er því sóun að hlaða upp myndinni eins og hún kemur úr símanum.

1. Minnkaðu myndina í tölvunni áður en þú hleður henni upp. Fyrir venjulega mynd í færslu er 1.200 til 1.600 dílar á breidd yfirleitt nóg; fyrir mynd sem nær yfir allan skjáinn um 2.000 dílar.
2. Þjappaðu henni, til dæmis í ókeypis vefforriti eins og Squoosh eða í myndvinnsluforritinu sem þú notar. Gæði í kringum 75 til 80 prósent sjást sjaldan á skjá.
3. Gefðu skránni lýsandi nafn, til dæmis „espresso-bolli.jpg“ frekar en „IMG_4821.jpg“.
4. Hladdu henni upp í Gagnamiðlun og athugaðu skráarstærðina.

Þú sérð skráarstærð og mál hverrar myndar með því að smella á hana í Gagnamiðlun. Þá opnast gluggi sem heitir „Attachment details“:

WordPress býr sjálfkrafa til nokkrar minni útgáfur af hverri mynd sem þú hleður upp, og vafrinn velur þá sem passar skjánum. Stærðirnar sjálfar stillirðu undir Stillingar → Gagnamiðlun, á síðu sem heitir Skráarstillingar.

ÁbendingSettu alltaf inn valkvæman texta (alt-texta) sem lýsir myndinni. Hann hjálpar skjálesurum og leitarvélum, þótt hann hafi engin áhrif á hraðann.

WebP og AVIF: nútímaleg myndsnið

JPEG og PNG eru gömul snið. WebP og AVIF eru nýrri og skila sömu gæðum í mun minni skrám, oft 25 til 50 prósent minni. Allir nútímavafrar styðja þau og WordPress tekur við þeim í Gagnamiðlun eins og hverri annarri mynd. Þú getur vistað myndir á WebP-sniði áður en þú hleður þeim upp, eða notað viðbót sem breytir þeim sjálfkrafa og þjappar um leið. Slíkar viðbætur geta líka unnið á myndunum sem eru þegar á vefnum, sem sparar mikla handavinnu á eldri vef.

Lazy loading: hlaða aðeins því sem sést

Lazy loading þýðir að vafrinn sækir myndir neðar á síðunni ekki fyrr en gesturinn skrunar að þeim. WordPress gerir þetta sjálfkrafa fyrir myndir í efninu, svo þú þarft ekki að gera neitt. Eina undantekningin er stóra myndin efst á síðunni: hún á að hlaðast strax, og WordPress reynir að þekkja hana sjálfur. Ef viðbót eða þema seinkar þeirri mynd getur LCP-talan versnað, og það er eitt af því sem vert er að skoða ef hún er há.

• Ekki hlaða upp 5 MB símamyndum; minnkaðu þær fyrst.
• Notaðu WebP eða AVIF þar sem þú getur.
• Forðastu sjálfvirka myndasýningu (slider) efst á forsíðunni. Hún hleður mörgum stórum myndum í stað einnar.
• Löng myndbönd eiga heima á YouTube eða Vimeo, ekki í Gagnamiðlun.

Í næsta kafla skoðum við skyndiminni (caching), sem sér til þess að vefurinn þurfi ekki að búa til hverja síðu frá grunni fyrir hvern gest.