Kuinka optimoida WordPress-kuvat ja tehdä sivustostasi nopeampi

Jos haluat tarjota vierailijalle erinomaisen käyttökokemuksen, sinun on varmistettava, että verkkosivustosi latautuu nopeammin, joten se ei turhauta heitä. Itse asiassa verkkosivustosi nopeus voi tehdä tai rikkoa online-liiketoimintaasi. Sinun on optimoitava WordPress-kuvat sivustosi nopeuttamiseksi - koska kuvat ovat yleensä sisällön raskain osa,

Walmart on löytänyt a Niiden muuntokurssi nousee 2% aina kun ne parantivat nopeutta 1 sekunnilla.

Ja Amazon havaitsi tulojen kasvun 1% jokaista 100 millisekuntia kohden parantaa sivuston nopeutta. Nämä tilastot osoittavat, että verkkosivustosi nopea tekeminen on kriittinen verkkosivustollesi. Helppo tapa tehdä verkkosivustostasi nopeampi on optimoida kaikki WordPress-verkkosivustosi kuvat.

Sisällys[show]
 

optimoi Wordpress-kuvat parempien muuntokurssien saavuttamiseksi

Jos et ole vielä pitänyt WordPress-verkkosivustosi nopeutta kriittisenä osana yritystäsi, sinun on mietittävä uudelleen ja aloitettava toimenpiteitä WordPress-verkkosivustosi nopeuden parantamiseksi.

Suosittele lukemista: Kuinka saada nopea WordPress-verkkosivusto - täydellinen opas [25 toimintoa]

On monia tapoja tehdä verkkosivustostasi nopeampi. Jotkut niistä on lueteltu alla.

  • Vältä liian monien WordPress-laajennusten käyttöä
  • Käytä WordPress CDN -palveluja
  • Optimoi CSS-toimitus
  • Optimoi WordPress-kuvat

Kuvat, joita ei ole optimoitu verkkoon, ovat yleensä suuria. Näiden kuvien lataaminen kestää kauemmin. On tärkeää, että optimoit kuvat tekemällä niistä mahdollisimman pieniä. Useimmiten kuvien optimointi WordPressille ja verkkosivustollesi on kuitenkin tylsää tai haittaa sisällön tuottamiselle.

Tässä viestissä selitämme erilaisia ​​tapoja optimoida WordPress-kuvasi ja siten saada sivustosi latautumaan nopeammin.

Pakkaa kuvat tai tallenna ne verkkoon

Ei ole järkevää, että kuvasi koko voi vaikuttaa WordPress-verkkosivustosi latausaikaan. Koska korkean resoluution kuvilla on suurempi tiedostokoko, on aina parempi pakkaa kuvat ennen lähettämistä.

Nyt sinulla voi olla kysymys: mikä on WordPress-kuvien pakkaus ja miten se voi pienentää kokoa vaikuttamatta laatuun?

Pakkaus on kuvan koon pienentämisprosessi dramaattisesti poistamalla algoritmisesti kuvatiedot, joita ihmissilmä ei voi havaita. Tämä on erittäin tehokas tapa optimoida WordPress-kuvat.

Vaikka kuvan pakkaaminen on varma tapa pienentää kuvan kokoa, JPEG-tiedostojen pakkaamisen yhteydessä prosessi joskus menettää kuvien todellisen sisällön prosessin aikana. Tämä on tämän lähestymistavan ainoa haittapuoli. Muista tarkistaa pakkauksen jälkeiset tulokset huolellisesti varmistaaksesi, että olet tyytyväinen pakkaamisen tuloksiin.

WP Smush on suosittu WordPress-laajennus, jonka avulla voit pienentää kuvatiedostokokoa helposti skannaamalla kaikki lähettämäsi kuvat ja poistamalla tarpeettomat tiedot. Tämän laajennuksen ilmaisen version avulla voit pakata enintään 1 Mt kuvia, kun taas pro-versiolla voit pakata jopa 32 Mt kuvia.

Voit ladata WP Smush tästä.

wp hymy optimoi wordpress-kuvat

