|
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-web-app-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
Created/Updated: 25.05.2018