Die Performance einer Website ist heute wichtiger denn je. Innerhalb kürzester Zeit sollte die aktuelle Seite fertig geladen sein – auch auf einem Smartphone mit schlechter Internetverbindung im Skigebiet. Die erforderliche Kombination aus Funktionalität, Bedienbarkeit und Design resultiert in einem großen und komplexen Code. Dieser zwingt Web Entwickler dazu, viele Inhalte so lange wie möglich zwischenzuspeichern.
Stell dir eine Website vor, die hauptsächlich aus statischem Inhalt besteht, der sich über Monate hinweg nicht ändert. Im Kopfbereich sollte aber das aktuelle Wetter dargestellt werden, welches regelmäßig automatisch aktualisiert werden sollte. Normalerweise wird die Seite für mindestens ein paar Stunden – eher Tage – gecached. Jedoch sollte sich das Wetter alle 90 Minuten aktualisieren. Mit einer ESI-Erweiterung in Sulu haben wir dieses Problem zum Beispiel für St. Anton am Arlberg gelöst.
Bild: Wetteranbindung auf stantonamarlberg.com
In 3 Schritten zu einer besseren Web-Performance
Als erstes wird die Konfigurationsdatei überprüft. Denn wenn du ESI für deine Wetteranzeige verwenden möchtest, muss es aktiviert sein.
# app/config/config.xml
framework:
# ...
esi: { enabled: true }
Der nächste Schritt ist das erstellen eines eigenen Controllers. Dieser holt die Daten und gibt sie dann als HTML zurück. Benennen wir den Controller für unser Beispiel am besten WeatherController.
// src/Client/Bundle/WebsiteBundle/Controller/WeatherController.php
namespace Client\Bundle\WebsiteBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Sulu\Component\HttpCache\HttpCache;
class WeatherController extends Controller
{
public function temperatureTodayAction(Request $request)
{
$temperature = -17°; // should be dynamic - fetch it from an API or database
return $this->render('ClientWebsiteBundle:temperature.html.twig‘, array(
'temperature‘ => $temperature
), $this->getResponse());
}
protected function getResponse()
{
$response = new Response();
// set the private and shared max age
$response->setMaxAge(240);
$response->setSharedMaxAge(480);
// set reverse-proxy TTL (Symfony HttpCache, Varnish, …)
$response->headers->set(
HttpCache::HEADER_REVERSE_PROXY_TTL,
$response->getAge() + 5400 // 90 minutes
);
return $response;
}
}
Jetzt fehlt nur noch ein Schritt, um unser Ziel zu erreichen: Im Twig Template (mit dem statischen Inhalt) wird nun das aktuelle Wetter – anhand von ESI – an der richtigen Stelle positioniert.
{{ render_esi(controller('ClientWebsiteBundle:Weather:temperatureToday‘)) }}
Der Sulu ESI bietet viele weitere Möglichkeiten, deine Web Performance zu steigern, wie den Newsticker oder andere, wetterrelevante Daten – etwa die aktuelle Schneehöhe oder eine Übersicht aller offenen Skilifte in deinem Lieblingsskigebiet. Wir haben ESI bereits häufiger für diverse Web-Projekte eingesetzt – unter anderem für:
- für Sidebar, Kontakte und Länderauswahl auf getzner.com
- für einen zufälligen Werbebanner für POOL ALPIN
Die Möglichkeiten sind endlos! Für eine detaillierte Erklärung bezüglich HTTP Cache und ESI, empfehle ich die offizielle Symfony Dokumentation.
