9

Хочется понять, насколько изменяется скорость и как влияет уменьшение количества запросов и файлов на общие показатели продвижения. Конечно каждый вопрос можно детально разбирать, но попробую конкретизировать то, что хотелось бы узнать. Итак:

1) Как в текущих условиях работать с иконками и шрифтами в целом?

Допустим у нас есть 10-20 иконок на весь проект. Есть ли смысл собирать их на Flaticon? Или лучше делать спрайты из .png, что не всегда дает возможность гибкого редактирования? Или же использовать отдельно файлами изображений? Или же смотреть в сторону svg, полностью избавляясь от файлов?

2) Насколько оправдано использование больших фреймворков (Bootstrap и прочие)?

Для большинства проектов не используется и половины того, что там собрано. Этот же вопрос можно объединить и с иконками, тот же FontAwesome.

3) Насколько влияет следование рекомендацией google по оптимизации скорости?

Я говорю о выносе части стилей в <style>...</style> и переносе оставшихся стилей/скриптов в нижнюю часть, после контента. Мне кажется, что создать крупный проект таким способом вообще не возможно, так как потребуется очень кропотливо вытаскивать стили из разных участков сайта и в итоге получится "каша".

4) Шрифты из Google Fonts лучше сохранять к себе? Или простого импорта достаточно? Насколько влияет на скорость загрузки количество подключаемых стилей шрифтов?

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

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

9
  • Очень актуально! Хотелось - бы прочитать грамотный ответ с деталями. Автору up :) 15 мар 2018 в 22:40
  • (Лучше отдельные вопросы задавать.) Как я делаю, скажу; возможно, это неправильно. // Если сайты на https и необязательна поддержка старых браузеров, то руководствуюсь HTTP/2. HTTP/2 избавляет от некоторых «костылей» в вёрстке. // 1. По возможности откажитесь или модифицируйте спрайты. 16 мар 2018 в 5:12
  • 1
    // 2. Если эффективные, удобные в использовании и не тормозят страницу, то почему бы и нет. Для удаления неиспользуемых стилей применяю PurifyCSS. // 3. То, что у Вас описано, на «костыль», похоже. Вероятно, будущее за асинхронной загрузкой стилей через link rel="preload", которое начали поддерживать почти все современные браузеры. 16 мар 2018 в 5:13
  • // 4. Просто подгружаю через <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Your+Font">. Когда тестировал свой сайт, на скорость загрузки страницы Google Fonts особо не влияли. // Спасибо. 16 мар 2018 в 5:13
  • 2
    Лучше не заморачиваться, ибо ваша работа не окупится: деньги, которые можно потратить на продвижение напрямую гораздо лучше сработают, нежели деньги на вашу работу для оптимизаций. Конечно у всего есть пределы - если лендос грузит 30 Мб контента: это надо выправлять бесспорно. Производительность - это конечно хорошо, для неё вынесите весь контент в CDN, на этом я бы закончил 20 мар 2018 в 11:25

4 ответа 4

4

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

  • Форматы картинок на продвижение не влияют. Влияют подписи, title и shema.
  • Инкубаторские сайты, типа Bootstrap, продвигаются хуже. Кастомизируйте верстку.
  • Быстрое отображение первого экрана для продвижения не критично. Важнее скорость отдачи документа, его вес и отсутствие ошибок. У Google под ускоренную загрузку специально есть технология Amp. В Yandex аналог это Турбо-страницы.
  • Шрифты лучше грузить с серверов Google, поскольку они находятся в CDN. То есть ближе к пользователю, чем ваш сайт.
3
  • Достаточно размытый ответ. Про формат картинок я не спрашивал. опрос был про иконки и делать их через img точно не стоит. О том, что лучше не подключать больших библиотек на индивидуальные проекты я и так знаю, у меня под это дело собственный минимальный набор. Вопрос был в том, насколько сильно влияет. Когда используешь любой шаблон с Themeforest или занимаешься оптимизацией чужого проекта, видишь там десяток увесистых библиотек, из которых и половина не требуется под конкретный проект. Нужно ли их чистить, перерабатывая структуру или оставляя выборочно стили? Насколько это оправдано. 18 мар 2018 в 14:34
  • AMP или Турбо-страницы - это немного иное направление, направленное сугубо под мобильный трафик. По шрифтам, вопрос был скорее о количестве шрифтов. Менять ли дизайн в угоду меньшего количества вариаций шрифтов? 18 мар 2018 в 14:39
  • @AlexeyGiryayev а что много кастомных шрифтов? 19 мар 2018 в 10:37
2
+50

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

Для автоматизации работы со стилями и библиотеками, особенно если нужно всё собрать в одном файле, можно использовать сборщики. Например webpack, или rollup. Заметим что в них входят алгоритмы вырезания неиспользованного кода. TreeShake и DeadCodeElimination.

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

Фреймворки бывают разные, например есть фреймворки для создания одностраничных приложений, например Vue.js. По сути создать одностраничник без использования специальных фреймворков не получится, я пробовал ))

А без таких фреймворков как bootstrap вполне можно обойтись. Думаю тут каждая ситуация индивидуальная.

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

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

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

1

Дополню насчет иконок.

Первое - запихать их в SVG и вставлять в нужное место с помощью use xlink. Плюс: универсальность. Минусы: не поддерживается в старых браузерах, занимает сравнительно много места в коде, некоторые трудности при задавании цвета.

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

Третье - сложить иконки в одну большую картинку и подставлять нужную с помощью background-position или другими ухищрениями. Плюсы: можно использовать многоцветные иконки. Минусы: изменить цвет нельзя (или путем хитрых манипуляций с фильтрами), манипулирование размерами затруднено, возня с позиционированием не очень удобна.

Какой метод использовать - зависит от ситуации. Например, если есть ограничение на размеры стилей, то удобнее фонт.

5
  • Можете уточнить какие "трудности при задавании цвета"?
    – Arthur
    22 мар 2018 в 16:12
  • Например, использование свойства fill вместо color - вроде бы ничего, но могут потребоваться лишние телодвижения, если, скажем, код генерируется на лету, ибо color в SVG - это кое-что другое. Необходимость задавать свойство svg path {fill: inherit;} для SVG-шки, у которой цвет пути (векторного контура) задан, чтобы потом отрабатывали задаваемые свойством fill цвета. 22 мар 2018 в 16:23
  • Так в чём сложность или затруднения?:))
    – Arthur
    22 мар 2018 в 16:31
  • Пример: у вас скрипт циклом проходит по всем элементам с классом icon и делает их красными. Часть элементов .icon - фонт, часть - svg, причем содержащий текст, который трогать нельзя. Иконкам, которые фонт, нужно менять цвет свойством color, а svg-шкам - свойством fill, а color трогать нельзя. Объяснять, что именно добавится в скрипт на каждой итерации цикла и как это отразится на производительности? 22 мар 2018 в 16:46
  • Нет, необязательно
    – Arthur
    22 мар 2018 в 16:49
0
  1. Отсрочьте загрузку контента, когда есть такая возможность.
  2. Используйте отдельные JS и CSS файлы
  3. Используйте системы кэширования
  4. Избегайте изменения размеров изображений в HTML
  5. Не используйте изображения для показа текста
  6. Оптимизируйте размеры изображения благодаря использованию правильного формата файла
  7. Оптимизируйте метод написания кода
  8. Загружайте JavaScript в конце документа
  9. Используйте сеть доставки контента (Content Delivery Network, CDN)
  10. Оптимизируйте веб-кэширование

обо всем это Вы можете подробно почитать на Хабре

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.