performance verbessern - Githubissues

Mail von Jan, jan@prop23.de:
Hallo,

ich habe eben eure Seite afeefa.de gesehen. Coole Sache. :) Allerdings
lädt die Seite speziell auf Mobilgeräten ziemlich langsam. Ich kenne
mich ganz gut mit Optimierungen für Smartphones etc. aus und hätte da
ein paar Tipps.

Vielleicht könntet ihr die Info an die Macher*in(nen) weiterleiten? :)

Ich plane grad selber eine Infoseite für Refugees aufzubauen, allerdings
nicht kartenzentriert, sondern mit Textoberfläche und zu den
Fragestellungen 'Wen kann ich zu Thema x/y ansprechen?', 'Ich habe einen
Notfall. Wenn kann ich *jetzt* erreichen?' und 'Was ist in meiner
Nähe?'. Bei letzterem wäre eine Kartenoption natürlich praktisch.

Eventuell können wir uns ja ein wenig austauschen, sowohl was technische
Erfahrungen als auch Dinge wie Datenpflege usw. angeht?

Hier jedenfalls ein paar Hinweise zur Optimierung:

* Beim ersten Ladevorgang der Seite werden rund 1,6 MB übertragen. Bei
ungünstiger Verbindung (Smartphone, GPRS) können das schon mal 3-4
Minuten Ladezeit sein. Eher unpraktisch & dürfte viele in der Zielgruppe
betreffen.

* Ein erheblicher Teil (ca. 1 MB) dieser 1,6 MB besteht aus Javascript,
CSS und den API-Antworten. Und das alles wird aktuell unkomprimiert
übertragen.

* mit aktiverter gzip-Kompression wären es (laut Chrome Developer Tools)
ca. 625 KB weniger. Also ca. ein Drittel. ^^ (Anleitung für Apache siehe
z.B.
http://www.debianroot.de/server/serverkomprimierung-mit-apache2-und-mod_deflate-1153.html)

* weitere Optimierungsmöglichkeiten:
** minified-Version von jQuery nutzen (keine Ahnung ob ihr schon
offiziell gelauncht habt - zum Debuggen ist die normale Version schon
besser, die Minified sind aber nochmal ca. 45 KB weniger.)
** die SVG-Icons sind teilweise sehr detailliert und groß. flag_sr.svg
sind z.B. 265 KB (!), flag_fa.svg immerhin noch 46 KB. Etwas sehr viel
für kleine Icons. Das lässt sich in Illustrator locker noch
vereinfachen, für den letzten Schliff würde ich svgo empfehlen
https://github.com/svg/svgo
** nicht alle location-Details auf einmal übertragen sondern on demand
wären bei der aktuellen Location-Anzahl nochmal 50 KB weniger (mit gzip
sind die locations aktuell ca. 60 KB, nur Namen übertragen wären max.
5-10 KB)

Insgesamt wären dann statt 1,6 MB nur noch 500-600 KB zu übertragen. Für
schwache Mobilverbindungen zwar auch noch grenzwertig, aber immerhin nur
noch knapp eine Minute Wartezeit bei schlechter Verbindung.

Wenn ihr noch Fragen dazu habt, bitte gerne! :) Ansonsten fänd ich es
cool, wenn wir in Kontakt bleiben könnten.

Grüße aus Berlin,
Jan
AfeefaDe / afeefa-neos

performance verbessern #205
