Een van de factoren die uw website kunnen vertragen, is het gebruik van grote foto's die niet zijn geoptimaliseerd voor internet.
Als mensen snel iets proberen te publiceren, uploaden ze soms foto's rechtstreeks vanaf hun fotocamera's, met een zeer hoge resolutie, foto's die wel 4-5 MB wegen.
Een geoptimaliseerde afbeelding heeft minder kilobytes zonder enig zichtbaar kwaliteitsverlies, en u moet afbeeldingen altijd optimaliseren zonder kwaliteitsverlies vóór of tijdens het uploaden naar uw site.
Het maakt niet uit of uw site WordPress of een ander platform is, u kunt afbeeldingen voor internet optimaliseren en uw website sneller laten laden.
Een voordeel van het gebruik van WordPress is dat u over plug-ins beschikt die afbeeldingen kunnen optimaliseren terwijl u ze naar uw site uploadt, en die ook bestaande afbeeldingen in bulk kunnen optimaliseren.
Wat zijn de beste praktijken met betrekking tot foto's?
Verlies geen kwaliteit
Volg de doelstellingen van uw website. Optimaliseer niet blindelings alleen omdat een tool u een slechte score heeft gegeven. Tools kennen uw sitedoelen niet.
Als ik een modeblog of een winkel zou hebben, zou ik prachtige beelden laten zien; Het maakt mij niet uit wat YSlow of Pagespeed Insights mij hebben beoordeeld.
Blijf niet hangen in cijfers en scores, doe wat het beste is voor u en uw bezoekers. Het is het beste om meer uit te geven aan CDN om grotere, betere afbeeldingen weer te geven, dan om afbeeldingen te overoptimaliseren en een lelijke website te hebben.
Het kost je misschien bezoekers en geld.
Upload geen afbeeldingen die groter zijn dan je nodig hebt
Als de breedte van uw inhoud 620px is, moet u het formaat van uw afbeeldingen wijzigen naar een breedte van 620px voordat u ze naar uw website uploadt.
Als u wilt dat bezoekers een grotere afbeelding zien wanneer ze erop klikken, kunt u een breedte van 1024px gebruiken. Stel een van de WordPress-miniaturen in op een breedte van 620 px en gebruik die miniatuur op uw pagina en koppel deze aan de grotere afbeelding.
Je hebt waarschijnlijk geen afbeeldingen nodig die hoger zijn dan 1024px (dat zou voor de meeste blogs voldoende moeten zijn), maar wat als je dat wel doet?
In dat geval kunt u overwegen afbeeldingen met een grotere resolutie te uploaden en een CDN te gebruiken.
We zullen zo dadelijk meer in detail treden over CDN.
Optimaliseer afbeeldingen voordat u ze uploadt
Met Photoshop kunt u uw afbeeldingen op uw computer optimaliseren. Sommige mensen raden aan om je afbeelding wat scherper te maken met Slim verscherpen, Onscherp masker, Hoogdoorlaatfilter of welk hulpmiddel dan ook; Photoshop heeft meerdere opties.
Ik heb niet veel verschil gezien (in KB) na het verscherpen, maar ik ben geen Photoshop-meester.
Pas het formaat van de foto aan naar de resolutie die u nodig heeft op uw website, gebruik Opslaan voor internet, kies JPG, Kwaliteit tussen 60-80%, vink Progressief aan en vervolgens Opslaan.
Ik raad aan dat je JPG gebruikt, tenzij je transparantie nodig hebt en PNG moet gebruiken.
Als u niet over Photoshop beschikt, kunt u deze hulpmiddelen gebruiken voor het optimaliseren:
- Oproer (Windows)
- Beeldoptimalisatie (Mac)
- Jpegmini (online, Mac en Windows)
- Kraken (online)
- Compressor.io (online)
Ik gebruik zelf Jpegmini; Ik kan nog steeds 5-10% afscheren, zelfs nadat ik eerst met Photoshop heb geoptimaliseerd.
Of optimaliseer tijdens het uploaden
Ik geloof niet dat er één manier is die de beste manier is om afbeeldingen te optimaliseren. Als je geen tijd wilt besteden aan het optimaliseren van je foto's op je computer voordat je ze uploadt, kun je ervoor kiezen om een WordPress-plug-in al het werk te laten doen voor jou.
Er zijn veel WordPress-plug-ins die u kunt gebruiken:
- WP Smush – Beeldoptimalisatie
- ShortPixel-beeldoptimalisatie
- Kraken.io-beeldoptimalisatie
- Optimus - WordPress Image Optimizer
- EWWW Image Optimizer-cloud
- Imagify-beeldoptimalisatie
Met deze plug-ins kunt u afbeeldingen tijdens het uploaden optimaliseren, en ook de afbeeldingen die u al heeft geüpload.
Ik heb ze niet allemaal gebruikt, alleen WP Smush en ShortPixel, en ik vond ShortPixel uitstekend. Het kan wat KB afscheren, zelfs voor afbeeldingen die eerder zijn geoptimaliseerd met Photoshop en Jpegmini.
Een andere handige plug-in is Imsanity .
Als u een site met meerdere auteurs heeft, moet u bepalen welke afbeeldingen mensen uploaden. Stel een maximale breedte, hoogte en kwaliteit in. Wanneer een gebruiker een afbeelding uploadt die groter is, zal de plug-in deze automatisch verkleinen naar de geconfigureerde grootte.
WP Smush Pro doet dat ook.
Afbeeldingen weergeven
Nu u afbeeldingen heeft geoptimaliseerd, kunt u ook de manier verbeteren waarop u deze afbeeldingen op uw website presenteert.
Als je veel foto's op een pagina hebt, zoals bijvoorbeeld op een modeblog, kun je profiteren van lazyloading.
Dat betekent dat uw afbeeldingen alleen worden geladen als ze zichtbaar zijn, terwijl de bezoeker naar beneden scrollt.
Je kunt daarvoor een van de volgende WordPress plugins gebruiken:
Welke plug-in beter is, kan ik je niet vertellen. U moet dit testen omdat er mogelijk incompatibiliteiten zijn met uw thema. Lazy laden werkt bijvoorbeeld niet voor aanbevolen afbeeldingen als u een Genesis Framework-thema heeft.
Toen ik lui laden aan het testen was, zag het er ook raar uit op mobiel. Er waren lege ruimtes waar foto's hadden moeten staan, omdat afbeeldingen niet zo snel werden geladen als in de desktopweergave.
Een ander ding dat u kunt doen om de laadtijd te versnellen, is afbeeldingen van een subdomein, zoals images.domain.com, weergeven.
U moet een subdomein maken vanuit cPanel of welk controlepaneel dan ook dat uw hostingbedrijf aanbiedt en vervolgens WordPress instellen om media van dat subdomein te laden met behulp van de WP Original Media Path -plug-in.
Ik kan een gedetailleerde blogpost schrijven voor mensen die dat willen doen (als iemand daarom vraagt), maar mijn aanbeveling is om in plaats daarvan een CDN te gebruiken. Het is een veel eenvoudigere oplossing.
Gebruik een CDN
Cloudflare is supergemakkelijk en gratis. U wijzigt gewoon uw domeinnaamservers in Cloudflare en activeert (controleer de oranje cloud op DNS-vermeldingen), en dat is alles. Uw statische bestanden (afbeeldingen, CSS, JS) worden geladen vanaf de Cloudflare CDN.
Er zijn andere CDN-bedrijven die u kunt gebruiken, hieronder vermeld. Maar ik denk dat Cloudflare het gemakkelijkst te implementeren is:
Ruim jezelf op
Elke keer dat u van thema verandert, laat u een spoor van ongebruikte thumbnails en database-items met betrekking tot die afbeeldingen achter.
Wanneer u van thema verandert, kunt u de AJAX Thumbnail Rebuild om miniaturen opnieuw op te bouwen zodat ze bij uw nieuwe thema passen.
Oude thumbnails kunnen van de server worden verwijderd met behulp van een van de volgende plug-ins:
Ik raad Thumbnail Cleaner aan omdat het snel is. Maar het verwijdert al je thumbnails, niet alleen ongebruikte thumbnails. AJAX Thumbnail Rebuild gebruiken om de miniaturen die u nodig hebt opnieuw op te bouwen.
De ongebruikte thumbnails hebben geen invloed op de prestaties van uw website. Ze nemen alleen maar ruimte in beslag op uw server. Maar er zijn database-items gerelateerd aan die miniaturen, en het is een goede gewoonte om uw database zo schoon mogelijk te houden.
Dat is wat we in de volgende stap gaan doen: de WordPress-database opschonen.
Laat een reactie achter