Как сейчас лучше делать — один файл css и js или много мелких файлов?

Question

[VisualIdeas]

Значится так, у нас на дворе 2020 год и пора бы снова выяснить 1 вопрос (если вдруг уже было и я тупой - покажите я удалю вопрос).

как сейчас лучше делать со стороны Google SEO и PageSpeed?
1) объединять все файлы в 1 - JS, CSS и картинки в спрайт?
2) Инклудить 5-6 файлов стилей и 5-6 скриптов и каждая картинка отдельно?

Если можно то с ссылками на источники какие-то....

Answer 1

[Алексей Уколов]

Зависит от проекта, поэтому нужно пробовать разные варианты и измерять. Готового рецепта нет.
Я делал на эту тему доклад в разрезе HTTP/2: https://www.youtube.com/watch?v=rQDd5kCwDj8 Но там и в принципе про лучшие практики фронтенда много всего полезного.
В презентации куча ссылок.

Comments

[QNA-1976]

лайкнул за доклад на канале :)

[Алексей Ярков]

Однозначно лайк!

Answer 2

[Одиночка Айс]

PageSpeed за сокращение лишних ресурсов, объединение и прочее

Answer 3

[dom1n1k]

Искать баланс. Обе крайности не очень хороши.
Всё россыпью - слишком много запросов (про http/2 слышали, но в реальной жизни небольших/средних проектов че-то пока не встречали).
Объединять всё - риск получить огромный бандл, который тащит кучу лишнего и потому замедляет первичную загрузку.
Обычно имеет смысл CSS разбивать на небольшое количество бандлов по областям применения. Условный пример: глобальные стили, стили для главной и для внутренних - чтобы на главной не тянуть лишнее, но закэшировать нужное в дальнейшем. Со скриптами что-то похожее. В спрайт совать только иконки.
Ещё распространенная практика - если у вас есть критичные стили и/или скрипты, которые должны быть загружены максимально быстро, то их инклюдят прямо в тело страницы (не более нескольких КБ).

Answer 4

[Dark Znec]

Все css в один файл и в 1 строку.(либо несколько css и в каждом файле в 1 строку)
Картинки лучше просто в другой формат конвертировать, в более "лёгкий".