Flickr und das Image Plugin oder “Dees is sowieso blääd”

Bastian Schwarz Datum: 21. September 2011
Autor: Bastian Schwarz


Gerade habe ich ein Problem für unser Kundenprojekt “Holsteinische Schweiz” analysiert:

Im Keyvisual wurden bis zu 20 Flickr-Bilder geladen. Die URLs der Bilder wurden über die Flickr API geholt und dann durch das Image Plugin geladen, entsprechend gerechnet und abgelegt.

So weit, so gut. Nun das Problem: Für den Dateinamenhash benutzt ajaxImage u.a. die Breite und Höhe. Diese wurden für jedes Bild über getimagesize() bezogen. D.h. jedes Bild wurde bei jedem Request erneut geladen und eingelesen, unabhängig davon ob es schon bearbeitet war oder nicht. Bei 20 Bildern entstand so eine serverseitige Ladezeit von ca. 20 Sekunden.

Hier sollten wir uns mal Gedanken über eine bessere Lösung machen (Reicht die URL als ID? Gibt es andere Möglichkeiten, ohne das komplette Bild zu laden? …)

Kommentare erwünscht 😉

Bastian

Kommentare

Axel Güldner

Axel Güldner

– 21. September 2011 / 14:02

So wie ich das sehe, entsteht das Problem, wenn das Bild per getimagesize in php geladen wird, um an Höhe und Breite zu gelangen, sobald keiner oder nur einer der beiden Parameter an das Plugin übergeben wurde.

if(!$width || !$height){
$imageInfo = @getimagesize($url);

Da der darauf folgende Code zur Errechnung des fehlenden Parameters eh nur Sinn macht wenn tatsächlich zumindest ein Parameter gegeben ist und nicht beide fehlen so wie im gegebenen Beispiel, könnte man doch erst einmal den OR-Operator durch ein exklusives Oder ersetzen. Dann würde getimagesize auch nur dann aufgerufen wenn tatsächlich nur ein Parameter angegeben wurde.

Marco

– 4. Oktober 2011 / 06:24

Also eine Höhe und eine Breite wird bei der TZHS ja übergeben.

Die langen Ladezeiten entstehen meiner Meinung nach eher durch die Anfragen an flickr. Ich denke, dass ein Nachladen der Bilder per AJAX hier wohl das beste wäre.

Marco

– 4. Oktober 2011 / 08:53

Nach erneuter Überprüfung habe ich festgestellt, dass die getimagesize immer angefragt wurde, egal ob bereits ein lokales vorhanden war, um die Höhe/Breite eines Bildes zu ermitteln, welche benutzt wurden, wenn diese Angaben nicht direkt an das Plugin übergeben wurden.

Nun wird überprüft, ob eine Höhe und eine Breite an das Plugin übergeben wurden, ist dies der Fall wird ZUERST nachgesehen, ob es bereits ein lokales Bild davon gibt. Ist das der Fall muss die Höhe/Breite nicht mehr vom Server abgefragt werden.

Diese Vorgehensweise sollte die Performance-Probleme damit beheben.

Viele Grüße
Marco

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Boah, Newsticker sind doch so…. 2016

Autor: Benedikt Keller


Technologie // User Experience & Design


Einige von uns haben sich ja schon die Augen gerieben: Der tot geglaubte Newsticker erhält bei vielen Kunden im Portal wieder Einzug. Leider kam es bei diversen Umsetzungen mit fertigen Tickern in letzter Zeit aber zu einigen Problemen. Problem 1: Responsivität Die Liste an fertigen Tickern im Netz ist lange und die Fähigkeiten der Ticker sind …


Beitrag lesen
29.
April
2016

GOTO Berlin 2017

Autor: Christian Göbel


Technologie


Dari und ich durften vom 15. bis 17. November an der GOTO Konferenz in Berlin teilnehmen. TL;DR Bevor ich ein paar Insights zu den einzelnen Themen gebe, hier mein Fazit zur GOTO Berlin: eine Entwickler-Konferenz der Extraklasse! Internationale Top-Speaker und – mit dem BBC direkt am Alexanderplatz – eine ideale Location! Auch aus fachlicher Sicht kann …


Beitrag lesen
21.
Nov.
2017

AJAX Ladeschnecke ohne Bilder oder zusätzlichem CSS

Autor: Stefan Oswald


Technologie // User Experience & Design


Der Anwendungsfall tritt sehr oft ein: Eine Ergebnisliste soll nachgefiltert werden, und zur Visualisierung, dass gerade etwas im Hintergrund passiert, soll eine “Ladeschnecke” (oder vielleicht etwas old-school-mäßig ein Fortschrittsbalken) angezeigt werden. Oftmals wird das so umgesetzt, dass man im “beforeLoad”-Ereignis des AJAX-Calls eine animierte Grafik hinzufügt, welche im “complete”-Ereignis wieder entfernt oder unsichtbar gemacht wird. …


Beitrag lesen
23.
Juli
2014

Google Analytics in Verbindung mit Google Tag Manager

Autor: Stefan Oswald


Projekte // Technologie


Wenn Google Analytics über den Google Tag Manager eingebunden wird, ist zu beachten, dass trotzdem noch die jeweilige GA-Account-ID mit angegeben werden muss. Das kann man entweder im Header des Codes machen, oder direkt bei jedem Tracking-Aufruf. Bei GAv2 sieht das z.B. so aus: _gaq.push([‘_setAccount’, ‘UA-123456789-0’]); _gaq.push([‘_trackEvent’, ‘category’, ‘action’, ‘label’]); Der GTM bindet logischer Weise …


Beitrag lesen
09.
Mai
2014