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

Gzip-compression des polices EOT, TTF, WOFF et WOFF2 et d'autres

Gzip-сжатие шрифтов EOT, TTF, WOFF и WOFF2 и других

Une police d'ordinateur est un fichier qui contient une description d'un ensemble de caractères alphabétiques, numériques, de service et pseudographiques utilisés pour afficher ces caractères (en particulier du texte) par le programme ou le système d'exploitation.

Lors du développement de projets Internet, des polices de plug-in sont utilisées. Cependant, après avoir testé la vitesse de chargement de l'un des sites avec l'outil PageSpeed ​​Insights , un message a été émis indiquant que le fichier avec les polices * .WOFF2 n'utilisait pas la compression Gzip , bien qu'il ait été activé et configuré depuis longtemps.

Comment compresser les polices connectables en utilisant Gzip, nous allons discuter plus tard dans cet article.

À ce jour, Internet utilise quatre formats de conteneurs de polices: EOT, TTF, WOFF et WOFF2 . Mais, malheureusement, comme d'habitude, malgré le choix, il n'y a pas de format unique qui fonctionnerait dans tous les navigateurs:

  • EOT est disponible uniquement dans Internet Explorer.
  • TTF n'est que partiellement supporté dans ce navigateur.
  • WOFF est plus commun que d'autres, mais il ne peut pas être utilisé dans certains navigateurs plus anciens.
  • Plus de soutien de WOFF 2.0 fonctionnent maintenant.

Il existe un autre format pour le conteneur de police - SVG . Mais il n'a jamais été pris en charge dans Internet Explorer et Firefox. Et maintenant, il cesse d'être utilisé dans le navigateur Chrome.

À cet égard, nous devons utiliser tous ces formats pour que la page soit la même pour les utilisateurs de différents navigateurs.

Continuons avec la compression. Depuis que j'ai Nginx en tant que frontend sur le serveur et le backend Apache, il suffisait d'activer Gzip uniquement dans Nginx. Il s'allume très simplement. Vous devez ajouter une ligne dans le fichier de configuration:

  gzip sur; 

Maintenant, nous listons les pharmas de fichiers que nous devons compresser via Gzip:

 gzip_types
 application / atome + xml
 application / javascript
 texte / javascript
 application / json
 application / ld + json
 application / manifeste + json
 application / rss + xml
 application / vnd.geo + json
 police / ttf
 application / x-font-ttf
 application / vnd.ms-fontobject
 application / font-woff
 application / font-woff2
 application / x-web-app-manifeste + json
 application / xhtml + xml
 application / xml
 police / opentype
 image / bmp
 image / svg + xml
 image / x-icône
 text / cache-manifeste
 texte / css
 texte / plain
 texte / vcard
 text / vnd.rim.location.xloc
 text / vnd.wap.wml
 texte / vtt
 texte / x-composant
 text / x-cross-domain-policy; 

Dans Ubuntu Server, ce fichier se trouve ici: /etc/nginx/nginx.conf

Pour que les modifications prennent effet, redémarrez Nginx: nginx -s reload

Des paramètres plus détaillés de compression Gzip dans Nginx peuvent être trouvés sur le site officiel de Nginx.

Dans le même fichier, veillez à vérifier les valeurs du paramètre gzip_types . Tout d'abord, il ne spécifie généralement pas application / font-woff2 , et donc ce fichier de police n'a pas été traité par Gzip-compression. En même temps, vérifiez la disponibilité des autres formats de police:

 application / x-font-ttf
 application / vnd.ms-fontobject
 application / font-woff
 application / font-woff2

Ce n'est pas tout. Maintenant, ouvrez /etc/nginx/mime.types et vérifiez si ces types sont listés dans ce fichier. Ci-dessous, je vais simplement lister le contenu de ce fichier entier:

 types {
 #
 # Échange de données
 #
 application / atome + xml atome;
 application / json json carte topojson;
 application / ld + json jsonld;
 application / rss + xml rss;
 application / vnd.geo + json geojson;
 application / xml rdf xml;
 #
 # JavaScript
 #
 application / javascript js;
 #
 # Fichiers manifeste
 #
 application / manifest + json webmanifest;
 application / x-web-app-manifeste + json webapp;
 text / cache-manifest appcache;
 #
 # Fichiers multimédia
 #
 audio / midi mid midi kar;
 audio / mp4 aac f4a f4b m4a;
 audio / mpeg mp3;
 audio / ogg ogg ogg opus;
 audio / x-realaudio ra;
 audio / x-wav wav;
 image / bmp bmp;
 image / gif gif;
 image / jpeg jpeg jpg;
 image / png png;
 image / svg + xml svg svgz;
 image / tiff tif tiff;
 image / vnd.wap.wbmp wbmp;
 image / webp webp;
 image / x-jng jng;
 video / 3gpp 3gp 3gpp;
 video / mp4 f4p f4v m4v mp4;
 vidéo / mpeg mpeg mpg;
 vidéo / ogg ogv;
 vidéo / quicktime mov;
 vidéo / webm webm;
 video / x-flv flv;
 video / x-mng mng;
 video / x-ms-asf asf asx;
 video / x-ms-wmv wmv;
 video / x-msvideo avi;
 image / x-icône cur ico;
 #
 # Microsoft Office
 #
 application / msword doc;
 application / vnd.ms-excel xls;
 application / vnd.ms-powerpoint ppt;
 application / vnd.openxmlformats-officedocument.wordprocessingml.document docx;
 application / vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx;
 application / vnd.openxmlformats-officedocument.presentationml.présentation pptx;
 #
 Polices #Web
 #
 application / font-woff woff;
 application / font-woff2 woff2;
 application / vnd.ms-fontobject eot;
 application / x-font-ttf ttc ttf;
 font / ttf ttf;
 font / opentype otf;
 #
 # Autre
 #
 application / java-archive guerre de pot d'oreille;
 application / mac-binhex40 hqx;
 application / octet-stream bin deb dll dmg exe img iso msi msm msp safariextz;
 application / pdf;
 application / postscript ai eps ps;
 application / rtf rtf;
 application / vnd.google-earth.kml + xml kml;
 application / vnd.google-earth.kmz kmz;
 application / vnd.wap.wmlc wmlc;
 application / x-7z-comprimé 7z;
 application / x-bb-appworld bbaw;
 application / x-bittorrent torrent;
 application / x-chrome-extension crx;
 application / x-cacao cco;
 application / x-java-archive-diff jardiff;
 application / x-java-jnlp-fichier jnlp;
 application / x-make-run;
 application / x-opéra-extension oex;
 application / x-perl pl pm;
 application / x-pilote pdb prc;
 application / x-rar-compressé rar;
 application / x-redhat-paquet-gestionnaire rpm;
 application / mer x-mer;
 application / x-shockwave-flash swf;
 application / x-stuffit sit;
 application / x-tcl tcl tk;
 application / x-x509-ca-cert crt der pem;
 application / x-xpinstall xpi;
 application / xhtml + xml xhtml;
 application / xslt + xml xsl;
 application / zip zip;
 text / css css;
 text / html htm html shtml;
 text / mathml mml;
 texte / texte simple;
 texte / vcard vcard vcf;
 text / vnd.rim.location.xloc xloc;
 text / vnd.sun.j2me.app-descriptor jad;
 text / vnd.wap.wml wml;
 texte / vtt vtt;
 texte / x-composant htc;
 }

Après cela, redémarrez Nginx: nginx -s reload .

Via matovsky.com & wiki