Dieses Blog durchsuchen

Donnerstag, 9. März 2017

Google Maps Api und Performance

Eine Anfahrtskarte auf der Kontaktseite? Klar, ein Must-Have... sieht nicht nur gut aus, ist auch Benutzerfreundlich.

Dynamische Map

Nicht ganz so euphorisch werden nun diejenigen sein, die auf Performance und Ladezeit von Webseiten achten.

Auf dem folgenden Bild sind nur die Scriptaufrufe eine Seite gelistet, die bezüglich der Map-Erzeugung an Google gehen:

Google Maps Api Scripte, welche für das laden der JS Variante nötig sind

Hinzu kommt noch, das die Grafiken der Maps gekachelt (Kacheln à 256x256px) herunter geladen werden. Hier die Requests für die Bild-Kacheln einer Karte in der Größe.

Der Fairness sei es geschuldet zu erwähnen, das die Maps-Komponenten via HTTP/2 Protokoll geladen werden. Hier sind Request nicht "so" performancelastig. (Lesetipp: https://hpbn.co/http2/)



Wir sehen, die Funktionen der dynamischen Maps-Variante (Zoom, Kartenwechsel, etc. ) haben Ihren Preis. Dies ist nicht nur zusätzlicher Javascript-Code der die Funktionalität bereit stellt, auch werden mehrere HTTP-Request ( im obigen Beispiel 24 Stück) dafür abgefeuert.

Static Maps

Vielleicht eine sehr interessante Alternative bieten hier statische Maps. Das bedeutet, über eine URL die entsprechende Parameter enthält wird eine Karte angefragt. Zurückgeliefert wird ein einfaches Bild, das in einem <img> - Tag eingebunden wird.

Du willst ne Grafik ??? - Na gut, hier kommt sie :) 

Hier die Anfragen für die Map im Network-Panel der Dev-Konsole:


Yep, das war es schon. Die gelieferte Grafik ist 640x388px und dafür gerade mal 37.6KB groß. Ist dir der hübsche Marker aufgefallen?
Die Static-Map erlaubt einige Parameter, die es dir erlauben die Map entsprechend zu gestalten.

Detailliertere Informationen über die Google-Maps-Api's findest du hier:
https://developers.google.com/maps/web/?hl=de


PS: Nein, ein Screenshot von der Karte machen, und fest in seinem Webspace abspeichern ist rechtlich nicht erlaubt!! 


xstDev - knowHow für Webentwickler! 
.... bleibt mir treu, empfehlt mich weiter.

Montag, 2. Januar 2017

node Module - global oder lokal installieren

Der Esel zwischen den zwei Heuhaufen

So fühlt man sich, wenn man mit nodejs startet, und bemerkt, das der Package-Manager (npm oder yarn) die Möglichkeit bietet Pakete Global, oder lokal zu installieren.

Wie soll man wissen, welches Paket besser global und welches lokal installiert werden sollte?

Nun gut, lass uns loslegen... gehen wir der Sache gemeinsam auf den Grund...

Freitag, 30. Dezember 2016

npm -g braucht sudo ? - So nicht mehr...


Seit kurzem beschäftige ich mich mit nodejs und in Verbindung damit natürlich mit npm und yarn.
Der Einstieg in npm ist relativ einfach, doch von Anfang an gab es für mich eine Sache die mich irritierte... wer könnte ahnen, das ich hier einem Bug aufgesessen bin, der für unnötiges Kopfzerbrechen gesorgt hat.

Freitag, 12. Februar 2016

SQL-Dumps mit Köpfchen

Wartungsarbeiten an laufender Software erfordern nicht selten Datenbank-Backups, die mit unterschiedlichen Versionsständen vergleichbar sind.
Egal ob man ein DB-Backup nun per Hand, oder via Phing oder anderen CI-Tools bzw. CD-Tools erstellt - bei allen Varianten ist eine gut durchdachte Sicherung schon der halbe Weg zu Erfolg.

Fiktiver Anwendungsfall

Mehrere Onlineshop mit gleicher Shopversion sollen aktualisiert werden. Der Prozess des Upgrades stellt sich nun aber als ein "durchklicken durch die Upgrade-GUI " dar und ist somit recht zeitaufwendig. 

Was also tun?

Beliebte Posts