Как сделать, чтобы сайт быстрее загружался?
Всем доброго дня!
Изучаю верстку медленно, но не отступая от плана (ввиду большой загруженности), и заранее прошу понять и простить :)
Мой первый сайт находится в середине разработки: готовы полноценные 5 страниц (хэдеры и футеры одинаковы для каждой страницы). На сайте нет больших галерей с фотографиями и видео. Если немного JS (для бургер-меню и 1 анимации), есть 2 изображения png.
Я начала переживать, что сайт будет загружаться долго, т.к. код написан без препроцессоров и всяких gulp, просто 1 файл html, 1 файл js и 2 файла css (1 файл для стилей главной страницы и 1 файл для стилей 8 страниц каталога).
Вот такой набор.
Вопрос, который не дает мне уснуть: Будет ли все это нормально загружаться без less, sass, gulp и прочих магических программ? Что я могу сделать на данном этапе, чтобы сайт потом грузился быстрее? Может быть, конвертировать изображения, убирать вручную лишние вложенности, перестраивая структуру в html, или, может быть, есть вариант поместить код в какую-то программу, которая уберет лишние вложенности, объединит дублирующиеся свойства (один и тот же цвет и шрифт много раз, например). Я поняла, что нужно было писать через sass, но уже поздно.
Заранее благодарю за ответы!
Дополнительно:
Я начала переживать, что сайт будет загружаться долго
Не стоит переживать заранее =)
Вот когда будет тормозить, тогда и будете искать узкие места.
Спойлер: нечему у вас там тормозить.
просто 1 файл html, 1 файл js и 2 файла css
Звучит, как будто будет грузиться мгновенно
есть 2 изображения png
Если Вы экспортировали их с умом или они изначально не по много мегабайт каждая, то не страшно. Пока что по Вашему описанию это единственное потенциальное узкое место.
Можно конечно намудрить с 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 для каталога). мне показалось, что это лучше, чем писать их в общих стилях.
Структура у всех страниц примерно похожа, но большинство классов уникальны, мало тех, которые повторяются (потому что у всех блоков с текстом и картинками разное расположение на странице и отступы. Пока не придумала, как сократить количество классов..
По поводу препроцессоров: все вокруг их используют, а я еще нет, и создается впечатление, что это неправильно, и нужно тоже ими пользоваться. Как я поняла, так получается более красивый код без лишнего мусора вроде различных дубликатов.
Огромная благодарность Вам за массу полезных советов и ссылку. Буду разбираться.
Ваш труд бесценен, спасибо большое!
Ну и в целом у лайтхауса местами достаточно жёсткие требования и не всегда нужно слепо им следовать.
Говорится что картинка отдаваласьзагружалась пол секунды. Ну, с одной стороны, да, это многовато, с другой - это фоновое изображение. Оно браузером загружается с меньшим приоритетом чем контентные изображения и его загрузка не ведёт к перерасчёту разметки. Так что, будто бы не страшно. Потреблять пользователю контент не мешает. Размера картинки что-то не увидел. Но т.к. она под чёрным полупрозрачным фоном, качество ей можно и подрезать немного. Тут уже на вкус и цвет и желание заказчика.
На счёт уникальных классов если честно бегло по картинка вижу много повторяющегосяпохожереиспоьльзуемого.
Вы используете сетки? Это помогает располагать контент вроде как по-разному, но при этом не писать для каждого блока своё расположение. Сетки могут быть аля bootstrap сетка(floatflexgrid в зависимости от версии) или встроенные css grid.
Совсем без уникальных классов конечно же не обойдётся.
Можно уникальные для страницы стили вынести в отдельные файлы и подключать к странице несколько CSS. Общий и уникальный для неё.
Но это, опять же, не выглядит для Вас необходимым. Показатели хорошие.
По поводу препроцессоров: все вокруг их используют, а я еще нет, и создается впечатление, что это неправильно, и нужно тоже ими пользоваться. Как я поняла, так получается более красивый код без лишнего мусора вроде различных дубликатов.
Сильно зависит от "окружения". На западе, например, пару лет назад был тренд отказа от препроцессоров. У нас такого пока не наблюдается. Но это на самом деле и не важно. Это лишь инструмент. Знать его стоит. Как минимум для продвижения по профессиональной лестнице. Использовать везде и всюду - нет.
А получается ли более красивый код без лишнего мусора это большой вопрос. Как я сказал в первом комментарии - зависит от "шеф повара". Внешне в sass может казаться что всё красиво и аккуратно, а в результирующем CSS невероятная помойка.
Огромная благодарность, помогли во всем разобраться))
встроенные сетки css grid - где о них прочитать?
я просто создаю новые классы и пишу им, например,
display: grid;
grid-template-columns: repeat(4, 1fr), особенно если более 3 колонок и их надо будет адаптировать.
способ плох именно тем, что каждый раз приходится придумывать новые классы.
В общем, в очередной раз прошу у Вас помощи разобраться в вопросе и порекомендовать материалы про сетки, чтобы не размножать уникальные классы)
css grid это лишь возможная технология для реализации сетки. Технология, которая была для этого специально разработана.
А так почитать о сетках можно, например, тут:
https://practicum.yandex.ru/blog/chto-takoe-moduln... - в целом какую задачу решают сетки.
https://developer.mozilla.org/ru/docs/Learn/CSS/CS... - от флоатов до гридов.
способ плох именно тем, что каждый раз приходится придумывать новые классы
А не надо придумывать каждый раз) Вам нужно выделить сетку в отдельную абстракцию, не привязанную к проекту. Если проект со стороны дизайна создан по сетке. то нужно придумать один раз и везде использовать. Ну или скачать готовую "стандартную" 12ти колоночную сетку.
Попробую понять ее начать пользоваться. Спасибо большое Вам) столько всего полезного рассказываете)
Sass, less, gulp и прочие сборщики ни как, практически, не улучшат скорость загрузки. Да, через сборщики можно уменьшить тот же самый css файл посредствам минификации, но это дело другое..
В вашем случае у вас крайне мало файлов для каких-либо серьёзных проблем.
Из советов из своего опыта могу выделить следующее:
1. Разбейте css файл на важные и не особо важные части. В важном - основа страницы, сбросы стилей и т.п. В неважном - всякие красоты и т.п.
2. Сожмите все css файлы.
3. Сожмите все используемые картинки. В качестве бонуса можно сделать их в формате webp, но используйте их как запасной вариант, так как не все старые браузера поддерживают этот формат.
4. Запустите сайт и проверьте загрузку через специальные средства (Google Pagespeed, например) и встроенными средствами браузера. Так вы увидите слабые места загрузки.
5. Оптимизируйте JS скрипты, проверьте что бы они правильно подключались и загружались после прогрузки страницы.
Ответы:
объединит дублирующиеся свойства (один и тот же цвет и шрифт много раз, например)
- это в любом случае лучше сделать. Иначе после нескольких итераций изменений будут баги (да и разобраться через месяц будет сложно).
нужно было писать через sass, но уже поздно.
- не поздно. Если уже понимаете в чём плюс пре/пост процессоров, то самое время начинать. Заодно дубли в css найдёте.
сделать на данном этапе, чтобы сайт потом грузился быстрее?
Проверьте скорость загрузки и вообще как всё работает Chrome -> Dev tools -> Lighthouse. Может ничего и не нужно делать?
- спасибо большое, Lighthouse вообще чудесная вещь, теперь понятно, какие места нужно улучшать!
Просто подключи Cloudflare, он автоматом минифицирует CSS и JavaScript код + сжимает изображения. Бонусом получишь защиту сайта от атак. У них есть бесплатный тариф, пробуй.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для ускорения загрузки сайта можно применить несколько методов оптимизации. Вот некоторые из них:
1. Оптимизация изображений: Уменьшите размер изображений без потери качества с помощью специализированных программ или плагинов. Используйте форматы изображений с меньшим весом, такие как WebP. Также можно использовать lazy loading для загрузки изображений только при прокрутке страницы.
<img src="image.jpg" loading="lazy" alt="Description">
2. Кеширование: Используйте кеширование на сервере и в браузере, чтобы уменьшить время загрузки ресурсов. Это позволит браузеру сохранять копии статических файлов, таких как CSS, JavaScript и изображения, и не загружать их заново при повторном посещении сайта.
3. Минификация CSS и JavaScript: Уменьшите размер файлов CSS и JavaScript путем удаления комментариев, пробелов и лишних символов. Это позволит уменьшить объем передаваемых данных и ускорить загрузку страницы.
4. Оптимизация сервера: Используйте сжатие GZIP для сжатия передаваемых данных между сервером и браузером. Также можно настроить кэширование на стороне сервера и использовать Content Delivery Network (CDN) для распределения статических ресурсов по всему миру.
5. Удаление ненужных плагинов и скриптов: Избавьтесь от лишних плагинов и скриптов, которые замедляют загрузку сайта. Проведите аудит кода и оптимизируйте его для повышения производительности.
Соблюдение этих рекомендаций поможет значительно ускорить загрузку вашего сайта и улучшить пользовательский опыт.