[Performance] Zelfde images, andere sizes

[gitaarwerk]

Hai all,

Ik zit een beetje in dubio.

Ik wil performance gaan verbeteren van een pagina met veel dezelfde afbeeldingen, maar dan anders geschaald. Momenteel worden requests gemaakt naar verschillende versies van de afbeeldingen. Dat kost dus veel kb-tjes extra over de lijn.

Nu kan je bijvoorbeeld de grootste image pakken en die meerdere malen laten aanroepen en schalen via html/css. Maar nu kost dat weer veel processorkracht te schalen. Wellicht de afbeeldingen naar de gpu (translateZ(0)) sturen nog, maar dat wil je juist ook weer niet op mobiele apparaten . Dus wat is nou wijsheid?

De aanpassing zal niet gemakkelijk zijn te doen, dus 'even benchmarken' zit er niet in. Ik vind het ook heel lastig om er wat zinnigs over te vinden op StackOverflow / Google devtools docs etc.

Mijn simpele vraag is dus: Is het verstandig om de grootste afbeelding in te laden die je al gebruikt, en die kleiner schalen middels css/html op de overige plaatsen op dezelfde pagina?

[StephanVierkant]

Dat hangt er vanaf wat je wilt. Wat is het eigenlijk voor applicatie/website? Het hangt van je bezoekers af in hoeverre je dit soort werk client side wilt gaan doen. Met serverside caching voorkom je natuurlijk dat images constant worden geschaald.

Welk platform gebruik je? PHP?

[NitSuA]

Ik zou voor het schalen gaan, je maakt 1 request en schaalt (niet op de GPU). Het schalen van de CPU lijkt mij nauwelijk processorkracht te kosten, het aanroepen van teveel requests kan inderdaad wel veel performance kosten.

[gitaarwerk]

StephanVierkant schreef op dinsdag 10 december 2013 @ 16:42:
Dat hangt er vanaf wat je wilt. Wat is het eigenlijk voor applicatie/website? Het hangt van je bezoekers af in hoeverre je dit soort werk client side wilt gaan doen. Met serverside caching voorkom je natuurlijk dat images constant worden geschaald.

Welk platform gebruik je? PHP?

Website, heel groot, met echt duizenden requests per seconden. Momenteel worden images op het CDN geschaald en gecached acher een reverse proxy. daarbij staat ook alle caching aan wat mogelijk is.

Hoe dan ook, is er op een productpagina nog steeds meerdere requests met meerdere formaten van dezelfde afbeelding. Ongeveer 4-6 verschillende maten. Als je dan 5 producten bekijkt, dan loopt dat snel op natuurlijk.

Dit wil ik eigenlijk dus aan puur front-end kant gaan oplossen, dus aan de PHP kant wil ik niet gaan werken, hoogstends de aanroep van CDN aanpassen .

NitSuA schreef op dinsdag 10 december 2013 @ 16:43:
Ik zou voor het schalen gaan, je maakt 1 request en schaalt (niet op de GPU). Het schalen van de CPU lijkt mij nauwelijk processorkracht te kosten, het aanroepen van teveel requests kan inderdaad wel veel performance kosten.

Het idee is inderdaad om dan 1 request te maken, en schalen. GPU is leuk op desktop/laptop, maar inderdaad niet voor mobiele devices. Op sichzelf zou de processorkracht niet veel uitmaken, maar zodra je gaat scrollen moet de browser steesd opnieuw dat stukje gaan berekeken als ik het goed begrepen had. Ik vraag me daarbij dan af of ik dan niet het ene probleem weg neem, en een ander introduceer.

[storeman]

Wat voor groottes heb je het over? Als het gaat over afbeeldingen van HD resolutie en die gaan downscalen naar thumbnails en er gemiddeld 10% van de afbeeldingen op HD wordt bekeken, dan lijkt me dat toch niet de juiste weg. Welke resoluties worden er gebruikt en hoe vaak per page view wordt elke resolutie bekeken?

[Bosmonster]

GPU is leuk op desktop/laptop, maar inderdaad niet voor mobiele devices

Juist op mobiele devices wil je de hardware aanspreken die bedoeld is voor de taak die je het geeft. In dit geval dus de GPU.

moet de browser steesd opnieuw dat stukje gaan berekeken als ik het goed begrepen had.

Dat is niet waar. Een browser als Safari maakt zelfs een platte plaat van je viewport als je gaat scrollen. Laat het optimaliseren voor mobiele hardware aan de telefoon-fabrikant over, daar hoef je niet zelf nog over na te denken in de meeste gevallen

Verder is het niet zo raar om de grotere afbeeldingen te nemen en kleiner te schalen, al is het maar voor Retina (of HiDPI) ondersteuning. Scheelt je ook nog een berg requests zo te horen.

[ Voor 30% gewijzigd door Bosmonster op 10-12-2013 17:02 ]

[NMe]

