Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Захватывающая аркада-лабиринт по мотивам культовой игры восьмидесятых. Управляйте желтым человечком, ешьте кексы и постарайтесь не попадаться на глаза призракам.

Пикман

Аркады, На ловкость, 2D

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Optimization

7 постов сначала свежее
3
aks2dio
aks2dio
10 месяцев назад

Заметка про коллизии⁠⁠

Заметка про коллизии Разработка, Unity, Gamedev, Блог, Обучение, Физика, Математика, Оптимизация, Optimization, Программирование

🎱 Встретил серию из двух статей про реализацию просчёта коллизий.
Конечно, про «шарики». И многие, кто имеет профильное образование, наверняка это всё уже не раз видели и делали.
❗️Но среди начинающих игроделов нынче очень много людей из других сфер или пока ещё без должного образования.

💡И вот для них здесь много интересного:
- Как вообще устроен просчёт коллизий;
- Как происходит процесс оптимизации и как понять, что оптимизировать;
- Как всё усложняется по мере масштабирования исходных условий;
- Зачем нужны знания математики и алгоритмов;
- Что такое O(n) и как применяется.

🏞 В статьях используется клёвая графика и прикольные интерактивные элементы, которые можно подвигать, и увидеть работу алгоритма. Это, вкупе с простым понятным ёмким повествованием, делает материал увлекательным и доступным для понимания широкому кругу читателей.

👍 Мне очень понравился стиль автора, и я хочу прийти к чему-то такому же. Попробовав свои силы, могу оценить, сколько трудов было вложено в подготовку этого материала — отличный контент и ориентир для совершенствования.

—————————————

#gamedev #development #physics #math #unity #optimization #геймдев #разработка #физика #оптимизация #математика #рекомендация #статья

Показать полностью
[моё] Разработка Unity Gamedev Блог Обучение Физика Математика Оптимизация Optimization Программирование
2
31
UnrealNinja
UnrealNinja
1 год назад
Лига Разработчиков Видеоигр

Топ 17 практик оптимизации игры⁠⁠

Игрокам нравится играть в хорошие игры которые не тормозят на их железе. Но разработчики зачастую совершают одни и те же ошибки, которые ведут к низкому фпс (частота кадров в секунду) в игре.

Чтобы игра не тормозила, нужно её оптимизировать!

Топ 17 практик оптимизации игры Unreal Engine, Optimization, Gamedev, Видео, YouTube, Длиннопост
  1. Профайлинг (Profiling)

Самое важное при тестировании - это измерение показателей. Что именно в игре работает хорошо, а что именно тормозит и почему? Изучите в официальной документации какие вам доступны профайлеры, и как с ними работать.

В движке Unreal Engine самый полезный профайлер - Unreal Insights.

https://docs.unrealengine.com/5.3/en-US/testing-and-optimizing-your-content/

https://docs.unrealengine.com/5.3/en-US/unreal-insights-in-unreal-engine/

2. Настройка среды под тесты производительности

Во время профайлинга вы будете сравнивать старые и новые результаты измерений.

Чтобы было проще замерять показатели рендера, можно расставить на карте (Map/Level) в нескольких местах Камеры (Camera Actor), и записывать показатели с этих камер. В итоге у вас будут максимально достоверные результаты измерений нагрузки на GPU.

Для замера нагрузки на CPU, имеет смысл изолировать объекты/акторы (Blueprint Actor) на отдельной не-игровой карте. В этом варианте на CPU не будут влиять другие системы игры/другие блюпринт-акторы, и вы получите точные замеры производительности.

В мультиплеер-играх можно записывать повторы (replays) и использовать их для профилирования. С таким подходом не нужно будет лишний раз собирать игроков онлайн для сетевого теста.

3. Задумывайтесь об оптимизации с первого дня разработки

Если вы задумали, что игра будет работать в 60 фпс на консолях или ПК, то на протяжении всего процесса разработки нужно стремиться к этому показателю. Не обязательно всегда держать частоту кадров на уровне 60 кадров в секунду, но рекомендуется стремиться хотя бы к 55 кадрам на ранних стадиях разработки. Это даст уверенность в том, что игра точно будет хорошо работать, и позволит вам избежать кранчей на финальных стадиях разработки.

