TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur serverar jag WebP -bilder i SiteGround?

2

SiteGround är ett av de rekommenderade värdföretagen av officiella WordPress.org. Under de senaste åren har SiteGround -hosting vuxit till olika nivåer. De har ersatt den traditionella cPanel -installationen och migrerat alla befintliga konton till deras anpassade webbplatsverktygsinställningar. Med detta kan du servera WebP -bilder istället för PNG eller JPEG för att öka hastigheten på din webbplats laddning. I den här artikeln kommer vi att förklara hur du serverar WebP -bilder i SiteGround och kontrollerar i webbläsaren.

Relaterat: Hur använder jag WebP i WordPress för att reparera serverbilder i nästa generations formatfel i Google PageSpeed-insiktsverktyg?



Varför WebP -bilder?

När du kontrollerar sidhastighetspoängen i Google PageSpeed ​​Insights -verktyget visar det dig många möjligheter som kan förbättra webbplatsens hastighet. Ett av de viktiga förslagen som du inte enkelt kan lösa är "Serve images in next-gen formats". Nästa generations format inkluderar WebP, JPEG 2000 eller JPEG XR för att ersätta de traditionella bildformaten för PNG och JPEG.

Hur serverar jag WebP -bilder i SiteGround?

Servera bilder i nästa generations format

Därför hjälper WebB -bild dig att lösa Google PageSpeed ​​Insights -problemet. Dessutom minskar bildstorleken till mer än 75% mindre med samma kvalitet vilket förbättrar sidhastigheten.

Hur fungerar det med SiteGround?

SiteGround erbjuder SG Optimizer -plugin som låter dig konvertera alla dina bilder till WebP -format. Den goda delen är att du inte behöver någon annan installation.

  • Alla WebP -bilder lagras på serversidan och du kan inte se dem i ditt mediebibliotek eller med FTP.
  • Du kan kontrollera om WebP -bilder laddas när du tittar på webbplatsen i webbläsaren.
  • Du måste aktivera WebP för individuell webbplats på ditt värdkonto.

Hur serverar jag WebP -bilder i SiteGround?

Om du inte använder SG Optimizer måste du först installera tillägget.

  • Logga in på din WordPress -webbplats och gå till avsnittet "Insticksprogram> Lägg till nytt".
  • Sök efter "SG Optimizer" för att hitta plugin.
  • Installera och aktivera tillägget på din webbplats.

Hur serverar jag WebP -bilder i SiteGround?

Installera SG Optimizer Plugin

När du har installerat SG Optimizer, gå till "SG Optimizer" -menyn och sedan till "Media Optimization". Här har du alternativen för att aktivera WebP -bilder på din webbplats.

Kom ihåg att om du redan använder några caching -plugins bör du inte aktivera andra alternativ i SG Optimizer -plugin. Se till att inte aktivera samma alternativ i två plugins och bryta webbplatsen.

Aktivera WebP för nya bilder

Aktivera först alternativet "Generera WebP -kopior av nya bilder". Välj optimeringstyp för att välja kvaliteten på dina WebP -bilder. Det förlustfria alternativet hjälper dig att behålla kvaliteten och det förlorande alternativet minskar storleken till mycket lägre genom att minska bildkvaliteten.

Hur serverar jag WebP -bilder i SiteGround?

Generera WebP -bilder i SiteGround

Vi rekommenderar att du väljer lossless för att behålla kvaliteten med nominell minskning av storleken. Men om du har större bilder på din webbplats och kvalitetsminskning är acceptabel för dig, välj alternativet förlust. För alternativ med förlust kan du välja procentandel kvalitet genom att dra reglaget.

Hur serverar jag WebP -bilder i SiteGround?

Generera förlorad WebP i SiteGround

Ladda upp en ny bild och kontrollera kvaliteten på få bilder i webbläsaren (se avsnittet nedan för detta) innan du massbehandlar alla befintliga bilder.

Massgenerera WebP -filer

När du har bestämt och ställt in kvaliteten klickar du på knappen "Bulk Generate WebP Files". Detta kommer att generera WebP -version för alla dina befintliga bilder. Till skillnad från normal bildoptimering alternativ kommer att skapa WebP bilder bara tar mindre tid beroende på antalet bilder på din webbplats. I vårt fall har vi 14K bilder som tog knappt mindre än en minut.

Ändra kvalitet

När som helst kan du välja att ändra kvaliteten från lossless till lossy eller vice versa. Du kan också ändra kvaliteten på de förlorade WebP -bilderna när som helst senare. När du ändrar kvaliteten klickar du på länken "återskapa" för att återskapa bilder med ny kvalitet. Alternativt kan du klicka på knappen "Ta bort alla WebP -filer" och klicka sedan på "Massgenerera WebP -filer" för att återskapa bilder med ny kvalitet.

