Всем доброго дня!
Изучаю верстку медленно, но не отступая от плана (ввиду большой загруженности), и заранее прошу понять и простить :)
Мой первый сайт находится в середине разработки: готовы полноценные 5 страниц (хэдеры и футеры одинаковы для каждой страницы). На сайте нет больших галерей с фотографиями и видео. Если немного JS (для бургер-меню и 1 анимации), есть 2 изображения png.
Я начала переживать, что сайт будет загружаться долго, т.к. код написан без препроцессоров и всяких gulp, просто 1 файл html, 1 файл js и 2 файла css (1 файл для стилей главной страницы и 1 файл для стилей 8 страниц каталога).
Вот такой набор.
Вопрос, который не дает мне уснуть: Будет ли все это нормально загружаться без less, sass, gulp и прочих магических программ? Что я могу сделать на данном этапе, чтобы сайт потом грузился быстрее? Может быть, конвертировать изображения, убирать вручную лишние вложенности, перестраивая структуру в html, или, может быть, есть вариант поместить код в какую-то программу, которая уберет лишние вложенности, объединит дублирующиеся свойства (один и тот же цвет и шрифт много раз, например). Я поняла, что нужно было писать через sass, но уже поздно.
Заранее благодарю за ответы!
Если Вы экспортировали их с умом или они изначально не по много мегабайт каждая, то не страшно. Пока что по Вашему описанию это единственное потенциальное узкое место.
Можно конечно намудрить с JS кодом, чтоб он блокировал отрисовку или написать трилион малополезных строк CSS но маловероятно, исходя из вашего описания, что Вы действительно так сделали.
Я начала переживать, что сайт будет загружаться долго, т.к. код написан без препроцессоров и всяких gulp
Технологии, с помощью которых написан и "собран" код лишь косвенно влияют на скорость загрузки.
Даже если бы Вы написали на всём самом современном и продвинутом - это не дало бы гарантий что сайт бы не тормозил (если мы говорим про что-то более менее сложное).
1 файл для стилей 8 страниц каталога
Если у этих страниц одинаковый шаблон, но просто разный контент - то значит страница, по факту, одна - "каталог".
И тогда это нормальное.
Но если все 8 страниц больше отличаются по структуре\стилю чем похожи, то тогда 1 общий файл стилей для них может быть некоторой проблемой, так как будет раздутым и это место для оптимизации - разбить его на несколько файлов.
Вопрос, который не дает мне уснуть: Будет ли все это нормально загружаться без less, sass, gulp и прочих магических программ
Все эти "магические" программы на выходе дают самый обычный HTML, CSS и JS. Они помогают в написании кода, а вот то, какой будет результат, зависит только от того, как был код написан. Они не мешают сделать Вам плохо. Более того, если Вы плохо разобрались с этими технологиями, то при их использовании проще сделать плохо, чем без них.
Это не значит что не нужно их изучать. Наоборот. Нужно. Но нужно прям разбираться и понимать какой инструмент что и как делает, чтобы не накосячить.
Может быть, конвертировать изображения
Может быть. Вы не показываете не изображений, да и ссылке не даёте. Но, повторюсь, если изображения изначально нормального размера и веса, то это скорее будет лишним.
убирать вручную лишние вложенности
Лишней вложенности конечно стоит избегать, но так же не стоит жить на поводу у страха что Вы написали слишком много кода. Врядли Вы руками смогли столько разметки написать, чтоб браузер начал тормозить. Это нужно постараться.
объединит дублирующиеся свойства (один и тот же цвет и шрифт много раз, например)
Опять же, нам сложно сказать без примера насколько это Вам необходимо, но можете попробовать воспользоваться css.github.io/csso/csso.html, например.
Я поняла, что нужно было писать через sass, но уже поздно.
Вадим, Спасибо Вам огромное за такой понятный и развернутый ответ!
По совету я воспользовалась Lighthouse, который мне показал Largest Contentful Paint 2,4 сек., что не очень здорово для такого скромного сайта. Самый крупный элемент на сайте - это background (url) в стилях. Значит, нужно его сжимать, да?
Изображения я беру из бесплатных ресурсов (freepic), т.к. своих фото нет, а чужое брать нехорошо, или нужно указывать источник.
Еще забыла сказать, что есть 2 файла медиазапросов (1 для главной страницы и 1 для каталога). мне показалось, что это лучше, чем писать их в общих стилях.
Структура у всех страниц примерно похожа, но большинство классов уникальны, мало тех, которые повторяются (потому что у всех блоков с текстом и картинками разное расположение на странице и отступы. Пока не придумала, как сократить количество классов..
По поводу препроцессоров: все вокруг их используют, а я еще нет, и создается впечатление, что это неправильно, и нужно тоже ими пользоваться. Как я поняла, так получается более красивый код без лишнего мусора вроде различных дубликатов.
Огромная благодарность Вам за массу полезных советов и ссылку. Буду разбираться.
Ваш труд бесценен, спасибо большое!
Анна, У Вас достаточно хорошие показатели Lighthouse. Не много сайтов (в процентах) могли бы похвастаться подобными результатами.
Ну и в целом у лайтхауса местами достаточно жёсткие требования и не всегда нужно слепо им следовать.
Говорится что картинка отдавалась\загружалась пол секунды. Ну, с одной стороны, да, это многовато, с другой - это фоновое изображение. Оно браузером загружается с меньшим приоритетом чем контентные изображения и его загрузка не ведёт к перерасчёту разметки. Так что, будто бы не страшно. Потреблять пользователю контент не мешает. Размера картинки что-то не увидел. Но т.к. она под чёрным полупрозрачным фоном, качество ей можно и подрезать немного. Тут уже на вкус и цвет и желание заказчика.
На счёт уникальных классов если честно бегло по картинка вижу много повторяющегося\похоже\реиспоьльзуемого.
Вы используете сетки? Это помогает располагать контент вроде как по-разному, но при этом не писать для каждого блока своё расположение. Сетки могут быть аля bootstrap сетка(float\flex\grid в зависимости от версии) или встроенные css grid.
Совсем без уникальных классов конечно же не обойдётся.
Можно уникальные для страницы стили вынести в отдельные файлы и подключать к странице несколько CSS. Общий и уникальный для неё.
Но это, опять же, не выглядит для Вас необходимым. Показатели хорошие.
По поводу препроцессоров: все вокруг их используют, а я еще нет, и создается впечатление, что это неправильно, и нужно тоже ими пользоваться. Как я поняла, так получается более красивый код без лишнего мусора вроде различных дубликатов.
Сильно зависит от "окружения". На западе, например, пару лет назад был тренд отказа от препроцессоров. У нас такого пока не наблюдается. Но это на самом деле и не важно. Это лишь инструмент. Знать его стоит. Как минимум для продвижения по профессиональной лестнице. Использовать везде и всюду - нет.
А получается ли более красивый код без лишнего мусора это большой вопрос. Как я сказал в первом комментарии - зависит от "шеф повара". Внешне в sass может казаться что всё красиво и аккуратно, а в результирующем CSS невероятная помойка.
Вадим, все-таки уточню у Вас еще один момент, пользуясь случаем)
встроенные сетки css grid - где о них прочитать?
я просто создаю новые классы и пишу им, например,
display: grid;
grid-template-columns: repeat(4, 1fr), особенно если более 3 колонок и их надо будет адаптировать.
способ плох именно тем, что каждый раз приходится придумывать новые классы.
В общем, в очередной раз прошу у Вас помощи разобраться в вопросе и порекомендовать материалы про сетки, чтобы не размножать уникальные классы)
Анна, Вам в целом нужно почитать про сетки, не обязательно про именно css grid.
css grid это лишь возможная технология для реализации сетки. Технология, которая была для этого специально разработана.
способ плох именно тем, что каждый раз приходится придумывать новые классы
А не надо придумывать каждый раз) Вам нужно выделить сетку в отдельную абстракцию, не привязанную к проекту. Если проект со стороны дизайна создан по сетке. то нужно придумать один раз и везде использовать. Ну или скачать готовую "стандартную" 12ти колоночную сетку.
Вадим, спасибо большое! 12-ти колончатую сетку использую в макете в фигме. осталось только понять, как сделать сетку в html. Из bootstrap скачала, но поняла, что там слишком много кода, и я скорее в нем запутаюсь, чем он мне чем-то поможет. Попробую придумать свою) Буду изучать материалы, благодарю Вас за помощь, огромное-огромное спасибо!
Анна, Своя сетка это хорошо для опыта. Для работы лучше использовать проверенные сообществом решения. У бутстрапа можно скачать только сетку, без всего остального что он предлагает. Уметь верстать по бутстрапа сетке тоже пригождается в работе.
Вадим, это наверное сетка, которая сразу с адаптивом идет, на флексбоксе, да?
Попробую понять ее начать пользоваться. Спасибо большое Вам) столько всего полезного рассказываете)
Sass, less, gulp и прочие сборщики ни как, практически, не улучшат скорость загрузки. Да, через сборщики можно уменьшить тот же самый css файл посредствам минификации, но это дело другое..
В вашем случае у вас крайне мало файлов для каких-либо серьёзных проблем.
Из советов из своего опыта могу выделить следующее:
1. Разбейте css файл на важные и не особо важные части. В важном - основа страницы, сбросы стилей и т.п. В неважном - всякие красоты и т.п.
2. Сожмите все css файлы.
3. Сожмите все используемые картинки. В качестве бонуса можно сделать их в формате webp, но используйте их как запасной вариант, так как не все старые браузера поддерживают этот формат.
4. Запустите сайт и проверьте загрузку через специальные средства (Google Pagespeed, например) и встроенными средствами браузера. Так вы увидите слабые места загрузки.
5. Оптимизируйте JS скрипты, проверьте что бы они правильно подключались и загружались после прогрузки страницы.
Просто подключи Cloudflare, он автоматом минифицирует CSS и JavaScript код + сжимает изображения. Бонусом получишь защиту сайта от атак. У них есть бесплатный тариф, пробуй.
Средний
