Johannes Wachter
Johannes Wachter
Core Developer – Sulu GmbH
Sulu Core Developer and Open-Source Enthusiast.

How to improve your website performance with ESI

Performance of modern websites is getting more important than ever. They should be accessible on every device within no time – even on a smartphone with a low connection speed. The combination of functionality, usability and design is growing to a large and complex code base which forces Web Developers to cache each page as long as possible.

Assume a page with static content that doesn't change for months but at the top of the page the current weather is being displayed. The page will be cached for at least some hours but the temperature should update each 90 minutes – with the power of ESI (Edge Side Includes) this is no problem anymore and done with ease. 

In this short example I'll show you the minimal code you need for a web project with Sulu.

Step 1 – enable ESI

First, you need to check your configuration - if you want to use ESI, it must be enabled. 

# app/config/config.xml
framework:
     # ...
     esi: { enabled: true }
Step 1 – enable ESI

Step 2 – set the controller

The next step is a new controller that fetches the data and returns the HTML. Lets name it WeatherController.

# src/Client/Bundle/WebsiteBundle/Controller/WeatherController.php
<?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;
     }
}
Step 2 – set the controller

Step 3 – find the right position

Now there's only one thing left to do. In the twig template with the static content the ESI part must be included at the right position.

{{ render_esi(controller('ClientWebsiteBundle:Weather:temperatureToday')) }}
Step 3 – find the right position

That's all you need to do. 

Benefit from the full potential

There are many more use cases like a news ticker and other weather relevant information – like snow height or the status of a skiing lift.

For more detailed information regarding HTTP Cache and render ESI, head over to the official Symfony documentation

Big thanks to our Guest-Blogger Thomas!