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 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 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')) }}
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
