Все знают, или по крайней мере слышали, что такое mobile-first | perfScan - Секреты быстрых сайтов

Все знают, или по крайней мере слышали, что такое mobile-first верстка, и что нужно начинать верстку именно с мобильной версии. А вот на вопрос "Почему" так ответить могут далеко не все. На самом деле это влияет и на быстродействие сайта, как вы уже догадались, иначе я бы про это не писал )

Давайте разберемся, как браузер обрабатывает CSS-код. Сначала происходит парсинг всех свойств, а потом применяет их по порядку соблюдая приоритеты к элементам DOM. Если мы используем не mobile first верстку, то сначала будут применены стили из десктопа ко всем элементам, и затем эти стили будут переопределены мобильными стилями из media запросов. На десктопе будет меньше действий для стилизации, чем на мобильном устройстве, хотя по скорости эти устройства с точностью наоборот Десктоп почти всегда быстрее мобильного устройства.

В мобильной верстке все наоборот, сначала применяются стили для мобильной версии, а для десктопной версии стили уже не применятся, так как не проходят по условию. Значит меньше перерисовки и меньше затрат времени на это. А значит более быстрое приложение.

Кстати, не все знают, что можно даже не грузить стили для десктопа на мобильной версии, просто указав media запрос в свойстве media у тега



Если укажете такой код, то этот файл стилей не будет загружен, пока media-запрос не станет истинным, тоесть при ширине окна менее 980 пикселей файл не будет загружен.

Современный тренд уже заставляет даже дизайнеров делать mobile first дизайн - так легче верстать и продумывать интерфейс так, чтобы не было ничего лишнего, и интерфейс было легко верстать и пользоваться им.

Я надеюсь, что вы используете только mobile first верстку и не знаете как верстать иначе? - пишите в комменты.

Ставьте лайк, если верстаете, начиная с мобильной версии, посмотрим, сколько нас )