4. «Сколько всего» в игре

В начале разработки игры обычно определяют количество «сколько всего» в игре будет главных героев, персонажей одновременно на экране, интерактивных и других объектов.

Если персонаж всего один, то не смысла в лишней оптимизации. Но когда на экране одновременно дерутся 10 персонажей, тогда нужно быть осторожным в использовании слишком детальной анимации, слишком детальной физике и слишком непроизводительном коде.

Если в игре планируется 100 персонажей, то об этом нужно знать и помнить с самого начала разработки. В этом случае нельзя откладывать оптимизацию на потом. Если персонажей в игре тысячи, то разработку игры сразу нужно делать на C++, а не на Блюпринтах.

5. Scene Components - тяжёлые

Каждый тик в игре происходит обновление всех Акторов, Компонентов и их дочерних Компонентов. Будьте осторожны с большими иерархиями компонентов.

Очень часто разработчики навешивают на машину и на модульного-персонажа кучу компонентов, а потом удивляются, что производительность упала.

Иногда стоит рассмотреть возможность объединения Акторов, Мешей (Static Mesh) и Скелетал-мешей (Skeletal Mesh) с помощью инструментов объединения. В Unreal Engine для этого есть Merge Tool.

https://docs.unrealengine.com/5.3/en-US/merging-actors-in-unreal-engine/

6. Избегайте в Блюпринтах функции Tick

Функция Tick в Блюпринтах значительно медленнее, чем в C++. Например, 100 пустых Акторов, в которых ничего не происходит, просто так тратят 1 миллисекунду процессорного времени. Если нужен Актор с функцией Tick, то желательно чтобы класс этого Актора был написан на C++. В Блюпринтах можно пользоваться Таймерами или Таймлайнами (Timeline) для временных эвентов (Time Events).

7. Включайте/отключайте Tick во время игры

Во время игры нам не всегда нужны «тикающие» Акторы. Убедитесь что Акторы и их Компоненты «тикают» только тогда, когда это действительно нужно. Пользуйтесь функцией SetActorTickEnabled.

8. Снижайте Tick Rate

Большинству Акторов в игре ну нужно «тикать» раз 60 в секунду. Многие из них прекрасно работают и с более низким Tick Rate. Этот параметр можно менять прямо во время игры. Хорошей практикой будет снизить Tick Rate до 2 раз в секунду, пока объект не «активируется», тогда можно увеличить Tick Rate до максимума.

Например, Актор - Дверь или Лифт. Пока этот Актор находится в состоянии покоя, у него Tick Rate = 2. Когда мы подошли к этому Актору, пересекли его коллизию, то у него Tick Rate = 0, что значит Актор «тикает» на полной скорости.

9. LOD для логики

Если вы работаете над ролевой игрой, то хорошая практика - иметь значительно упрощенного Актера для ваших NPC. Когда игрок приближается, он заменяется на правильного актера NPC с хорошей анимацией и более сложной логикой. Также рассмотрите возможность отключения физики движущихся объектов, которые находятся слишком далеко, чтобы игрок мог на них повлиять.

10. «Не работай, если не смотрят»

Подумайте о том, чтобы проверить, влияет ли что-то на игрока, и просто не делайте этого, если игрок этого не увидит. Объекты, находящиеся далеко от игрока, не должны создавать эффекты частиц или звуки, поскольку игрок их не увидит и не услышит.

Топ 17 практик оптимизации игры Unreal Engine, Optimization, Gamedev, Видео, YouTube, Длиннопост

11. Упрощение репликации

Сеть движка Unreal собирает объекты, находящиеся рядом с игроком, а затем проверяет их на наличие измененных свойств. Стоимость проверки измененных свойств во многом зависит от количества Акторов/Компонентов, а не от количества реплицируемых свойств. Лучше иметь PlayerCharacter со 100 реплицируемыми свойствами вместо PlayerCharacter + 9 компонентов по 10 реплицируемых свойств каждый. Это противоречит хорошей архитектуре, но нет хорошего способа обойти это.

