Del 1: Optimera bilder automatiskt
Du bör använda ett CDN (Content Delivery Network) för att optimera dina bilder. Ett CDN är ett nätverk av servrar som distribuerar innehåll (som webbplatser och webbappar, i det här fallet) runt om i världen. När du laddar upp en bild till en webbplats distribueras den till många olika CDN:er, vilket innebär att den laddas snabbt för personer som besöker din webbplats från hela världen.
Så här använder du ett CDN:
- Ladda upp dina originalbilder i hög kvalitet till din WordPress-server.
- Installera ett plugin som använder ett CDN.
Minimera filstorlek
Det finns några sätt du kan minimera filstorleken på dina bilder utan att offra kvalitet.
- Använd det mest moderna filformatet som stöds. Just nu är WebP det bästa alternativet. Avif är på väg, men stöds ännu inte av alla webbläsare.
- Välj rätt komprimeringsnivå. WebP har en komprimering på 0–100%, där 100% är bästa kvalitet men störst filstorlek. Testa dig fram tills du hittar en acceptabel nivå.
Formatkonvertering
Du kan konvertera bilder från ett format till ett annat automatiskt med Webien Image Optizer. Dina JPEG-, PNG- och GIF-bilder eller WebP-format kan konverteras till valfritt annat format som du väljer.
Del 2: Leverera bilder med CDN
När du är redo att visa din bild för en global publik kan du använda ett Content Delivery Network (CDN) för att leverera den från en eller flera servrar runt om i världen. Det innebär att dina bilder levereras snabbare och effektivare än om de bara ligger på din egen server.
Ett CDN är en grupp servrar som är optimerade för att leverera statiskt innehåll som webbplatsbilder. För att förstå hur detta fungerar, tänk dig att två personer – du och jag – vill dela foton med varandra via e-post. Om jag skickar dem direkt från min dator tar det längre tid för dig att ta emot dem eftersom min anslutning till din dator är längre bort. Men om vi båda ansluter via en mellanserver (på samma sätt som Gmail eller Hotmail kopplar oss samman) så finns det inte längre någon distans mellan våra datorer, och filerna går mycket snabbare!
Caching med Amazon Cloudfront
När du har implementerat cache-systemet är det dags att kontrollera att det fungerar som det ska. Då behöver du ett verktyg för att se din webbplats HTTP-förfrågningar och svar i realtid.
Kolla Amazon Cloudfronts endpoint-sida för detaljer om hur du konfigurerar tjänsten med ditt domännamn och andra nödvändiga inställningar. Du bör också konfigurera dina CDN-leverantörer så att de respekterar Cache-Control-headern som skickas från din webbapplikationsserver när bilder levereras från dess ursprung via HTTPS.
Del 3: Anpassa bildstorlek efter besökarens vy
För den sista delen av denna guide förbättrar vi kundens surfupplevelse genom att ändra bildstorlek baserat på storleken på deras webbläsare. Vi använder ett populärt plugin som heter ImageResizer för detta.
För att komma igång, installera ImageResizer och aktivera det i WordPress. Du hittar installationsinstruktioner här: imageresizertool.com. Öppna sedan din WordPress-editor och gå till \wp-content\plugins\imager\img_resize\js. Kopiera jQuery 1–2–3–4-minmax.js till din projektmapp och öppna index.html igen i din texteditor (se Del 1).
Bilder är den största performance-dödaren. Automatisering, CDN och dynamisk storleksändring hjälper
Bilder är den främsta orsaken till långsamma sidladdningar, dålig användarupplevelse och hög bounce rate. De har också negativ påverkan på konverteringsgrader eftersom de ökar laddtiden och bandwidth-kostnaden för din webbplats.
Slutsats
Bilder är den största performance-dödaren. Automatisering, CDN och dynamisk storleksändring hjälper. Real-time image processing från Cloudinary är ett utmärkt verktyg, både för utvecklare och designers. Det låter dig automatiskt optimera bilder, leverera dem med CDN, cache:a dem via Amazon Cloudfront och ändra bildstorlek efter besökares viewport för att förbättra användarupplevelsen.