Image kleiner weergeven in pagina snelheids probleem

[NECAnGeL]

Hallo,

Ik heb een script gemaakt om een image die via link word opgehaald i.v.m. een produtenfeed kleiner weergeeft op mijn pagina. Alleen nu komt het probleem met dit script gaat het wel 100x langzamer om de pagina op te bouwen dan zonder dit script.
Is er misschien een snellere oplossing hiervoor.
Om de image op te slaan op de server is geen optie omdat ik de foto ook nog groter wil weergeven op een ander punt.

code:

if(substr($foto, 0, 7) == "http://")
                    {
                        if($foto != "")
                        {
                            $foto = str_replace(" ", "%20", $foto);
                        }
                        if(@file_get_contents($foto))
                        {
                            $size = getimagesize($foto);
                            // max grootte = 130 x 130
                            if($size[0] > $size[1])
                            {
                                // horizontaal
                                if($size[0] > 130)
                                {
                                    $deler = $size[0] / 130;
                                    $hsize = "130";
                                    $vsize = round($size[1] / $deler);
                                }
                                else
                                {
                                    $hsize = $size[0];
                                    $vsize = $size[1];
                                }
                                echo "<a href=\"".$mod_url."\"><img src=\"".$foto."\" border=\"0\" width=\"".$hsize."\" height=\"".$vsize."\" class=\"overzicht_afb\" alt=\"Klik voor meer informatie!\" /></a>";   
                            }
                            else
                            {
                                // verticaal of vierkant
                                if($size[1] > 130)
                                {                               
                                    $deler = $size[1] / 130;
                                    $vsize = "130";
                                    $hsize = round($size[0] / $deler);
                                }
                                else
                                {
                                    $hsize = $size[0];
                                    $vsize = $size[1];
                                }
                                echo "<a href=\"".$mod_url."\"><img src=\"".$foto."\" border=\"0\" width=\"".$hsize."\" height=\"".$vsize."\" class=\"overzicht_afb\" alt=\"Klik voor meer informatie!\" /></a>";   
                            }                    
                        }
                        else
                        {
                            echo "<a href=\"".$mod_url."\"><img src=\"/siteimages/geen_foto_s.gif\" border=\"0\" class=\"overzicht_afb\" alt=\"Klik voor meer informatie!\" /></a>";
                        }

[whoami]

Waarom sla je niet gewoon de image op in een klein formaat, en in een groter formaat ?

[NECAnGeL]

Hiervoor moeten wij dan een behoorlijke aanpassing gaan maken.
wij zijn bezig om 100.000 producten toe te voegen via affiliate marketing.

[NECAnGeL]

Maar ik vraag me af waarom het ineens een stuk trager kan gaan met het script er tussen.

[Gerco]

Het lijkt erop dat je voor elke foto vanaf je server een HTTP request doet voor de image data (file_get_contents($foto)) en aan de hand van die data de HTML gaat aanpassen. Voorheen zou de client die images asynchroon ophalen wanneer de HTML al binnen is, nu zal de client pas resultaat zien als de server alles heeft opgehaald en dan pas asynchroon alle images gaan laden!

Misschien is het zo iets duidelijker:
Oude situatie:
1. Browser krijgt HTML en toont deze
2. Browser gaat alle images laden

Nieuwe situatie:
1. Server gaat alle images laden
2. Browser krijgt HTML en toont deze
3. Browser gaat alle images laden

Het moge duidelijk zijn dat dat niet goed voor de performance is Als die images lokaal staan, kun je veel beter $foto omzetten naar een locatie op schijf, dat scheelt namelijk nogal wat dubbel werk.

[DrClaw]

Hiervoor moeten wij dan een behoorlijke aanpassing gaan maken.
wij zijn bezig om 100.000 producten toe te voegen via affiliate marketing.

onzin. je gebruikt nu dus je langzame php scriptje, maar het voldoet, toch? met de aanpassingen genoemd zoals hierboven kom je al een heel end, maar wat je eigenlijk wilt doen, is kijken of het plaatje wat je wilt laten zien bijvoorbeeld blablabla_klein.jpg heet ipv blablabla.jpg
is dat niet het geval, dan verklein je het plaatje on the fly (bijvoorbeeld met de imagemagick suite), en sla je het op, en dan laat je dit plaatje zien aan de client. vanaf nu bestaat dit plaatje dus en hoef je de hele boel opnieuw te berekenen.

nog mooier is, om de grootte van de plaatjes ergens op te slaan, in een extra veld in je database ofzo. of ook in de filename. dat bespaart je dan ook weer werk op de server.

[NECAnGeL]

[b][message=30204691,noline]
Het moge duidelijk zijn dat dat niet goed voor de performance is Als die images lokaal staan, kun je veel beter $foto omzetten naar een locatie op schijf, dat scheelt namelijk nogal wat dubbel werk.

Dit is eigenlijk het probleem de images komen van de affiliate websites zoals apartdesign bijvoorbeeld.

Bij prijsvergelijk doen ze dit ook wat ik wil gaan doen:
http://www.prijsvergelijk...tzakken/globe_zitbal.html

zie de zitzakken in het midden van de pagina en dan de image eigenschap.
Dan zie je dat de link naar: http://www.apartdesign.nl/data/producten/13108-normaal.jpg
gaat.

Zie pagina mijn website: http://www.allesvoorjehui...n/nieuwste-producten.html en dan de snelheid. Wij hebben een zeer snelle server, geen standaard hosting namelijk. maar mijn pagina gaat heel traag en zonder het script 100x sneller.

[ Voor 68% gewijzigd door NECAnGeL op 08-06-2008 10:58 ]

[Gerco]

Misschien cachen ze de image size per externe image zodat die niet meer door de server opgehaald hoeft te worden na de eerste keer. Dat zou het gewenste effect hebben zonder traag te zijn. De hele image lokaal cachen (mits toegestaan) is natuurlijk ook een optie en wat vriendlijker voor apartdesign.nl, want dan gebruik je hun bandbreedte niet meer voor jouw bezoekers.

[Voutloos]

Die pagina zit tegen de 1 MB aan, maar het grootste probleem is dat het 10s duurt voordat uberhaupt de hele html binnen is.

En dat komt idd omdat de server elke request idd alle plaatjes binnenhaalt, puur om de afmetingen te bepalen, gegevens welke prima te cachen zijn. Cache dit en je halveert het aantal requests naar de server waarvan je de plaatjes vandaan haalt (alleen die vd browser nog nodig) en je script is snel klaar, zonder te moeten wachten op derden.
Huidige opzet van dat script is qua aantal connecties en hoeveelheid benodigd http verkeer compleet van de pot gerukt. Als in: als dit wel virtual hosting was, hadden ze je een waarschuwing mogen geven, net zoals dat de beheerder van die image server wel boos op je zou mogen zijn.

NECAnGeL schreef op zondag 08 juni 2008 @ 10:56:
Wij hebben een zeer snelle server, geen standaard hosting namelijk. maar mijn pagina gaat heel traag en zonder het script 100x sneller.

Leren debuggen/profilen. Meet op een aantal punten hoe lang iets duurt en je had direct gezien dat 99% vd tijd in file_get_contents() zit. En met die regel 'http://' substring check op regel 1 is dat uberhaupt een inkopper.

[ Voor 31% gewijzigd door Voutloos op 08-06-2008 11:17 ]

[NECAnGeL]

Okeej dan zal eens kijken wat we kunnen doen.

[NECAnGeL]

[b][message=30204853,noline] Meet op een aantal punten hoe lang iets duurt en je had direct gezien dat 99% vd tijd in file_get_contents() zit. En met die regel 'http://' substring check op regel 1 is dat uberhaupt een inkopper.

Is dit slecht dan ?

[? ?]

..

[ Voor 107% gewijzigd door ? ? op 25-01-2013 09:51 ]

[NECAnGeL]

Okeej is ook interresant.

[Voutloos]

NECAnGeL schreef op zondag 08 juni 2008 @ 11:48:
[...]
Is dit slecht dan ?

Die check is niet slecht. Ik wou alleen zeggen dat bij iedereen die weet waar hij mee bezig is cq. ziet wat die code doet (iets ophalen via http) meteen een alarmbelletje moet klinken.

En ja, ik heb dus mijn bedenkingen over in hoeverre jij nu weet wat je uberhaupt aan het doen bent en wat het probleem is.

[NECAnGeL]

Ik werk met datafeeds die worden aangeboden via affiliate programma's dus zie niet wat ik fout doe.
De producten die wij aanbieden hebben wij toestemming voor van de adverteerders. Als je dit bedoelt zie ik dat niet als een probleem. Maarja dat lost het probleem nog niet op.

[Janoz]

Nee, dat bedoeld hij niet, wat hij bedoeld is dat elke ontwikkelaar die begrijpt waar hij mee bezig is op zijn klompen aanvoelt dat dit traag is. Je huidige implementatie laat bij het opvragen van de pagina eerst de server alle grote versies van de afbeeldingen downloaden via HTTP. Pas als dit allemaal klaar is wordt de pagina naar de gebruiker gestuurd die nogmaals deze grote versies mag downloaden en tot slot laat je ze verkleinen op de client door de browser zelf.

Voor elke thumbnail wordt dus 2x de grote variant gedownload.

[Gomez12]

Heel simpel gezegd, als ik 1 foto op 1 pagina van jullie bekijk dan haalt jullie server 2x de foto op, ik haal zelf ook nog eens een keer de foto op.

In die 2x de foto ophalen door jullie server zit waarschijnlijk de vertraging, dit gebeurt namelijk realtime, ik zit hier op te wachten.
Dit is bij een nieuwe foto niet erg, maar ik 100x refresh dan haalt jullie server 200x dezelfde foto op zonder dat er zeer waarschijnlijk iets aan verandert, sterker nog de server waar de foto op staat krijgt even 300 requests binnen voor 1 foto ( 2x van jullie, 1x van mijzelf ), dat gaat op een gegeven moment problemen geven.

En wat doe je nou precies met die foto? Waarom haalt jullie server hem 2x op? Om een grootte mee te kunnen sturen, dit kan je in 1x berekenen en dan gewoon in je eigen db opslaan. Dan wordt opeens alleen elke nieuwe foto nog maar 1x opgehaald door jullie server en niet bij elke request.

Btw, resizen op deze manier is over het algemeen lelijk ( of je het nou met JS of serverside doet ), als je het toch zo graag serverside doet dan zou ik zeggen resize het plaatje op de server dan wordt het mooier en kost het ook minder bandbreedte...

Maar snelste oplossing zou imho zijn om het resizen gewoon via JS te gaan doen, dan haalt jullie server niets meer op, client haalt 1x het plaatje op. en dat is het dan...

[Verwijderd]

Inderdaad, maak gewoon tumbs met een vaste grootte, dan moet je de afbeeldingsgrootte niet controleren en zijn ze mooi geresized en niet zo crappy zoals nu.

[NECAnGeL]

Okeej zeer duidelijk dit,
Zal eens kijken hoe wij de boel om kunnen gaan bouwen.