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
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.