Testa WebP -bilder i webbläsaren

Öppna din webbplats i Google Chrome och kontrollera källkoden från Developer Console. Du kommer fortfarande att se att PNG- eller JPEG -bilder laddas istället för WebP -bilder. Detta är dock inte rätt sätt att kontrollera.

Hur serverar jag WebP -bilder i SiteGround?

Källa Visar PNG -bild

Eftersom du inte kan se WebP -bilder på värdservern eller från mediebiblioteket kan du bli förvirrad om det fungerar på din webbplats eller inte. Följ instruktionerna nedan för att bekräfta att din webbplats fungerar med WebP -bilder.

  • Öppna Google Chrome och öppna avsnittet Chrome Developer Tools. Du kan komma åt utvecklarverktyg genom att trycka på F12 i Windows och gå till "Option + Command + I" i Mac.
  • Klicka på fliken "Nätverk" och öppna webbsidan i adressfältet. Om du redan har öppnat sidan klickar du på uppdateringsknappen för att ladda om sidan.
  • Nu kan du se att nätverksaktiviteterna spelas in och klicka på fliken "Img".
  • Här kan du se typen av resurs som laddats från din webbplats.
  • Du kan sortera kolumnen "Namn" eller "Typ" för att kontrollera bildtypen. Det ska visas som "WebP".
  • Detta är sättet att bekräfta att WebP -bilder visas från din webbplats.

Hur serverar jag WebP -bilder i SiteGround?

Kontrollera SiteGround WebP i webbläsaren

Alternativt sätt att testa

Det andra sättet att testa är enkelt.

  • Öppna din webbsida i Chrome och högerklicka på någon av bilderna.
  • Välj alternativet "Spara bild som …".

Hur serverar jag WebP -bilder i SiteGround?

Spara bild som

  • Du bör se bildformatet som "Google WebP".

Hur serverar jag WebP -bilder i SiteGround?

Spara WebP -bild

Även om originalbilden är PNG (eller JPEG), bör du se formatet som "Google WebP" eftersom detta är bildformatet som är tillgängligt på din webbplats.

Cachade WebP -bilder

Vissa caching -plugins som WP Rocket låter dig cacha WebP -bilder. Om du cachar WebP -bilder kan du hitta .png.webp- eller .jpg.webp -versionerna i din webbserver under uppladdningskatalogen. Detta är inte standardbeteendet för SiteGround WebP -tjänsten och när du inaktiverar cacheminnet stoppar cachegenereringen och du bör använda någon av ovanstående metoder för att verifiera.

Hur serverar jag WebP -bilder i SiteGround?

WebP -cachning i WP Rocket

Hur mycket storlek kan jag spara?

Detta beror verkligen på kvaliteten du väljer för dina WebP -bilder. I vårt fall väljer vi förlustfritt alternativ och sparar mer än 77% för enstaka bild.

  • Original PNG -bildstorlek – 139 KB
  • WebP -bildstorlek – 31 KB

Testar tillbaka med Google PageSpeed ​​Insights

Gå nu tillbaka till Google PageSpeed ​​Insights -verktyget och testa en av din webbsida. Förslaget om att visa bilder i nästa genformat bör försvinna nu.

Poäng att ta hand om

Var noga med att ta hänsyn till följande punkter när du använder WebP på din webbplats:

  • Det är inte alla webbläsare som stöder WebP, se till att kontrollera din webbplats i Google Chrome eller någon webbläsare som stöds.
  • Caching -plugins som WP Rocket erbjuder att cache WebP -bilder för att öka sidhastigheten. Dessa caching -plugins kommer dock inte att upptäcka WebP -bilder i SiteGround -servern. Du kan bekräfta med plugin -utvecklaren innan du aktiverar cachning av WebP -bilder.
  • CDN -tjänster som Cloudflare fungerar sömlöst med SiteGround. Men om du har en separat CNAME -inställning för att visa mediefiler via CDN, bekräfta med din CDN -leverantör om de kan visa WebP -bilder.
  • WebP -alternativet är inte tillgängligt för webbplatser som fortfarande använder cPanel -installation. Du har väntat på att SiteGround ska migrera ditt konto till webbplatsverktyg.
  • Du måste använda SG Optimizer -plugin för att aktivera WebP, utan plugin finns det inget sätt du kan aktivera från ditt värdkonto.
  • Se till att regenerera bilderna när du ändrar kvaliteten på WebP -bilderna.

Slutliga ord

Webbplatshastighet blir en viktig faktor med Googles meddelade Core Web Vitals som kommer att påverka rankningen i framtiden. SiteGround -webbplatser finns redan på Google Cloud -plattformen och med WebP kommer du att ligga långt före din tävling på andra företag.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer