Разное

Оптимизация css: 7 советов по оптимизации CSS для ускорения загрузки страниц / Хабр

12.05.2021

Содержание

CSS оптимизация – делаем загрузку сайтов более быстрой

Занимаясь оптимизацией своих сайтов, большинство веб-мастеров (автор сего блога не исключение), совершенно забывают про оптимизацию каскадных таблиц стилей (CSS), как одной из составных частей любого интернет-ресурса.

Вынесение стилей отображения различных элементов страниц в отдельный файл безусловно ускоряет загрузку страниц сайта, поскольку CSS-файл кэшируется браузером (если такая функция ему дозволена) и в последующем подгружает его не из Интернета, а прямо с Вашего компьютера.

Но даже в таком случае можно получить еще больший эффект от использования каскадных таблиц стилей (которые порой занимают десятки килобайт кода), оптимизировав этот самый CSS.

И вот тут на помощь приходят простые и удобные в использовании он-лайн сервисы – CSS-оптимизаторы.

Путем поиска в Гугле нашлось несколько подобных инструментов, готовых помочь разрешить поставленную задачу (все сервисы буржуйские):

Что выполняют данные сервисы для получения результата. Они объединяют однородные классы, удаляют ненужные свойства, пробелы, отступы и так далее. В результате получается нечитабельный для веб-мастера код, однако при оптимизации наибольшего в размере файла CSS разница в загрузке страниц становится значительной.

Многие пользователи широкополосного Интернета не увидят в этом смысла, поскольку большинство сайтов у них открывается быстро. Но представьте себе: если каждый сайт станет загружаться хотя бы на 10% быстрее, то сколько времени Вы сохраните за неделю, месяц? А за год? При этом стоит учитывать и факт экономии трафика. Она тоже может стать впечатляющей. Ведь (перефразирую известную пословицу) килобайт мегабайт бережет ;).

Что тестировалось

Для тестирования результатов оптимизации я использовал файлы CSS следующий сайтов:

  • Хабрахабр – новости интернет-индустрии;
  • news2 – Новости 2.0;
  • iXBT.com – IT-новости;
  • Данный блог.

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

Результаты тестирования

Сервис / После оптимизации / Уменьшение, % / Комментарии

Первым тестился Хабрахабр с его 40.69 килобайтовым CSS.

  • CSS Optimizer / 23.25 KB / 42.86% / Уменьшилась высота строк, потеряли жирность некоторые заголовки, уменьшился шрифт некоторых ссылок. В принципе, даже эти недочеты не мешают удобству просмотра страницы, поскольку изменения касаются второстепенных элементов.
  • Clean CSS / 29.13 KB / 30.1% / Никаких изменений не произошло.
  • CSS Compressor / 21.69 KB / 46.7% / Также никаких изменений.

Следующими идут «Новости 2.0». Размер CSS – 18.15 KB.

  • CSS Optimizer / 10.46 KB / 42.34% / Практически никаких изменений не произошло, кроме незначительного увеличения шрифта в двух строках. В целом на юзабилити это никак не отразилось.
  • Clean CSS / 11.40 KB / 38.7% / Все осталось на месте.
  • CSS Compressor / 8.94 KB / 50.74% / Увеличились отступы, потеряли центровку некоторые элементы, испортились стили для некоторых типов ссылок.

Теперь тестим iXBT.com. Размер CSS – 15.47 KB.

  • CSS Optimizer / 11.60 KB / 25.06% / Правая колонка уплывает вниз, что однозначно сказывается на юзабилити.
  • Clean CSS / 11.74 KB / 24.4% / Совсем незначительное изменение отступов в некоторых местах.
  • CSS Compressor / 7.32 KB / 51.75% / Полнейшее искажение внешнего вида страницы. Ее просто не узнать.

Последним в тест попадает CSS моего блога. Его размер – 12.02 KB.

  • CSS Optimizer / 7.60 KB / 36.75% / Исчезает белый фон, изменяются отступы некоторых элементов и высота строк.
  • Clean CSS / 9.65 KB / 24.5% / Все на своих местах.
  • CSS Compressor / 4.74 kB / 60.54% / Полностью теряется форматирование страницы. «Ни в какие ворота не лезет».

