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 et peut en fait être considérée comme une application du langage XML au balisage hypertexte. Sur le Web, les pages HTML sont généralement transmises aux navigateurs du serveur à l'aide des protocoles HTTP ou HTTPS, en texte brut ou à l'aide d'un 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 «assemblé en un tas» (le pourquoi de «presque» sera décrit ci-dessous).

Ceci est accompli à l'aide de deux petits encarts de code PHP qui utilisent les expressions régulières les plus régulières.

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

En ce qui concerne les 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> , 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 . Ceci est une application PHP qui est placée dans un papa séparé sur le 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 demandes 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 .
  • Accédez à 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 transmis via le minimiseur.
  • Spécifiez les chemins relatifs aux fichiers nécessaires, 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 (le fichier /min/groupsConfig.php est en cours de modification ). Dans le générateur, et même dans ce fichier lui-même, 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, 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'),
     )
    
  • 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