Ajouter un CDN à eZ Publish 5

Il est recommandé d'utiliser un CDN pour améliorer les performances d'un site Web

Plus de détails concernant les avantages d'un CDN se trouvent ici : http://www.sitepoint.com/7-reasons-to-use-a-cdn/.

Le rôle du CDN est de servir les médias (CSS, JS, Images et Fonts) avec un autre nom de domaine (ou un sous domaine).

Pour ajouter un CDN à une instance eZ Publish 5, il suffit de remplacer dans le fichier de configuration ezpublish\config\config.yml la ligne

templating: { engines: ['twig', 'eztpl'] }

Par

templating: { engines: ['twig', 'eztpl'] assets_base_urls: http://cdn.domain}

Ensuite dans le fichier qui charge les CSS par exemple : vendor\ezsystems\demobundle\EzSystems\DemoBundle\Resources\views\page_head_style.html.twig
Remplacer la ligne

<link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>

Par

<link rel="stylesheet" type="text/css" href="{{ asset(asset_url) }}"/>

Pour les images et les JS c'est exactement pareil :

<img src="{{ asset('bundles/ezdemo/images/logo.png') }}" alt="Top Logo">

Une fois cette astuce appliquée et si on utilise des Web fonts on vas avoir droit à un joli Warning dans Firebug qui nous averti que les Web Font via CDN (ou une autre cross-domain requête) ne sont pas supportés (la même erreur se produit sous IE) donc ils ne sont pas chargés correctement. Pour les charger convenablement avec notre CDN fraîchement implémenté, il faut ajouter une configuration spécifique au host du CDN.
Configuration Apache :

<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Configuration Nginx :

location ~* "^.*?\.(eot)|(ttf)|(woff)$" {
    add_header Access-Control-Allow-Origin *;
}

Voilà, l'instance eZ Publish 5 est configurée avec un CDN.
Source de l'astuce CDN et fonts : http://davidwalsh.name/cdn-fonts

Show Comments