Huomaa myös, että tämän laajennuksen avulla voit optimoida kaikki äskettäin ladatut kuvat WordPress-verkkosivustollesi. Jos haluat pakata olemassa olevat kuvat, voit optimoida olemassa olevat WordPress-kuvat käyttämällä Mediakirjasto-välilehden Bulk Smush.it -linkkiä.

Likainen lataus: optimoi WordPress-kuvien latausaika

[PÄIVITYS: WordPress 5.4: ssä on laiska lataus ytimeen, joten sinun on suoritettava tämä toiminto vain, jos WordPress-versiosi on alle tämän version]

Me kaikki tiedämme, että "kuva on tuhannen sanan arvoinen".

Liian monen kuvan käyttäminen yhdellä sivulla voi kuitenkin hidastaa verkkosivustoasi.

Yksi helppo tapa parantaa latausaikaa on poistaa tarpeettomat kuvat ja pitää vain se, mikä on ehdottoman välttämätöntä. Kaikki eivät kuitenkaan halua vähentää verkkosivulla käytettävien kuvien määrää, vain jotta sivu latautuu nopeammin.

Kuinka tämä ongelma voidaan ratkaista?

Olet ehkä huomannut sen jo - verkkosivustot, jotka käyttävät paljon kuvia kullakin sivulla, ratkaisevat tämän ongelman asettamalla kuvan latautumaan vain, kun se näkyy käyttäjälle. Tämä taktiikka ei vain lyhennä sivun latausaikaa, mutta se myös säästää palvelimen kaistanleveyttä. Tätä kutsutaan laiskaksi lataukseksi. Koska kuva on "laiska", se tulee esiin vain silloin, kun sitä tarvitaan.

Jos käytössäsi on WordPress, kuvan lataaminen on helpompaa vain, kun se on näkyvissä. Sinun tarvitsee vain asentaa Lazy load -laajennus. Jälleen kerran tämä on erinomainen tapa optimoida WordPress-kuvat nopeuden parantamiseksi.

Voit ladata Laiska latauslaajennus tästä.

Optimoi WordPress-kuvat laiskalla kuormituksella

Tätä laajennusta ei tarvita lisämäärityksiä, koska se toimii valmiina asennuksen ja aktivoinnin yhteydessä.

Lue lisää: Divi vs Elementor

Käytä optimoitua ja oikeaa kuvamuotoa

JPEG, PNG ja GIF ovat suosituimpia kuvamuotoja.

Kunkin kuvamuodon erojen tunteminen antaa sinun käyttää oikeaa muotoa verkkosivustollasi, mikä auttaa sinua jopa kuvan optimoinnissa.

Mikä muoto on parempi optimoiduille WordPress-verkkosivustokuville ja milloin sitä tulisi käyttää? Alla on muutama vinkki:

  • GIF: Käytä GIF -tiedostoa, jos kuvasi on liian pieni ja käyttää suhteellisen paljon less värien lukumäärä. Esimerkiksi GIF on hyvä valinta leikekuviin, luoteihin ja kaavioihin. Toisaalta monimutkaisia ​​kuvia, joissa on parannuksia, kuten varjoja, ei voitu näyttää oikein GIF: n avulla.
  • JPEG / JPG: Se soveltuu monimutkaisiin kuviin, joissa on paljon värivaihtoehtoja, tai jos se sisältää valokuvia.
  • PNG: PNG-muoto sopii parhaiten läpinäkyville kuville.
  • WebP: tämä on paras muoto näinä päivinä, mutta näiden kuvien luominen edellyttää palvelintukea verkkosivustollasi

Huomaa, että nämä ovat vain yleisiä suosituksia. Kuten kaikki säännöt, on myös poikkeuksia, ja jotkut näistä säännöistä on tarkoitus rikkoa.

Käytä selaimen välimuistia tehokkaasti

Kun lataat kuvia verkkosivulle, muista ladata ne yhteen hakemistoon. Kuvien lataaminen yhteen verkkosivun hakemistoon auttaa selainta lataamaan kuvat helposti selaimen välimuistilla toistuvien käyntien aikana.

On hieno, jos lataat kuvia oletusarvoisen WordPress-kuvalatausohjelman kautta. Mutta jos esimerkiksi luot HTML-aloitussivuja WordPressissä, on todennäköistä, ettet käytä WordPressin oletuskuvien latausohjelmaa. Tällöin sen sijaan, että lataat verkkosivun kuvia eri hakemistoihin, muista ladata kaikki ne yhteen hakemistoon.

