März » 2012 » betamode.de

Kurze Analyse von Forge of Empires

Published 2012-03-29, 15:30

InnoGames hat mit Forge of Empires ein neues Browser-Aufbaustrategie-Spiel veröffentlicht. Logischerweise habe ich mir das ein wenig genauer angeschaut:

Technik

Flash-Client!
Game-Seite sauberer Quellcode
Nur inline CSS
Combined JS
- Enthalten
  - http://code.google.com/p/swfobject/
  - http://swffit.millermedeiros.com/
  - http://jquery.com/
- z.B. swfobject oder jQuery stehen unter MIT Lizenz:
  […] The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. […]
  Die fehle allerdings überall.
Inline JS für eigenen Code
Google Analytics
Preloader lädt eine lang.mo, mit POEdit „dekompilierbar“ zu Quell-po-Datei
- geladene Datei aus Verzeichnis en_DK
- 1258 lokalisierte Strings
- Unterschiede Zwischen Vorlage und Übersetzung, obwohl beide EN
Server unter /game/amf
- Selbe Domain wie Hauptseite, also auch Analytics-Cookies bei jedem AMF-Request
Animationen und andere Assets als PNG(-Sprites)
Manche Assets mit Reset-Cache-Query, andere ohne (siehe Liste vorne dran)
Verschiedene SWF-Files je nach Zeitalter, vermutlich Interface, auf jeden Fall Musik
Soundeffekte als MP3
- http://en1.forgeofempires.com/assets/sounds/City_CityLife_10.mp3
Musik aus verschiedenen Fetzen (dynamisch?) zusammengesetzt
Server:
- Server: nginx/1.0.10
- X-Powered-By: PHP/5.3.10-1~dotdeb.1
Tutorial-Content wird als XML-File ausgeliefert
- http://en1.forgeofempires.com/data/tutorial.xml
- Code ist nicht valide wegen kaputtem Comment 😉
Tolle Payment-Einbindung
- Von Flash erzeugter Screenshot als Hintergrundbild
- Vordergrund Iframe der Payment-Seite

Allgemein

Nette, ruhige Hintergrundmusik
Per Default eine Menge Freunde
Farmville meets Die Siedler II
Kasten in Kasten in Kasten
Dauer-PVP
- Support
- Plündern
Highscorenachbarn statt Freundesleiste
Keine Freundesliste
Tutorial sehr restriktiv
Event History bei Login ist ein super Feature
Monetarisierung
- Produktion
  - Instant abernten
  - Instant fertig
  - Doppelte Produktion
- Militär
  - Personenslots bei Militärgebäuden
  - Negotiation (kampfloser Gewinn) ohne verfügbare Gegenstände
  - Reduce Training time
  - Units heilen
  - Instant scouting
- Gebiet
  - Verzeitige Expansion
- Forschung
  - Forschungspunkte

Performance-Optimierung am Beispiel: betamode.de

Published 2012-03-22, 20:07

Ich habe mich ein wenig mit Performance Optimierung von Webseiten beschäftigt. In den nächsten Tagen und Wochen werde ich einige Beiträge dazu veröffentlichen. Den Anfang macht diese Beschreibung des Optimierungsvorgangs von betamode.de:

Beispielseiten für Optimierung

https://betamode.de
https://betamode.de/2011/07/31/server-data-monitoring-graphing/

Ausgangssituation

http://www.webpagetest.org/result/120318_NC_3MJ57/
http://www.webpagetest.org/result/120318_GB_3MJ59/

Erste Beobachtungen und Auswertung

urchin.js – uralter Google Analytics Code?
Mehrere kleine GIFs, sollten sich einfach spriten lassen
First Byte Time ist sehr hoch
Kein Caching der statischen Ressourcen
Kein CDN

Optimierung

Anwendbare Regeln aus High Performance Website Sites:

Rule 1 – Make Fewer HTTP Requests

Folgende Bilder können zusammengefasst werden:

https://betamode.de/wp-content/themes/betamode/images/suche.gif
https://betamode.de/wp-content/themes/betamode/images/clock.gif
https://betamode.de/wp-content/themes/betamode/images/comments.gif
https://betamode.de/wp-content/themes/betamode/images/xml.gif

Schritte:

Bilder von <img> auf background-images umbauen
Bilder als Sprite zusammenfassen: https://betamode.de/wp-content/themes/betamode/images/sprite.gif
Sprite als background-image einbauen
Da sich bg.gif nicht mitspriten lässt wird es als data-base64 direkt ins CSS eingebunden

Ergebnis

http://www.webpagetest.org/result/120318_NM_3MJST/
http://www.webpagetest.org/result/120318_C2_3MJSV/

Rule 3 – Add an Expires Header

Mit W3 Total Cache lässt sich sich das wunderbar erschlagen.

Ergebnis

http://www.webpagetest.org/result/120318_0K_3MJY7/
http://www.webpagetest.org/result/120318_4C_3MJZ0/

Rule 6 – Put Scripts at the Bottom

Das Analytics-Script ist zwar schon ganz unten, aber noch das alte synchrone. Also mal das neue besorgen und einbauen.

Ergebnis

http://www.webpagetest.org/result/120318_B3_3MJZY/
http://www.webpagetest.org/result/120318_TS_3MJZZ/

Rule 10 – Minify JavaScript (+ HTML + CSS)

Javascript gibt es keines, aber für Minify von HTML und CSS kann einfach W3 Total Cache konfiguriert werden, fertig.

Ergebnis

http://www.webpagetest.org/result/120318_C4_3MK1C/
http://www.webpagetest.org/result/120318_6G_3MK1D/

Dann zum Abschluss noch ein bisschen serverseitiges Caching um DB-Anfragen und so weiter zu minimieren mit W3 Total Cache.

End-Ergebnis

http://www.webpagetest.org/result/120318_57_3MK1Z/
http://www.webpagetest.org/result/120318_XM_3MK22/

Tadaa, schnell.

Wireshark: Copy content of compressed requests

Published 2012-03-07, 17:40

Copying the content of a request compressed by using gzip is not easy in Wireshark:

Click the request you want the content from
In the Middle panel, click „Packet Details“
Collapse all branches
Right click on last Branch (Could be „Line-based text data: text/html“ or „Media Type“)
Click „Copy“
Click „Bytes (Printable Text Only)“

Now you have the content in your clipboard and paste it where you want.