Оптимизация CSS и javascript на сайте
Несомненным трендом конца того и началом этого года является ускорение работы сайта. Если раньше ускорение работы сайта рекомендовалось специалистами по usability, мол, медленно работающий сайт отпугивает пользователя, то сейчас об ускорении работы сайта начали говорить seo оптимизаторы. Есть мнение, что скорость работы сайта уже учитывается поисковыми системами с целью оценки качественности и авторитетности сайта. Возникает вопрос, как мы можем простыми средствами сократить время загрузки сайта?
Помимо ранее упомянутых спрайтов, еще одним решением будет оптимизация JS и CSS файлов. Первое, все JS и CSS файлы сайта могут быть обледенены в один большой JS и один большой CSS файл. Данная мера сократит количество обращений к серверу, что в свою очередь сократить время загрузки сайта. Второе, код данных файлов может быть сокращен за счет удаления пробелов и специальных символов, а так же оптимизации кода, что сократит размер файла, и так же поможет улучшить показатели скорости загрузки сайта.
Как и при любой оптимизации перед любыми изменениями необходимо измерить (замерить) первоначальные значения. Посмотреть количество запросов к серверу и количество загружаемого кода можно через онлайн сервисы, например pingdom.com или воспользоваться расширением для Chrome и Firefox под названием Yslow.
После проведения контрольных замеров можно начать объединять файлы, соединяя JS файлы в один JS файл, а CSS файлы в один CSS файл. При этом придется вносить изменения в коды разных сниппетов, которые самостоятельно подгружают файлы javascript и файлы стилей в шаблоны. Когда все файлы будут объединены необходимо проверить их работоспособность. Осуществить проверку JS файлов проще всего используя консоль в Chrome (F12 — Консоль), которая сразу сообщит о возникновении ошибок при обработке скриптов.
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% глобально), уже можно использовать этот подход, если Вы не должны обеспечивать поддержку старых браузеров или готовы реализовать фолбек.
4. Используйте тег вместо правила @import
Существует два основных метода загрузки CSS-файлов на веб-страницу:
- добавить в раздел HTML-страницы, используя тег
- импортировать из других таблиц стилей, используя CSS-объявление @import
Когда Вы добавляете более одного CSS-файла на HTML-страницу, всегда учитывайте специфичность в CSS. Начинайте с общей таблицы стилей, а затем указывайте более специфичные. Вам нужно следовать этому принципу, потому что таблицы стилей, добавленные позже, переопределяют правила предыдущих CSS-файлов. Пример, когда CSS-файлы добавляются в правильном порядке:
5. Используйте градиенты и SVG вместо изображений
Загрузка всех изображений на веб-странице может отнимать много времени. Для сокращения этого времени, разработчики используют множество методов оптимизации изображений, таких как загрузка изображений из внешнего CDN или использование инструментов сжатия изображений, таких как TinyJPG. Эти решения могут существенно помочь, однако в некоторых ситуациях использование ресурсоёмких JPG и PNG изображений можно заменить CSS-эффектами.
Например, Вы можете использовать градиенты вместо огромных фоновых изображений, которые могут немного замедлить работу браузера посетителя Вашей страницы. Можно использовать градиентные функции CSS для создания линейных, радиальных и повторяющихся градиентов. С помощью этих встроенных в CSS функций Вы можете задавать не только цвета, но также и угол градиента.
Следующее правило, например, создаёт красивый градиентный фон, который загружается намного быстрее, чем любые изображения:
Для более сложных градиентов и текстур, Вы также можете использовать генераторы, такие как CSSmatic (на изображении ниже) и ColorZilla
Помимо градиентов, традиционные JPG и PNG изображения Вы также можете можете заменить масштабируемой векторной графикой (SVG). Она не только быстрее загружается, но также Вам требуется загрузить лишь одну версию изображения. Это обусловлено тем, что SVG-изображение может масштабироваться до любых размеров без потери качества в связи с его векторной природой. Кроме того, Вы также можете стилизовать SVG с помощью CSS, как обычный HTML-файл.
6. Избегайте правила !important
Хотя правило !important может быть настоящей находкой в определенных ситуациях, его следует использовать только в крайнем случае. Это правило создаёт исключение из каскада. То есть, когда Вы добавляете !important в CSS-объявление, оно переопределяет любые другие объявления, даже те, которые имеют большую специфичность. Вот как выглядит его синтаксис:
Если в CSS присутствует много правил !important, браузер пользователя должен будет проводить дополнительные проверки в коде, что может дополнительно замедлить страницу. Хорошим тоном считается никогда не использовать !important для всего сайта или при создании темы или плагина. Если есть возможность, используйте это правило только в ситуациях, когда хотите переопределить CSS из сторонней библиотеки.
7. Рефакторинг CSS
Хотя рефакторинг CSS редко бывает легкой задачей, зачастую это может значительно повысить производительность веб-сайта. Например, когда Ваши CSS-файлы слишком большие, или Вам досталась устаревшая кодовая база, или у Вас очень плохое время загрузки страницы, что серьезно вредит Вашей конверсии. Цель рефакторинга CSS — сделать Ваш код более изящным, легко поддерживаемым и быстрее загружаемым.
Рефакторинг CSS — это многоступенчатый процесс, в ходе которого Вам нужно проанализировать каждый аспект Вашего CSS кода. Вам нужно проверить следующие моменты:
- присутствуют ли неиспользуемые или дублирующие CSS-правила или ресурсы
- возможно ли использование более современных техник, таких как Flexbox и CSS Grid
- не используется ли слишком много специфичности (посчитать это можно с помощью визуального калькулятора специфичности)
- грамотно ли организована структура CSS-файлов (например, легче поддерживать меньшие файлы, чем большИе)
- стоит ли начать использовать инструменты автоматической сборки
- и многое другое.
Также не забудьте использовать систему контроля версий, такую как Git. В этом случае, если что-то пойдет не так, Вы сможете вернуться к предыдущей версии кода.
Подводя итоги
Существует множество советов по оптимизации CSS, которые можно использовать для повышения производительности Вашего веб-сайта. Большинство из них просты в реализации, но могут существенно повлиять на время загрузки Вашей страницы. Более быстрая загрузка страниц не только повышает удобство использования, но также помогает улучшить позиции в Google и другие поисковых системах.
Кроме лучших практик оптимизации CSS, Вы можете использовать и другие техники ускорения загрузки, такие как кэширование, Google AMP и HTTPS протокол. Если Вы хотите узнать о них больше, можете также ознакомиться с нашей статьей 10-step guide to improve website loading speed.
Как оптимизировать CSS и JS для более быстрых сайтов
Опыт пользователя является наиболее важным фактором, когда дело доходит до успеха вашего онлайн-предприятия.
Не имеет значения, ведете ли вы нишевый блог, сайт SaaS или интернет-магазин. Если вам каким-то образом удастся испортить опыт своей аудитории, не рассчитывайте превратить кого-либо из них в платных клиентов.
Хорошей новостью является то, что любой бренд может методично улучшить пользовательский опыт, сузив конкретные факторы на странице.
Например, скорость загрузки легко игнорируется большинством владельцев веб-сайтов.
Согласно данным о конверсии, увеличение скорости вашего интернет-сайта с восьми до двух секунд может привести к увеличению конверсии на 74% .
Это означает, что медленный сайт может стоить вам почти половину ваших потенциальных клиентов.
Просмотр полной картины с PageSpeed Insights
Чтобы определить проблемы на вашем сайте, которые влияют на скорость загрузки, вы можете использовать Google PageSpeed Insights . Это бесплатный инструмент, который автоматически сканирует как настольную, так и мобильную версии вашего сайта.
В дополнение к обнаруженным проблемам, PageSpeed Insights также покажет вам несколько действенных рекомендаций.
Владельцы сайтов, которые никогда не задумывались о скорости загрузки страниц, могут столкнуться со следующими проблемами:
Это означает, что ваш код CSS и JavaScript замедляет работу вашего сайта. И хотя это может показаться работой для полноценных веб-разработчиков, их довольно легко оптимизировать с помощью инструментов.
Без лишних слов, вот шаги, которые вы должны предпринять, чтобы минимизировать ваши CSS и JavaScript активы.
Определить код для минимизации
Минимизация кода – это практика удаления символов, которые не выполняют никаких функций, кроме улучшения читабельности.
Например, встроенные комментарии могут помочь разработчикам понять, что делает конкретный раздел кода. Хотя это полезно для проверки или отладки, они также могут увеличивать размер кода.
Минификация удаляет эти лишние символы – поэтому уменьшает использование полосы пропускания и повышает скорость загрузки страницы.
Используя PageSpeed Insights, вы можете легко определить, какой код требует минимизации. Просто нажмите «Показать, как исправить» и следуйте по пути в клиенте CMS (Система управления контентом) или FTP (Протокол передачи файлов).
Например, если ваш сайт работает на WordPress, то весь ваш код должен быть объединен в разделе «Редактор». Это можно найти на вкладке «Внешний вид» основной панели управления.
Оптимизация ваших кодов
Теперь, когда вы нашли нужный код, пришло время узнать, как их минимизировать.
Возможно, самый простой способ минимизировать ваш код – использовать автоматизированные инструменты. Когда речь заходит о CSS и JavaScript, одними из лучших инструментов для работы являются CSS Minifier и JSCompress .
Использование CSS Minifier
CSS Minifier – это бесплатный и простой инструмент, который автоматически сжимает ресурсы CSS. Все, что вам нужно сделать, это вставить код в поле ввода, установить уровень сжатия и нажать «Minify».
В зависимости от размера вашего кода минимизация вашего кода может занять от нескольких секунд до минуты. Ваш новый код может быть скопирован обратно в клиентский интерфейс CMS или FTP.
Важно: в качестве меры предосторожности не забудьте создать резервные копии, прежде чем вносить какие-либо изменения в код вашего сайта. Создание автономных или облачных копий – простой способ сделать это.
Чтобы проверить, сработала ли ваша минификация, выполните другой анализ PageSpeed Insights. Файл CSS, который вы недавно сжали, больше не должен отображаться в разделе «Минимизировать CSS».
Использование асинхронной загрузки в JavaScript
По сравнению с CSS, JavaScript немного сложнее правильно минимизировать. Прежде чем запускать свой код через JSCompress, сначала рассмотрите возможность асинхронной загрузки кода.
Также называется «отложенной загрузкой», но в контексте JavaScript асинхронная загрузка работает путем динамической загрузки функций.
Чтобы использовать асинхронную загрузку, просто добавьте тег «async» при вызове файла .js . Это можно сделать в исходном коде HTML вашего сайта.
Вот пример того, как это сделать:
script src=”yourscript.js” async> script> Вы можете обратиться к этому сообщению за дополнительной информацией о том, как это работает и как его использовать. Если вы абсолютно новичок в HTML, читайте это руководство для начинающих, пока не освоитесь с основами.
Объединение файлов JavaScript
Еще один момент, который стоит упомянуть, когда речь заходит об оптимизации JavaScript, – это объединение файлов на одной странице. Это уменьшит количество HTTP-запросов, которые делает браузер, что неизменно ускорит время загрузки.
Например, вместо вызова нескольких файлов .js в вашем исходном коде:
script src=”http://www.yoursite.com/menu.js”> script> script src=”http://www.yoursite.com/tools.js”> script> script src=”http://www.yoursite.com/footer.js”> script> Вы можете объединить их в один файл JavaScript с помощью вашего редактора и вызвать их все сразу:
script src=”http://www.yoursite.com/all.js”> script> Чтобы еще больше сократить время обработки ваших сценариев, попробуйте не использовать теги «http» и «type». Например, вместо использования:
script src=" http: //www.yoursite.com/all.js" type="text/javascript" > script>Вы можете просто использовать:
script src="//www.yoursite.com/all.js"> script>Использование JSCompress
Наконец, использование JSCompress столь же просто, как использование CSS Minifier. Просто вставьте свой код в поле ввода и нажмите кнопку «Сжать JavaScript».
Затем перейдите на вкладку «Вывод» для просмотра сжатого JavaScript:
Удаление избыточного кода
Еще одна проблема с производительностью вашего сайта – это наличие избыточного или дублированного кода. Обычно они вызваны удаленными элементами страницы, в результате чего код остается неиспользованным.
Отличный способ найти избыточный код – использовать встроенные инструменты разработчика в Google Chrome. Это можно включить, открыв главное меню, выбрав «Дополнительные инструменты», а затем нажав «Инструменты разработчика».
Убедитесь, что вы находитесь на странице, которую вы хотите оптимизировать, когда вы делаете это.
После активации инструментов разработчика найдите «Покрытие» в подразделе «Дополнительные инструменты» в меню настроек.
Откроется вкладка «Покрытие» под консолью разработчика. Оттуда нажмите кнопку «Охват прибора», чтобы начать тестирование.
После завершения теста вы должны увидеть список ресурсов кода вместе с их неиспользованными байтами. Это представлено красной и зеленой полосой справа.
Если вы впервые проверяете наличие избыточного кода, вы увидите в списке сочетание ресурсов CSS и JavaScript. Внимательно осмотрите их, чтобы выяснить, не используются ли какие-либо из них.
Удаление всех лишних ресурсов кода по одному может быть утомительным. Но если вы хотите предложить безупречный пользовательский опыт, то это необходимо.
Кроме того, помните, что неиспользуемый код может накапливаться со временем, поэтому запланируйте другое время для повторного посещения и очистки вашего хранилища.
Вывод
Для тех, кто не является разработчиком, оптимизация кода CSS и JavaScript вашего сайта может показаться слишком технической на первый взгляд. Но с правильными инструментами и веб-хостингом вам не нужно быть опытным веб-разработчиком, чтобы это произошло.
Сжатие JS кода
Этот инструмент позволяет минимизировать ваш JS-код. Минимизированный JS-код имеет меньший вес и поэтому загружается быстрее для пользователей. Минимизация кода рекомендуется для ускорения работы сайта.
Могут быть полезны
Подсчет слов онлайн
Подсчитайте количество слов и букв в тексте
Lorem Ipsum генератор
Создайте свой собственный рыба текст в пару кликов
Удаление дубликатов строк
Удалить повторяющиеся строки из текста.
Удалить разрывы строк
Позволяет удалять разрывы строк из текста онлайн
Извлечение E-Mail из текста
Онлайн инструмент для извлечения адресов электронной почты из текста
Извлечение URL из текста
Онлайн инструмент для извлечения ссылок из текста
Генератор мета-тегов
Генератор МЕТА заголовков для вашего сайта
Удаление HTML Тегов
Избавьтесь от HTML кода в своем тексте
Сжатие HTML кода
Сократите свой HTML-код для уменьшения размера
Сжатие CSS кода
Сократите свой CSS-код для уменьшения размера
Форматирование HTML-кода
Онлайн сервис для форматирования HTML кода
Форматирование CSS-кода
Онлайн сервис для форматирования CSS-кода
Форматирование JS-кода
Онлайн сервис для форматирования JS-кода
Обфускатор Javascript
Защитите свой код JavaScript, запутав его
Генератор .htaccess
Онлайн генератор правил редиректов для файла .htaccess
Просмотр HTML кода
Онлайн сервис для просмотра HTML кода любой страницы
Поиск и замена в тексте
Поиск в тексте слов и замена своими
Case конвертер
Меняйте стиль регистра текста в один клик
Текст в Slug
Преобразование текста в Slug онлайн
Contact
Missing something?
Feel free to request missing tools or give some feedback using our contact form.