TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

7 tapaa optimoida kuvia WordPressissä sivun latausnopeuden parantamiseksi

0

Kuvat ovat väistämätön osa mitä tahansa verkkosivustoa. Kuten suosittu lainaus kuuluu – "Kuva on tuhannen sanan arvoinen". Kuvat ovat erittäin hyödyllisiä ajattelun ilmaisemiseen, erityisesti opetusohjelmissa, valokuvauksessa ja sivustoille siirtymisessä. Sosiaalisen median surina on välttämätöntä, että sinulla on esillä oleva kuva jokainen yksittäinen viesti jakaa sen houkuttelevasti. Nyt kysymys saattaa tulla mieleen – Käytän paljon kuvia WordPress -sivustossani ja mitä optimointia minun pitäisi tehdä?

Yksinkertainen vastaus on, että jokainen sivusi kuva vaikuttaa latausnopeuteen, mikä puolestaan ​​vaikuttaa suoraan käyttäjäkokemukseen. Kukaan ei pidä hitaista lataussivustoista, joten sinun on käsiteltävä kuvan optimointikysymyksiä etusijalla.

Mistä tiedän kuvan optimointiongelmat?

Se on erittäin helppoa, ja sivujen latausnopeuden tarkistamiseen on paljon ilmaisia ​​työkaluja. Googlella on oma PageSpeed ​​Insights -työkalu, joka mittaa latausnopeuteen vaikuttavat sivun ongelmat. Kirjoita sivusi URL -osoite työkaluun nähdäksesi alla olevat tulokset:

7 tapaa optimoida kuvia WordPressissä sivun latausnopeuden parantamiseksi

Optimoi kuvat Google PageSpeed ​​Insightsissa

Sinun pitäisi nähdä "Optimoi kuvat" ensisijaisena ongelmana, kun kuvia ei pakata. Kuvan pakkaus on yksi tärkeimmistä ongelmista, joita näet Google PageSpeed ​​Insights -työkalussa. Mutta monia muita ongelmia löydät, kun käytät työkaluja, kuten pingdom ja GTmetrix, kuten alla.

  • Yhdistä lataukset eri isäntänimiin
  • Tarjoa staattista sisältöä evästeettömästä verkkotunnuksesta
  • Määritä kuvan mitat
  • Näytä skaalatut kuvat

Kaikki nämä ongelmat voidaan ratkaista helposti laajennuksilla ja noudattamalla yksinkertaisia ​​ohjeita.

Kuinka optimoida kuvat WordPressissä sivun latausnopeuden parantamiseksi?

Tässä on yhteenveto optimointitekniikoista sivun latausnopeuden parantamiseksi:

  1. Vähennä kuvien määrää palvelimella
  2. Käytä laajennusta pakataksesi kuvia koon säästämiseksi
  3. Tarjoa kuvia aliverkkotunnuksesta
  4. Käytä oikeaa kuvakokoa
  5. Vältä koon muuttamista HTML / CSS: n sisällä
  6. Käytä vektorikuvakkeita aina kun mahdollista
  7. Valitse sopiva kuvamuoto

1 Vähennä kuvien määrää

Jokainen sivun kuva lähettää palvelimellesi erillisen HTTP -pyynnön, ja sen lataaminen vie aikaa. Sananlasku "Kuva on tuhannen sanan arvoinen” saattaa näyttää hyvältä, mutta todellisuudessa käyttää kuvia vain tarvittaessa. Vähemmän kuvia tarkoittaa vähemmän palvelinpyyntöjä ja nopeaa lataussivua.

Toisaalta kuvat vievät tilaa palvelimellasi ja lisäävät isäntäpalvelinta. Erityisesti WordPress luo valtavan määrän pikkukuvia teemasta ja asennetuista laajennuksista riippuen. Katso artikkeli pikkukuvien vähentämisestä WordPress -sivustossa.

2 Tallenna koko pakkaamalla kuvat

Selaimen on ladattava kuvat palvelimeltasi, kun sivu latautuu. Kunkin KB: n pienentäminen riippuu suorituskyvystä; Varmista siis, että kuvat näytetään asianmukaisen pakkauksen jälkeen. Esimerkiksi kuvissa on metatietoja, kuten sijainti, kameran tiedot jne. Jos et nimenomaisesti tarvitse, poista tiedot laajennuksilla kuvien koon pienentämiseksi.

Kuvat voidaan pakata kahdella tavalla – häviöttöminä ja häviöttöminä. Yksinkertaisesti sanottuna häviöllinen pakkaaminen on peruuttamaton tapa ja poistaa kuvasta jonkin pikselin dataa. Häviötön pakkaus on palautuva tapa, joka pakkaa kuvan ilman pikselien poistamista. Kuvaformaatin (PNG / JPEG / GIF), laadun ja vaaditun pakkauksen perusteella sinun on ehkä kokeiltava eri laajennuksilla nähdäksesi mikä toimii sinulle.

Jos sinulla on vähän optimoitavia verkkosivuja tai kuvia, suosittelemme sen suorittamista kuvan pakkaustyökalujen avulla. Alla on joitain käyttämiäsi kuvanpakkausvälineitä:

  • gifsicle – GIF -kuvien luomiseen ja optimointiin
  • optipng – käytä häviötöntä pakkausta pienentääksesi PNG -kuvan kokoa
  • pngquant – käytä häviöllistä pakkausta PNG -kuvan koon pienentämiseksi
  • jpegtran – pakkaa JPEG -kuvat

