Affichage préalable

“Découvrez comment HubSpot prépare le contenu afin d’améliorer la vitesse de chargement des pages et la sécurité.”; Pour améliorer la vitesse de chargement et la sécurité des pages, HubSpot crée automatiquement des versions statiques des pages, des articles de blog et des articles de la base de connaissances lorsque cela est possible. En d’autres termes, plutôt que d’assembler les données et la mise en page de la page au moment du chargement de la page, HubSpot effectuera le rendu de la page à l’avance afin qu’elle soit prête à être utilisée. Des copies de ces pages prédéfinies sont stockées dans le réseau de diffusion de contenu de HubSpot dans le monde entier afin que les visiteurs puissent accéder plus rapidement aux pages en fonction de leur emplacement. Cependant, toutes les pages ne sont pas éligibles au pré-rendu. Lorsqu’une page contient certaines fonctions ou variables HubL, ou utilise certaines fonctionnalités de page, elle ne peut pas être pré-rendue. De même, dans certains cas, une page peut être partiellement pré-rendue, ce qui offre les mêmes avantages en termes de performances et de sécurité que le pré-rendu complet. Ci-dessous, vous en apprendrez plus sur le processus de pré-rendu, sur la façon de résoudre les problèmes de pré-rendu et sur les fonctionnalités qui auront un impact sur le pré-rendu.

Processus de pré-rendu

Le processus de pré-rendu est déclenché automatiquement lors de la réalisation des actions suivantes :

La publication d’une modification du modèle d’une page
La mise à jour des données partagées, comme certains paramètres de site web
La mise à jour d’un module inclus dans un modèle ou une page

Pendant le processus de pré-rendu, HubSpot crée une version statique de la page afin qu’elle soit prête à être utilisée lorsque son URL est demandée. Cela améliore la vitesse de chargement de la page, car il y a moins de traitement côté serveur pendant chaque requête. En termes de sécurité, les pages statiques réduisent l’exposition aux vulnérabilités potentielles associées au code dynamique et aux requêtes de base de données. En règle générale, le processus de pré-rendu ne prend que quelques secondes. Les modifications plus importantes, telles que la mise à jour d’un module inclus dans de nombreux modèles et pages, peuvent prendre plusieurs minutes pour terminer le rendu des pages. Les fichiers CSS, JavaScript et images sont toujours générés de manière statique sur HubSpot, de sorte qu’ils sont toujours pré-rendus.

Vérifier si une page est pré-rendue

Il existe deux façons de vérifier si une page est pré-rendue :

?hsDebugOnly=true : charge la page avec un paramètre de requête ?hsDebugOnly=true. Cela inclura une indication si la page peut être pré-rendue. S’il ne peut pas être pré-rendu, une liste des problèmes qui empêchent le pré-rendu apparaîtra, ainsi que des fichiers spécifiques et des numéros de ligne de modèle. Si la mise en forme des informations de débogage est difficile à lire, vous pouvez utiliser le paramètre ?hsDebug=true à la place. Lorsque vous inspectez la page avec ce paramètre de requête, les mêmes informations de débogage s’affichent dans un commentaire HTML formaté vers le bas de votre page.

Capture d'écran d'un commentaire HTML montrant que la page peut être pré-rendue

X-HS-Prerendered : recherchez l’en-tête X-HS-Prerendered dans l’en-tête de la réponse HTTP de la requête de page. Cet en-tête ne sera présent que si la page est pré-rendue et inclura la valeur de la dernière fois que la page a été pré-rendue. Vous pouvez trouver ces informations en inspectant la page, en cliquant sur l’onglet réseau et en consultant les en-têtes de réponse à la demande de page.

chrome network tab showing prerendered header

Caractéristiques incompatibles

Les variables HubL, fonctions HubL et fonctionnalités de contenu suivantes empêcheront le pré-rendu d’une page. Ces fonctionnalités empêche de fournir la même réponse à chaque utilisateur, de sorte qu’elles empêchent le service d’une page pré-rendue statique. Les pages qui utilisent certaines de ces fonctionnalités peuvent bénéficier d’un pré-rendu partiel.

Variables HubL incompatibles

account
company
contact
local_dt
owner
request_contact
request.cookies
request.full_url
request.headers
request.path_and_query
request.query
request.query_dict
request.referrer
request.remote_ip

Notez que, bien que les variables request ne soient pas compatibles avec le pré-rendu, elles ont généralement des alternatives JavaScript que vous pouvez utiliser pour accéder à des informations similaires.

Fonctions HubL incompatibles

personalization_token()
today()

Fonctionnalités incompatibles

Pages qui utilisent des tests adaptatifs
Les pages qui incluent du contenu intelligent sont prises en charge via un pré-rendu partiel.

Pré-rendu partiel