https://cedric-neukirchen.net/docs/category/multiplayer-network-compendium/

12. Пул Акторов

В Unreal Engine создание (Spawn) Акторов очень медленный. Если для снарядов/пуль и взрывов постоянно Спавнить Акторы, то это создаст слишком большую нагрузку на Сборщик Мусора (Garbage Collector, GC).

Сборка мусора в Unreal Engine: https://habr.com/ru/articles/661469/

13. Аккуратнее с анимацией

Анимация в Unreal Engine - это известный Боттлнэк (узкое место, Bottleneck). Когда смешиваете анимации в АнимБП (AnimBP, Animation Blueprint), следите чтобы использовался быстрый путь (маленький значок молнии). Предпочитайте использовать State Machine вместо смешивания анимации через Blend.

Топ 17 практик оптимизации игры Unreal Engine, Optimization, Gamedev, Видео, YouTube, Длиннопост

https://docs.unrealengine.com/5.3/en-US/animation-blueprints-in-unreal-engine/

14. Избегайте Overlap-events для движущихся объектов

Каждый компонент у которого включены Оверлап-события (Overlap-events, одна коллизия перекрывает другую коллизию), будет проверять физические перекрытия каждый раз при движении. Такие события могут срабатывать несколько раз за время 1 Draw Call.

Основное использование Оверлап-событий — для триггеров, которые определяют персонажа игрока.

Предпочитайте использовать трассировки лучей/сфер, вместо Оверлапов для снарядов/пуль и оружия, где это возможно.

15. Минимизация количества трансформаций

Каждый раз, когда вы вызываете SetLocation или SetRotation, Unreal Engine обновляет всю цепочку преобразований, и если есть физические объекты, он обновляет физику. Необходимо стремиться к строго ОДНОМУ вызову SetLocation или связанным с ним вызовам на каждый кадр движущихся объектов.

Движок Unreal имеет вызовы SetTransform и SetActorLocationAndRotation, которые позволяют изменять вращение и местоположение за один вызов вместо двух. Вызов SetActorLocationAndRotation в два раза быстрее, чем вызов SetLocation и SetRotation по отдельности.

16. Объединение логики Акторов в Менеджеры

Наличие одного Актора-Менеджера, который управляет группой других Акторов, зачастую быстрее, чем наличие у них собственной логики.

Если у вас будет большое количество чего-либо, вероятно, будет хорошей идеей объединить их с помощью какого-нибудь «менеджера», который будет обновлять все объекты. Отличные кандидаты для группировки в Менеджер: снаряды, показатели урона или некоторые части логики ИИ. Это хорошо сочетается с идеей «LOD для логики».

17. Граф репликации в Мультиплеере

Граф репликации (Replication Graph) сделали для оптимизации производительности сервера в Fortnite. Он позволяет вам переопределить логику «какие объекты имеют отношение к этому игроку». Благодаря этому, можно динамически изменять скорость обновления сети для каждой зоны на карте. И определить какие объекты находятся в диапазоне репликации.

В ShooterGame есть его полная реализация. В проекте можно найти интересные вещи, например, граф репликации ограничивает частоту обновления PlayerInfo. При каждом обновлении отправляются только данные двух игроков.

https://docs.unrealengine.com/4.27/en-US/Resources/SampleGames/ShooterGame/

При правильном использовании графа репликации вы сможете сделать игру на 200 или более игроков в многопользовательской игре.

https://docs.unrealengine.com/5.3/en-US/replication-graph-in-unreal-engine/

---
Оригинальная статья: https://dev.epicgames.com/community/learning/tutorials/3o6/expert-s-guide-to-unreal-engine-performance

Показать полностью 2 6
[моё] Unreal Engine Optimization Gamedev Видео YouTube Длиннопост
4
1
aurfon
aurfon
7 лет назад

Front-end - оптимизация - шрифты⁠⁠

Привет.

Продолжим.


Напомню, что не все советы подойдут всем. Всё же лучше перед внедрением в реальный проект потестировать, посмотреть как повлияла "оптимизация".

