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

Gzip-стиснення шрифтів EOT, TTF, WOFF і WOFF2 та інших

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

Комп'ютерний шрифт - це файл, який містить в собі опис набору буквених, цифрових, службових і псевдографічні символів, який використовується для відображення цих символів (зокрема тексту) програмою або операційною системою.

При розробці інтернет-проектів використовуються підключаються шрифти. Однак після тестування швидкості завантаження одного з сайтів інструментом PageSpeed Insights видалося повідомлення про те, що до файлу з шрифтами * .WOFF2 не застосовується Gzip-стиснення, хоча воно давно включено і налаштовано.

Як стискати подключаеммие шрифти за допомогою Gzip ми розповімо далі в нашій статті.

На сьогоднішній день в інтернеті використовуються чотири формату контейнерів шрифтів: EOT, TTF, WOFF і WOFF2. Але на превеликий жаль, як завжди це буває, не дивлячись на можливість вибору, не існує єдиного формату, який працював би у всіх браузерах:

  • EOT доступний тільки в Internet Explorer.
  • TTF підтримується в цьому браузері тільки частково.
  • WOFF поширений ширше інших, однак його не можна використовувати в деяких старих браузерах.
  • Над підтримкою WOFF 2.0 працюють в даний час.

Існує ще один формат контейнера шрифтів - SVG. Але він ніколи не підтримувався в Internet Explorer і Firefox. І зараз перестає використовуватися в браузері Chrome.

У зв'язку з цим, нам необхідно використовувати всі ці формати, щоб сторінка виглядала однаково у користувачів різних браузерів.

Продовжимо про стиснення. Так як у мене в якості фронтендів на сервері працює Nginx, а бекенда Apache, то мені досить було включити Gzip тільки в Nginx. Включається він дуже просто. Потрібно в конфігураційному файлі додати рядок:

  gzip on; 

Тепер перерахуємо Фармат файлів які нам потрібно буде стискати через Gzip:

 gzip_types
 application / atom + xml
 application / javascript
 text / javascript
 application / json
 application / ld + json
 application / manifest + json
 application / rss + xml
 application / vnd.geo + json
 font / 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
 font / 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 / x-component
 text / x-cross-domain-policy; 

В Ubuntu Server цей файл лежить тут: /etc/nginx/nginx.conf

Щоб зміни вступили в силу, перезавантажте Nginx: nginx -s reload

Про більш докладних налаштуваннях Gzip-стиснення в Nginx можете ознайомитися на офіційному сайті Nginx.

У цьому ж файлі обов'язково перевірте значення параметра gzip_types. Перш за все саме там найчастіше буває не вказано application / font-woff2, а тому цей файл шрифтів і не оброблявся Gzip-стисненням. Заодно перевірте і наявність інших форматів шрифтів:

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

Це ще не все. Тепер відкрийте /etc/nginx/mime.types і перевірте перераховані ці типи в цьому файлі. Нижче я просто наведу зміст усього цього файлу:

 types {# # Data interchange # application / atom + xml atom;  application / json json map topojson;  application / ld + json jsonld;  application / rss + xml rss;  application / vnd.geo + json geojson;  application / xml rdf xml;  # # JavaScript # application / javascript js;  # # Manifest files # application / manifest + json webmanifest;  application / x-webapp-manifest + json webapp;  text / cache-manifest appcache;  # # Media files # audio / midi mid midi kar;  audio / mp4 aac f4a f4b m4a;  audio / mpeg mp3;  audio / ogg oga 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;  video / mpeg mpeg mpg;  video / ogg ogv;  video / quicktime mov;  video / 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-icon 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.presentation pptx;  # # Web fonts # 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;  # # Other # application / java-archive ear jar war;  application / mac-binhex40 hqx;  application / octet-stream bin deb dll dmg exe img iso msi msm msp safariextz;  application / pdf 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-compressed 7z;  application / x-bb-appworld bbaw;  application / x-bittorrent torrent;  application / x-chrome-extension crx;  application / x-cocoa cco;  application / x-java-archive-diff jardiff;  application / x-java-jnlp-file jnlp;  application / x-makeself run;  application / x-opera-extension oex;  application / x-perl pl pm;  application / x-pilot pdb prc;  application / x-rar-compressed rar;  application / x-redhat-package-manager rpm;  application / x-sea sea;  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;  text / plain txt;  text / vcard vcard vcf;  text / vnd.rim.location.xloc xloc;  text / vnd.sun.j2me.app-descriptor jad;  text / vnd.wap.wml wml;  text / vtt vtt;  text / x-component htc;  } 

Після цього перезапустіть Nginx: nginx -s reload.

Via matovsky.com & wiki