Bosmonster schreef op dinsdag 10 december 2013 @ 17:00:
[...]

Verder is het niet zo raar om de grotere afbeeldingen te nemen en kleiner te schalen, al is het maar voor Retina (of HiDPI) ondersteuning. Scheelt je ook nog een berg requests zo te horen.

Lijkt mij inderdaad ook de beste oplossing, al wil je dan wel rekening houden met het feit dat ook nieuwere versies van IE nog steeds erg lelijk scalen.

[gitaarwerk]

storeman schreef op dinsdag 10 december 2013 @ 16:58:
Wat voor groottes heb je het over? Als het gaat over afbeeldingen van HD resolutie en die gaan downscalen naar thumbnails en er gemiddeld 10% van de afbeeldingen op HD wordt bekeken, dan lijkt me dat toch niet de juiste weg. Welke resoluties worden er gebruikt en hoe vaak per page view wordt elke resolutie bekeken?

Ongeveer 400px (breedte varieert). De minimale resolutie is ongeveer 30x30.

Dat laatste kan ik niet zegen exact. Er wordt vanalles gebruikt. Vrij grote groep met flink scherm, maar vaste breedte wordt nog gebruikt (voorlopig). Mobiel gebruik 320x breed. Tablet is 1024 meestal.

Bosmonster schreef op dinsdag 10 december 2013 @ 17:00:
[...]

Juist op mobiele devices wil je de hardware aanspreken die bedoeld is voor de taak die je het geeft. In dit geval dus de GPU.
[...]


Dat is niet waar. Een browser als Safari maakt zelfs een platte plaat van je viewport als je gaat scrollen. Laat het optimaliseren voor mobiele hardware aan de telefoon-fabrikant over, daar hoef je niet zelf nog over na te denken in de meeste gevallen

Dat is ook altijd een beetje mijn insteek .

Verder is het niet zo raar om de grotere afbeeldingen te nemen en kleiner te schalen, al is het maar voor Retina (of HiDPI) ondersteuning. Scheelt je ook nog een berg requests zo te horen.

Dat is inderdaad ook de bedoeling!

Grappig dat je het opmerkt. Ik heb na een berg lessen gedaan in performance (met name over de google chrome developer tools van Addy Osmani & Paul Irish) waarin men zegt dat juist zegt dat je niet teveel naar de gpu moet gaan vertalen. Het is natuurlijk geen webkit experiment site, dus het kan wel meevallen . Maar alle stappen als deze willen we dan ook graag goed overwegen.

NMe schreef op dinsdag 10 december 2013 @ 17:16:
[...]

Lijkt mij inderdaad ook de beste oplossing, al wil je dan wel rekening houden met het feit dat ook nieuwere versies van IE nog steeds erg lelijk scalen.

Klopt, helaas wel. Grappig vind ik wel weer dat de fonts standaard mooier gerenderd worden. Dat is zeer zeker nog een dingetje. De belangrijkste image is dan ook wel de grootste bovenaan .

Ik kan hier in ieer geval mee vooruit. Was er niet zeker over. Thanks!


btw @Bosmonster, doe Wilco Nap de groeten, en vraag of hij al wat lekkers heeft gekookt!

[ Voor 3% gewijzigd door gitaarwerk op 10-12-2013 17:44 ]

[Bosmonster]

NMe schreef op dinsdag 10 december 2013 @ 17:16:
[...]

Lijkt mij inderdaad ook de beste oplossing, al wil je dan wel rekening houden met het feit dat ook nieuwere versies van IE nog steeds erg lelijk scalen.

Mjah, ook Windows-computers worden steeds vaker met een soort van HiDPI-modus verkocht tegenwoordig. Dus niet scalen wordt daar ook vaak juist erg lelijk viel mij op. Het is niet meer een Retina/Apple-only ding zeg maar, al handelt die het gelukkig wel een stuk netter af...

gitaarwerk schreef op dinsdag 10 december 2013 @ 17:34:
[...]

Grappig dat je het opmerkt. Ik heb na een berg lessen gedaan in performance (met name over de google chrome developer tools van Addy Osmani & Paul Irish) waarin men zegt dat juist zegt dat je niet teveel naar de gpu moet gaan vertalen. Het is natuurlijk geen webkit experiment site, dus het kan wel meevallen . Maar alle stappen als deze willen we dan ook graag goed overwegen.

Ach er zullen vast grenzen zijn, zeker met wat exotischere/oudere Android-hardware bijvoorbeeld. Je zult toch moeten blijven testen uiteindelijk of je site nog een beetje bruikbaar blijft. Images downscalen echter is heel normaal tegenwoordig ivm de hogere pixel ratio dus.

Klopt, helaas wel. Grappig vind ik wel weer dat de fonts standaard mooier gerenderd worden. Dat is zeer zeker nog een dingetje.

Ach ja, over smaak valt niet te twisten Ik vind de font-rendering op Windows om te huilen