## Удаление неиспользуемых символов или сегментирование файла

Часто бывает, что шрифт содержит в себе кириллицу, латиницу и всякое другое. Если на твоём сайте требуется только определенный набор символов, то есть, ты не ожидаешь, что на сайте появятся иероглифы, то неиспользуемые символы можно удалить.


Уменьшить размер файла можно как в несколько кб, так и 90% файла. Всё зависит от файла шрифта и количестве символов в нём.


Для удаления символов используй fontmin. Он же конвертирует файл в нужные расширения, то есть можно взять один .ttf файл и сгенерить .eot, .svg, .woff, с удалёнными символами, к сожалению в .woff2 конвертировать он ещё не научился, поэтому можно использовать ttf2woff2


Также инструмент поможет разбить один тяжеловесный файл на несколько маленьких. Например, один файл будет с кириллицей, другой с латиницей, третий с китайскиеми иероглифами.


Я для примера брал OpenSans размеров 178kb, оставил только кириллицу, латиницу и весь нужный набор знаков. После удаления ненужных мне символов файл стал весить 9kb. Разница колоссальная.


Будь аккуратен можно угробить хинтинг. Для того, чтобы не убить хинтинг надо тонко настраивать fontmin, для каждого шрифта индивидуально. Поэтому рецепта у меня для тебя нет.

## unicode-range

Браузеру можно подсказать какие символы шрифта используются на сайте/странице, допустим, только кириллица или вообще какой-то символ.


Пример для кириллицы


```

@font-face {

font-display: swap;

font-family: 'Lato';

src: url('/fonts/lato-light/lato-light.rus.woff2') format('woff2'), url('/fonts/lato-light/lato-light.rus.woff') format('woff');

font-weight: 300;

font-style: normal;

unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица

}

```


unicode-range - задает определенный диапазон символов, которые будут использоваться из шрифта, определенных в @font-face и доступны для использования на текущей странице. Если на странице не используется символ в этом диапазоне, шрифт не загружается; если он использует хотя бы один, загружается весь шрифт.


Таблица unicode-символов


P.S. на этом про оптимизацию шрифтов всё. Ещё есть общие методы оптимизации. которые затрагивают шрифты, но об этом расскажу в следующих частях.

Показать полностью
Frontend Optimization Шрифт Текст
7
Партнёрский материал Реклама
specials
specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст
12
aurfon
aurfon
7 лет назад

Front-end - оптимизация - шрифты - рендеринг⁠⁠

Привет.


Давай продолжим оптимизировать шрифты.


# Рендеринг шрифта в браузере

Рендеринг шрифтов в разных браузерах происходит по разному.


Хромиумы ничего не показывают, ждут 3 секунды и если шрифт загрузился, то показывают текст (FOIT), иначе системный.


IE/EDGE - ничего не ждёт, сразу показывает системный шрифт, и после завершения загрузки шрифта перерендеривает шрифт (FOUT).

## FOIT

FOIT (Flash of Invisible Text) — букв. «мелькание невидимого текста», когда во время загрузки веб-шрифта текст не отображается вообще, а после рендерится загруженный шрифт;

## FOUT

FOUT (Flash of Unstyled Text) — букв. «мелькание неоформленного текста», когда во время загрузки веб-шрифта текст отображается шрифтом по умолчанию (напр. системным); (лучше FOIT)

## FOFT