Делаем выводы

Оптимальные результаты в соотношении качество/размер показал сервис Clean CSS. CSS, оптимизированный через него, на всех тестируемых сайтах все оставил на своих местах. Причем размер файла в среднем ужимается на целую треть. Помимо этого сам код, при настройках по умолчанию, не сгребается в кучу, а остается таким же читаемым, как в исходном варианте.

Более того, сервис показывает полный лог изменений, т.е. что и в какой строке было подкорректировано, а код отображается с подсветкой синтаксиса. Посему данный сервис заслуживает похвалы и его смело можно использовать для целей оптимизации CSS файлов.

Пользоваться остальными двумя вариантами – CSS Optimizer и CSS Compressor – стоит только в конкретном случае, «примерив» на сайте корректность работы оптимизированного стилевого файла.

Таким образом, оптимизация CSS может значительно ускорить загрузку сайтов без необходимости внесения кардинальных изменений в структуру страниц. Да и стоит учитывать, что все еще большАя часть интернет-пользователь подключается по диалапу.

И напоследок.

Перед оптимизацией CSS-файлов с помощью одного из указанных инструментов я бы посоветовал сохранять оригинальный, удобочитаемый файл стилей, дабы в будущем можно было, как и прежде, с удобством вносить в него необходимые поправки.

* * *

Онлайн-покер является в последнее время весьма популярным занятием, которое позволяет людям становится финансово обеспеченными. Ты можешь скачать покер и стать одним из них.

Улучшение скорости загрузки сайта. Часть 2. Оптимизация CSS и JavaScript файлов

CSS

