ExEr7um
@ExEr7um
Фронтендер

Как уменьшить размер шрифтов?

Главная часть вебсайта — конструктор, в котором пользователь сам создает дизайн халата. Он пишет надпись, после выбирает для нее шрифт. На выбор 6 разных шрифтов, которые не имеются в Windows и macOS по дефолту. На Google Fonts их тоже нет, поэтому они просто лежат в папке fonts и подгружаются вместе с загрузкой сайта. Из-за этого сайт грузится около 30 секунд, а сама папка шрифтов весит в несколько раз больше чем весь остальной сайт, включая изображения. Как это можно исправить? Выбор шрифта надписи по-любому должен остаться, так как это основная функция сайта.
  • Вопрос задан
  • 300 просмотров
Решения вопроса 1
Сделайте динамическую подгрузку данных. Пользователь выбрал шрифт -> загрузили его через ajax.
Примерно так ->
const url = 'https://fonts.googleapis.com/css?family=Oswald'

const button = document.querySelector('button')
button.addEventListener('click', event => {
    fetch(url)
        .then(response => response.text())
        .then(font => {
    	    const style = document.createElement('style')
    	    style.innerHTML = font

            document.head.appendChild(style)
    })
})


Потому что пользователю может совсем не нужен конструктор, он пришел почитать только о продукте, а вы грузите ему 6 шрифтов. А если потом надо будет поддерживать не 6 а 50?

Посмотрите на google fonts. Они загружают 20 шрифтов перед открытием страницы, а она грузится за 2 секунды.
5b69f90343abd543052508.png
Потому что загружают не весь шрифт, а часть. Можете в network посмотреть. Если начать писать в превьюшке то загрузится весь шрифт

Сначала так ->
5b69f9f790d9b599912283.png
Потом так ->
5b69fa014169d151391998.png
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
ruvasik
@ruvasik
https://www.bryce.ru
Никак не исправить – сделать прелоадер на время загрузки всего этого.
Ответ написан
sotvm
@sotvm
Умный поймёт , а дураку и так всё равно.
в хэде ,подключи только нужное
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы