Optimalisatie stopt nooit

Soms denk je klaar te zijn met het optimaliseren van content maar is dat uberhaupt zo? Nee, wij zijn van mening dat er altijd met een kritisch oog gekeken moet worden naar hoe je in het verleden EN heden met content omgaat.

Case-study – Afbeeldingen PFSquad.NU

In het verleden hebben we bij PFSquad.NU al het nodige gedaan om onze afbeeldingen, aangezien dat toch het voornaamste medium is wat wij hebben met het oog op de foto’s uit shoots, nieuwsberichten etc, te optimaliseren.

Onlangs stelde we onszelf echter de vraag hebben we alles gedaan om dit zo optimaal mogelijk te serveren?

  • – Hebben we de afbeeldingen door een tool gehaald om ze te optimaliseren?

    Yes, we hebben dit gedaan met alles middels Photoshop maar ook met een image processing tool zoals Optimus.

  • Hebben we de afbeeldingen waar mogelijk voorzien van een passende title, alt tag, title tag etc?

    Yes, dit hebben we doorgevoerd. (Hier hebben we op deze blog in het laatste item de nodige aandacht aan besteed)

  • Hebben we de afbeeldingen beschikbaar in de nodige variaties, zodat we deze optimaal kunnen weergeven?

    Yes, we hebben buiten wat er standaard door Wordpress gedaan wordt een aantal extra formaten voor de plekken waar dit nodig is zodat we ze optimaal kunnen serveren in lijn met de specifieke content / plek waar ze vertoond worden.

  • Hebben we het beheer van afbeeldingen zo ingericht dat we ze per set kunnen aanspreken? 

    Yes, we hebben zowel op Gallery niveau als op Media Bibliotheek een passende oplossing ingericht welke zorgt dat we waar nodig hetgeen als een set kunnen aanspreken voor verdere vervolgactie.

Klaar?

Cool dan zijn we wel klaar met het optimaliseren van afbeeldingen … toch?

Nee. Heel simpel gezegd staat de techniek nooit stil en daardoor zijn er altijd weer ontwikkelingen waarmee je rekening moet houden om zo een optimaal mogelijke weergave van je content naar je bezoekers toe te doen.

We hebben gekeken naar de optimalisatie die we op de gehele image set gedaan hebben en dat was van oorsprong een lossless optimalisatie. Lossless staat voor verkleinen zonder enig verlies. De tegenhanger is lossy optimalisatie. Lossy is een sterkere verkleining met mogelijk kwaliteitsverlies. Voorheen waren wij geen fan van lossy optimalisatie omdat je vaak toch kon zien aan de afbeelding dat de kwaliteit een stuk lager was dan een lossless variant.

Maar op dat gebied zijn enorme stappen gemaakt en er zijn nu algoritmes die veel dichter blijven bij de kwaliteit van lossless met de winst die je middels lossy kunt verwachten.

Leuk maar wat betekend dat

In het kort is dit een proces waar we nu achter de schermen mee bezig zijn op het moment van schrijven. We hebben daarbij Optimus laten vervallen en hebben een andere weg ingeslagen met Imagify (van de makers van WP-Rocket)  waar we enorme resultaten reeds mee hebben behaald.

Resultaten
We hebben pas ruwweg 16% van onze image library nu verwerkt maar kunnen daar de volgende harde cijfers aanhangen;

Aantal afbeeldingen 28.922
Originele grootte 5,4 GB
Geoptimaliseerde grootte 1,8 GB
Procentuele winst / besparing 67% 

Dat zijn toch al flinke cijfers die we kunnen noteren en het belangrijkste van deze cijfers is dat dit allemaal ten goede komt van de ervaring van ons medium. Simpel gezegd hoe kleiner de content van een pagina hoe sneller deze door de webserver geserveerd kan worden aan de bezoeker.

Toekomst – oa WebP

In de toekomst gaan er vast en zeker nog genoeg ontwikkelingen komen waardoor we nog efficienter om kunnen gaan met content. Een goed voorbeeld van een techniek die er nu al is is WebP. Deze  gaat zeker nog een impact maken, alleen is de support er nu nog niet, voor IE, Edge, Firefox, (Mobile) Safari etc.

Maar zodra dat er is kun je er vrij zeker van zijn dat we ook die technologische sprong zullen maken met onze gehele content. Waarom? Omdat wij van optimalisatie houden en dat moet je serieus nemen vinden wij. 

Andere fronten

Maar afbeeldingen zijn niet het enigste front, iets wat cruciaal is hoe je omgaat met assets (JS/CSS) en op dat gebied zijn we al een stuk bezig met een oplossing genaamd Plugin Organizer.  Deze is geboren uit noodzaak aangezien Wordpress het van nature niet verplicht aan plugin authors om goed om te gaan met hun assets (het alleen laden wanneer ze daadwerkelijk nodig zijn). PFSquad.NU maakt al sinds enige tijd gebruik van de mogelijkheden die deze plugin bied om selective loading toe te kunnen passen zodat er nooit teveel assets geladen worden die niet nodig zijn.

Daarnaast zijn we ook op dit moment het backend aan het bekijken en waar mogelijk aan het herzien. Wordpress is een krachtig medium en indien je er goed mee om gaat voornamelijk op gebied van beveiliging dan kan het alles zijn en worden.

Dat is zowel een enorme kracht als vaak een valkuil; Wordpress van nature plaats soms bepaalde elementen ook in het backend op plekken die niet ideaal zijn omdat je op plek A 3 stukjes hebt van iets wat bij 2 stukjes van plek B en een stukje van plek C hoort. Ideaal gezien zou het beter zijn als je 1 concrete plek hebt met alle gerelateerde onderdelen. Door dit aan te passen hebben wij, naar onze mening, een heel klein maar duidelijk dashboard ten opzichte van hoe dit normaal zou zijn.

Uitbreiding

Zoals je ziet is optimalisatie vaak dingen terugbrengen (less is more), maar soms is een optimalisatie ook een uitbreiding maken op onderdelen.

Om nog even in het backend te blijven; we zijn bepaalde zaken op gebied van filters, sortering maar ook mogelijkheden aan het uitbreiden zodat we met de concrete data die PFSquad.NU herbergt beter kunnen werken.

Een voorbeeld wat we vast uit de doeken willen doen omdat dit aan voorkant dadelijk ook iets zal gaan betekenen is dat we onze Gallery functionaliteit gaan inkleden met een concrete author optie (eigenlijk raar dat er dat vanuit nature niet is), zodat we in de toekomt een duidelijke impressie kunnen geven per fotograaf en we zitter er nog over te denken om dit uit te breiden naar een selectie per locatie of per stad.

___

Kortom at PFSquad.NU zitten we niet stil, ook al zou je dat aan de hand van deze blog soms denken, en denken we continu na over hoe we de volgende stap kunnen maken om ons medium nog aantrekkelijker voor jullie te maken!

Laat een Reactie achter

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.