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

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

33

Google on hallitseva hakukone englantia puhuvien käyttäjien keskuudessa. Tästä syystä WordPress -sivustojen omistajat noudattavat vakavasti Google PageSpeed ​​Insights -työkalun ohjeita ja mahdollisuuksia. Yksi PageSpeed-työkalun suosituista varoitusviesteistä on korjata perinteisessä muodossa esitetyt kuvat palvelinkuviksi seuraavan sukupolven muodoissa. Tässä artikkelissa selitämme, kuinka voit korjata tämän varoituksen WordPress -sivustoissa kuvien optimoimiseksi.

Aiheeseen liittyviä: Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

Varoitus Google PageSpeed ​​Insightsissa

Siirry Google PageSpeed ​​Insights -työkalusivulle ja testaa verkkosivusi URL -osoite. Sinun pitäisi nähdä mahdollisuus näyttää "Palvelinkuvat seuraavan sukupolven muodoissa", kuten alla. Näet kunkin kuvan mahdolliset kokosäästöt ja arvioidut säästöt sivun latausajassa.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

PageSpeed ​​-varoitus Tarjoa kuvia seuraavan sukupolven muodoissa

Huomautus: Google sanoo, että tämä on mahdollisuus, eikä se vaikuta PageSpeed ​​-suorituskykypisteisiin. Tämän varoituksen poistaminen nostaa kuitenkin pisteitä todellisuudessa.

Seuraava-Gent-kuvamuotoja

Ennen kuin siirrymme eteenpäin, sinun on ymmärrettävä kuvamuodot. On olemassa kolme perinteistä ja suosittua kuvamuotoa:

  • Yhteinen valokuvausasiantuntijaryhmä (JPEG tai JPG) – tukee häviöllistä pakkausta
  • Portable Network Graphics (PNG) – tukee läpinäkyvää ja häviötöntä GIF -pakkausta ja korvaamista
  • Graphics Interchange Format (GIF) – bittikarttamuoto tukee usean kehyksen silmukointia.

Nyt verkkosivustoille suositellaan uusia seuraavan sukupolven muotoja:

  • WebP – Googlen kehittämä parempi pakkaaminen
  • JPEG 2000 – parannus JPEG -standardeihin kuvan pakkaamisessa
  • JPEG XR – Microsoftin kehittämä JPEG -laajennettu alue

Voit tarkistaa Googlen galleriasta vertaillaksesi erilaisia ​​kuvia visuaalisesti. Seuraavan sukupolven tiedostomuodot auttavat pienentämään kuvien kokoa huomattavasti, mikä lisää sivun latausnopeutta. Kuten kohti Wikipedia, 92% selaimista tukee WebP muotoa tehden lupaava korvaa perinteistä mallia. Siksi sinun on aloitettava WebP-muodon käyttö päästäksesi eroon näyttökuvista seuraavan sukupolven muodoissa PageSpeed ​​Insights -työkalun varoituksella.

Kuvamuotojen muuntaminen

Vaikka Google käyttää kevyttä kuvamuotoa, ne eivät ole kovin suosittuja sovelluskehittäjien keskuudessa. Monet sovellukset eivät tue kuvien luomista näissä muodoissa. Esimerkiksi SnagIt- suosittu bloggaajien näytön kaappaustyökalu-ei tarjoa vaihtoehtoa luoda kuvia seuraavan sukupolven muodossa. Voit luoda perinteisessä muodossa, kuten PNG tai JPEG.

Nyt kun on vaikea löytää sovellusta seuraavan sukupolven kuvamuotojen luomiseen. Sen sijaan voit ladata PNG- tai JPEG-kuvia WordPress-sivustollesi ja käyttää laajennusta niiden muuntamiseen yhdeksi seuraavan sukupolven kuvamuodoista. Tämä on tehokas ja helppo tapa, koska sinun ei tarvitse muuttaa toimintamalliasi.

Koska Google on WebP -formaatin omistaja, monet laajennukset tukevat perinteisten kuvien muuntamista WebP -muotoon. Tässä kerromme, miten voit muuntaa kuvasi WebP: ksi ja korjata "näytä kuvat seuraavan sukupolven muodossa" PageSpeed ​​Insights -työkalussa.

WebP -laajennukset WordPressille