FOFT (Flash of Faux Text) — букв. «мелькание синтезированного текста», когда в промежутке между загрузкой основного веб-шрифта и его вариаций (жирный, курсив и т.д.) вместо этих вариаций браузер отображает особым образом измененный основной шрифт (так называемый «ложный жирный» и «ложный курсив». (чуть лучше FOUT)

## Лучшего варианта нет.

Каждый сам для себя решит как лучше, но можно точно сказать, что это не FOIT.


FOIT заставляет пользователя ждать и ничего не делать некоторое время.


FOUT даёт как можно быстрое взаимодействие с сайтом, но спустя время, когда шрифт загрузится, происходит перерисовка всего шрифта, которое даёт "скачок сайта".


FOFT это тоже самое, что и FOUT, но "скачков сайта" происходит несколько. Т.к. вначале загружается основное начертание шрифта, а остальные (жирное и наклонное) спустя время.

## Font-display

Самым современным вариант будет использовать новое css-свойство font-display.

Поддержка маленькая, но ничего не мешает начать применять его. Браузеры, которые не понимают данное свойство, просто проигнорируют его.

Front-end - оптимизация - шрифты - рендеринг Frontend, Optimization, Шрифт, Длиннопост

Новое свойство имеет несколько значений:

* auto - Использует поведение браузера по умолчанию. Обычно это поведение ‘block’.

* block - Устанавливает короткий период блокировки (3 секунды) и бесконечный период замены.

* swap - Устанавливает период блокировки в 0 секунд и бесконечный период замены.

* fallback - Устанавливает очень короткий период блокировки (100 мс или меньше) и короткий период замены (3 секунды).

* optional - Устанавливает очень короткий период блокировки (100 мс или меньше) и период замены в 0 секунды.


В этом видео очень подробно показано как это работает в живую.

### Периоды

* Период блокировки шрифта

Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен с невидимым запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.


* Период подмены шрифта

Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.


* Период отказа шрифта

Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.

### Применение


```

@font-face {

font-display: swap;

font-family: "opensans";

src: url("/fonts/OpenSans/Regular/OpenSans-Regular.woff2") format("woff2"),

url("/fonts/OpenSans/Regular/OpenSans-Regular.woff") format("woff");

font-weight: 400;

}

```


Самым часто применимым является значение - swap. По желанию конечно же можно сменить значение на выгодное вашему проекту.


Очень интересным является значение - optional. В этом случае, если шрифт не успел загрузится за 100ms, то рендеринг шрифта отменяется. Пользователь видит какой-нибудь системный шрифт, то есть может взаимодействовать с сайтом (да не красиво, ничего страшного) Шрифт при этом грузится в фоне. Позже при обновление страницы, шрифт оказывается в кеше и в этом случае происходит рендеринг.

## Font face observer

Если font-display не поддерживается, то без javascript не обойтись.

### Как браузер понимает, когда нужно загрузить шрифт?

Во-первых у шрифта самый высокий приоритет загрузки

Front-end - оптимизация - шрифты - рендеринг Frontend, Optimization, Шрифт, Длиннопост

Если ты подключаешь шрифт с помощью font-face и в стилях есть обращение к шрифту, то загрузка начнётся как можно быстрее. Всё зависит от того, где ты подключаешь стили, это может быть после блокирующего скрипта, что откладывает загрузки и стилей и шрифта.


В идеальном мире это проиходит вот так

1) DOMContentLoaded

2) Загрузка стилей

3) Если есть обращение к семейству шрифта, то загрузка шрифта


Что значит "Если есть обращение к семейству шрифта"?


Допустим, ты объявляешь шрифт


```

@font-face {

font-family: "OpenSans";

src: url('/path/fonts/OpenSans.woff2') format("woff2"),

url('/path/fonts/OpenSans.woff') format("woff")

}

```


а дальше в своих css-файлах нигде к нему не обращаешься, то загрузка шрифта не произойдёт. В этом просто напросто нет смысла и браузер следит за таким поведением.


Вернёмся к javasctipt.


В head секцую нащей страницы добавляем fontfaceobserver и подключим нужные шрифты с помощью плагина.


```

<head>

<script src="path/to/fontfaceobserver.js"></script>

<script>

var openSans = new FontFaceObserver('opensans', {weight: 400});


Promise.all(openSans.load()).then(function() {

document.documentElement.className += 'font-loaded';

});

</script>

</head>

```


Подлючаем одно или несколько начертаний шрифта. И как только они загрузятся добавляем класс font-loaded к тегу html.


В стилях делаем следующий трюк:


```

// список системных шрифтов пополярных операционных систем

html {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",

"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

}


html.font-loaded {

font-family: "opensans", sans-serif;

}

```