{«id»:133544,»url»:»https:\/\/vc.ru\/seo\/133544-uluchshenie-skorosti-zagruzki-sayta-chast-2-optimizaciya-css-i-javascript-faylov»,»title»:»\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430. \u0427\u0430\u0441\u0442\u044c 2. \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f CSS \u0438 JavaScript \u0444\u0430\u0439\u043b\u043e\u0432″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/seo\/133544-uluchshenie-skorosti-zagruzki-sayta-chast-2-optimizaciya-css-i-javascript-faylov»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/seo\/133544-uluchshenie-skorosti-zagruzki-sayta-chast-2-optimizaciya-css-i-javascript-faylov&title=\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430. \u0427\u0430\u0441\u0442\u044c 2. \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f CSS \u0438 JavaScript \u0444\u0430\u0439\u043b\u043e\u0432″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/seo\/133544-uluchshenie-skorosti-zagruzki-sayta-chast-2-optimizaciya-css-i-javascript-faylov&text=\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430. \u0427\u0430\u0441\u0442\u044c 2. \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f CSS \u0438 JavaScript \u0444\u0430\u0439\u043b\u043e\u0432″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/seo\/133544-uluchshenie-skorosti-zagruzki-sayta-chast-2-optimizaciya-css-i-javascript-faylov&text=\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430. \u0427\u0430\u0441\u0442\u044c 2. \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f CSS \u0438 JavaScript \u0444\u0430\u0439\u043b\u043e\u0432″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/seo\/133544-uluchshenie-skorosti-zagruzki-sayta-chast-2-optimizaciya-css-i-javascript-faylov»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0430\u0439\u0442\u0430. \u0427\u0430\u0441\u0442\u044c 2. \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f CSS \u0438 JavaScript \u0444\u0430\u0439\u043b\u043e\u0432&body=https:\/\/vc.ru\/seo\/133544-uluchshenie-skorosti-zagruzki-sayta-chast-2-optimizaciya-css-i-javascript-faylov»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

4588 просмотров

Вторым шагом после изображений подумайте об оптимизации ваших CSS и JavaScript файлов. Не забывайте всегда минимизировать эти файлы. По умолчанию CSS являются ресурсом, который блокирует отрисовку страницы в браузере. Это значит, что браузер остановит создание HTML элементов пока не загрузит и не прочтет весь ваш CSS. Поэтому всегда минимизируйте CSS, а также удалите неиспользуемые стили. Это особенно важно если Вы используете какой-нибудь CSS фреймворк (на вряд ли вы используете все стили фреймворка). PurgeCSS может помочь Вам автоматизировать процесс удаления неиспользуемых стилей. Если это возможно для Вас, постарайтесь при загрузке страницы загружать только критический CSS, а загрузку остального CSS отложить, пока страница полностью не загрузится. Критический CSS – это CSS, который необходим для стилизации только той части страницы, которая находится в области видимости экрана при загрузке страницы.

JavaScript

Постарайтесь сократить размер JavaScript файлов настолько, насколько это возможно и помните, что JavaScript файл – это не изображение, браузеру кроме того, что загрузить JS файлы нужно их еще и обработать, что занимает определенное время и ресурсы. Именно от размера JavaScript и от скорости его выполнения зависит такой очень важный показатель как скорость загрузки до взаимодействия. То есть может быть такое, что страница полностью загружена, а пользователь все еще не может с ней взаимодействовать или отклик страницы на действия происходит с большой задержкой. Это значит, что браузер еще не обработал весь JavaScript код.

Ленивая загрузка JavaScript’а

Также старайтесь откладывать загрузку большого JS кода (файла), который не используется на всех страницах. Например, у Вас может быть компонент весом в 100-200 килобайт, который используется только на одной странице, а загружается на всех страницах. Постарайтесь разделить Ваш JavaScript на несколько кусочков(файлов) и загружать каждый из них только там, где он необходим. Этого легко можно добиться с помощью таких сборщиков как Webpack.

Влияние JS на отрисовку страницы

И помните, создание HTML страницы идет сверху вниз, и если браузер по пути отрисовки страницы встретит JS, он «поставит на паузу» отрисовку страницы пока не скачает (если необходимо) и не выполнит его. Поэтому старайтесь, чтобы ваш основной JS файл подключался ниже всего основного HTML, желательно перед закрывающимся тегом body, чтобы не задерживать отрисовку необходимого HTML. Если вы подключаете JS файл не внизу страницы, то используйте атрибут defer при подключении скрипта, что укажет браузеру на то, что это скрипт нужно обрабатывать только после того, как вся страница будет полностью отрисована.

Сокращение времени ответа сервера

Есть еще один из самых важных пунктов для улучшение скорости загрузки страницы. Это сокращение времени ответа от сервера или времени до получение первого байта (TTFB – Time to first byte). TTFB – это время, которое необходимо, чтобы отправить запрос от клиента (браузера) и получить первый байт данных от веб сервера.

Этот пункт является, пожалуй, самым сложным для оптимизации, потому что он затрагивает довольно много аспектов, многие из которых специфичны для используемых инструментов, подходов к реализации, фреймворков или CMS. И поэтому нет какого-то универсального решения. Но зато есть несколько советов, на что нужно обратить внимание:

Используйте сервер с хорошей производительностью

Чем быстрее ваш сервер читает или записывает данные и быстрее обрабатывает различные процессы тем быстрее ваш сайт вернет ответ пользователю.

Используйте последние версии

Старайтесь использовать самые последние версии языков программирования, фреймворков, библиотек, CMS, веб сервера или чего-либо еще, что работает на вашем сервере, чтобы пользоваться всеми преимуществами обновлений по производительности, которые могли быть выпущены. Так, PHP 7.0 дает прирост производительности в 180% по сравнению с предыдущей версией 5.6

Оптимизируйте запросы к Базе Данных

Посмотрите, может быть вы столкнулись с проблемой n+1, не добавили индексы там, где необходимо или запрашиваете много неиспользуемых данных.

Используйте кэширование

Каждый раз, когда пользователь делает запрос, на сервере делается запрос в базу данных (БД), генерируется HTML из данных и возвращается клиенту. Представьте, если у Вас сайт, на котором вы обновляете контент раз в неделю. Но все равно каждый раз, когда ваш сайт открывается, будет происходить запрос в базу данных, даже если информация не обновлялась. Поэтому, когда первый раз пользователь делает запрос на определенные данные вы можете получить их из БД, показать их пользователю и кэшировать (сохранить локально) эти данные на неделю (например). И после этого, в течение недели, все, кто будут открывать эту страницу уже не будут делать запрос в базу данных каждый раз, а им будет показываться сохраненная копия этих данных. Это будет уменьшать время загрузки страницы и нагрузку на сервер. В некоторых случаях вы можете кэшировать не только данные из БД, а страницы целиком.

Оптимизируйте скорость установления защищенного соединения SSL

Если вы используете SSL, установление защищенного соединения требует больше времени чем незащищенного. Вы можете сделать это самостоятельно или использовать инструменты, которые могут помочь Вам в этом, например Cloudflare. Cloudflare будет выступать как посредник между пользователями и Вашим сайтом, все запросы будут проходить через него. Cloudflare также может справиться с DDoS атаками, которыми может быть подвержен Ваш сайт. Если не обращать на это внимания Ваш сайт может загружаться медленнее после установки SSL.

Кэшируйте статические ресурсы

К ним относятся JS, CSS, файлы, шрифты и изображения. Когда пользователь заходит на Ваш сайт Вы можете дать браузеру выбрать откуда ему брать ресурсы, и это может оказать существенное влияние на время загрузки сайта. Вы можете сохранять статические ресурсы в браузере, когда пользователь первый раз заходит на Ваш сайт. Это и есть кэширование. Вы можете безопасно кэшировать статические ресурсы на долгое время: на 6 месяцев или даже на год. Cloudflare также может кэшировать все статические ресурсы на Вашем сайте. Но, что делать если за это время Вы изменили контент этих файлов, но не изменили название, например добавили пару строчек в свой JS файл? Изменить название файла! Но вы не можете постоянно менять название, но можете добавить какой-нибудь хэш как строку запроса, когда запрашиваете файл. Например, “/js/app.js?v=123456”. Вы будете запрашивать один и тот же файл, но технически для браузера это уже будет другой файл, который еще не был кэширован. Вы можете делать это вручную или, опять же, автоматизировать этот процесс с помощью сборщиков. Это называется контроль версий (versioning) или очистка кэша (cache busting).

CDN

Используйте сеть доставки контента (CDN) для статических ресурсов. Когда пользователь запрашивает изображение (например) с Вашего сайта, он должен отправить запрос к Вашему серверу, независимо от того, где находится пользователь и Ваш сервер. CDN может помочь минимизировать расстояние от клиента до ресурса. CDN – это группа серверов, разбросанных по всему миру, которые работают вместе, чтобы предоставить контент пользователю с того сервера, который находится максимально близко к нему. CDN с одним из самым большим количеством серверов по всему миру — это Cloudflare. Как вы видите есть несколько преимуществ начать использовать Cloudflare. Для большинства сайтов бесплатный тариф будет более чем достаточным. (Они не платят мне J)

Conclusion

Попробуйте применить эти несложные советы для оптимизации скорости загрузки Вашего сайта, и я уверен время его загрузки существенно сократится.

Оптимизация JS и CSS | Корректная загрузка ресурсов сайта — SEO на vc.ru

{«id»:181843,»url»:»https:\/\/vc.ru\/seo\/181843-optimizaciya-js-i-css-korrektnaya-zagruzka-resursov-sayta»,»title»:»\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f JS \u0438 CSS | \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0441\u0430\u0439\u0442\u0430″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/seo\/181843-optimizaciya-js-i-css-korrektnaya-zagruzka-resursov-sayta»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/seo\/181843-optimizaciya-js-i-css-korrektnaya-zagruzka-resursov-sayta&title=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f JS \u0438 CSS | \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0441\u0430\u0439\u0442\u0430″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/seo\/181843-optimizaciya-js-i-css-korrektnaya-zagruzka-resursov-sayta&text=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f JS \u0438 CSS | \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0441\u0430\u0439\u0442\u0430″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/seo\/181843-optimizaciya-js-i-css-korrektnaya-zagruzka-resursov-sayta&text=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f JS \u0438 CSS | \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0441\u0430\u0439\u0442\u0430″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/seo\/181843-optimizaciya-js-i-css-korrektnaya-zagruzka-resursov-sayta»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f JS \u0438 CSS | \u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0441\u0430\u0439\u0442\u0430&body=https:\/\/vc.ru\/seo\/181843-optimizaciya-js-i-css-korrektnaya-zagruzka-resursov-sayta»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

7216 просмотров

уменьшение объема кода, CSS и HTML оптимизаторы, валидация

Содержание статьи

Оптимизировать код HTML и каскадные таблицы стилей (CSS) нужно для того, чтобы ускорить процесс загрузки сайта и контента, размещенного на нем. Экономия времени и трафика, в целом, спустя долгий срок после оптимизации, получится существенной, даже если внешне изменение скорости будет не очень заметно.

Оптимизация HTML-кода

Для того чтобы HTML-код способствовал быстрой загрузке сайта, он должен соответствовать нескольким условиям:

  • Быть простым и информативным. Проверив его на валидность, нужно исправить ошибки, чтобы ботам было легче анализировать его. Код должен четко представлять структуру страницы.
  • Основные составляющие страниц, такие как заголовки, указатели, блоки информации должны быть легко и быстро определяемы.
  • Освобождение кода от лишних сведений, вынесение их в отдельные файлы (например, можно вынести CSS и JS), повысит скорость загрузки, что также упрощает работу ботов.

Добившись выполнения этих условий, сайт можно сделать более быстрым, удобным и повысить эффективность индексации его ботами поисковых систем.

Уменьшение объема кода и оптимизация CSS

Сделать код сайта проще можно, уменьшив его объем. Для этого нужно выполнить несколько операций.

Прежде всего, следует избегать флеш-технологий, JavaScript, фреймов, текста, представленного картинкой. Все элементы, какие возможно, следует оформить в отдельных, внешних файлах (например, CSS и JS, как уже отмечалось выше). Помогут для оптимизации кода специальные плагины. К примеру, можно установить плагин Autoptimize, который автоматически оптимизирует код HTML, CSS, JS (если поставить соответствующие галочки). Необходимо настроить грамотную и удобную навигацию по сайту, которая будет понятна пользователям и корректно распознаваема поисковиками. Это увеличит скорость, качество загрузки и индексации сайта.

Что касается оптимизации CSS, то ее можно сделать самостоятельно или доверить это специальному ресурсу или программе. Ручная оптимизация – трудоемкий и длительный процесс, к тому же можно пропустить какие-то ошибки. Программа или сервис для оптимизации качественнее устранят недостатки, но могут нарушить некоторые функции, которые работали на сайте, и после проверки может некорректно отображаться контент, поэтому их работу нужно корректировать.

Некоторые способы улучшить структуру CSS в ручном режиме:

  • Удалить лишние пробелы и разрывы строк, которые перегружают файл CSS и затрудняют работу роботов;
  • Прописывать обобщающие свойства вместо несколько раз повторяющихся похожих команд;
  • Использовать лаконичные, понятные описания в комментариях;
  • Необычные шрифты прописывать при помощи стилей, а не изображений;
  • Для картинок создавать alt и title (разные для каждого изображения), чтобы их содержание распознавалось ботами поисковых систем;
  • Применять к заголовкам инструменты h2 – и далее, чтобы они корректно распознавались при индексации;
  • Прописывать в keywords только те ключевые слова, которые используются на странице, минимизировать их количество;
  • Использовать разнообразные и краткие мета-теги.

CSS и HTML оптимизаторы

Удобно и быстро осуществить оптимизацию непосредственно в браузере можно при помощи специальных сервисов, например:

  • CleanCSS.com;
  • CSS Optimizer;
  • CSS Compressor;
  • CY-PR.com;
  • плагин Autoptimize.

Специалисты в SЕО и IT советуют пользоваться CleanCSS.com, так как он позволяет выбрать степень сжатия от низкой до высочайшей или подобрать индивидуальные настройки. После высокого и высочайшего уровней оптимизации код сайта принимает практически нечитаемый вид, и вносить в него изменения будет практически невозможно. Поэтому для начала следует воспользоваться стандартной оптимизацией. Можно выбрать режимы сжатия конкретного контента или оптимизацию отдельных параметров: сжатие шрифтов, изображений, удаление пробелов.

Также программа позволит сохранить результат в файле, в том числе в виде текста с отчетом о произведенных изменениях, подсветкой синтаксиса.

На ресурсе CY-PR.com также есть похожий инструмент для оптимизации, который облегчает структуру CSS на 25-30%, но здесь нет возможности сформировать файл с кодом после выполнения операции.

Остальные сервисы достаточно радикально могут поменять код так, что некоторые функции на сайте перестанут работать. Поэтому с их помощью лучше производить только локальные изменения в конкретных параметрах сайта.

После оптимизации следует проверить работоспособность сайта, корректное отображение дизайна, скорость загрузки. Нормальной считается ситуация, когда страницы и пользовательские опции сайта загружаются не более 3-5 секунд.

Для того чтобы проверить степень оптимизации и понять, насколько эффективно теперь прописан HTML-код, можно воспользоваться такими сервисами, как:

  • optimization.com;
  • Портал seo-чеклист;
  • плагин Firebug.

Эти инструменты помогут проверить, все ли сделано для уменьшения объема HTML-кода и улучшения его структуры. На ресурсе SEO-чеклист можно проверять по списку, что уже было сделано для оптимизации, а что – еще нет, и устанавливать пометку на совершенных делах.

Валидация

Проверить код сайта на наличие ошибок можно при помощи сервисов проверки валидации – валидаторов. Эффективная проверка кода осуществляется с помощью validator.w3c.org

Если система при первой проверке выдаст более полутысячи ошибок, не стоит расстраиваться. После исправления определенного недочета, можно запускать проверку снова и ошибок станет намного меньше, так как один недостаток влечет за собой другие и при его исправлении они исчезнут.

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

Ускоряем работу сайта за счёт оптимизации CSS

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

Если какие-то стили не нужны на странице — их надо отключить. В процессе разработки часто подключаются те стили, которые потом не используются. Например, стили для отладки или стили для подключенных скриптов, которые не используются. Не надо заставлять пользователя загружать ненужные файлы.

Загружайте стили с поддоменов, с других доменов или CDN — файлы с одного домена загружаются в ограниченное число потоков, количество этих потоков даже у самых продвинутых браузеров не более десяти. Поэтому если картинок, файлов стилей и скриптов на странице много, то некоторым из них придется ждать своей очереди. Лимит количества потоков распространяется только на домен, поэтому если CSS-файлы будут загружаться с другого домена, то скорость загрузки возрастет за счёт параллельности.

Блокирующие отрисовку страницы стили не должны загружаться с нестабильных внешних доменов. Если используемый для загрузки внешний домен перестанет отвечать или станет отвечать с длительной задержкой, то существенно замедлится загрузка вашего сайта. Если используете внешние домены, то убедитесь, что они достаточно стабильно работают.

CSS надо сжать, минимизировать и оптимизировать. Удаление пробелов, комментариев, переносов строк, сокращение кодов цветов и другие оптимизации уменьшают размер файлов и ускоряют загрузку. При использовании сторонних библиотек — просто подключайте минимизированную версию. Для собственных скриптов используйте специальные библиотеки, сжимающие и оптимизирующие CSS, — CSSO или YUI Compressor.

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

Используйте GZIP для сжатия данных. Почти все современные браузеры могут обрабатывать сжатые в GZIP стили CSS. Оптимальный способ — предварительное сжатие используемых CSS-файлов на максимальном (девятом) уровне компрессии и последующая отдача веб-сервером уже сжатых файлов. Сжатие «на лету» вызывает нагрузку на процессор сервера, поэтому его на нагруженных проектах не стоит использовать.

Кэшируйте CSS на стороне клиента — не заставляйте пользователей многократно скачивать один и тот же файл: задайте соответствующие заголовки в ответе веб-сервера (Expires или Cache-Control max-age + Last-Modified или ETag).

Сократите каскады в CSS — на «слабых» устройствах быстрее отрисовываются страницы, где для определения стиля элемента не требуется обработка многократно вложенных правил.

Ускорение Работы Сайта — Оптимизация CSS, HTML и JavaScript

Sait

access_time

15 сентября, 2017

hourglass_empty

2мин. чтения

Введение

Оптимизация (минификация) — это процесс удаления каких-либо ненужных символов, которые не нужны для выполнения кода. Минификация кода увеличит скорость загрузки вашей страницы, что приведет к довольным посетителям и лучшей работе поисковых систем. Проще говоря, это процесс удаления ненужных пробелов, новых строк, комментариев и разделителей блоков из вашего кода. Эти типы символов используются для более удобного чтения и визуальных целей, однако, они не обязательны для правильного выполнения кода. Как результат, оптимизация CSS, HTML и JavaScript ускорит время скачивания, разбора и выполнения кода.

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

Шаг 1 — Обнаружение неоптимизированных файлов CSS, HTML, JavaScript.

На данном этапе мы рекомендуем использование GTMetrix. После анализа тестового сайта WordPress, мы получили список файлов, которые могут быть оптимизированы.

Шаг 2 — Замена неоптимизированных файлов

ВАЖНО! Безопасность прежде всего. Перед сохранением каких-либо изменений, убедитесь в наличии резервной копии вашего сайта или отдельных файлов, которые будут заменены.

Вариант 1 — Ручная замена

Одним из преимуществ GTMetrix является возможность мгновенного просмотра оптимизированных версий CSS, JS и HTML файлов, по нажатию кнопки See optimized version (Увидеть оптимизированную версию) возле файла. После этого, оптимизированный файл может быть либо скачан, либо открыт в браузере. Замените старые файлы используя FTP клиент или скопируйте и замените сам код.

Вариант 2 — CMS плагины

Пользователи WordPress могут использовать для достижения тех же целей такие плагины как Better WordPress Minify или W3 Total Cache. Вы можете обратиться к этому руководству для более подробной инструкции по установке плагина W3 Total Cache.

Вариант 3 — CloudFlare

CloudFlare — это бесплатный сервис который ускоряет и защищает ваш сайт выступая в качестве прокси между посетителем и сервером сайта. Он предлагает защиту от DDoS атак, и что самое главное, он бесплатный. Одна из функций которую включает в себя бесплатный тариф, это оптимизация CSS, HTML и JS. Вы можете включить оптимизацию ресурсов в разделе Speed →  Auto-Minify:


ВАЖНО! Не рекомендуется использовать оптимизацию CloudFlare, если вы уже используете CMS плагины для оптимизации. Также, CloudFlare не оптимизирует сторонние скрипты и ссылки (Facebook, VK, Twitter)

Шаг 3 — Тестирование изменений

После замены файлов/кода на их оптимизированную версию, последним этапом станет проверка изменений. Вы можете сделать это запустив повторный анализ на сайте GTMetrix. Для сравнения, вот результаты тестового сайта после замены файлов на оптимизированные:

Заключение

В этом кратком руководстве вы научились, как ускорить работу сайта оптимизацией CSS, JavaScript and HTML.

Руководства по теме:

Highload.today — медиа для разработчиков

Софт — 3 дня назад

Как автоматизировать копирование файлов

На многих проектах есть необходимость копирования огромных файлов — размером 0,5 Гб и более. Например, это может понадобиться для получения последней версии сборки разрабатываемого продукта. В процессе копирования могут возникать сбои или обрывы коннекта, и тогда копирование приходится начинать снова. Хочу поделиться с вами простым скриптом для Windows, который поможет автоматизировать этот процесс, сделать его проще, быстрее и надежнее.

Тестирование — 4 дня назад Editorial

Тестирование фронтенда на примере React-приложения

Мало кто из разработчиков сомневается в эффективности тестирования, но на практике тестируется часто только бэкенд. Да еще и встречается убеждение, что фронтенд не имеет отношения к реальной разработке программного обеспечения, даже с учетом того, что во многих случаях полностью проработанный бэкенд просто не может существовать без фронтенда.

Фронтенд — 1 неделя назад Editorial

NPM CLI v7 — пять самых важных фич

В феврале 2021 года стал широко доступен апдейт NPM CLI до версии 7. Это одно из важнейших обновлений, в котором был представлен новый функционал и другие важные настройки, упрощающие процесс управления пакетами. Команда разработчиков смогла решить некоторые из распространенных проблем, с которыми сталкивались пользователи. Подробным обзором пяти новых возможностей NPM CLI v.7 поделился разработчик Сахан Амарша (Sahan Amarsha) в материале для Bits and Pieces. Ну а мы в свою очередь спешим поделиться его выводами с вами.

Фронтенд — 1 неделя назад Editorial

Tailwind CSS: за и против

По данным опроса The State of CSS 2020, больше всего разработчиков в мире, использующих CSS-фреймворки, сейчас заинтересованы в изучении и применении Tailwind CSS. Он опережает конкурентов в этом рейтинге уже второй год подряд. Команда Tailwind предлагает альтернативный подход для поддержки и стилизации HTML-разметки, но у него есть и свои противники. Проштудировав статьи и комментарии на таких ресурсах, как Dev.to, Product Hunt и Codeburst, мы собрали наиболее популярные доводы за и против использования этого фреймворка.

Софт — 1 неделя назад Editorial

На каком ПО летают на Марсе?

18 февраля состоялось историческое событие, НАСА успешно посадила ровер Perseverance (в переводе на русский — “Настойчивость”) на Марс. Казалось бы, ничего необычного? НАСА проделывала это уже не раз в поиске ответа на вечный вопрос: есть ли жизнь на Марсе?

Мобильные приложения — 1 неделя назад Editorial

Как сделать из веб-сайта веб-приложение (а главное — зачем?)

В своем блоге индийский разработчик Шашват Верма (Shashwat Verma) рассказал, как преобразовать веб-сайт или веб-страницу в прогрессивное веб-приложение (PWA). В качестве примера программист создал PWA из простой классической игры Simon на основе HTML5 (вот ее гитхаб-репозиторий), которую после преобразования можно устанавливать в формате веб-приложения на устройства Android и iOS.

Оптимизация производительности CSS — Изучите веб-разработку

Тираж

Эта страница не завершена.

Рисование страницы без стилей, а затем ее перекрашивание после анализа стилей было бы неудобно для пользователя. По этой причине CSS блокирует рендеринг, если браузер не знает, что CSS в настоящее время не нужен. Браузер может рисовать страницу после загрузки CSS и построения объектной модели CSS. Браузеры следуют определенному пути рендеринга: рисование происходит только после макета, что происходит после создания дерева рендеринга, которое, в свою очередь, требует и DOM, и CSSOM-деревьев.Чтобы оптимизировать конструкцию CSSOM, удалите ненужные стили, минимизируйте, сжимайте и кешируйте его и разбивайте CSS, который не требуется при загрузке страницы, на дополнительные файлы, чтобы уменьшить блокировку рендеринга CSS.

Оптимизация для блокировки рендеринга

CSS может ограничивать стили для определенных условий с помощью медиа-запросов. Медиа-запросы важны для отзывчивого веб-дизайна и помогают нам оптимизировать критический путь рендеринга. Браузер блокирует рендеринг до тех пор, пока он не проанализирует все эти стили, но не заблокирует рендеринг для стилей, которые он знает, что он не будет использовать, таких как таблицы стилей печати.Разделив CSS на несколько файлов на основе медиа-запросов, вы можете предотвратить блокировку рендеринга во время загрузки неиспользуемого CSS. Чтобы создать неблокирующую ссылку CSS, переместите не используемые сразу стили, такие как стили печати, в отдельный файл, добавьте в разметку HTML и добавьте медиа-запрос, в данном случае заявив, что это таблица стилей печати.

По умолчанию браузер предполагает, что каждая указанная таблица стилей блокирует рендеринг. Сообщите браузеру, когда следует применить таблицу стилей, добавив атрибут media с медиа-запросом. Когда браузер видит таблицу стилей, он знает, что ему нужно применить ее только для определенного сценария, он все равно загружает таблицу стилей, но не отображает блок. Разделив CSS на несколько файлов, главный файл блокировки рендеринга, в данном случае стили .css , намного меньше, что сокращает время блокировки рендеринга.

Анимация на GPU

Браузеры оптимизированы для обработки CSS-анимации и обрабатывают свойства анимации, которые не очень хорошо запускают перекомпоновку (и, следовательно, также перерисовку). Для повышения производительности анимируемый узел можно переместить из основного потока на графический процессор. Свойства, которые приведут к компоновке, включают 3D-преобразования ( transform: translateZ () , rotate3d () и т. Д.), анимация преобразования и непрозрачности , положение : фиксированное , изменит , а фильтр . Некоторые элементы, включая , и