WebP -muuntamiseen on saatavana useita suosittuja laajennuksia.

SG -optimoija SiteGroundille

Jos isännöit SiteGroundia, paras vaihtoehto on käyttää SG Optimizer -laajennusta. Tämä onnistuu muuntamaan ja tarjoamaan WebP -kuvia palvelimeltasi. Voit valita pakkausasteen hallitaksesi muunnettujen kuvien laatua säilyttäen samalla kaikki alkuperäiset kuvat. Katso aikaisempi artikkelimme WebP -kuvien näyttämisestä SiteGroundissa.

  • Voit ottaa käyttöön "Luo WebP -kopioita uusista kuvista" -vaihtoehdon "SG -optimoija> Kuvan optimointi" -osiossa.
  • Napsauta "Luo ​​joukko WebP-tiedostoja” -painiketta, jos haluat luoda WebP-kuvia kaikille olemassa oleville kuvillesi häviöttömällä tai ennalta määritetyllä häviöllisellä pakkaustasolla.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

WebP -vaihtoehto SG Optimizer -laajennuksessa

SEO -tarjous: Optimoi sivustosi Semrush Pro -sovelluksen 14 päivän ilmaisella kokeilujaksolla.

Smush Pro

Smush on toinen suosittu kuvanpakkauslaajennus, jossa on yli miljoona aktiivista asennusta. WebP on kuitenkin tämän laajennuksen premium -vaihtoehto, ja sinun on maksettava 5 dollarin kuukausitilaus (vuosisuunnitelma) tämän ominaisuuden käyttämisestä.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

Smush Pro WebP -vaihtoehto

Optimoi automaattisesti

Tämä laajennus tarjoaa optimoidun kuvan optimoinnin WebP -muunnoksen avulla käyttämällä ShortPixel CDN -palvelua. Vaikka tämä on hyvä vaihtoehto CDN: n ja WebP: n yhdistämiseen, siinä on saalis. Voit tarjota enintään 100 kuvaa kuukaudessa ilmaiseksi. Jos tarvitset enemmän, sinun on maksettava 3,99 dollaria kuukaudessa jopa 5000 kuvan premium -suunnitelman aloittamiseksi. Tämä on kallis vaihtoehto, kun haluat pakata ja näyttää suuren määrän kuvia. Jos haluat testata automaattista optimointia, siirry laajennuksen asentamisen ja aktivoinnin jälkeen kohtaan “Asetukset> Automaattinen optimointi> Kuvat”.

  • Ota käyttöön Optimoi kuvat -valintaruutu.
  • Valitse kuvan optimointitaso kiiltäväksi, häviöttömäksi tai häviöksi.
  • Valitse ruutu "Ladataanko WebP tai AVIF tuetuissa selaimissa?"
  • Otetaanko "Laiska ladattavat kuvat käyttöön"? valintaruutu.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

WebP -asetukset automaattisen optimoinnin laajennuksessa

Napsauta Tallenna muutokset -painiketta ja testaa sivustosi PageSpeed ​​Insights -työkalua. Sinun pitäisi nähdä varoitus "Näytä kuvat seuraavan sukupolven muodoissa" on kadonnut nyt. Kuitenkin näet WordPress -hallintapaneelissa varoitusviestin, että ShortPixel -kiintiösi on käytetty, ja sinua pyydetään päivittämään suunnitelma.

Ilmaiset WebP -laajennukset

Onneksi saatavilla on vain muutamia ilmaisia ​​laajennuksia, kuten WebP Express ja WebP Converter for Media. Tässä artikkelissa selitämme prosessin WebP Converter for Media -laajennuksella.

Asenna WebP Converter for Media -laajennus

Kirjaudu WordPress -hallintapaneeliin ja siirry kohtaan "Lisäosat> Lisää uusi". Kirjoita hakukenttään "webp" suodattaaksesi tulokset ja selvittääksesi WebP Converter for Media -laajennuksen. Napsauta "Asenna" -painiketta ja aktivoi sitten laajennus sivustossasi.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

Asenna WebP Converter for Media -laajennus

Ota WebP Image Conversion käyttöön

