This page has been robot translated, sorry for typos if any. Original content here.

Minimisation du code HTML et des fichiers CSS-JS sur le site

Минимизация HTML кода и CSS-JS файлов на сайте

HTML (de l'anglais HyperText Markup Language - «Hypertext Markup Language») est un langage de balisage de document normalisé sur le Web. La plupart des pages Web contiennent des descriptions de balisage HTML (ou XHTML). HTML est interprété par les navigateurs; le texte formaté résultant est affiché sur l'écran d'un ordinateur ou d'un appareil mobile.

HTML est une application de SGML (Standard Generic Markup Language) et est conforme à la norme internationale ISO 8879. XHTML est une version plus stricte de HTML, il respecte toutes les limitations de XML et, en fait, XHTML peut être compris comme une application de XML au domaine du balisage hypertexte. Sur le Web, les pages HTML sont généralement transmises aux navigateurs du serveur via HTTP ou HTTPS, en texte brut ou par cryptage.

Le détail le plus important de l'optimisation des ressources Web consiste depuis longtemps à minimiser les fichiers HTML et CSS-JS transmis au navigateur lors de la visite du site. Vous pouvez tout compresser, code HTML de pages, fichiers CSS et fichiers JS. Ces mesures peuvent réduire considérablement la taille du code final et accélérer légèrement le chargement du site. La minimisation se produit en supprimant les espaces, les onglets et les lignes vierges. Nous vous expliquerons comment cela peut se faire sur vos sites à la volée.

Minimisation HTML

Минимизация HTML кода и CSS-JS файлов на сайте

Jetez un coup d'œil au code source de ce site pour voir à quoi il ressemblera. Comme vous pouvez le constater, la quasi-totalité du code html de la page n’est pas formaté et est "mis en place" (le pourquoi de "presque" sera discuté ci-dessous).

Ceci est implémenté en utilisant deux petites insertions de code PHP, qui utilise les expressions régulières les plus courantes.

La première partie doit être insérée au tout début du code source de votre site (c'est-à-dire juste avant <! DOCTYPE ...> ):

 <? php / * * minimisation HTML * / ob_start ();  ?> 

Et la seconde partie, au contraire, doit être insérée à la toute fin du code source du site, c.-à-d. après la balise </ body> :

 <? php / * * minimisation HTML * / $ out = ob_get_clean ();  $ out = preg_replace ('/ (?! [^ <] * <\ / pre>) [\ n \ r \ t] + /', "\ n", $ out);  $ out = preg_replace ('/ {2,} /', '', $ out);  $ out = preg_replace ('/> [\ n] + /', '>', $ out);  echo $ out;  ?> 

Important: dans ce cas, le contenu de la balise pre est ajouté à l’exception, c.-à-d. n'est pas minimisé, il est nécessaire pour l'affichage correct des exemples de code.

Quant aux fichiers JS et CSS connectés, ainsi que leur inclusion dans le code, qui sont insérés respectivement dans les balises <script> </ script> et <style> </ style> , ils ne sont pas minimisés (vous pouvez le voir dans le code source des pages du blog).

Je serai heureux si quelqu'un dans les commentaires me dit comment éliminer correctement cet inconvénient, sans casser les performances des scripts.

Minimiser les fichiers CSS et JS avec Minify

Минимизация HTML кода и CSS-JS файлов на сайте

Pour ce faire, utilisez le merveilleux outil gratuit Minify . Il s'agit d'une application PHP placée dans un dossier séparé sur le site et à travers laquelle tous les fichiers nécessaires sont transmis.

Vous pouvez réduire les fichiers individuels et regrouper plusieurs fichiers en un, réduisant ainsi le nombre de demandes du serveur.

Il relie simplement:

  • Copiez le dossier / min / à la racine de votre site.
  • Ouvrez le fichier /min/config.php dans un éditeur de texte et dans la ligne $ min_enableBuilder = false; changez faux en vrai .
  • Nous allons à l'adresse http: // yoursite / min / builder / et entrez le nom d'utilisateur et le mot de passe admin . Un outil s'ouvre pour obtenir des liens vers des fichiers passés via le minimiseur.
  • Nous indiquons les chemins relatifs aux fichiers nécessaires, cliquez sur "Mettre à jour" et obtenons des liens vers les versions réduites.
  • Après avoir reçu tous les liens nécessaires, il est préférable de fermer l'accès au constructeur. Pour ce faire, dans config.php, définissez true sur false dans la ligne $ min_enableBuilder = true; .

Si vous avez plusieurs fichiers du même type, je vous recommande alors d’utiliser un groupe (pour cela, le fichier /min/groupsConfig.php est édité ). Le générateur, et ce fichier lui-même montre des exemples montrant comment combiner plusieurs fichiers CSS ou JS. Soit dit en passant, même si vous n’avez qu’un seul fichier et que vous souhaitez en minimiser le chemin, vous pouvez également utiliser le regroupement.

Par exemple:

  • Fichier source - http://www.shram.kiev.ua/templates3/css/style.css
  • Regroupement dans groupsConfig.php :
     retourne un tableau (
      'style.css' => tableau ('// templates3 / css / style.css'),
     )
    
  • Résultat - http://www.shram.kiev.ua/min/f=/templates3/css/style.css

Il y a une autre fonctionnalité Minify dont quelqu'un pourrait avoir besoin. Sur certains serveurs, pour que le minimiseur fonctionne correctement, il est nécessaire de supprimer le signe # (signe de commentaire) de la ligne #RewriteBase / min du fichier .htaccess (situé dans le dossier / min / ). La directive RewriteBase définit l'URL de base pour les traductions dans un contexte de répertoire.

Via dimox.name & wiki