Узнайте о влиянии CSS на производительность сайта. Производительность является очень важным аспектом каждого веб-приложения. Веб-страница должна быть загружена как можно быстрее, а анимация должна работать плавно. Люди очень чувствительны к любому виду движения. Для любого вида визуальных изменений на экране, таких как прокрутка, эффект наведения, открытие боковой панели и т.д., браузер будет отображать новый кадр на экране. Когда рендеринг кадра занимает больше времени, частота кадров падает, и это отрицательно влияет на работу пользователя.
Низкая частота кадров создаст плохой пользовательский опыт. Для этого не требуется сложной анимации, это может произойти при обычной прокрутке страницы!
Я уверен, что у вас уже был опыт работы с веб-сайтами с низкой частотой кадров, что вызывает такую «запаздывающую» анимацию? Вы нажимаете на что-то, открываете боковую панель, и вся страница отстает. Или, что еще хуже, вы могли заметить, что при прокрутке веб-страницы у вас запаздывает сайт. Прокрутка - это не то, о чем вы должны думать с точки зрения производительности, но вы должны это делать. Поэтому в этом курсе мы будем говорить об устранении проблем с производительностью, поэтому вы можете ожидать, что этот курс посвящен JavaScript… но удивительно, что это не так. Этот курс о CSS. Многие разработчики считают, что пока JavaScript работает хорошо, больше ничего не остается для оптимизации производительности. JavaScript оказывает большое влияние на производительность веб-сайта, однако в этой области несправедливо пренебрегают CSS. Во многих ситуациях CSS может быть единственной проблемой.
Есть еще одно очень важное влияние, которое CSS оказывает на веб-страницу.
CSS это блокировка рендера (по умолчанию). Браузер не начнет отображать страницу, пока не будет загружен весь CSS. Любые задержки на пути критического рендеринга заставят пользователей смотреть на пустой экран. CSS действительно важен, если вы хотите быстро загрузить страницу. Иногда для анализа CSS-файла требуется более 500 мс. Просто для анализа, без сети - только один CSS-файл, загруженный с жесткого диска, заставит пользователей видеть только пустой экран, пока процесс синтаксического анализа не будет завершен.
Оптимизация эффективности вашего сайта также может повлиять на алгоритм ранжирования результатов поиска Google.
В этом курсе мы покажем вам CSS в новом свете.