Laajennuksen aktivoinnin jälkeen näet alla olevan viestin ja napsautat "Nopeuta verkkosivustoani" -painiketta. Vaihtoehtoisesti voit siirtyä “Asetukset> WebP -muunnin” -valikkoon päästäksesi laajennuksen asetussivulle.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

Kuvan lataustila ja tiedostojen laajennukset

  • Saat luettelon tuetuista hakemistoista valitsemalla "/uploads" -vaihtoehdon. Varmista, että palvelet kuvia WordPressin oletuslatauskansiosta. Jos olet siirtänyt kuvat aliverkkotunnukseen, valitse kyseinen hakemisto, jotta laajennus toimii oikein.
  • Valitse muuntomenetelmäksi vaihtoehto "GD (suositeltava)".
  • Valitse lopuksi kuvan laatu tarpeidesi mukaan. Laajennus käyttää 85% WebP -muunnoksen oletuslaatuarvona.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

Hakemiston muuntaminen ja laatu

Laajennus käyttää myös joitain lisäominaisuuksia kuvan optimoimiseksi. Voit jättää oletusarvot sellaisinaan tai tarkistaa ja ottaa käyttöön/poistaa käytöstä tarvittavat arvot. Voit esimerkiksi valita suositeltujen WebP -tiedostojen selaimen välimuistin ja valita suurempien WebP -tiedostojen poiston. Napsauta "Tallenna muutokset" -painiketta, kun olet valinnut kaikki vaihtoehdot.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

Lisäominaisuudet

Luo kuvat uudelleen

WebP Converter for Media -laajennus tarjoaa myös mahdollisuuden luoda kaikki kuvat uudelleen, jotta ne voidaan muuntaa WebP -muotoon. Tästä on hyötyä, jos olet ladannut kuvia sivustolle ennen laajennuksen asentamista.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

Luo WebP -kuvia uudelleen

Tarkista Google Chromessa

Kun olet luonut kaikki olemassa olevat kuvat, voit avata verkkosivuston Google Chromessa ja tarkistaa. Sinun pitäisi nähdä WebP -kuvien tarjoaminen kehittäjätyökalut -osiosta. Voit tarkistaa tämän artikkelin siitä, miten voit tarkistaa WebP -kuvien näyttämisen Chrome -selaimessa. Jos olet ottanut selaimen välimuistin käyttöön, kopioi kuvan URL -osoite ja katso tiedoston nimi sisältää .webp.

Palvelintukiongelma

Valitettavasti kaikki verkkopalvelimet eivät tue WebP -muunnosta. Löydät tämän, jos "Konversiomenetelmä" -osa on poistettu käytöstä laajennusasetuksista. Palvelimellasi on oltava asennettuna GD- tai Imagick -kirjasto, jotta se voi tukea WebP -muotoa. Muussa tapauksessa laajennus näyttää virheen, eikä sinun pitäisi pystyä käyttämään WebP -muunnosta. Sikäli kuin olemme testanneet, Bluehostin jaetut isännöintipalvelimet eivät tue WebP -muuntamista, ja näet alla olevan kaltaisen virheilmoituksen.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

Palvelimen määritysvirhe WebP: lle

Tässä tapauksessa sinun on keskusteltava isännän kanssa tarvittavan tuen ottamiseksi käyttöön WebP -kuville.

Ota WebP -kuvien välimuisti käyttöön WP Rocketilla

Kuten mainittiin, WebP Converter for Media -laajennus tarjoaa mahdollisuuden ottaa selaimen välimuisti käyttöön WebP -kuville. Tämä auttaa sinua nopeuttamaan sivun lataamista ohjeistamalla selaimet tallentamaan kuvat välimuistiin, kun käyttäjä avaa samat kuvat uudelleen. Tämä vaihtoehto ei kuitenkaan ole käytettävissä monien muiden laajennusten kanssa, ja sinun on yhdistettävä tämä välimuistilaajennuksen asetuksiin. Jos käytät esimerkiksi WP Rocketia, muista ottaa selaimen välimuistin valintaruutu käyttöön Kuvat -osiossa. Tämä mahdollistaa laajennuksen välimuistiin WebP -kuvia ja palvelua tuetuissa selaimissa.

Kuinka korjata palvelukuvat seuraavan sukupolven muodoissa WordPressissä?

Ota WebP -tuki käyttöön WP Rocketissa

Leave A Reply

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