Как ускорить верстку сайта
Самый быстрый способ верстки?
Простой 4 комментария
Я печатаю со скоростью 250 знаков в минуту! Вот только такая херня получается (
в общем анализируй свою работу и выявляй слабые места и пытайся их исправить
+ Снипеты, emmet и быстрые клавиши
Emmet`ом пользуются все, но, зачастую, очень скудно и кусок вёрстки всё-равно руками пишут. Потому, что не знают возможности Emmet`а.
Я, например, когда надо сверстать не сильно сложную страничку, то всю страницу через одну emmet команду пилю. Конечно, пару enter`ов вставлять приходится, но что делать?)
Справочник по сокращениям emmet, на всякий случай
Вопрос верстальщикам. Как вы так быстро верстаете и не умираете от скуки?
Оценить 8 комментариев
И снова! Снова! Снова! Одни и те же действия, одни и те же свойства, одни и те же теги.
Ну и копипаста спасает. Из предыдущих проектов. Блоки похожи, многие параметры задаются через переменные препроцессора, получается копипаста с минимумом правок.
Поддерживаю каждое слово! Сам хотел подобный ответ дать))
Если скучно, идите во фронтенд. JS не даст заскучать 🙂
А так, ну что могу посоветовать:
— используйте препроцессоры, это реальное подспорье. Особенно, когда приходится много и тупо писать стили. Напишите миксины, копите их в репозитории и переиспользуйте. Чтобы написать универсальный миксин, надо постараться и подумать.
— напишите стартовый шаблон для типовой верстки. Это ооочень ускорит процесс и он не будет таким нудным
— используйте шаблонизаторы! Pug(Jade) просто отлично заходит. Пилите layout, header, footer и отдельные блоки в отдельных файлах, потом просто втыкаете на страницу. Опять же, можно писать миксины, функции и прочие вещи.
Подходите к работе с умом, а не на автоматизме. Поверьте мне, вы не умеете верстать) Это намного более обширная область, чем клепание html и css изо дня в день.
Опять же, попробуйте профилировать вашу верстку. Наверняка узнаете оочень много интересного. Например, что из за обширных анимаций отрисовка начинает тупить и нужно как то выкручиваться. В общем, много всего прикольного в верстке, стоит только включить голову
На счет цен на фрилансе верстка дешевая есть, подстать специалистам, делющих ее.
Если рассматривать лендинг, то у меня наоборот верстка будет дороже раза в 2-3, чем натяжка на cms. Бекэнд дорожает с более менее сложных заданий, типа магазинов или порталов.
Не понимаю зачем делать вновь, если он генерирует абсолютно чистый семантический код?
Экспортируй и используй. Почему с JS не дружит? Про какое меню вы говорите? И почему нельзя создать его по средством панели взаимодейстйи? Почему своё не вставить? Webflow замечаельно дружит со встроенным кодом. Вы можете прикреплять свой код к коллекциям и к обычным элементам.
Я полагаю, что вы просто пробежали глазками и не вникали в сам инструмент. Это крайне мощная вещь, которая способна создавать сложнейшие макеты, анимации, интернет магазины и блоги.
С какими проблемами вы столкнулись?
Как еще ускорить верстку?
Прошу совета у бывалых. Может есть еще какие-то фишки, о которых я не знаю, которые могут повлиять на скорость верстки? Думаю о кусках кода по типу миксинов. Буду рада любым советам.
Средний 25 комментариев
Покажите пример средней страницы. Тогда можно будет понять причину проблемы, которая может заключаться именно просто в вашей скорости работы из-за количества опыта, скорости ввода и т. п.
Например, я и мой коллега используем один и тот же набор инструментов, а я всё равно верстаю в два раз быстрее.
Korsia, а JS-функционал прокручиваете? Продумываете анимации, взаимодействия и т. п,. если это не предоставил дизайнер?
А вот так, это в целом день-полтора Большего всего меня бесит контент расставлять.
Разница — а фиг его знает.
Korsia, Три-четыре дня (по 8 часов считаю) на приведенный в качестве примера макет это многовато, как по мне. Максимум часов восемь. На крайняк десять.
Я обычно беру макет, полчасика втыкаю в него под чашечку кофе, прикидываю, как он будет выглядеть в коде. Потом Нарезка графики, всей сразу (потом удобнее автокомплитом быстро вставлять в код готовые изображения).
Далее полная разметка страницы с наполнением, без стилизации, но классы прописываю сразу (обдумал уже за чашкой кофе). Это самая нудная часть работы.
Ну и останется запустить локальный сервачок с лайфрелоадом и написать стили под все это дело. Это самая объемная часть работы, но и самая интересная.
В силу опыта многие стили пишутся на автомате, практически без участия мозга =))
Тултипы, слайдеры, стилизация инпутов, модальные окна, сетки, переменные для гибкой настройки стилей.
Vaultboy84, я бы не стал на вашем месте бросаться выражениями о недоверстальщиках. Bootstrap для кастомной разработки действительно плохо подходит.
И вот тут начинаются проблемы с Bootstrap. Дело в том, что этот фреймворк тянет за собой огромное количество глобальных классов, которые могут приводить к побочным непрогнозируемым эффектам.
Особенно много проблем возникает, когда нужно переопределить стили фреймворка для какого-то конкретного блока.
Vaultboy84 Какой-то странный ты.
Сначала расписывал какой бутстрап хороший инструмент, потом Jack_Rabbit объяснил почему это не так и ты сразу «да речь то не про бутстрап», а про что? И не надо говорить что кто-то чего-то не понимает, имхо, в данной ситуации ты не понимаешь.
Какие к чёрту «Тултипы, слайдеры, стилизация инпутов, модальные окна, сетки, переменные для гибкой настройки стилей»? Есть хорошие плагины для всего этого или это пишется всё руками. Ты не в состоянии инпут стилизовать руками? Тебе для этого нужен бутстрап? Если это так, то это тебе нужно учить матчасть.
Единственное, что меня удивило, что автор от галпа отказалась, но видимо галп использовался для совсем лёгких задач, что плагины в vscode смогли его заменить.
Все фигня. Ускорить верстку можно на порядок, если не смотришь на экран после каждого изменения.
Учитесь верстать определяя на глаз цвета, отступы, размер шрифтов и большинство вещей.
Когда верстаете, то у вас в голове должна быть картинка того, что вы пишите в css и чем больше профессионализм, тем меньше расхождения между реальностью и картинкой в голове.
Остальные вещи не так ускоряют верстку, как такой навык
Читайте дополнение и смотрите ссылку, что скинул, чтоб понять о чем говорю
Лучше разделить вёрстку на 3 этапа:
01. Пишем разметку
02. Пишем стили
03. Делаем пиксельпёрфект
Теперь подробнее:
01. Выбираем элемент, либо секцию, либо можно вообще всю страницу и пишем сразу разметку представляя в голове расположение блоков и элементов + придумываем классы для всего этого.
02. Пишем стили для разметки, но без отступов. Просто раскидываем флексами, задаём размер шрифтам и т.п.
03. Ровняем всё отступами, текст подгоняем и т.п.
В итоге, мы получаем пиксельпёрфект вёрстку без придуманных цветов и отступов на глаз и кучи правок на сдаче. Чем больше таким способом будет сделано проектов, тем быстрее будешь всё это делать.
Думаю, проблема здесь не в инструментах, а в самой скорости работы — скорость печати, умение быстро принимать решения, умение правильно раскладывать верстку на блоки, возможно, где-то пишете лишнего, когда можно просто взять либу, возможно, вы работаете на фрилансе с дизайнерами-идиотами, у которых по 40 видов стиля для заголовков.
Уверен, придет с опытом.
С инструментами у вас все хорошо. И не слушайте тут никого, кто «вертел бэм и галп».
Скорость работы определяется не только и не столько используемыми инструментами, сколько опытом верстки.
Я, например, сначала пишу весь HTML для страницы. На этом этапе я разбиваю страницу на блоки, а также продумываю как буду их верстать и адаптировать.
получили итоговый дизайн, возьмите и наглядно определите для себя прототипы (количество блоков, вложенности и прочее) потом от общего переходите к частному.
Я делаю именно так в работе. Сначала продумываю структуру, потом только берусь верстать. За счёт sass+бэм просто копирую стили для повторяющихся элементов кода и вставляю. Больше повернута на качестве, потому медленная скорость раздражает.
За счёт sass+бэм просто копирую стили для повторяющихся элементов кода и вставляю
Andrew, БЭМ подразумевает, что я не дублирую код в html. В css дублирую код. Сейчас покажу, как это выглядит.
У меня все блоки имеют стандартизированые названия. Допустим, main-header__description, main-footer__description, services__list, about__list, main-header__title, main-footer__title. И если в разных section есть одинаковые элементы по стилям, то они чаще всего носят одинаковые названия за исключением названия раздела. Я просто в sass копирую весь код начиная с апперсанта &__list/&__title (и т.д.) и переношу его в нужный раздел. Это классическая связка БЭМ+Sass.
Сетка на всех макетах разная, приходится по новой писать, да. Я миксины пока заменяю переменными. Но планирую ввести.
Сетка на всех макетах разная, приходится по новой писать, да.
Я миксины пока заменяю переменными
Денис, у Вас были такие случаи? Я вначале всё добросовестно выносила в переменные, добавляла общие классы потому что «а вдруг заказчик захочет все «___» сделать такими-то». И знаете, сколько раз мне это пригодилось? Правильно, 0. А трудозатрат больше. От того, как я делаю, общая логичность кода не меняется, только стоит угроза менять 7-8 раз одну строку в коде вместо 1го. И пока эта угроза ни разу не подтвердилась.
Верстка сильно быстро отучает быть во всём правильным и дотошным)) Потому что по большей части это никому не нужно.
И пока эта угроза ни разу не подтвердилась.
Это ты щас описала миксы, когда два класса смешиваются (.title.section__title), но в случаи, который ты описала выше можно ещё использовать и модификаторы. Ничего не придётся копировать в css, просто пишем
и в css меняем цвет, аналогично для отступов, но для отступов лучше всё-таки миксы, да.
Это правильная методика, которая не просто так была придумана. Весь смысл БЭМа теряется, если не реиспользовать стили.
Из того что я прочитал в твоих комментариях, то я думаю что ты примерно делаешь что и я в свое время.
Рекомендую связку BEM + Atomic css.
Например у тебя есть несколько блоков и них есть заголовки.
вместо:
.block1__main-title
.block2__main-title
пишешь
block1
h2 text—20 text—uppercase text—gray-lite text—space-05 mb-20
block1
P.S. Вообще лучше на живом примере посмотреть твою верстку, и дать какой то совет.
Если я правильно вижу, ты медиа пишешь в отдельном файле, лучше сразу в блоке, потом будешь много времени тратить прыгая по разным файлам.
Проект простой, но в целом все хорошо, верстка не разваливается, ошибок в консоли нет. Разметка четко по БЕМ.
Как ускорить верстку сайтов
Этот урок пригодится по большей части начинающим программистам, хотя и бывалый верстальщиксможет подчерпнуть немного мудрости из моих советов
Изучите технику слепой печати
Вся работа с кодом упирается в то, что его надо написать, и в этот момент больше всего тормозит ваша скорость набора текста, тренируйте навык слепой печати, пока не сможете в полной темноте, не видя клавиатуры, быстро писать код без ошибок
Повышает скорость примерно на 30%
Используйте препроцессоры
Когда я перешел с css на sass скорость моей верстки увеличилась примерно на 20%, а когда с scss синтаксиса я перешел на синтаксис отступов, скорость увеличилась еще на 5%
Мои рекомендации препроцессоров
Все упирается в то, чтобы писать меньше кода получая тот-же результат
Полюбите таск менеджеры
Смело могу сказать, что грамотное использование таск-менеджеров повышает скорость верстки на 100-150%, да, да
Рекомендую использовать gulp, как по мне это самый быстрый и гибкий task-manager, хотя webpack тоже не плох, но он немного непонятный и gulp гораздо проще
Используйте менеджер пакетов
Самые адекватные это bower и npm, их и советую
Увеличивает скорость на 3-5%
Создате стартовый шаблон
Стартовый шаблон, это настроенный проект для старта, в нем уже есть все что вам нужно, настроенный task-manager, normalize.css, bootstrap и так далее
Суть в том, что вы должны просто взять его, и сразу начать верстать, все, никаких потерь времени
По моим оценкам, скорость увеличивается примерно на 7-10%
Делайте заготовки
Нет ни на зиму, а на стандартные элементы, например мобильное меню, анимацию кнопок, инициализацию js-плагина
Для сохранения кусков кода советую использовать github gists
Прирост скорости 5-8%
Обновите железо
Как бы банально это не звучало, но подвисающий photoshop или долго загружающаяся система действительно отнимает у вас драгоценное время
Рекомендую брать железо примерно на 20% мощнее чем вы думаете вам понадобится
Конечно эти рекомендации только для тех кто настроен серьезно, а не пришел в программирование просто пойграться
Прирост в скорости 20-30% (при условии что вы были на слабом железе)
Используйте два монитора
В дополнение к предыдущему пункту, 2 монитора ускорят вашу работу на 20-30%, это происходит благодаря тому что отпадает необходимость переключатся между текстовым редактором и браузером
Ну что друзья, использовав все советы вы можете увеличить скорость верстки в 3 раза! Это великолепно, если у меня появятся еще советы я дополню статью, успехов!
7 советов по оптимизации CSS для ускорения загрузки страниц
В современном вебе, время загрузки страницы сайта — одна из важнейших метрик. Даже миллисекунды могу оказывать огромное влияние на Вашу прибыль и медленная загрузка страницы может легко навредить Вашим показателям конверсии. Существует много инструментов и техник, которые Вы можете применить для ускорения Вашего вебсайта. В этой статье мы рассмотрим лучшие советы по оптимизации CSS, которые Вы можете использовать для повышения производительности интерфейса.
Примечание от переводившего
Большая просьба снисходительно отнестись к замеченным ошибкам и сообщить о них.
Спасибо.
1. Найдите узкие места производительности
Самое главное при всех видах оптимизации — начать с тщательного аудита. К счастью, существует много инструментов для диагностики CSS, которые могут помочь Вам найти имеющиеся узкие места в производительности. Первое и самое главное, Вы можете использовать «Инструменты разработчика» в Вашем браузере, чтобы проверить, насколько быстро загружаются данные. В большинстве браузеров открыть «Инструменты разработчика» можно, нажав клавишу F12.
Например, в «Инструментах разработчика» браузера Firefox Вы можете узнать размер и время загрузки всех CSS-файлов, загружаемых на Вашей странице, используя закладку «Network». Вы также можете проверить, насколько быстро Ваши CSS-файлы загружаются с использованием или без использования кэширования. Поскольку здесь показываются внешние CSS, такие как файлы шрифтов Google Fonts и CSS-файлы, загруженные из сторонних CDN-серверов, Вы можете найти много источников, о которых даже не знали ранее
Pingdom Tools и Lighthouse от Google — еще два бесплатных инструмента, которые разработчики часто используют для анализа скорости сайта и производительности интерфейса. Pingdom Tools, например, даёт Вам несколько полезных советов по оптимизации CSS, при запуске простого теста скорости вебсайта.
2. Минифицируйте и сжимайте CSS-файлы
Большинство вебсайтов используют несколько CSS файлов. Хотя в большинстве случаев использование модульных CSS-файлов считается лучшим решением, загрузка каждого отдельного файла может занимать некоторое время. Но именно по этой причине существуют инструменты для минификации и сжатия CSS. Если Вы используете их с умом, это может значительно сократить время загрузки страницы.
Существуют онлайн-сервисы, такие как CSS Minify, которые позволяют Вам минифицировать CSS-файл просто скопировав его в простую форму. Такой тип сервисов может хорошо работать с небольшими проектами. Тем не менее, их использование может стать обременительным и трудоемким в ситуациях с большими проектами, которые включают множество CSS-файлов. В таких ситуациях лучше отдать предпочтение автоматизированным решениям.
В наши дни, большинство инструментов сборки позволяют выполнять сжатие автоматически. Например, Webpack по умолчанию возвращает все файлы проекта как минифицированный пакет. PostCSS также имеет умные плагины, такие как CSS Nano, которые не только минифицируют Ваши файлы, но также производят над ними множество специальных оптимизаций.
3. Используйте Flexbox и CSS Grid
Если при написании CSS Вы всё еще полагаетесь исключительно на традиционную блочную модель и выравниваете элементы на странице, используя margin, padding и float, Вам следует рассмотреть переход на более современные методы, именуемые Flexbox и CSS Grid. Они позволят Вам реализовывать сложные макеты гораздо меньшим количеством кода.
Используя старые подходы, Вам придется использовать много трюков и ухищрений даже для таких простых вещей, как центрирование элементов по вертикали. Однако, это не относится к Flexbox и CSS Grid. Хотя освоение новых подходов может занять некоторое время, оно стоит того, поскольку размер Ваших CSS-файлов будет намного меньше. Это особенно актуально для Flexbox, который на данный момент имеет очень хорошую поддержку браузерами (98.3% глобально).
Хотя CSS Grid поддерживается браузерами не так хорошо (92.03% глобально), уже можно использовать этот подход, если Вы не должны обеспечивать поддержку старых браузеров или готовы реализовать фолбек.
Существует два основных метода загрузки CSS-файлов на веб-страницу:
Когда Вы добавляете более одного CSS-файла на HTML-страницу, всегда учитывайте специфичность в CSS. Начинайте с общей таблицы стилей, а затем указывайте более специфичные. Вам нужно следовать этому принципу, потому что таблицы стилей, добавленные позже, переопределяют правила предыдущих CSS-файлов. Пример, когда CSS-файлы добавляются в правильном порядке:
5. Используйте градиенты и SVG вместо изображений
Загрузка всех изображений на веб-странице может отнимать много времени. Для сокращения этого времени, разработчики используют множество методов оптимизации изображений, таких как загрузка изображений из внешнего CDN или использование инструментов сжатия изображений, таких как TinyJPG. Эти решения могут существенно помочь, однако в некоторых ситуациях использование ресурсоёмких JPG и PNG изображений можно заменить CSS-эффектами.
Например, Вы можете использовать градиенты вместо огромных фоновых изображений, которые могут немного замедлить работу браузера посетителя Вашей страницы. Можно использовать градиентные функции CSS для создания линейных, радиальных и повторяющихся градиентов. С помощью этих встроенных в CSS функций Вы можете задавать не только цвета, но также и угол градиента.
Следующее правило, например, создаёт красивый градиентный фон, который загружается намного быстрее, чем любые изображения:
Для более сложных градиентов и текстур, Вы также можете использовать генераторы, такие как CSSmatic (на изображении ниже) и ColorZilla
Помимо градиентов, традиционные JPG и PNG изображения Вы также можете можете заменить масштабируемой векторной графикой (SVG). Она не только быстрее загружается, но также Вам требуется загрузить лишь одну версию изображения. Это обусловлено тем, что SVG-изображение может масштабироваться до любых размеров без потери качества в связи с его векторной природой. Кроме того, Вы также можете стилизовать SVG с помощью CSS, как обычный HTML-файл.
7. Рефакторинг CSS
Хотя рефакторинг CSS редко бывает легкой задачей, зачастую это может значительно повысить производительность веб-сайта. Например, когда Ваши CSS-файлы слишком большие, или Вам досталась устаревшая кодовая база, или у Вас очень плохое время загрузки страницы, что серьезно вредит Вашей конверсии. Цель рефакторинга CSS — сделать Ваш код более изящным, легко поддерживаемым и быстрее загружаемым.
Рефакторинг CSS — это многоступенчатый процесс, в ходе которого Вам нужно проанализировать каждый аспект Вашего CSS кода. Вам нужно проверить следующие моменты:
Также не забудьте использовать систему контроля версий, такую как Git. В этом случае, если что-то пойдет не так, Вы сможете вернуться к предыдущей версии кода.
Подводя итоги
Существует множество советов по оптимизации CSS, которые можно использовать для повышения производительности Вашего веб-сайта. Большинство из них просты в реализации, но могут существенно повлиять на время загрузки Вашей страницы. Более быстрая загрузка страниц не только повышает удобство использования, но также помогает улучшить позиции в Google и другие поисковых системах.
Кроме лучших практик оптимизации CSS, Вы можете использовать и другие техники ускорения загрузки, такие как кэширование, Google AMP и HTTPS протокол. Если Вы хотите узнать о них больше, можете также ознакомиться с нашей статьей 10-step guide to improve website loading speed.