WordPressissä on monia ilmaisia ​​ja korkealaatuisia kuvanpakkauslaajennuksia. Kaksi tällaista suosittua laajennusta ovat- EWWW Image Optimizer ja WP-Smushit. EWWW Image Optimizerilla on paljon asetuksia ja se pakkaa oman isäntäpalvelimesi. Vaikka WP-Smushit on yksinkertainen ja suoraviivainen, se pakkaa kuvat ulkoisella palvelimella. Asennuksen ja aktivoinnin jälkeen nämä laajennukset auttavat pakkaamaan kuvat automaattisesti, kun ne ladataan. Tässä on täydellinen opetusohjelma WP-Smushit-laajennuksen käytöstä.

7 tapaa optimoida kuvia WordPressissä sivun latausnopeuden parantamiseksi

WP Smush WordPress -laajennus

Muista, että kuvanpakkauslaajennukset kuluttavat paljon palvelinresursseja. Älä pakkaa satoja kuvia kerralla, mikä johtaa hosting -yrityksesi ehtojen rikkomiseen. Pakkaa vähemmän kuvia riittävin väliajoin, jotta vältät palvelimen kuormituksen.

3 Näytä kuvia aliverkkotunnuksesta

On suositeltavaa isännöidä kuvia erillisellä aliverkkotunnuksella. Tämä auttaa lataamaan kuvat rinnakkain päätoimialueen sisällön kanssa. Sivusi sisältö latautuu nopeammin, koska kuvat ladataan eri paikasta.

7 tapaa optimoida kuvia WordPressissä sivun latausnopeuden parantamiseksi

Sisällön tarjoaminen eri palvelimilta

Tutustu artikkelimme WordPress -kuvat -kansion siirtämiseen aliverkkotunnukseen.

4 Käytä oikeaa kuvakokoa

Valmista kuvat täsmälleen sen koon mukaan, jolla ne näytetään sivustolla. Kun tarvitset 600 × 350 kuvaa, älä valmista 1200 × 700 -kokoa. Selain tarvitsee paljon aikaa ladata suurempia kuvatiedostoja koon vuoksi. WP-Smushit-laajennuksella on myös mahdollisuus asettaa ladattujen kuvien enimmäiskoko. Tämä auttaa lataamaan ladattujen kuvien kokoa maksimikokorajaan ja pienentämään kuvan kokoa.

5 Vältä koon muuttamista HTML / CSS: n sisällä

Ihmiset käyttävät HTML: ää ja CSS: ää kuvan koon muuttamiseen sen jälkeen, kun se on ladattu selaimeen. Tämä vain lisää latausaikaa, koska selain tarvitsee lisäaikaa kuvan renderoimiseksi vaadittuun kokoon.

Esimerkiksi ei ole hyvä käytäntö ladata 90 × 90 pikselin kuvaa ja yrittää pienentää kokoa alla olevalla HTML -koodilla.

<img src="your image URL" height=45 width=45>

6 Käytä vektorikuvakkeita

Normaalikuvat (joita kutsutaan rasterikuviksi) ovat eri muodoissa, eivätkä ne renderöidu oikein, kun suurennetaan suurempiin mittoihin. Paras tapa on käyttää SVG -skaalattavia kirjasinkuvakkeita, kuten mahtavia kirjasinkuvakkeita kuvien sijasta. Esimerkiksi navigointivalikon kuvakkeiden tulee käyttää SVG -kirjasinkuvakkeita. Kuvien käyttäminen tällaisissa pienemmissä kuvakkeissa ei vain vääristä ulkoasua vaan myös pidentää sivun latausaikaa. Alla on esimerkki kirjasinkuvakkeen käytöstä:

Olen kirjasinkuvake, käytä minua kuvan sijaan.

Varmista, että otat GZIP -pakkauksen käyttöön palvelimen vivulla, jotta SVG -kuvien ja muun sisällön tiedostokoko pienenee.

7 Valitse Sopiva kuvamuoto

Yleisesti tuettuja kuvamuotoja on kolme – GIF, PNG ja JPEG. Jokaisella on omat hyvät ja huonot puolensa.

  • Käytä GIF -tiedostoa, kun tarvitset animaatiota
  • PNG -muotoa voidaan käyttää korkean resoluution ja korkealaatuisten kuvien, kuten valokuvauskuvien, tuottamiseen. Mutta PNG -kuvat ovat suurempia.
  • JPEG sopii paremmin normaaleihin kuvakaappauksiin ja verkkokuviin, joiden kuvakoko on pienempi ja laatu huonompi (verrattuna PNG: hen).

Valitse tarvittava kuvamuoto ja pakkaa se laajennuksilla ennen käyttäjille näyttämistä.

Johtopäätös

Kun aloitat verkkosivuston, suosittelemme kokeilemaan useita yhdistelmiä ja tarkistamaan, mikä toimii sinulle. Jos sinulla on jo käynnissä oleva sivusto, jossa on paljon kuvia, pakkaa kaikki olemassa olevat kuvat laajennuksilla. Käytä Google PageSpeed ​​Insight -työkalua tarkistaaksesi, onko "Optimoi kuvat" -ongelma poistettu ja sivusi nopeus on parantunut. Kaikkien edellä lueteltujen optimointitekniikoiden noudattaminen auttaa parantamaan sivun latauspistettä rajusti vihreälle alueelle.

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. HyväksyäLisätietoja