Jos haluat lukea lisää selaimen välimuistista ja sen hyödyntämisestä, tutustu yksityiskohtaiseen artikkeliin täällä: Kuinka hyödyntää selaimen välimuistia WordPressissä laajennuksella tai ilman [5 tapaa]

 

Käytä samaa kuvaa useita kertoja

Toinen tapa käyttää selaimen välimuistia kuvan kaistanleveyden vähentämiseksi on käyttää samoja kuvia useita kertoja koko sivustossa.

Esimerkiksi, kun käytät logoja tai valikkokohteita sivulta, varmista, että soitat samoille kuville kaikkialla sivustossa, jotta käyttäjien ei tarvitse ladata niitä useita kertoja, vaan kerran, ja selaimet voivat näyttää kuvat selaimesta kätkö.

Kun käytät teksturoitua taustaa, varmista, että käytät pienempiä kuvia toistuvasti yhden suuren kuvan sijaan. Tämä voi myös auttaa vähentämään latausaikaa.

Oletusarvoisesti, kun lataat kuvia käyttämällä median latausohjelmaa WordPress-hallintapaneelissa, se menee kansioon riippuen siitä, kun lataat sen. Tämä tarkoittaa, että kaikki kuussa ladattavat kuvat sijaitsevat yhdessä hakemistossa.

Esimerkiksi, jos lataat kuvan vuonna 2021 tammikuussa, se sijaitsee tässä hakemistossa: wp-content / uploads / 2021/01.

Katsotaanpa lataamisen edut median latauslaitteen kautta, ja sitten kerromme sinulle, mitä sinun on otettava huomioon, kun et lataa mediasi latauslaitteeseen verkkosivustosi nopeuttamiseksi.

Median latausohjelma nopeuttaa kuvan lataamista: Lataus on nopeampaa, jos kuvat tallennetaan samaan kansioon web-sivua selattaessa. Kun kuvia kutsutaan toistuvasti, selain voi noutaa ne selaimen välimuistista, jos ne ovat yhdessä kansiossa.

Usein WordPress-bloggaajat eivät kuitenkaan käytä mediaoletuslatainta, varsinkin kun he työskentelevät räätälöityjen aloitussivujen parissa. Helppokäyttöisyyden vuoksi he lataavat kuvia erilliseen hakemistoon.

Tällaisissa tapauksissa varmista, että lataat kaikki kyseisen sivun kuvat yhteen hakemistoon useiden hakemistojen sijaan. Tämä taktiikka voi parantaa latausaikaa, koska tiedostojen välimuisti on helpompaa toistuvien käyntien aikana.

Käytä CSS: ää kuvien sijaan

Tiedätkö, että voit parantaa latausaikaa käyttämättä kuvaa ollenkaan?

Esimerkiksi tiettyjen muotojen luominen on täysin mahdollista käyttämällä yksinkertaista CSS: ää kuvien, kuten pyöristettyjen suorakulmioiden, kaltevuuksien, pudotusvarjojen ja läpinäkyvien kuvien, sijasta. Tästä huolimatta varmista, että pidät silmällä selaimen yhteensopivuustarkistusta aina, kun vaihdat minkä tahansa kuvan CSS: ään, koska kaikki selaimet eivät tue näitä tekniikoita.

kirjailijasta
Shahzad Saeed
Kirjoittaja: Shahzad SaeedVerkkosivu: http://shahzadsaeed.com/
Shahzaad Saaed on ollut esillä lukuisilla viranomaisverkkosivustoilla WordPress-asiantuntijana. Hän on erikoistunut sisältömarkkinointiin auttaakseen yrityksiä kasvattamaan liikennettä.

Yksi asia vielä... Tiesitkö, että ihmiset, jotka jakavat hyödyllisiä juttuja, kuten tämä viesti, näyttävät myös mahtavilta? ;-)
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!

Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.

Kirjoittaja (t) esillä:  Inc-lehden logo   Sitepoint-logo   CSS Tricks -logo    webdesignerdepot-logo   WPMU DEV -logo   ja paljon muuta ...