Yksi tekijöistä, jotka voivat hidastaa verkkosivustoasi, on suurten kuvien käyttäminen, joita ei ole optimoitu verkkoa varten.
Joskus kun ihmiset yrittävät julkaista jotain nopeasti, he lataavat kuvia suoraan kamerastaan erittäin korkealla resoluutiolla, jopa 4-5 Mt painavia kuvia.
Optimoidussa kuvassa on vähemmän kilotavuja ilman näkyvää laadun heikkenemistä, ja sinun tulee aina optimoida kuvat laadun heikkenemättä ennen niiden lataamista sivustollesi tai sen aikana.
Ei ole väliä, onko sivustosi WordPress tai jokin muu alusta, voit optimoida kuvat verkkoa varten ja saada verkkosivustosi latautumaan nopeammin.
Yksi WordPressin käytön etu on, että sinulla on laajennuksia, jotka voivat optimoida kuvat, kun lataat ne sivustollesi, ja optimoida myös olemassa olevia kuvia joukkona.
Mitkä ovat parhaat käytännöt valokuvien suhteen?
Älä menetä laatua
Seuraa verkkosivustosi tavoitteita. Älä optimoi sokeasti vain siksi, että jokin työkalu antoi sinulle huonot pisteet. Työkalut eivät tiedä sivustosi tavoitteita.
Jos minulla olisi muotiblogi tai kauppa, näyttäisin kauniita kuvia; En välitä siitä, minkä arvosanan YSlow tai Pagespeed Insights antoi minulle.
Älä jää kiinni arvosanoihin ja pisteisiin, vaan tee sitä, mikä on sinulle ja vierailijoillesi parasta. Parasta on kuluttaa enemmän CDN:ään suurempien ja parempien kuvien tarjoamiseen kuin kuvien liiallinen optimointi ja ruma verkkosivusto.
Se saattaa maksaa kävijöitä ja rahaa.
Älä lataa kuvia suurempia kuin tarvitset
Jos sisältösi leveys on 620 pikseliä, sinun tulee muuttaa kuvien koko 620 pikseliä ennen kuin lataat ne verkkosivustollesi.
Jos haluat vierailijoiden näkevän suuremman kuvan, kun he klikkaavat sitä, voit käyttää 1024 pikselin leveyttä. Aseta yksi WordPress-pikkukuvista 620 pikseliä leveäksi ja käytä kyseistä pikkukuvaa sivullasi ja linkitä se isompaan kuvaan.
Et todennäköisesti tarvitse kuvia, jotka ovat suurempia kuin 1024 pikseliä (sen pitäisi riittää useimmille blogeille), mutta entä jos tarvitset?
Siinä tapauksessa sinun kannattaa harkita kuvien lataamista suuremmilla resoluutioilla ja käyttää CDN:ää.
Kerromme CDN:stä tarkemmin hetken kuluttua.
Optimoi kuvat ennen lataamista
Voit optimoida tietokoneellasi olevat kuvat Photoshopilla. Jotkut ihmiset suosittelevat, että teet kuvastasi hieman terävämmän Smart Sharpen-, Unsharp Mask-, High Pass Filter- tai millä tahansa haluamallasi työkalulla. Photoshopissa on useita vaihtoehtoja.
En ole nähnyt suurta eroa (KB) teroituksen jälkeen, mutta en ole Photoshop-mestari.
Muuta valokuvan kokoa verkkosivustollasi tarvitsemaasi resoluutioon, käytä Tallenna verkkoa varten, valitse JPG, Laatu 60-80%, valitse Progressiivinen ja sitten Tallenna.
Suosittelen käyttämään JPG:tä, ellet tarvitse läpinäkyvyyttä ja PNG-muotoa.
Jos sinulla ei ole Photoshopia, voit käyttää näitä optimointityökaluja:
- Riot (Windows)
- Imageoptim (Mac)
- Jpegmini (online, Mac ja Windows)
- Kraken (verkossa)
- Compressor.io (online)
Käytän itse Jpegminiä; Pystyn silti ajamaan pois vielä 5–10 %, vaikka optimoin sen ensin Photoshopilla.
Tai optimoi latauksen aikana
En usko, että on olemassa yhtä tapaa, joka olisi paras tapa optimoida kuvia. Jos et halua käyttää aikaa kuvien optimointiin tietokoneellasi ennen niiden lataamista, voit antaa WordPress-laajennuksen tehdä kaiken työn. sinulle.
Voit käyttää monia WordPress-laajennuksia:
- WP Smush – Kuvan optimointi
- ShortPixel Image Optimizer
- Kraken.io Image Optimizer
- Optimus - WordPress Image Optimizer
- EWWW Image Optimizer Cloud
- Imagify Image Optimizer
Näillä laajennuksilla voit optimoida kuvia ladatessasi ja optimoida myös jo lataamasi kuvat.
En ole käyttänyt niitä kaikkia, vain WP Smushia ja ShortPixeliä, ja mielestäni ShortPixel on erinomainen. Se voi karata joitakin kilotavuja jopa kuville, jotka on aiemmin optimoitu Photoshopilla ja Jpegminillä.
Toinen hyödyllinen laajennus on Imsanity .
Jos sinulla on usean tekijän sivusto, sinun on säädettävä, mitä kuvia ihmiset lataavat. Aseta enimmäisleveys, -korkeus ja -laatu. Kun käyttäjä lataa suuremman kuvan, laajennus pienentää sen automaattisesti määritettyyn kokoon.
WP Smush Pro tekee myös sen.
Kuvien näyttäminen
Nyt kun olet optimoinut kuvat, voit myös parantaa tapaa, jolla esität nämä kuvat verkkosivustollasi.
Jos sivulla on paljon kuvia, kuten esimerkiksi muotiblogissa, voit hyödyntää laiskalatausta.
Tämä tarkoittaa, että kuvasi latautuvat vain, kun ne ovat näkyvissä, kun vierailija vierittää alaspäin.
Voit käyttää tähän jotakin seuraavista WordPress-laajennuksista:
En osaa sanoa, mikä plugin on parempi. Sinun on testattava, koska teemasi kanssa saattaa olla yhteensopimattomia. Esimerkiksi laiska lataus ei toimi esiteltyille kuville, jos sinulla on Genesis Framework -teema.
Lisäksi kun testasin laiskalatausta, se näytti oudolta mobiililaitteella. Valokuvien olisi pitänyt olla tyhjiä tiloja, koska kuvat eivät latautuneet yhtä nopeasti kuin työpöytänäkymässä.
Toinen asia, jonka voit tehdä latausajan nopeuttamiseksi, on näyttää kuvia aliverkkotunnuksesta, kuten images.domain.com.
Sinun on luotava aliverkkotunnus cPanelista tai mistä tahansa hosting-yrityksesi tarjoamasta ohjauspaneelista ja määritettävä sitten WordPress lataamaan mediaa kyseisestä aliverkkotunnuksesta käyttämällä WP Original Media Path -laajennusta.
Voin kirjoittaa yksityiskohtaisen blogikirjoituksen ihmisille, jotka haluavat tehdä niin (jos joku sitä pyytää), mutta suosittelen käyttämään CDN:ää sen sijaan. Se on paljon selkeämpi ratkaisu.
Käytä CDN:ää
Cloudflare on erittäin helppo ja ilmainen. Vaihdat vain verkkotunnuksesi nimipalvelimet Cloudflareksi ja aktivoit (tarkista oranssista pilvestä DNS-merkintöjen varalta), ja siinä kaikki. Staattiset tiedostosi (kuvat, CSS, JS) ladataan Cloudflare CDN:stä.
Voit käyttää muita CDN-yrityksiä, jotka on lueteltu alla. Mutta mielestäni Cloudflare on helpoin toteuttaa:
Siivoa jälkesi
Joka kerta kun vaihdat teemaa, jätät jälkeensä käyttämättömiä pikkukuvia ja tietokantamerkintöjä, jotka liittyvät näihin kuviin.
Kun vaihdat teemaa, voit käyttää AJAX Thumbnail Rebuild -laajennusta pikkukuvien rakentamiseen uudelle teemallesi sopivaksi.
Vanhat pikkukuvat voidaan poistaa palvelimelta jollakin seuraavista lisäosista:
Suosittelen Thumbnail Cleaneria, koska se on nopea. Mutta se poistaa kaikki pikkukuvasi, ei vain käyttämättömiä. Kun se on poistettu, sinun on käytettävä AJAX Thumbnail Rebuild -laajennusta tarvittavien pikkukuvien uudelleen rakentamiseen.
Käyttämättömät pikkukuvat eivät vaikuta verkkosivustosi suorituskykyyn. Ne vain vievät tilaa palvelimellasi. Mutta näihin pikkukuviin liittyy tietokantamerkintöjä, ja on hyvä käytäntö pitää tietokanta mahdollisimman puhtaana.
Teemme sen seuraavassa vaiheessa – puhdistamme WordPress-tietokannan.
Jätä vastaus