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

Minimiser le code HTML et les fichiers CSS-JS sur le site

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

HTML (HyperText Markup Language) est un langage de balisage standardisé pour les documents sur le World Wide Web. La plupart des pages Web contiennent une description du balisage en HTML (ou XHTML). Le langage HTML est interprété par les navigateurs; Le texte formaté résultant est affiché sur le moniteur d'un ordinateur ou d'un appareil mobile.

Le langage HTML est une application SGML (langage de balisage généralisé standard) et conforme à la norme internationale ISO 8879. XHTML est une version plus stricte du HTML, il suit toutes les restrictions XML et peut être traité comme une application XML dans la zone de balisage hypertexte. Dans le World Wide Web, les pages HTML sont généralement transmises aux navigateurs à partir du serveur via des protocoles HTTP ou HTTPS, en texte brut ou en utilisant le cryptage.

Le détail le plus important de l'optimisation de la ressource Web pendant longtemps est la minimisation des fichiers HTML et CSS-JS qui sont transférés au navigateur au moment de la visite du site. Vous pouvez tout compresser, les pages de code HTML, les fichiers CSS et les fichiers JS. Ces mesures peuvent réduire considérablement la taille du code résultant et légèrement accélérer la charge du site. La minimisation se produit en supprimant les espaces inutiles, les tabulations et les lignes vides. Nous vous dirons comment cela peut être fait sur vos sites Web "à la volée".

Réduire le code HTML

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

Regardez le code source de ce site pour voir à quoi cela ressemblera dans le résultat. Comme vous pouvez le voir, presque tout le code html de la page n'est pas formaté et "assemblé en un tas" (à propos de pourquoi "presque" sera discuté ci-dessous).

Ceci est implémenté en utilisant deux petites insertions 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 <! 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'est-à-dire après la balise </ body> :

 <? php / * * HTML-minimisation * / $ 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 de pré- inscription est ajouté à l'exception, c'est-à-dire n'est pas minimisé, cela 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 inséré dans les balises <script> </ script> et <style> </ style> , ils restent libres (vous pouvez le voir dans la page source des pages du blog).

Je serais heureux si quelqu'un dans les commentaires vous dira comment corriger correctement cette lacune, sans casser la performance des scripts.

Minimisation des fichiers CSS et des fichiers JS avec Minify

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

Pour ce faire, utilisez le merveilleux outil gratuit Minify . Ceci est une application PHP qui est mis dans un papa séparé sur le site et à travers lequel tous les fichiers nécessaires sont ignorés.

Vous pouvez réduire les fichiers individuels et regrouper plusieurs fichiers en un seul, réduisant ainsi le nombre de requêtes sur le serveur.

Il est connecté 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; changer faux à vrai .
  • Nous allons à l'adresse http: // your_site / min / builder / et entrez le login et le mot de passe admin . Un outil sera ouvert pour obtenir des liens vers les fichiers transmis via le minimiseur.
  • Spécifiez les chemins relatifs aux fichiers souhaités, cliquez sur "Mettre à jour" et obtenez 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, inversez la valeur true à false dans la chaîne $ min_enableBuilder = true; .

Si vous avez plusieurs fichiers du même type, je recommande d'utiliser le groupement (pour cela, le fichier /min/groupsConfig.php est édité ). Dans la construction, et dans le fichier lui-même, des exemples sont montrés sur la façon de combiner plusieurs fichiers CSS ou JS. En passant, même si vous n'avez qu'un seul fichier et que vous voulez minimiser le chemin pour le réduire, vous pouvez également utiliser le groupement.

Par exemple:

  • Le fichier source est http://www.shram.kiev.ua/templates3/css/style.css
  • Regroupement dans groupsConfig.php :
     retour tableau (
      'style.css' => array ('// templates3 / css / style.css'),
     )
    
  • Le résultat est http://www.shram.kiev.ua/min/f=/templates3/css/style.css

Il y a une autre caractéristique de Minify, dont quelqu'un pourrait avoir besoin. Sur certains serveurs, le minimiseur doit être dans le fichier .htaccess (dans le dossier / min / ) pour supprimer le signe # (marque de commentaire) dans la ligne #RewriteBase / min . La directive RewriteBase définit l'URL de base pour les transformations dans le contexte du répertoire.

Via dimox.name & wiki