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 normalisé pour les documents sur le World Wide Web. La plupart des pages Web contiennent du balisage HTML (ou XHTML). HTML est interprété par les navigateurs; Le texte formaté résultant de l'interprétation est affiché sur le moniteur d'un ordinateur ou d'un appareil mobile.

HTML est une application SGML (langage de balisage généralisé standard) conforme à la norme internationale ISO 8879. XHTML est une version plus rigoureuse du code HTML. Elle respecte toutes les limitations du langage XML. En réalité, XHTML peut être considéré comme une application du langage XML au balisage hypertexte. Sur le Web, les pages HTML sont généralement transmises du navigateur aux navigateurs à l’aide des protocoles HTTP ou HTTPS, en texte brut ou par cryptage.

La partie la plus importante de l'optimisation d'une ressource Web sur une longue période est la minimisation des fichiers HTML et CSS-JS transmis au navigateur au moment de la visite du site. Vous pouvez tout compresser, pages de code HTML, fichiers CSS et fichiers JS. Ces mesures peuvent réduire considérablement la taille du code résultant et accélérer légèrement le chargement du site. La minimisation est due à la suppression d'espaces supplémentaires, d'onglets et de lignes vides. Laissez-nous vous dire comment cela peut être fait sur vos sites Web à la volée.

Minimisation HTML

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

Regardez le code source de ce site pour voir à quoi il ressemblera. Comme vous pouvez le constater, presque tout le code html de la page n’est pas formaté et «rassemblé en un tas» (la raison pour laquelle «presque» sera décrite ci-dessous).

Ceci est accompli avec l'aide de deux petits encarts de code PHP qui utilisent 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 le <! DOCTYPE ...> ):

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

Et la deuxième 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: le contenu de la balise pre est ajouté à l’exception, c.-à-d. Ce n'est pas minimisé, il est nécessaire pour l'affichage correct des exemples de code.

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

Je serais heureux si quelqu'un dans les commentaires vous dit comment éliminer correctement cet inconvénient, sans casser la capacité de travail des scripts.

Réduire 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 insérée dans un autre papa du site et à travers laquelle tous les fichiers nécessaires sont transmis.

Il est possible de minimiser les fichiers individuels et de regrouper plusieurs fichiers en un, réduisant ainsi le nombre de requêtes adressées au 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 .
  • Allez à l'adresse http: // votre_site / min / constructeur / et entrez le nom d'utilisateur et le mot de passe admin . Un outil s'ouvrira pour obtenir des liens vers des fichiers passés via le minimiseur.
  • Spécifiez les chemins relatifs aux fichiers requis, cliquez sur «Mettre à jour» et obtenez des liens vers les versions réduites.
  • Après avoir obtenu tous les liens nécessaires, il est préférable de fermer l’accès au constructeur. Pour ce faire, dans config.php, modifiez true en false dans la ligne $ min_enableBuilder = true; .

Si vous avez plusieurs fichiers du même type, je vous recommande d’utiliser le groupe (pour cela, le fichier /min/groupsConfig.php est en cours de modification ). Dans le constructeur, et même dans ce fichier, des exemples montrent comment combiner plusieurs fichiers CSS ou JS. En passant, même si vous n’avez qu’un seul fichier et que vous souhaitez raccourcir son chemin tout en le réduisant au minimum, vous pouvez également utiliser le regroupement.

Par exemple:

  • Fichier source - http://www.shram.kiev.ua/templates3/css/style.css
  • Regroupement dans groupsConfig.php :
     return array (
      'style.css' => tableau ('// templates3 / css / style.css'),
     )
    
  • Le résultat est 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 # (commentaire) de la ligne #RewriteBase / min du fichier .htaccess (situé dans le dossier / min / ). La directive rewriteBase définit l'URL de base des conversions dans le contexte d'un répertoire.

Via dimox.name & wiki