Вначале показываем системные шрифты! Они кстати в современном мире достаточно красивые и удовлетворяют потребности дизайнера. После того как Javascript добавит класс font-loaded, подключаем "opensans".

P.S. это серия постов про оптимизацию. Про шрифты ещё будет дополненение, но не хотелось бы уйти за лимит поэтому решил разбить на несколько частей.

Показать полностью 2
Frontend Optimization Шрифт Длиннопост
8
5
aurfon
aurfon
7 лет назад

Front-end - оптимизация - шрифты - выбор формата⁠⁠

# Привет.

Веб любит оптимизированное. Давай оптимизируем загрузрузку и рендеринг шрифтов настолько насколько это возможно.


_В современном вебе до сих пор не решена проблема рендера шрифта, поэтому разработчику надо думать как же это сделать самым лучшим образом для пользователя._


## Существующие форматы

На данный момент существуте четыре формата шрифтов


* eot

* ttf

* woff

* woff2


### Поддержка в браузерах

eot - 3.41%

Front-end - оптимизация - шрифты - выбор формата Frontend, Optimization, Шрифт, Длиннопост

ttf - 94.73%

Front-end - оптимизация - шрифты - выбор формата Frontend, Optimization, Шрифт, Длиннопост

woff - 94.36

Front-end - оптимизация - шрифты - выбор формата Frontend, Optimization, Шрифт, Длиннопост

woff2 - 78.53

Front-end - оптимизация - шрифты - выбор формата Frontend, Optimization, Шрифт, Длиннопост

Из этой статистики сразу можно сделать несколько выводов *

1) От eot стоит отказаться, так как поддержка только в Internet Explorer

2) От ttf тоже можно отказаться так как есть пересечение с woff контейнером

* - каждый сам знает своего пользователя и решает какие ему шрифты подключать. Если твой пользователь это Internet Explorer 8, то возвращай eot.

## Вес шрифта

Я рассматривал вес шрифта на примере OpenSans Regular, но соотношение подойдёт для любого шрифта.


woff и woff2 являются оптимизированными контейнерами для веба и поэтому весят меньше.


eot - 106.4kb - 0

ttf - 106.3kb - 0.09%

woff - 63.7kb - 40.13%

woff2 - 47kb - 55.83%

## Подключение шрифта на страницу @font-face

Подключать шрифты надо правильно. Да! шрифт можно подключить не правильно.


@font-face {

font-family: "OpenSans";

src: url('/path/fonts/OpenSans.woff2') format("woff2"),

url('/path/fonts/OpenSans.woff') format("woff"),

url('/path/fonts/OpenSans.ttf') format("ttf"),

url('/path/fonts/OpenSans.eot') format("eot")

}


Здесь стоит обратить внимание на порядок подключения форматов.


Браузеры которые понимают woff2 начнут загружать woff2 версию шрифта и остальные не тронут.


Браузеры которые не понимают woff2 продолжат далее по списку woff, ttf, eot.

## Итого

Если возможно отказывайся от eot и ttf форматов.

Это достаточно устаревшие форматы и наврядли придуманные для веба. Весят гораздо больше, чем современные контнейры. Поддержка у eot крайне маленькая.


Используем только woff и woff2.

woff2 и woff весят гораздо меньше eot и ttf, что ускоряет загрузку шрифта на сайте и начало его отрисовки.

У woff2 доля в браузерах достаточно маленькая, что легко компенсируется woff форматом.

P.S. это серия постов про оптимизацию. Про шрифты ещё будет дополненение, но не хотелось бы уйти за лимит поэтому решил разбить на несколько частей.

Показать полностью 4
[моё] Frontend Optimization Шрифт Длиннопост
7
lolwhatt
lolwhatt
8 лет назад

Когда ты разработчик Mafia III.⁠⁠

Mafia 3 Optimization Когда ты разработчик Видео
1
jetsnake
10 лет назад

Если тормозит GTA5.⁠⁠

С этим драйвером исчезли фризы/лаги на 4Gb оперативки.
Если тормозит GTA5. С этим драйвером исчезли фризы/лаги на 4Gb оперативки.
GTA 5 Nvidia Optimization Драйвер
7
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии