Сжатие шрифтов через Gzip (EOT, TTF, WOFF и WOFF2)

Gzip-сжатие. Необходимые настройки

В настоящий момент я работаю сразу над несколькими интернет-проектами. В некоторых из них я использую подключаемые шрифты. Однако после тестирования скорости загрузки одного из сайтов Google-овским инструментом PageSpeed Insights я был удивлен, когда мне выдалось сообщение о том, что к файлу с шрифтами *.WOFF2 у меня не применяется 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

Рейтинг: 4.8 (21 проголосовавших)
Sending
  • Ольга Катанугина

    Спасибо за подробную статью. Но у меня проблема. Не знаю, как подключить сжатие шрифтов, если сервер Apache2.

    • У меня в качестве фронтэнда Nginx. Однако чисто теоретически, чтобы включить сжатие шрифтов через Apache2 нужно проделать следующее. Откройте свой файл .htaccess. Я так полагаю в секции у Вас уже включено сжатие скриптов и стилей. Поэтому просто добавьте туда следующее:


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

      Изменений Вы скорее всего при тестах сразу не увидите. Нужно будет подождать, а потом ещё раз протестировать через PageSpeed Insights.
      Отпишитесь если заработало.