Le pré-rendu partiel permet à HubSpot de servir des pages partiellement pré-rendues. Par exemple, une page peut être entièrement statique, à l’exception du nom d’un contact qui y est affiché. La page peut être pré-rendue à l’exception de ce nom de contact. Juste avant de renvoyer la page à l’utilisateur, HubSpot effectuera un rendu de ces valeurs dynamiques uniquement. Les pages qui utilisent le pré-rendu partiel ne peuvent pas être mises en cache sur le réseau de diffusion de contenu ou le navigateur. Cependant, les pages partiellement pré-rendues sont plus rapides à livrer que les pages qui ne peuvent pas l’être partiellement. Les pages partiellement pré-rendues ont également la possibilité de revenir à un état non personnalisé en cas de panne ou d’attaque. Bien qu’un pré-rendu partiel puisse améliorer la vitesse et la fiabilité de votre site, la suppression des fonctionnalités HubL qui rendent les pages non pré-restituables aura un effet positif bien plus important sur les performances globales de votre page.

Vérifier le pré-rendu partiel

Pour vérifier si une page peut être partiellement pré-rendue, chargez-la avec un paramètre de requête ?hsPrcDebug=true, et une sortie supplémentaire s’affichera sur le contenu pré-rendu de cette page. Si la page est pré-tendue, l’en-tête X-HS-Prerendered sera présent et contiendra partial avant le moment où la page a été partiellement pré-tendue. Vous trouverez ci-dessous une liste des variables HubL et des filtres qui sont actuellement pris en charge avec le pré-rendu partiel. Les pages qui incluent ces variables et filtres seront partiellement pré-rendues, et toutes les expressions qui les incluent seront évaluées au moment du service.

Variables HubL

account
company
contact
local_dt
owner
query
request
request_contact
year

Filtres HubL

|random
|shuffle

Alternatives JavaScript à HubL incompatible

Bien que les différentes variables HubL request ne soient pas compatibles avec le pré-rendu, ces variables ont généralement des alternatives JavaScript que vous pouvez utiliser pour accéder à des informations similaires. Par exemple, au lieu de la variable request.cookies, vous pouvez utiliser la propriété de cookie. Voici un exemple d’utilisation de HubL par rapport à JavaScript pour afficher dynamiquement le contenu en fonction de la visite antérieure de l’utilisateur sur le site (sur la base de ses cookies).

Méthode HubL
Méthode JS

{% set hubspot_utk = request.cookies.hubspotutk %} {% if hubspot_utk %}
<div class="returning-visitor">
  <h2>Welcome back!</h2>
  <p>Thanks for returning. Here's what's new since your last visit:</p>
  <ul class="updates-list">
    <li>New product features launched</li>
    <li>Updated pricing plans</li>
  </ul>
</div>
{% else %}
<div class="new-visitor">
  <h2>Welcome to our site!</h2>
  <p>New here? Check out our Get Started guide:</p>
  <a href="" class="btn btn-primary">Get Started</a>
</div>
{% endif %}

    <div id="visitor-welcome">
    <div id="new-visitor-content">
    <h2>Welcome to our site!</h2>
    <p>New here? Start with our Get Started guide:</p>
    <a href="" class="btn btn-primary">Get Started</a>
  </div>

  <div id="returning-visitor-content" style="display: none;">
    <h2>Welcome back!</h2>
    <p>Thanks for returning. Here's what's new since your last visit:</p>
    <ul class="updates-list">
      <li>New product features launched</li>
      <li>Updated pricing plans</li>
    </ul>
  </div>
</div>

<script>
  function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) {
      return parts.pop().split(';').shift();
    }
    return null;
  }

  function personalizeForVisitor() {
    const hubspotUtk = getCookie('hubspotutk');
    const newVisitorContent = document.getElementById('new-visitor-content');
    const returningVisitorContent = document.getElementById('returning-visitor-content');

    if (hubspotUtk) {
      // Returning visitor
      newVisitorContent.style.display = 'none';
      returningVisitorContent.style.display = 'block';
    }
    // New visitor content is already visible by default
  }

  // Run immediately to minimize content flash
  personalizeForVisitor();
</script>

Modification de contenu

Améliorer les sites existants

Réseau de diffusion de contenu, sécurité et performance

Processus de pré-rendu

Vérifier si une page est pré-rendue

Caractéristiques incompatibles

Variables HubL incompatibles

Fonctions HubL incompatibles

Fonctionnalités incompatibles

Pré-rendu partiel

Vérifier le pré-rendu partiel

Variables HubL

Filtres HubL

Alternatives JavaScript à HubL incompatible

Ressources associées

Modification de contenu

Améliorer les sites existants

Réseau de diffusion de contenu, sécurité et performance

​Processus de pré-rendu

​Vérifier si une page est pré-rendue

​Caractéristiques incompatibles

​Variables HubL incompatibles

​Fonctions HubL incompatibles

​Fonctionnalités incompatibles

​Pré-rendu partiel

​Vérifier le pré-rendu partiel

​Variables HubL

​Filtres HubL

​Alternatives JavaScript à HubL incompatible

​Ressources associées

Processus de pré-rendu

Vérifier si une page est pré-rendue

Caractéristiques incompatibles

Variables HubL incompatibles

Fonctions HubL incompatibles

Fonctionnalités incompatibles

Pré-rendu partiel

Vérifier le pré-rendu partiel

Variables HubL

Filtres HubL

Alternatives JavaScript à HubL incompatible

Ressources associées