perfScan - Секреты быстрых сайтов

\n\nтребует наличия загруженного jQuery, и вызовет ошибку, если у подключения jQuery написать defer. \n\nОдин из самых простых способов: использовать base64 и тот же defer для всех скриптов. Давайте превратим этот инлайн скрипт в base64 и подключим как через data, на которые этот defer распространяется\n\n\n\nДа, браузеру придется декодировать base64, однако вам не придется следить за порядком выполнения, это сделает сам браузер. Да, это не самый оптимальный вариант - самый оптимальный переписать все нормально. Но если вы ограничены во времени/бюджете, то это неплохой вариант снять блокировку на первую отрисовку, улучшить #FCP, возможно #LCP и ничего не сломать на сайте.\n\nДа, поддерживать такой код невозможно, поэтому нужно сделать так, чтобы вся работа происходила на бакенд и разгрузить фронт, улучшив первую отрисовку.\n\n🔥 Дайте огня, если было полезно, или 👍 палец вверх, если уже использовал данный метод.\n💬 Коммент, если хотите поддержать автора и улучшить его код.","datePublished":"2023-05-22T07:25:12Z","dateModified":"2023-05-22T07:25:12Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":11,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":649},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":11}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/68","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/68","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/68","headline":"perfScan - Секреты быстрых сайтов","datePublished":"2023-05-19T07:21:05Z","dateModified":"2023-05-19T07:21:05Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":5,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":773},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":5}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/67","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/67","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/67","headline":"👋 Многие из вас просили меня сделать слайдер, который не будет менять DOM и вызывать перерисовку при инициали…","articleBody":"👋 Многие из вас просили меня сделать слайдер, который не будет менять DOM и вызывать перерисовку при инициализации. Я и сам давно обещал вам такой слайдер, очень давно, даже стыдно, но все никак не мог добраться до него. Поэтому я решил попросить помощи у (внезапно) Bing, который работает на GPT-4, и… получилось нечто невероятное!\n\nБлагодаря множеству уточнений и итераций, Bing написал за меня почти весь код, который работает как мне хотелось и выглядит вполне прилично. Это не готовая библиотека, конечно, но для одного слайдера на странице вполне подходит, и его можно адаптировать под свои нужды. Я намеренно не стал приводить стилистику кода к единому формату, чтобы можно было видеть еще и результат работы нейросети.\n\nЯ лишь немного подправил оформление точек под слайдером, общий layout, прописал url для картинок и добавил заголовок и футер. Все остальное - заслуга нейросети. Я уже пробовал ранее использовать Bing и ChatGPT для написания кода, но такого успеха еще не было. Я потратил 10 минут, писал только запросы с телефона, при этом сам не писал код, а говорил что и как улучшить. Почти как в повседневной жизни, где я консультирую команды и даю рекомендации по улучшению быстродействия сайтов.\n\nВ итоге мы имеем слайдер, который полностью соответствует моим требованиям, не меняет DOM и не вызывает перерисовку при инициализации, и даже частично работает без JS. Это ли не чудо? )\n\n✅ Ссылка на код слайдера.\n\nЕсли кто-то захочет - можете улучшить его и упаковать в универсальную библиотеку, если пришлете ее мне - я с радостью расскажу о ней.\n\n🔥 Зажгите огонь для Bing, или 👍 палец вверх за мои запросы и уточнения )\n💬 Напишите в комментариях, что вы думаете об этом слайдере и о Bing конечно же.","datePublished":"2023-04-11T07:38:49Z","dateModified":"2023-04-11T07:38:49Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":16,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":755},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":16}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/66","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/66","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/66","headline":"⚡️ Хорошая новость для всех, кто заботится о скорости работы своего сайта, и для всех, кто не может отказатьс…","articleBody":"⚡️ Хорошая новость для всех, кто заботится о скорости работы своего сайта, и для всех, кто не может отказаться от счетчика Яндекс-Метрики, но проблемы с производительностью возникают именно в нем. Код подключаемого бандла теперь opensource.\n\nЧто это значит? По ссылке доступен исходных код и правила для сборки кода бандла яндекс-метрики. Даже просто отключив поддержку очень старых браузеров и разместив его у себя, мы получим улучшение быстродействия. Дерзайте, я тоже проведу эксперименты со своей стороны.\n\nПодробнее в статье на хабре, там описано как работает код, что можно менять, и как отключить ненужные функции.\n\n⚠️ Обратите внимание, запросы отправляются к яндексу, поэтому еще одно соединение никуда не денется. Чтобы от него избавиться на клиенте, рекомендую использовать проксирование, о котором я писал ранее.\n\n💬 Что думаете по этому поводу? Будете ли использовать собсвтенную сборку или останетесь на стандартном бандле, подключаемом с серверов яндекса?\n\n👍 Палец вверх, если вы уже подключаете свою версию метрики в основной бандл.","datePublished":"2023-02-17T13:09:12Z","dateModified":"2023-02-17T13:09:12Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":854},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":20},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/65","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/65","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/65","headline":"⚡️ Сегодня ночью Lighthouse был обновлен до 10 версии. ‼️ Важные изменения: 1. Time To Interactive (TTI) боль…","articleBody":"⚡️ Сегодня ночью Lighthouse был обновлен до 10 версии.\n\n‼️ Важные изменения:\n\n1. Time To Interactive (TTI) больше не учитывается при общей оценке производительности. В восьмой версии его влияние уже было снижено до 10%, а теперь он и вовсе не участвует в формировании оценки. Показатель все равно рассчитывается и можно его получить в json отчете.\n \n2. Влияние Cumulative Layout Shift (CLS) усилено c 15% до 25%. Именно он получил те самые 10% от TTI.\n\n3. Добавлен новый аудит bfcache, это проверка как браузер обрабатывает навигацию вперед/назад, такие страницы должны быть показаны моментально. Но этот аудит не будет отображаться в Google PageSpeed Insights. Доступ к нему можно получить через JSON.\n\nТакже был переработан механизм сборки, изменены названия аудитов в JSON, некоторые аудиты вообще удалены. Подробнее можно ознакомиться на Github проекта и в нашем любимом калькуляторе общей оценки.\n\n⚠️ Из идентификации User-Agent убрали \"Chrome-Lighthouse\", теперь не получится по этому параметру скрывать часть контента или отдавать облегченную версию.\n\n💬 Давайте обсудим в комментариях.\nЧто вы думаете о текущих изменениях?\nОбращали ли вы последнее время внимание на TTI?\nНе считаете ли завышенным влияние CLS?\n\n🔥 Дайте огня за оперативность.","datePublished":"2023-02-10T02:41:51Z","dateModified":"2023-02-10T02:41:51Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":20,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":746},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":20}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/64","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/64","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/64","headline":"perfScan - Секреты быстрых сайтов","datePublished":"2023-01-27T13:03:45Z","dateModified":"2023-01-27T13:03:45Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":40,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":787},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":25},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":40}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/63","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/63","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/63","headline":"👋 Всем привет! Телеграм бот прислал статистику канала, и мне стало так стыдно, что ничего не писал последние…","articleBody":"👋 Всем привет!\n\nТелеграм бот прислал статистику канала, и мне стало так стыдно, что ничего не писал последние месяцы. Спасибо, что верили в меня и канал, спасибо что не отписались. Вы крутые, а я не могу выкроить полчаса на пост. Но это все конечно опрадания. Скорее это какой-то страх исписаться. И привет, моему синдрому самозванца.\n\n🙈 Минус 500 человек, но огромное спасибо всем, кто остался. Обещаю уже в январе выпустить два бомбезных поста.\n\n🎄 Ну и по традиции: год был сложный, будет еще сложнее, не разбегайтесь далеко.\n\n🎉 С Наступающим 2023 годом! Берегите себя!","datePublished":"2022-12-29T14:28:19Z","dateModified":"2022-12-29T14:28:19Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":14,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":854},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":14}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/62","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/62","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/62","headline":"❗️ В 101 версии Google Chrome появилась новая возможность управлять приоритетами, причем более понятная, чем…","articleBody":"❗️ В 101 версии Google Chrome появилась новая возможность управлять приоритетами, причем более понятная, чем раньше. Представьте, что у любого загружаемого ресурса: картинки, стилей скриптов, или даже iframe, можно указать приоритет загрузки и тем самым более гибко управлять всем процессом загрузки. Интересно?\n\nИмя этому свойству fetchpriority. Пока поддержка крайне мала, и надеяться только на него нельзя, но это уже большой шаг в сторону нативного управления приоритетами. Для того, чтобы использовать его, просто добавляете у нужного html-элемента fetchpriority=\"low|high|auto\" и загрузка ресурсов будет выстроена исходя из этих приоритетов.\n\n\n\n\nВ этом случае первой будет загружена картинка, которая является LCP-элементом.\n\n⚠️ Самое главное - не ставить всем ресурсам маскимальный приоритет, это не ускорит загрузку.\n\n💬 Пишите в комменты, слышали вы про этот способ управления приоритетом раньше, и будете ли использовать его в своем проекте?\n\n👍 Лайк, если было полезно.","datePublished":"2022-08-18T13:52:35Z","dateModified":"2022-08-18T13:52:35Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":15,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1330},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":15}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/61","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/61","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/61","headline":"Привет, сегодня покажу пример бесконечной бегущей строки на чистом css без использования JS. Совсем недавно а…","articleBody":"Привет, сегодня покажу пример бесконечной бегущей строки на чистом css без использования JS. Совсем недавно анализировал сайт, где было две бегущих строки в разные стороны с логотипами партнеров и сделана она была на JS при помощи GSAP - это достаточно мощная библиотека, и позволяет делать сложные анимации просто и быстро, но как мы с вами знаем, ничто не сравнится по скорости с нативным функционалом браузера. Поэтому я покажу реализацию этого функционала вообще без использования JS. Но в отличии от сайта, где я увидел логотипы, здесь они будут останавливаются при наведении.\n\n✅ Ссылка на codepen\n\n💬 Пишите, используете ли вы подобные элементы на сайте.\n\n👍 Лайк, если полезно. 🔥 Огонь если хотите больше постов с примерами кода.","datePublished":"2022-08-16T08:51:21Z","dateModified":"2022-08-16T08:51:21Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":14,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":940},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":24},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":14}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/60","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/60","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/60","headline":"❗️ Для того, чтобы сделать пометку в браузере пользователя, например о том, что он согласился с тем, что на с…","articleBody":"❗️ Для того, чтобы сделать пометку в браузере пользователя, например о том, что он согласился с тем, что на сайте используются Cookie часто ставят cookie. Странно, не правда ли? Сегодня расскажу почему это плохо, и чем лучше заменить.\n\nНачнем с того, что каждая кука отправляется на сервер с каждым запросом. В нашем примере пусть это будет \"cookies-popup-close=1; \" и в каждый запрос на сервер, даже при загрузке картинки будет отправлена эта самая кука. Казалось бы, всего 22 символа, но при 50 запросах на странице это уже 1 килобайт информации, если глубина просмотра сайта в среднем 3 страницы на посетителя и суточной посещаемости в 5000 человек это уже 16 мб ненужной информации которую получил сервер и обработал. А если посещаемость больше? А если кука не одна? Посчитайте сами, сколько лишней информации обрабатывает ваш сервер ежемесячно.\n\nДля очень грубых посчетов можно использовать такую формулу:\n\ndocument.cookie.length * performance.getEntries().filter(e => e?.name.indexOf('http') === 0 && location.host === new URL(e?.name).host).length\n\nВыполните этот код в консоли браузера на своем сайте прямо сейчас. На сайте одного из клиентов вышло примерно 170 кб cookies на каждую страницу. Это конечно приблизительно, данные сжимаются, и часть этих данных нужна, но 99% случаев это лишняя информация которая передается с каждым запросом.\n\nРаньше выносили статику на отдельный поддомен, куки на него не распространялись и не передавались, но это +1 соединение, а как мы помним соединение самая ресурсоёмкая операция.\n\n⚠️ Как предлагаю делать я: используйте localStorage для данных, которые устанавливаются и считываются только в JS. Если данные используются на backend, то тогда запрещайте к ним доступ из JS. Еще увеличите безопасность.\n\nlocalStorage.setItem('cookies-close','1');\nlocalStorage.getItem('cookies-close');\n\nДанные не уходят, и не мешают загрузке, и из js их можно получить одной командой без плясок с бубном в виде парсера.\n\n💬 А как вы относитесь к Cookies? Используете localStorage?\n\n👍 Лайк, если было полезно","datePublished":"2022-08-12T15:03:04Z","dateModified":"2022-08-12T15:03:04Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":14,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":998},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":14}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/59","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/59","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/59","headline":"❗️ Вчера мы говорили про mobile first верстку, и я рассказывал, что переопределения десктопных стилей мобильн…","articleBody":"❗️ Вчера мы говорили про mobile first верстку, и я рассказывал, что переопределения десктопных стилей мобильными - это плохо для быстродействия. Сегодня я расскажу про переопределение стилей вообще, не только в мобильной версии. \n\nЧастая ситуация, когда на проекте подключается стили от bootstrap, затем контент стилизуется и меняется так как задумал дизайнер темы, и после этого еще одни стили перебивают какой-то или дочерней темой или внесением правок в существующую. Итого некоторые элементы могут иметь очень много переопределений.\n\nСовсем недавно я работал с проектом, где стили занимали 4 мб, и при этом неиспользумых почти небыло! У каждого DOM элемента было по несколько десятков переопределений. Представьте объем вычислений для перерисовки, которые выполняет браузер, при добавлении класса к такому элементу.\n\nЧем больше объем стилей и чем больше элементов в DOM, тем дольше происходит первичная отрисовка и каждая перерисовка, которая может инициализироваться при любой манипуляции с DOM. Но при этом переопределение - это не баг а фишка, которая позволяет писать меньше кода.\n\n⚠️ Лучшим выходом является не использовать готовую сетку, типа бутстрап, если будут переписаны свойства у большинства селекторов. Используйте свою сетку в таком случае. При верстке используйте стандарт БЭМ, благодаря нему можно выполнять минимальное число переопределений. Можно сверстать даже так, чтобы модификаторы не выполняли ни одного переопределения. Вычищайте стили, у элементов, если вы видите слишком много переопределений. Можно даже в тестах написать проверку для таких ситуаций.\n\nЯ один раз задался целью сверстать страницу без единого переопределения, это возможно, но при этом появляется дублирование кода, что также не очень хорошо, поэтому во всем нужно искать баланс. Не все переопределения - это зло, но если их у элемента больше 5, то это точно повод переверстать этот участок кода.\n\n💬 А вы провряете верстку на количество переопредлений - напишите об этом\n\n👍 Ставьте лайк, если после прочтения проверили свой последний проект )","datePublished":"2022-08-10T15:42:09Z","dateModified":"2022-08-10T15:42:09Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":45,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":850},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":45}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/58","url":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/58","mainEntityOfPage":"https://telemetr.io/ru/channels/1705525836-perfscan/posts/58","headline":"❗️ Все знают, или по крайней мере слышали, что такое mobile-first верстка, и что нужно начинать верстку именн…","articleBody":"❗️ Все знают, или по крайней мере слышали, что такое mobile-first верстка, и что нужно начинать верстку именно с мобильной версии. А вот на вопрос \"Почему\" так ответить могут далеко не все. На самом деле это влияет и на быстродействие сайта, как вы уже догадались, иначе я бы про это не писал )\n\nДавайте разберемся, как браузер обрабатывает CSS-код. Сначала происходит парсинг всех свойств, а потом применяет их по порядку соблюдая приоритеты к элементам DOM. Если мы используем не mobile first верстку, то сначала будут применены стили из десктопа ко всем элементам, и затем эти стили будут переопределены мобильными стилями из media запросов. На десктопе будет меньше действий для стилизации, чем на мобильном устройстве, хотя по скорости эти устройства с точностью наоборот Десктоп почти всегда быстрее мобильного устройства.\n\nВ мобильной верстке все наоборот, сначала применяются стили для мобильной версии, а для десктопной версии стили уже не применятся, так как не проходят по условию. Значит меньше перерисовки и меньше затрат времени на это. А значит более быстрое приложение.\n\nКстати, не все знают, что можно даже не грузить стили для десктопа на мобильной версии, просто указав media запрос в свойстве media у тега \n\n\n\nЕсли укажете такой код, то этот файл стилей не будет загружен, пока media-запрос не станет истинным, тоесть при ширине окна менее 980 пикселей файл не будет загружен.\n\n⚠️ Современный тренд уже заставляет даже дизайнеров делать mobile first дизайн - так легче верстать и продумывать интерфейс так, чтобы не было ничего лишнего, и интерфейс было легко верстать и пользоваться им.\n\n💬 Я надеюсь, что вы используете только mobile first верстку и не знаете как верстать иначе? - пиши в комменты.\n\n👍 Ставь лайк, если верстаешь, начиная с мобильной версии, посмотрим, сколько нас )","datePublished":"2022-08-09T16:35:55Z","dateModified":"2022-08-09T16:35:55Z","author":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"publisher":{"@type":"Organization","name":"perfScan - Секреты быстрых сайтов","url":"https://telemetr.io/ru/channels/1705525836-perfscan","image":"https://img.tlmtr.io/c/1Rqdbe/5194917224488484172?ty=x"},"commentCount":16,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1012},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":38},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":16}]}}]}