#шрифты #оптимизация_сайтов #иконки #поисковая_оптимизация
Хочется понять, насколько изменяется скорость и как влияет уменьшение количества
запросов и файлов на общие показатели продвижения. Конечно каждый вопрос можно детально
разбирать, но попробую конкретизировать то, что хотелось бы узнать. Итак:
1) Как в текущих условиях работать с иконками и шрифтами в целом?
Допустим у нас есть 10-20 иконок на весь проект. Есть ли смысл собирать их на Flaticon?
Или лучше делать спрайты из .png, что не всегда дает возможность гибкого редактирования?
Или же использовать отдельно файлами изображений? Или же смотреть в сторону svg, полностью
избавляясь от файлов?
2) Насколько оправдано использование больших фреймворков (Bootstrap и прочие)?
Для большинства проектов не используется и половины того, что там собрано. Этот же
вопрос можно объединить и с иконками, тот же FontAwesome.
3) Насколько влияет следование рекомендацией google по оптимизации скорости?
Я говорю о выносе части стилей в и переносе оставшихся стилей/скриптов
в нижнюю часть, после контента. Мне кажется, что создать крупный проект таким способом
вообще не возможно, так как потребуется очень кропотливо вытаскивать стили из разных
участков сайта и в итоге получится "каша".
4) Шрифты из Google Fonts лучше сохранять к себе? Или простого импорта достаточно?
Насколько влияет на скорость загрузки количество подключаемых стилей шрифтов?
Иногда в дизайне используются заголовки с засечками, а основной шрифт - без. Выходит,
нужно подключать 2 разных шрифта, да еще и с разными стилями, что резко повышает количество
файлов подгружаемых в целом.
Список можно продолжать, но, это вот прям основное, что терзает мою душу.
Ответы
Ответ 1
Если исходить из влияния на продвижение сайта этих факторов, то по собственному опыту
могу порекомендовать:
Форматы картинок на продвижение не влияют. Влияют подписи, title и shema.
Инкубаторские сайты, типа Bootstrap, продвигаются хуже. Кастомизируйте верстку.
Быстрое отображение первого экрана для продвижения не критично. Важнее скорость отдачи
документа, его вес и отсутствие ошибок. У Google под ускоренную загрузку специально
есть технология Amp. В Yandex аналог это Турбо-страницы.
Шрифты лучше грузить с серверов Google, поскольку они находятся в CDN. То есть ближе
к пользователю, чем ваш сайт.
Ответ 2
Некоторые вещи лучше делать как удобнее, так как время программиста и вообще человека
очень ценно. Если делать какие-то сложные манипуляции с картинками, стилями, которые
существенно затруднят задачу поддержания и разработки сайта, то этого делать точно
не стоит.
Для автоматизации работы со стилями и библиотеками, особенно если нужно всё собрать
в одном файле, можно использовать сборщики. Например webpack, или rollup. Заметим что
в них входят алгоритмы вырезания неиспользованного кода. TreeShake и DeadCodeElimination.
Так же если сразу работать со стилями правильно, то потом выносить из одного места
в другое не придётся.
Фреймворки бывают разные, например есть фреймворки для создания одностраничных приложений,
например Vue.js. По сути создать одностраничник без использования специальных фреймворков
не получится, я пробовал ))
А без таких фреймворков как bootstrap вполне можно обойтись. Думаю тут каждая ситуация
индивидуальная.
Конечно использование большой библиотеки ради пары функций из неё, по моему мнению
смысла нету, лучше тогда эти функции копировать себе, или написать свои версии, в интернете
легко найти код наиболее употребимых функций.
Выпиливать из библиотек лишние функции это издевательство над собой... конечно если
фреймворки разрешает покомпонентную сборку, то почему бы и нет, но вручную делать точно
не стоит, так как это часы, дни и недели потраченного времени в пустую, при этом при
выходе новой версии пакета всё придётся делать повторно.
И ещё, лично моё мнение что прямо уж из-за каждого байта библиотек бороться не стоит,
ведь внешние, подключаемые библиотеки на один клиент подгружаются только один раз,
а дальше они берутся из кэша, пока кэш не сбросится.
Ответ 3
Дополню насчет иконок.
Первое - запихать их в SVG и вставлять в нужное место с помощью use xlink.
Плюс: универсальность.
Минусы: не поддерживается в старых браузерах, занимает сравнительно много места в
коде, некоторые трудности при задавании цвета.
Второе - запихать иконки в фонт (файл шрифта), подгрузить этот фонт в стилях, а в
коде задавать элемент с нужным символом.
Плюсы: универсально, удобно, быстро, легко менять цвет, поддерживается даже антиквариатом.
Минусы: требует усилий по изначальному созданию фонта, в код нужно добавлять элемент
или псевдоэлемент с символом, нельзя сделать разноцветными.
Третье - сложить иконки в одну большую картинку и подставлять нужную с помощью background-position
или другими ухищрениями.
Плюсы: можно использовать многоцветные иконки.
Минусы: изменить цвет нельзя (или путем хитрых манипуляций с фильтрами), манипулирование
размерами затруднено, возня с позиционированием не очень удобна.
Какой метод использовать - зависит от ситуации. Например, если есть ограничение на
размеры стилей, то удобнее фонт.
Ответ 4
Отсрочьте загрузку контента, когда есть такая возможность.
Используйте отдельные JS и CSS файлы
Используйте системы кэширования
Избегайте изменения размеров изображений в HTML
Не используйте изображения для показа текста
Оптимизируйте размеры изображения благодаря использованию правильного формата файла
Оптимизируйте метод написания кода
Загружайте JavaScript в конце документа
Используйте сеть доставки контента (Content Delivery Network, CDN)
Оптимизируйте веб-кэширование
обо всем это Вы можете подробно почитать на Хабре
