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

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

print informatique - un fichier contenant une description d'un ensemble de nombres, des lettres et des caractères officiels pseudographic utilisés pour afficher ces symboles (tels que le texte) programme ou le système d'exploitation.

Dans le développement de plug-polices utilisées projets Internet. Cependant, après avoir testé l' un des outils du site vitesse de chargement PageSpeed Insights affiche un message indiquant que le fichier avec les polices * .WOFF2 pas appliquer Gzip-compression, même si elle a longtemps activé et configuré.

Comment compresser les polices podklyuchaemmye utilisant Gzip nous décrivons plus loin dans cet article.

À ce jour, l'Internet il y a quatre conteneurs de taille de police: EOT, TTF, WOFF et WOFF2. Mais malheureusement, comme cela est habituellement le cas, malgré la possibilité de choix, il n'y a pas de format unique qui fonctionnera dans tous les navigateurs:

  • EOT est disponible uniquement dans Internet Explorer.
  • TTF est pris en charge sur ce navigateur que partiellement.
  • WOFF diffusion plus large que l'autre, mais il ne peut pas être utilisé dans certains navigateurs plus anciens.
  • Au-dessus du support WOFF 2.0 fonctionnent actuellement.

Il est un autre format de conteneur polices - SVG. Mais il n'a jamais pris en charge dans Internet Explorer et Firefox. Et aujourd'hui est plus utilisé dans Chrome.

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

Nous continuons à la compression. Depuis que je en tant que serveur frontal exécutant Nginx et backend Apache, il me suffisait pour permettre Gzip seulement Nginx. Il se il est très simple. Il devrait être dans le fichier de configuration, ajoutez la ligne:

  gzip sur; 

Faisons la liste Farmat que nous avons besoin les fichiers comprimera par Gzip:

 gzip_types
 application / atom + xml
 application / javascript
 text / 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-manifest + json
 application / xhtml + xml
 application / xml
 police / opentype
 image / bmp
 image / svg + xml
 image / x-icon
 text / cache-manifest
 text / css
 text / plain
 text / vcard
 text / vnd.rim.location.xloc
 text / vnd.wap.wml
 text / vtt
 text / composante x
 text /-domain-policy cross x; 

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

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

Sur plus détaillées un des paramètres Gzip-compression dans Nginx Nginx peut être trouvée sur le site officiel.

Dans le même fichier, assurez - vous de vérifier les gzip_types de réglage. Tout d' abord, il est le plus souvent déclaré application / font-woff2, mais parce que le fichier de police ne sont pas traitées Gzip-compression. Dans le même contrôle de temps et la présence des autres formats de police:

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

Cela ne veut pas tout. Maintenant /etc/nginx/mime.types ouvertes et vérifier si elles sont citées dans les types de fichiers. Ci-dessous je vais donner tout le contenu de ce fichier:

 types {
 #
 l'échange de données #
 #
 application / atom + xml atome;
 application / json JSON carte topojson;
 application / ld + json jsonld;
 demande rss / rss + xml;
 application / vnd.geo + json GeoJSON;
 application / xml xml rdf;
 #
 # JavaScript
 #
 demande / js javascript;
 #
 # fichiers Manifest
 #
 application / manifeste webmanifest + JSON;
 application / x-web-app-manifest + json webapp;
 text / AppCache cache-manifeste;
 #
 # Les fichiers multimédias
 #
 kar audio / midi à mi-midi;
 audio / mp4 m4a aac F4a F4B;
 mp3 audio / mpeg;
 audio / ogg Oga ogg opus;
 audio / x-realaudio ra;
 wav audio / x-wav;
 image / bmp bmp;
 gif image / gif;
 jpg jpeg image / jpeg;
 image / png png;
 image / svg + xml svg svgz;
 tiff de TIF image / tiff;
 wbmp image / de vnd.wap.wbmp;
 image / webp webp;
 image / x-JNG JNG;
 vidéo / 3gpp 3gpp 3gp;
 video / mp4 mp4 F4P f4v m4v;
 video / mpeg mpeg mpg;
 video / ogg ogv;
 vidéo mov / quicktime;
 vidéo / webm webm;
 video / x-flv flv;
 video / x-mng mng;
 asx asf vidéo / x-ms-asf;
 vidéo / x-ms-wmv wmv;
 vidéo avi / x-msvideo;
 image / x-icon cabot ico;
 #
 # Microsoft Office
 #
 demande doc / msword;
 xls application / vnd.ms-excel;
 demande ppt / vnd.ms-powerpoint;
 docx application / vnd.openxmlformats-officedocument.wordprocessingml.document;
 demande xlsx / vnd.openxmlformats-officedocument.spreadsheetml.sheet;
 demande pptx / vnd.openxmlformats-officedocument.presentationml.presentation;
 #
 # polices Web
 #
 l'application woff / font-woff;
 application / woff2 font-woff2;
 demande eot / vnd.ms-fontobject;
 application / x-font-ttf ttf ttc;
 police ttf / ttf;
 police otf / OpenType;
 #
 # Autres
 #
 application / java-archive guerre jar de l'oreille;
 application / mac-binhex40 hqx;
 application / octet-stream bin safariextz deb dll dmg exe img iso msi msm msp;
 application / pdf pdf;
 application / postscript ai eps ps;
 demande rtf / rtf;
 application / vnd.google-earth.kml + xml kml;
 kmz application / vnd.google-earth.kmz;
 application / vnd.wap.wmlc wmlc;
 application / 7z X 7z compressé;
 l'application BBAW / x-bb-appworld;
 application / x-bittorrent torrent;
 crx application / x-chrome-extension;
 cco / x-cacao demande;
 l'application jardiff / x-java-archive-diff;
 jnlp application / x-java-jnlp-fichier;
 application / x-makeself run;
 oex application / x-opera-extension;
 application / x-perl pl h;
 application / prc pdb x-pilote;
 application / rar x-rar-compressé;
 application / x-redhat-package-manager rpm;
 l'application de la mer / x-mer;
 l'application swf / x-shockwave-flash;
 demande sit / x-stuffit;
 application / x-tcl tcl tk;
 application / x-x509-ca-cert crt der pem;
 demande xpi / x-xpinstall;
 application / xhtml + xml xhtml;
 demande xsl / xslt + xml;
 application / zip zip;
 text / css css;
 text / html htm html shtml;
 text / mathml mml;
 text / txt plaine;
 text / vcard vcf vcard;
 xloc texte / d'vnd.rim.location.xloc;
 texte jad / vnd.sun.j2me.app-descripteur;
 text / vnd.wap.wml wml;
 text / vtt vtt;
 text / x-composant htc;
 }

Puis redémarrez Nginx: nginx -s reload.

Via matovsky.com & wiki