Digital First: Loading

Bessere
Web
Performance
für
St.
Anton
mit
ESI

Bessere Web Performance für St. Anton mit Symfony ESI
Bessere Web Performance für St. Anton mit Symfony ESI

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

wetter-st-anton-am-arlberg
wetter-st-anton-am-arlberg

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.

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.