Éviter les pièges d'un code automatiquement intégré

Une utilisation excessive du code CSS ou JS en ligne, par opposition à la fourniture de code via des ressources statiques, peut nuire aux performances du site. Dans cet article, nous allons apprendre à charger du code dynamique via des fichiers statiques, en évitant les inconvénients liés à une surcharge de code en ligne.

L'insertion est le processus consistant à inclure le contenu des fichiers directement dans le document HTML: les fichiers CSS peuvent être insérés dans un élément de style et les fichiers JavaScript peuvent être insérés dans un script . element:

En imprimant le code déjà dans la sortie HTML, l'inlining évite les requêtes de blocage du rendu et exécute le code avant le rendu de la page. En tant que tel, il est utile pour améliorer les performances perçues du site (c.-à-d. Le temps nécessaire pour qu'une page devienne utilisable.) Par exemple, nous pouvons utiliser le tampon de données livré immédiatement lors du chargement du site. (environ 14 Ko) pour intégrer les styles critiques y compris les styles de contenu au-dessus du pli (comme avait été créé sur le site précédent de Smashing Magazine ), ainsi que la taille et la largeur des polices et hauteurs pour éviter un re-rendu saccadé de la présentation lorsque le reste des données est fourni.

Toutefois, lorsqu'il est trop utilisé, le code en ligne peut également avoir des effets négatifs sur les performances du site: Comme le code n'est pas en cache, le même le contenu est envoyé au client à plusieurs reprises et il ne peut pas être pré-mis en cache par le biais de Service Workers, ni mis en cache et accessible à partir d'un réseau de distribution de contenu. En outre, les scripts en ligne sont considérés comme non sécurisés lors de la mise en œuvre d'une stratégie de sécurité du contenu (CSP). Il constitue ensuite une stratégie judicieuse pour intégrer les parties critiques de CSS et de JS qui accélèrent le chargement du site, tout en évitant le plus possible sinon.

Dans le but d’éviter l’insertion, dans cet article, nous verrons comment convertir en ligne. code en ressources statiques: au lieu d’imprimer le code dans la sortie HTML, nous l’enregistrons sur le disque (ce qui crée effectivement un fichier statique) et ajoutons la balise

Lectures recommandées : Introduction à la vérification automatique de Plugins WordPress avec PHPUnit

Regroupement de fichiers

Même si HTTP / 2 a réduit le besoin de regrouper des fichiers, le site reste plus rapide car la compression de fichiers (par exemple via GZip) sera plus efficace. et parce que les navigateurs (tels que Chrome) ont un temps système plus important à traiter de nombreuses ressources.

Nous avons désormais modélisé un fichier en tant qu’objet PHP, ce qui nous permet de traiter cet objet comme une entrée pour d’autres processus. En particulier, nous pouvons répéter le même processus ci-dessus pour regrouper tous les fichiers du même type et servir la version fournie au lieu de tous les fichiers indépendants. Pour cela, nous créons une fonction get_content qui extrait simplement le contenu de chaque ressource sous $ fileObjects et l’imprime à nouveau, produisant l’agrégation de tout le contenu de toutes les ressources:

 la classe abstraite SiteBundleBase étend SiteResourceBase {

  protected $ fileObjects;

  fonction __construct ($ fileObjects) {

    $ this-> fileObjects = $ fileObjects;
  }

  function get_content () {

    $ content = "";
    foreach ($ this-> fileObjects en tant que $ fileObject) {

      $ content. = $ fileObject-> get_content (). PHP_EOL;
    }
  
    retourne $ contenu;
  }
}

Nous pouvons regrouper tous les fichiers dans le fichier bundled-styles.css en créant une classe pour ce fichier:

 class StylesSiteBundle étend SiteBundleBase {

  fonction get_filename () {
  
    retourne "bundled-styles";
  }

  fonction get_type () {
  
    renvoyer "css";
  }
}

Enfin, nous mettons simplement en file d'attente ces fichiers groupés, comme auparavant, à la place de toutes les ressources indépendantes. Pour CSS, nous créons un paquet contenant des fichiers header-colors.css background-image.css et de font-size.css pour lesquels nous instancions simplement StylesSiteBundle avec l'objet PHP pour chacun de ces fichiers (nous pouvons également créer le fichier JS Bundle):

 $ fileObjects = array (
  // CSS
  nouveau HeaderColorsSiteResource (),
  new BackgroundImageSiteResource (),
  nouvelle FontSizesSiteResource (),
  // JS
  new WelcomeUserDataUserResource (),
  new UserShoppingItemsUserResource ()
)
$ cssFileObjects = array_map (array (ResourceUtils :: class, 'is_css'), $ fileObjects);
$ jsFileObjects = array_map (array (ResourceUtils :: class, 'is_js'), $ fileObjects);

// Utilise cette définition de $ fileEnqueuer au lieu de la précédente
$ fileEnqueuer = new ResourceEnqueuer (
  tableau (
    nouveau StylesSiteBundle ($ cssFileObjects),
    nouveau ScriptsSiteBundle ($ jsFileObjects)
  )
)

C’est tout. Nous ne demanderons plus qu'un seul fichier JS et un seul fichier CSS au lieu de plusieurs.

Une dernière amélioration en ce qui concerne les performances perçues consiste à hiérarchiser les actifs, en retardant le chargement des actifs inutiles immédiatement. Nous allons aborder cette question suivante.

async / différer Attributs des ressources JS

Nous pouvons ajouter des attributs async et différer du

Source link