Онлайн оптимизация css: Выбираем лучший онлайн-сервис по сжатию CSS / Хабр

Бесплатная онлайн оптимизация JPEG, PNG, SVG, CSS, JavaScript

Локальный файл Онлайн файл

#	Результат	Исходный файл

---

Чтобы выполнить оптимизацию, выполните несколько шагов:

• С помощью кнопок «Локальный файл» или «Онлайн файл» укажите каким образом загрузить файл на сервер. Используете «локальный файл» если вам нужно оптимизировать файл с вашего компьютера, для того чтобы указать файл, находящийся в интернете выберите «Онлайн файл» и в появившемся поле вставьте ссылку на файл. Мы не устанавливаем никаких ограничений на размер файла, но чем больше файл, тем больше времени будет занимать оптимизация. Просто наберитесь терпения и все получится.
• Вам не нужно выбирать что-либо кроме файла, конвертер сам определит тип по расширению и выполнить оптимизацию.
• Для начала оптимизации нажмите кнопку «Конвертировать» чтобы начать преобразование. В случае успешной оптимизации файл будет доступен в разделе «Результаты конвертации». Если вам нужно просто скачать файл, то кликните на имя файла. Если вы хотите получить другие способы сохранения, то нажмите на значок чтобы сформировать QR-код для загрузки результата на ваш мобильный телефон или планшет, а также если вы хотите сохранить файл в одном из онлайн-сервисов хранения данных, таких как Google Drive или Dropbox.

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

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

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

CSS

4803 просмотров

Вторым шагом после изображений подумайте об оптимизации ваших 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

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

Оптимизация скорости загрузки сайта для Google в 2021 году

Оптимизация скорости загрузки сайта для GooglePage Speed

Как ускорить загрузку страниц и увеличить ранг в PageSpeed рейтинге? — советы экспертов

В компании Google сделали исследование поведения пользователей на сайтах разных направлений, с целью выявления лучших показателей. В результате данного теста, выяснилось, что если страница сайта загружается более 3 секунд — вероятность отказа повышается в 2.5 раза. И в этом исследовании ясно показано: скорость имеет значение! Поэтому для повышения рейтинга сайта гугл требует чтобы загрузка любой страницы сайта была не более 3-х секунд, оптимальным показателем является 1-2 секунды. Поэтому Google рекомендует разработчикам сайтов заняться оптимизацией своих проектов и предлагает для анализа эффективности скорости загрузки страницы использовать инструмент: Google PageSpeed.

Google PageSpeed Insights показывает не только скорость загрузки страницы вашего сайта, но дает информацию и подробные рекомендации по технической оптимизации.

Рассмотрим основные аспекты оптимизации скорости загрузки сайта

Оптимизация базы данных (связи, индексы)

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

Оптимизация SQL запросов

Такие запросы как «SELECT *» лучше не использовать, так как в память выгружаются все поля таблицы которые не всегда нужны. Оператор LIKE тоже лучше использовать в редких случаях. Все справочники по возможности лучше загонять в массив и работать с массивом. Также желательно использовать кеширование данных вывода SQL запроса (можно кеш сохранять в файлы или оперативную память)

Кеширование результатов SQL запросов

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

Пример кеширования результатов SQL запросов в PHP

Оптимизация (сжатие) изображений

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

• Все изображения на сайте сжать, используя онлайн инструменты Compressor.io и TinyPNG. Данные инструменты бесплатные, но есть ограничения — не более определенного количества фото. Данные сервисы уменьшают размер графического файла примерно на 60-80% при этом качество фото может ухудшится.
• Также следует уменьшить размеры фото до нужного реального размера например 200x200px, а подгоняться при помощи стилей CSS width/height.

Подключение файлов JavaScript/CSS и шрифтов Fonts и отложенная загрузка

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

Также нужно добавить свойство async (асинхронная загрузка) для подключаемых скриптов. После добавление этого свойства в GPSpeed пропадет замечание по поводу асинхронной загрузки. Также старайтесь использовать сложные и массивные JS библиотеки по минимуму.

В данном примере все JS скрипты объединены вместе с библиотекой jQuery в один файл core.min.js и загружается асинхронно async и defer — отложено

Пример отложенного вызова CSS файла через JavaScript

В подключении шрифтов font-display параметр swap может показывать текст не дожидаясь полной загрузки всего шрифта.

Пример на CSS

Обязательно загружайте все изображения с помощью отложенной загрузки lazyload

При этом обязательно нужно подключить lazyload.min.js

Если у вас на странице есть svg элементы, то их лучше добавлять в HTML коде, без дополнительного обращения к тегу img. И svg необходимо ужимать тоже.

Минимизация (сжатие) JavaScript, CSS и HTML

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

Детальнее вы можете узнать по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources

Включение сжатия gzip

GZIP это формат сжатия в вебе. Перед отображением страницы, файлы загружаются с сервера уже в сжатом виде. Данный тип сжатия поддерживают все современные браузеры.

Включить gzip сжатие файлов вы можете в настройках вашего хостинга.

Рекомендации по установке GZIP сжатия можете посмотреть здесь: https://developers.google.com/speed/docs/insights/EnableCompression

Удаление блокирующих кодов

Устранение блокирующих кодов является сложным этапом в повышении скорости загрузки страницы, требующий технических знаний. Нужно проводить анализ всего кода JavaScript начиная сверху от «header» и «body» до расположенного внизу «footer» на всех страницах сайта.

Более детально можно посмотреть по ссылке: https://developers. google.com/speed/docs/insights/BlockingJS#InlineJS

Оптимизация версии сайта для мобильных устройств

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

Для любителей сайтов на бесплатных CMS, таких как: WordPress, Joomla, Drupal, Opencart, Magento, ModX, ImageCMS и другие.. проводить оптимизацию скорости загрузки сайта для рейтинга гугл будет достаточно сложно или невозможно. Это связано с спецификой программной организации бесплатной CMS и использованием шаблонных решений, которые оптимизировать не всегда удается или удается на небольшой процент(: Плюс не каждый специалист сможет это сделать так как данный процесс требует определенные знания и опыт, и нужно будет вносить коррективы в ядро системы.

Помогла ли вам статья?

348 раз уже помогла

Комментарии: (1) Написать комментарий

Как оптимизировать видео для сайта – База знаний Timeweb Community

Видео – мощный инструмент для привлечения и вовлечения пользователей. Видеоформат уже сейчас называют одним из трендов настоящего и будущего, его популярность в рекламе постоянно растет. Уже сейчас на видео приходится более 70% всего потребительского интернет-трафика. Чуть меньше половины пользователей (43%) хотели бы получать еще больше контента в видеоформате. Да и самим маркетологам выгодно использовать видео: 4 из 5 пользователей принимают решение о покупке на основе просмотренного видео. Кроме того, компании, которые используют видео в рекламе, имеют на 27% выше CTR и на 34% выше уровень конверсии.

В общем, есть множество причин использовать видео, в том числе и на своем сайте. Однако тут встает вопрос об оптимизации: как использовать видео не во вред своему сайту? Об этом и пойдет речь в статье.

Выбираем формат видео для сайта

Для платформ YouTube и Vimeo стандартными форматами являются MP4 и WebM. MP4 поддерживают все браузеры, в то время как WebM сейчас поддерживают только Chrome и Firefox. Видеоролики в формате WebM, как правило, весят меньше, чем MP4-файлы, однако MP4 смотрятся чуть лучше на портативных девайсах.

Далее оптимизация разделяется на два пути:

• оптимизация видео для сайта,
• оптимизация сайта под видео.

Рассмотрим оба типа работ. 

Оптимизация видео для сайта

Что нужно сделать для того, чтобы видео на сайте грузилось быстро. 

Уменьшение веса видеофайла

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

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

Конвертация в поддерживаемые HTML5-форматы

Используйте онлайн-конвертер для того, чтобы переконвертировать видео в форматы MP4 или WebM.

Удаление звука (если он не используется)

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

Оптимизация сайта под видео

Что нужно сделать, чтобы видео отображалось корректно. 

Точный размер видео

Обязательно укажите в HTML или CSS размеры видео по вертикали и горизонтали – так браузеру будет проще определиться с пропускной способностью.

Загрузка видео после загрузки страницы (Lazy Load)

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

Мобильные пользователи

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

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

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

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

@media screen and (max-width: 650px) {
   #hero-video {
   display: none;
   }
}

Советы для SEO-специалистов

И несколько советов, которые касаются SEO.

Да, сейчас есть популярные площадки для размещения видео – тот же YouTube.  Однако если вы хотите продвинуть сайт в Google, размещать видео нужно на своем ресурсе. Если вы разместите видео на YouTube и дадите ссылку на свой сайт, то поисковые системы отдадут предпочтение YouTube, и в результате кто-то, кто ищет вашу компанию в Google, попадет на YouTube, а не на ваш сайт.

Другие советы:

1. Пишите метаданные для видеороликов (чтобы они проще индексировались).
2. Придумывайте видеороликам описательные (а не общие) названия. При этом название не должно быть длинным; также советую использовать ключевые слова.
3. Подбор ключевых слов может потребовать некоторых усилий (и времени), зато это повысит шансы вашего видео появиться в поисковой выдаче.
4. Выберите подходящую миниатюру (это важно).

Заключение

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

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

В конце концов, оптимизировать видео не так сложно, как сделать по-настоящему интересный ролик. Удачи!

Битрикс — Оптимизация и сжатие HTML + CSS для уменьшения веса страниц сайта

Модуль «Оптимизация и сжатие HTML + CSS» для 1с-Битрикс оптимизирует html-страницы и подключаемые css-файлы сайта «на лету».

Решение оптимизирует html-страницу получаемую пользователем. Оптимизация происходит за счёт удаления технической и служебной информации, а так же очистки незначимых данных. Встроенный в страницу в инлайн виде css и js так же оптимизируются. Дополнительно решение умеет сжимать и объединять подключаемые таблицы стилей (css). В решении используются стабильные алгоритмы сжатия, позволяющие оптимизировать вес страниц сайта, не влияя на внешний вид и работоспособность. Процесс сжатия полностью безопасен и обратим простым выключением решения. Важно понимать, что целью работы модуля является уменьшение веса станиц и экономия трафика пользователей, а не прирост баллов Google PageSpeed.

Простой пример работы модуля:

HTML страница сайта  весит 320 килобайт, а все ccs скрипты суммарно весят 360 килобайт. Вы устанавливаете решение и результате его работы вес html  страницы уменьшается до 190 килобайт, а css до 325 килобайт. Теперь при каждой загрузке  экономится 130 + 35 килобайт трафика.

Предположим, что к Вам на сайт заходит 300 посетителей ежедневно, каждый из которых делает по 5 переходов на сайте.

Посчитаем экономию: 300 (человек) х 5 переходов х 165 (килобайт) = 247500 килобайт/день * 30 дней = 7251 мегабайт

За  месяц пользователи загрузили на 7251 мегабайт меньше ненужной   информации в виде пустых строк, переносов, внутренних комментариев   разработчиков и каждое открытие страницы происходило быстрее!

	▷	Простая установка за 5 минут
	▷	Гибкая настройка компрессии
	▷	Модуль безопасен — он не изменяет исходные файлы
	▷	Бережно работает со встроенным JavaScript

▷

Уникальные алгоритмы сжатия — решение использует свои алгоритмы сжатия, а не стандартные библиотеки компрессии

	✔	Корректно работает на пк, смартфоне и планшете
	✔	Поддерживает механизм многосайтовости
	✔	Одинаково хорошо работает с кодировками UTF-8 и Windows-1251
	✔	Использует стабильные события и работает на большинстве версий 1с-Битрикс
	✔	Поддерживает композитный и автокомпозитный режим

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

— Модуль «Inline CSS, Preloading, Preconnect», решающий проблему блокировки страницы стилями — смотреть карточку решения

— Модуль «Отложенная загрузка картинок, видео и фоновых изображений», решающий проблему блокировки страницы стилями — смотреть карточку решения

Как ускорить сайт с помощью gzip, brotli, кэша, минификации и других способов

Разбираемся, как уменьшить вес сайта и ускорить загрузку страниц: как использовать сжатие gzip и brotli, минифицировать CSS, HTML, JS, кэшировать страницы в браузере пользователя, как оптимизировать изображения и другую графику.

Зачем уменьшать размер HTML-страницы

С каждым годом вес HTML-страниц в среднем увеличивается. По данным MachMetrics, средний размер веб-страницы в 2018 году — 2МБ, это в три раза больше, чем три года назад. Это происходит, потому что на сайты добавляют более качественные и тяжелые изображения и видео, CSS или JS-файлы.

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

Пользователи не будут ждать долгой загрузки, максимум, который они ждут — 2-3 секунды на десктопе или 3-4 на мобильном устройстве. Если сайт так и не загрузился, пользователь закроет страницу — для поисковиков это будет значить, что сайт не удовлетворяет задачи пользователей. Поисковики стимулируют веб-мастеров ускорять и облегчать сайты. Обновление Google Speed Update занижает позиции очень медленных сайтов, к тому же Google переводит сайты в Mobile-first index — это значит, что mobile-friendly сайты получат преимущество, десктопная выдача будет строиться на основе мобильной, где особенно важен вес страницы.

Иногда незначительные задержки скорости не критичны, если посетители целенаправленно хотят получить услуги, товары или информацию с конкретного сайта. К примеру, по данным инструмента Google PageSpeed Insights, у сайта amazon.com довольно низкая скорость загрузки с мобильных устройств, но Amazon востребован: пользователи готовы ждать, чтобы делать выгодные заказы.

Анализ amazon.com

Скорее всего Amazon рассчитывает на то, что пользователи со смартфонов будут скачивать мобильное приложение, поэтому не работает над скоростью мобильной версии сайта.

Измерить скорость загрузки своего сайта и сравнить с конкурентными можно с помощью инструментов Google PageSpeed Insights или Проверка скорости сайта от PR-CY.

Фрагмент результатов проверки

Если хотите ускорить загрузку страницы, то рекомендуем уменьшить ее размер.

Как уменьшить размер HTML

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

1. Избавиться от переадресации с целевой страницы. Google пишет о том, что перенаправления типа example.com → www.example.com → m.example.com или example.com → m.example.com/home для мобильных пользователей замедляют загрузку страницы.
2. Оформить HTML-элементы с помощью CSS, это ускорит загрузку и упростит работу с повторяющимися на страницах элементами.
3. Сжать все текстовые файлы HTML, XML, CSS, Javascript, сжать HTML-код страниц.
4. Использовать минификацию — удалить ненужные данные, которые увеличивают объем кода.
5. Сжать все графические файлы, оптимизировать изображения — фотографии и графику.
6. Использовать кэш браузера — кэшировать данные в браузере пользователя.
7. Оптимизировать нефункциональные анимационные детали, отказаться от flash — такие элементы вредят безопасности сайта и могут не поддерживаться у пользователей.
8. Оптимизировать количество рекламных блоков на странице.

Использовать сжатие gzip или brotli

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

Самый популярный алгоритм сейчас — gzip, он появился одним из первых. Gzip поддерживают все серверы и распространенные браузеры. После работы над gzip инженеры сосредоточились на алгоритме, который сжимал бы еще сильнее, и разработали brotli — у него больше степеней сжатия по сравнению с gzip, но на высоких уровнях сжатия его скорость чуть меньше.

Сжатие данных алгоритмами состоит из этапов:

1. Клиент совершает запрос и оповещает сервер, какие данные может принять.
2. Сервер обрабатывает запрос и определяет, какую версию отправить.
3. Сервер отправляет файл клиенту.
4. Клиент распаковывает и считывает информацию.

На втором этапе браузер сообщает серверу, какие методы сжатия поддерживает — посылает заголовки Accept-Encoding с кодом, где указаны алгоритмы сжатия, например, «accept-encoding: gzip, deflate, br». Сервер выбирает форматы из доступных: если клиент поддерживает brotli, то сервер ищет суффикс «.br» в заголовке и отправляет клиенту нужный файл. Если его нет, будет использовать другой алгоритм. Если клиент не поддерживает сжатие вообще, сервер отправит несжатую версию.

Какой алгоритм сжатия выбрать: gzip или brotli?

Многие веб-мастера используют оба способа, поскольку brotli позволяет сжимать сильнее, но gzip поддерживают больше браузеров, поэтому он будет использоваться чаще.

Почитать по теме:
Как оптимизировать показатель LCP | Ускоряем загрузку контента для пользователей

Как использовать сжатие gzip

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

Степень сжатия можно настраивать, gzip поддерживает уровень сжатия от 1 до 9. Обычно рекомендуют степень 4-7 в зависимости от ресурсов процессора, оптимальное значение 5. Подберите подходящую степень сжатия под свои ресурсы, чтобы процессор справлялся, иначе сжимать информацию будет бесполезно, если нагрузка на процессор сильно вырастет. Экономить ресурсы поможет использование заранее сжатых файлов, они имеют формат gzip с дополнительным расширением .gz. На такие файлы можно применять максимальную степень сжатия, дальше сервер будет использовать ее вместо обычной.

Сжатие gzip для Nginx

В новых версиях Nginx gzip сжатие включено по умолчанию, но если такого нет, его можно настроить. Чтобы запустить сжатие gzip для сервера Nginx, нужно включить сжатие в модуле /etc/nginx/nginx.conf: 

 gzip on;
     gzip_disable "msie6";
     gzip_vary on;
     gzip_proxied any;
     gzip_comp_level 6;
     gzip_buffers 16 8k;
     gzip_http_version 1.1;
     gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Директива «gzip_disable «msie6»» отключает сжатие для эксплорера 5.5 и 6, «gzip_proxied any» позволяет сжимать данные для proxy-серверов.

Уровень сжатия указывают в директиве «gzip_comp_level 6».

Директива «gzip_types text/css text/javascript application/javascript» указывает типы файлов для сжатия на сервере. Перечислите те, которые вам нужны. Cжатие text/html подразумевается и не может быть отключено, если вы не установили gzip off, а text/css и application/x-javascript включает сжатие gzip для файлов CSS и javascript соответственно.

Сжатие gzip можно включать и выключать для каждого «сервера» Nginx — более мелкой структуры, и для конкретного location — еще меньшей, зачастую располагающейся внутри него.

Gzip-сжатие файлов SVG для Nginx

Сжатие gzip будет работать для SVG, если формат векторной графики SVG есть в файле, который обычно располагается по пути «/etc/nginx/mime.cgi-script$ </ifmodule>

Если используете mod_deflate, для отгрузки сжатых файлов добавьте строки в файл .htaccess: 

 <ifmodule mod_deflate.c="">
     AddOutputFilterByType DEFLATE text/html
     AddOutputFilterByType DEFLATE text/css
     AddOutputFilterByType DEFLATE text/javascript
     AddOutputFilterByType DEFLATE text/xml
     AddOutputFilterByType DEFLATE text/plain
     AddOutputFilterByType DEFLATE image/x-icon
     AddOutputFilterByType DEFLATE image/svg+xml
     AddOutputFilterByType DEFLATE application/rss+xml
     AddOutputFilterByType DEFLATE application/javascript
     AddOutputFilterByType DEFLATE application/x-javascript
     AddOutputFilterByType DEFLATE application/xml
     AddOutputFilterByType DEFLATE application/xhtml+xml 
     AddOutputFilterByType DEFLATE application/x-font 
     AddOutputFilterByType DEFLATE application/x-font-truetype 
     AddOutputFilterByType DEFLATE application/x-font-ttf 
     AddOutputFilterByType DEFLATE application/x-font-otf 
     AddOutputFilterByType DEFLATE application/x-font-opentype 
     AddOutputFilterByType DEFLATE application/vnd.Mozilla/4\.0[678] no-gzip
     BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    </ifmodule>

Есть еще такой вариант перечисления типов файлов для сжатия в одной строке: 

<ifmodule mod_deflate.c="">
    AddOutputFilterByType DEFLATE text/html text/css text/javascript font/ttf application/javascript
    DeflateCompressionLevel 7
    </ifmodule>

В строке DeflateCompressionLevel 7 указывают степень сжатия. Сжатие будет работать после сохранения.

Gzip-сжатие файлов SVG для Apache

Векторную графику формата SVG можно сжать с помощью gzip. В файле .htaccess. должна быть строка «# Compress HTML, CSS, JavaScript, Text, XML and fonts», добавьте в .htaccess строчку кода: 

AddOutputFilterByType DEFLATE image/svg+xml

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

Как использовать сжатие brotli

Brotli поддерживают браузеры Chrome, Firefox и Edge 15 для SSL-соединений. В заголовках должен быть «Accept-Encoding: br». В brotli есть собственный словарь из более сотни тысяч фраз, который используется для сжатия данных. Он же встроен в браузеры, которые поддерживают алгоритм, поэтому словарь не передается в архиве, и архив весит меньше.

Алгоритм сжатия brotli сжимает файлы сильнее, чем gzip. Максимальная степень сжатия у gzip — 9, а у brotli 11, степень 11 brotli дает файл на 25% меньше, чем сжатый 9 степенью gzip.

Некоторые веб-мастера считают, что brotli нет смысла использовать для динамических страниц, поскольку он медленнее gzip. Такое ощущение складывается, если сравнивать параметры по умолчанию: у команды brotli стоит максимальный 11 уровень сжатия, для него нужно больше времени, поэтому процесс сжатия получается медленнее.

Для динамических страниц рекомендуем использовать уровень 5-6, тогда скорость сжатия будет достаточно быстрой. Для статических страниц можно использовать скрипт для сжатия 11 уровня.

Сжатие brotli для Nginx

Сервер Nginx использует brotli при включенном модуле «brotli_static» в конфигурации «brotli_static on». Тогда сервер получит от браузера заголовок, проверит, есть ли в нем файл с расширением «.br» и отдаст нужный файл как архив, сжатый в brotli.

Brotli-архивы нужно установить из репозитория или собрать утилиты:

git clone https://github.com/badger/libbrotli
cd libbrotli
autoreconf -i
make install
git clone https://github.com/google/brotli
cd brotli
./configure
make
chmod +x bro
./bro —quality 11 —input <filename> —output <filename.br></filename.br></filename>

Пересборка Nginx с поддержкой brotli на Github.

Для сжатия «на лету» можно установить дополнительный модуль nginx brotli. Модуль Nginx для сжатия brotli «на лету» на Github.

Сжатие brotli для Apache

Сжатие brotli поддерживает Apache версии 2.4.26 и выше.

Для Apache есть модуль mod_brotli.

Модуль mod_brotli by kjdev на Github.

Как проверить сжатие данных

Алгоритм сжатия данных будет работать сразу после установки кодов. Проверить корректность работы можно несколькими способами.

Для проверки работы gzip есть Check GZIP compressed.

Фрагмент результатов проверки тестом

Google PageSpeed Insights оценит скорость загрузки и покажет список файлов, для которых не работает сжатие.

Фрагмент результатов проверки инструментом

Инструмент «Проверка скорости сайта» от PR-CY оценит скорость и покажет страницы, на которых не работает сжатие.

Фрагмент результатов проверки инструментом

Использовать минификацию HTML, CSS и JS

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

Минификация помогает уменьшить размер фрагментов кода JS, она не влияет на сам файл, но оптимизирует его и уменьшает размер, за счет чего повышается скорость загрузки. Файлы, прошедшие минификацию, получают расширение «.min». После минификации в CSS, HTML, JS-файле не будет разделителей, переносов, лишних пробелов, поэтому его будет сложнее читать.

Бесплатные инструменты для минификации CSS, JS, HTML-файлов

Собрали несколько бесплатных онлайн-инструментов для сокращения кода.

• minifycode.com
  Простой бесплатный онлайн- инструмент для минификации кода HTML, CSS и JavaScript файлов в отдельных полях.
• willpeavy.com/minifier
  Другой простой инструмент для минификации HTML, CSS или JS в один клик без дополнительных настроек.
• letteros.com/compressor
• Инструмент в два клика сжимает код JS, HTML и CSS, нужно только вставить код в поле и выбрать формат.
• htmlcompressor.com
  Инструмент позволяет выбрать уровень минификации HTML и встроенного в него кода CSS и JS, отметить расширенные настройки.
• jscompress.com
  Инструмент для сокращения файлов JS. Можно загружать файл и минифицировать несколько одновременно.
• askapache.com/online-tools/compress-css
  Инструмент для быстрой минификации CSS без настроек — загружаете код и получаете результат.
• csscompressor.com
  Инструмент дает установить одну из четырех степеней минификации CSS и размер итогового файла.

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

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

Google рекомендует настроить сервер так, чтобы он возвращал ответ с HTTP-заголовком Cache-Control, например:

Cache-Control: max-age=31536000

Директива «max-age» указывает, как долго браузер должен кэшировать ресурс в секундах. Значение 31536000 соответствует году: 60 секунд * 60 минут * 24 часа * 365 дней = 31536000 секунд.

Google советует применять «no-cache» для объектов, которые могут обновляться: тогда браузер по-прежнему будет кэшировать ресурс со значением «no-cache», но сначала проверит актуальность на сервере.

Кэширование для Nginx

Для сервера Nginx подходит модуль expires в файле конфигурации. Нужно перечислить форматы файлов для кэширования и указать время хранения кэша: 

location ~* \.(js|css|png|jpg|jpeg|gif)$ {
 expires 86400s;
 log_not_found off;
 }

Время можно указать в любом формате: секунды — s, часы — h, дни — d и месяцы — m, обозначение «max» указывает на кэширование навсегда.

Вместо времени хранения файла можно указать дату следующего обновления файла в кэше: 

expires Fri, 24 Nov 2017 01:01:01 GMT;

Строка log_not_found off нужна для снижения нагрузки на сервер, она отключает ведение лога сообщений с ошибкой 404 для перечисленных файлов. 

Кэширование для Apache

Метод Cache-Control

Метод позволяет указать для кэширования файлы конкретных форматов. В файле .htaccess в конструкции FilesMatch нужно указать расширения файлов для кэширования и время сохранения файла в кэше в секундах: 

# 1 Month for most static assets
    <filesmatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$"="">
     Header set Cache-Control "max-age=2592000"
    </filesmatch>

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

  <filesmatch ".(pl|php|cgi|spl|scgi|fcgi)$"="">
     Header unset Cache-Control
    </filesmatch>

Кэширование по времени

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

 ## EXPIRES CACHING ##
    <ifmodule mod_expires.c="">
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
    </ifmodule>
    ## EXPIRES CACHING ##

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

После сохранения нужно обновить страницу.

Проверить кэширование в Google Chrome можно с помощью веб-инспектора Chrome DevTools. Столбец Size в Chrome DevTools поможет убедиться, что ресурс в кэше:

Столбец Size в Chrome DevTool. Источник — Google

Вкладка Headers покажет, как установлен Cache-Control:

Проверка заголовка Cache-Control. Источник — Google

Сжать фотографии, иллюстрации и другую графику

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

Почитать по теме:
Большое руководство по SEO для картинок: как оптимизировать изображения на сайте

Как оптимизировать картинки для сайта:

1. Подберите разрешение.
   Незачем загружать изображение в большом разрешении, если оно будет отображаться в маленьком без увеличения по клику.
2. Подберите формат.
   JPEG подходит для фотографий, PNG для дизайнерской графики, SVG для вектора. Google также индексирует формат WebP, который весит меньше, но не все браузеры его поддерживают. Яндекс не индексирует SVG и изображения в скриптах.
3. Уменьшайте количество цветов.
   Изображения, где нет сложных градиентов, требуют меньшего количества цветов. Можно оптимизировать картинку без потери качества, выбрав палитру меньше, тогда изображение будет хранить меньшее количество битов на пиксель.
Слева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета)
4. Пропишите параметры в CSS.
   Укажите размеры в коде или в редакторе изображений CMS. Для разных экранов и дисплеев с матрицей Retina нужны дополнительные варианты изображения разных размеров, чтобы браузер загружал нужное для устройства.
5. Используйте шрифты.
   Если вы еще используете графику вместо шрифтов для текста, замените надписи на шрифты, это удобнее и меньше весит. Такой текст можно скопировать, поменять, масштабировать в любой момент.
6. Удалите лишние изображения.
   Неинформативные картинки, иллюстрации ради разбивки текста и непонятные схемы лучше заменить на качественные изображения, которые помогут понять тему материала, или вообще удалить, чтобы они не прибавляли вес странице.
7. Минифицируйте.
   Удаляйте XML-разметку с лишними метаданными, она появляется при работе с картинками в некоторых графических приложениях. EXIF — информацию о геоданных, дате съемки, фотокамере тоже можно удалить.
8. Используйте алгоритмы сжатия.
   Настройте на сервере gzip-сжатие для SVG-графики.

Инструменты и сервисы для оптимизации изображений на сайте:

• CompressJPEG
  Сервис для сжатия JPEG и PNG без потерь качества.
• PunyPNG
  Инструмент сжимает PNG, JPEG и GIF.
• TinyPNG
  Инструмент для оптимизации изображений в PNG и JPEG.
• Jpegtran
  Инструмент для оптимизации JPEG-изображений.
• Optipng
  Инструмент для оптимизации PNG без потерь.
• Pngquant
  Инструмент сжимает PNG-изображения.

---

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

Как в html сделать оптимизацию. Выбираем лучший онлайн-сервис по сжатию CSS

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

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

Валидация и стандартизация HTML

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

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

Все самые популярные браузеры – Opera, Google Chrome, Mozilla Firefox в своих последних версиях используют поддержку нового гиперязыка HTML5. Важность использования HTML5 для создания сайтов еще и в том, что мобильные компьютеры на базе операционной системы Android не поддерживают технологию Flash и пользователи не смогут просматривать видео в формате SWF.

Сайты на основе HTML5 способны воспроизводить видео без необходимости загрузки и установки Adobe Flash Player. Тенденция к отказу от флеш расширяется, поэтому для нормальной работы сайтов полезно постепенно отказываться от использования флеш-видео и анимированных баннеров этого формата.

Проверить валидность HTML-кода сайта можно бесплатно на официальном сайте Консорциума Всемирной Паутины, вот например этот

validator.w3.org

Встроенные валидаторы имеются в хороших конструкторах сайтов и системах управления контентом.

Очистка HTML-кода

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

К вредоносному мусору относятся также битые, неработающие ссылки, которые никуда не ведут, потому что реципиент был удален. Такие ссылки очень не нравятся поисковым системам. Наличие битых ссылок может негативно отражаться на поисковом провождении ресурса.

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

http://creatingonline.com/site_promotion/broken_link_checker.htm

http://anybrowser.com/linkchecker.html

Оптимизация графического контента

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

• Для публикации фотографий целесообразно использовать формат JPEG, поскольку этот тип файлов обеспечивает лучшее качество при минимальном весе.

• Для сохранения картинок, для которых качество не очень важно, можно выбрать формат PNG при весе файлов не более 100 или 200 КБ.

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

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

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

Метатеги веб-страницы

Метатеги для разных страниц сайта должны быть в обязательном порядке уникальными. При обнаружении дублированных тегов поисковая система их склеивает и часть страниц таким образом не будет проиндексирована. Эксперименты показали, что уникализация метатегов сайта улучшает ранжирование и повышает посещаемость примерно на 18%.

Особое внимание следует уделить оптимизации тегов Title и Description

1. Заголовок страницы должен состоять не более чем из разрешенного поисковой системой количества символов и содержать главное ключевое слово.
2. Оптимальное количество слов для заголовка – шесть.
3. Описание страницы оформляется как своего рода продающий текст для посадочной страницы и обычно составляется из двух коротких предложений. В первом предложении содержится главное ключевое слово, а во втором – дополнительное.
4. Метатеги Keywords не очень важны, но должны быть на всякий случай.

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

Оптимизация программных элементов – скриптов

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

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

Оптимизация текстового контента

Доброе утро, дорогие друзья! Получилось так, что неделя посвящена, в большей степени, оптимизации и ускорению загрузки лендинг пейдж. Сегодня продолжим “маньячить” в этой области. На очереди оптимизация css кода. Я расскажу вам про онлайн сервис для оптимизации таблиц стилей.

Эти сервисы довольно просты и работают по принципу:

“Вставил неоптимизированный код. Подождал несколько секунд. Скопировал оптимизированный код”

Как видите – это довольно просто и не затратно, но не все находят время, чтобы заняться этим. А зря!

Онлайн оптимизация css

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

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

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

Поэтому оптимизируем, но не сходим с ума — это первое.

Второе — это то, что при использовании сервисов, которые предлагают оптимизацию css кода, важно понимать, что там происходит и что оптимизируется. Сейчас я покажу вам несколько примеров.

Например, цвета. Обычно, мы задаем их в стандарте RGB. Белый фон для элемента задается следующим образом

Background: #ffffff;

Но не все знают, что если первые 3 значения повторяются, то можно оставить только их. Например, так:

Background: #fff; background: #000; color: #123;

Следующее, что приходит на ум – это отступы (padding и margin)

Padding: 10px 20px 10px 20px; /*вместо*/ padding: 10px 20px; margin: 15px 20px 15px 20px; /*вместо*/ margin: 15px 20px;

Также, оптимизировать css код можно за счет сокращенного задания шрифтов:

Font: bold 18px Verdana, Arial, sans-serif;

Font-size: 18px; font-family: Verdana, Arial, sans-serif; font-weight: bold;

Как видите – одна строчка против трех. И таким образом, иногда, удается уменьшить вес таблицы стилей на 20 – 30%.

Третье, о чем стоит помнить, — это то, что всегда перед любой оптимизацией, будь то картинки или css, нужно делать резервную копию (на случай непредвиденной ошибки или еще чего). Просто возьмите себе за правило всегда делать копию перед редактированием.

Теперь – все. Переходим к сервису.

Обзор сервиса для онлайн оптимизации css кода.

Большинство людей пользуются такими популярными сайтами для оптимизации css кода:

alexvaleev.ru/cssoptimizer

css-school.ru/optimise

Функционал фактически одинаковый, простой и понятный. Но, проанализировав их, я нашел как плюсы, так и недостатки. Давайте посмотрим на один из них — css-school.ru/optimiser

Слева окно для вставки css кода, а справа настройки параметров оптимизации. Разберем подробнее окно.

Степень сжатия.

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

Следующим идет окно для задание своих шаблонов оптимизации, его пропустим.

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

Оптимизация стилей. Оставляем – “безопасная”

Сжатие цветов и свойств шрифтов – это то, о чем я вам говорил. Хотя и со сжатием свойств шрифтов — проблема. Он не оптимизирует код, как я вам рассказывал выше.

Остальные настройки не вызывают вопросов. В общем я заметил, что все русскоязычные сервисы для онлайн оптимизации css кода , страдают “болезнью”. Они не оптимизируют css3 код. Что заставило меня полностью отказаться от подобных оптимизаторов.

Для примера, я ввел следующий код:

Специально написал с пропусками строк, все подробно и т.д. И ожидал увидеть нечто подобное:

h2 { color: #fff; padding: 20px 25px; font: 700 18px Verdana, Arial, sans-serif }

Но к сожалению получилось всего лишь так:

Семь строчек, вместо пяти. Это меня не устраивало. Я же хотел найти и рассказать вам о более качественном материале. Так как понимаю, что некоторые не знакомы с сокращенными видами записей стилей.

А некоторый функционал сервисов мне показался лишним, ну или псевдофункционалом. Для того, чтобы создать видимость “навороченности” ресурса. Ну зачем мне галочка напротив «сокращать цвета». Конечно, если я пришел оптимизировать свой код, то мне нужно более короткое описание всего, что возможно! (Мое мнение)

Итак, я продолжил поиск и нашел тот самый ресурс, который удовлетворил мои потребности в оптимизации css кода. Это — devilo.us

Действительно потрясающий сервис, который я смело могу рекомендовать вам. Функционал такой же, как и у прошлых сайтов. Но этот справился с задачей на 100%. Смотрите:

Как вы могли заметить, процент сжатия 43.3%, а на прошлом сайте было 25%. В байтах – это вышло 58 > 37. Вот такой я зануда. Но когда css файл имеет 3000 строк, то такая оптимизация может сократить вес документа вдвое.

Конечно, со временем вы научитесь писать сразу оптимизированный css код, и подобные сервисы вам будут нужны все реже и реже, но проверить себя не мешает. Хотя бы на наличие лишних пробелов и пропусков строк.

А на сегодня – все. До скорых встреч.

Несмотря на то, что сайты воспринимаются нами внешне, их внешняя составляющая строится, как и в Человеке, исходя из внутреннего мира под действием специальных законов и правил. Эти законы и правила для сайтов определяются стандартами W3C. Внешней составляющей сайта являются его дизайн и структура, внутренней составляющей – HTML -код и CSS -стили (не учитывая отдельный функционал).

Разрабатывая сайт или добавляя на него контент, мы часто заботимся лишь о внешнем его представлении. Это здорово! Однако, следует уделять внимание и внутреннему представлению страниц в виде HTML кода, особенно если речь идёт о будущем привлечении поискового трафика. Эта статья посвящена вопросам оптимизации кода сайта для улучшения его видимости в поисковых системах и построена на основе доклада автора с конференции All in Top Conf 2012 “Понятие SEO оптимизированной вёрстки”.

Каким сайтам нужна оптимизация кода

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

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

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

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

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

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

Основные этапы оптимизации кода сайта

• Выделение заголовков h2-h6 – поисковые роботы в целом, поэтому не стоит забывать про правильное оформление текста.
• Уменьшение размера кода – чем меньше кода, тем легче и быстрее загружается страница. С недавних пор, скорость загрузки страниц, стала важным фактором ранжирования в выдаче Google, о чем было официально заявлено.
• Удаление вредоносного кода – на многих хостингах существует раздел антивирус, который сканирует файлы сайта и указывает путь к их решению. Отсутствие вредоносного кода делает сайт более предпочтительным для поисковиков.
• Внутренняя оптимизация сайта – создание уникального текста, поддерживающего необходимую плотность ключевых слов.
• – равномерно распределяет вес страниц и повышает трафик по низкочастотным запросам, особенно при пополнении нового контента.
• Добавление мета тегов – title, keywords и description используются работами и отображаются на страницах поисковой выдачи. Правильно составленные мета-теги повышают релевантность страниц и привлекают пользователей.
• Оптимизация изображений – каждой картинке должен быть подобран оптимальный формат (GIF, JPEG, PNG и PNG-24), а также прописаны alt и title.

Валидность кода сайта

Валидность – это соответствие кода общепринятым мировым стандартам W3C. Не валидный код сайта, содержащий множество ошибок, может стать препятствием в продвижении определенного ресурса. Если закрыты не все парные теги, возможны проблемы с отображением элементов дизайна. Но в действительности, даже сайты крупнейших поисковых систем не являются валидными на 100%. В чем причина такого несоответствия?

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

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

Оптимизация каскадных таблиц стилей

Как и оптимизация html-кода, оптимизация стилей (css) является не менее важным мероприятием, которое упускается из виду многим веб-мастерами. Оптимизация css кода также ускоряет загрузку страниц сайта и экономит трафик. Поскольку css-файл весит до 100 Кб, многие веб-мастера не видят необходимости в его оптимизации, но если подумать, сколько трафика экономится при оптимизации файла в год, вы поймете, насколько ее недооценивали.

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

Настройка кодировки

Еще одним моментом, влияющим на продвижение сайта , является кодировка. Русскоязычный текст будет корректно отображаться только при условии правильной настройки кодировки, например, Windows-1251 или utf-8. При неправильной кодировке контента, знаки и символы будут искажены, что приведет к потере посетителей и замедленной индексации.

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

Внутренняя оптимизация сайта

В большинстве случаев грамотная внутренняя оптимизация ресурса может вывести сайт на лучшие позиции поисковиков без существенных усилий и работы со ссылочными биржами. Важна каждая мелочь, влияющая на его позиции. Постарайтесь создать такую структуру, которая будет понятна и пользователям, и поисковым системам. Многостраничные порталы должны содержать систематизированные разделы, в которых все страницы находятся не дальше 3-4 кликов. Желательно использовать навигационную цепочку и удобные для человеческого восприятия веб-адреса. К сожалению, не все скрипты CMS обладают таким функционалом.

Заключение

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

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

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

Бесплатные оптимизаторы HTML кода

HTML оптимизатор 2.0 — программа служит для удаления ненужных тегов и символов из HTML кода веб страниц. Позволяет уменьшить размер файлов на 5-20%. Программа очень быстрая, маленького размера и не требует инсталляции на компьютер. Работать с программой просто и удобно, нужно лишь перетащить нужный файл в окно программы для обработки.
Скачать

Оптимизатор HTML файлов 1.10

Программа предназначена для удаления лишних тегов, пробелов, пустых строк и т.д. Кроме этого программа позволяет заменять одни теги на другие. Уменьшает размер файлов на 5-20%.
Скачать

HTML Shrinker Light 2.60

HTML Shrinker более продвинутый инструмент для оптимизации html кода веб страниц и других типов файлов. В результате оптимизации кода объем файлов может уменьшится на 5-50%. Как следствие страницы вашего сайта будут загружаться быстрее и уменьшится нагрузка на сервер. Программа работает с файлами html, css, php, js, cfm и др.

HTML- Optimizer — платный оптимизатор html файлов

HTML- Optimizer — один из лучших инструментов для оптимизации различных файлов. Программа поддерживает более 20 расширений файлов, в том числе графические, умеет работать не только с файлами, но и с папками. Поддержка Drag&Drop. Размер файлов после оптимизации может уменьшится до 50%. Очень простая и надежная в использовании программа. 30 дневная пробная версия. Подробнее на tonbrand.nl сайте.

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

10 лучших инструментов для форматирования и оптимизации файлов CSS

Форматирование и оптимизация

CSS-файлов больше не является головной болью для веб-разработчиков с помощью этих тщательно подобранных инструментов!

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

CSS

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

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

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

# Инструменты настройки CSS

CSS Minify

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

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

Верхнее покрытие

Topcoat — это не инструмент для оптимизации вашего CSS. Вместо этого это библиотека CSS с открытым исходным кодом, разработанная с учетом скорости.Это потомок языка дизайна Adobe, разработанного для Brackets, Edge Reflow.

Topcoat включает PSD и многие другие артефакты дизайна, а также набор простых и понятных значков SVG и руководств по стилю. Он также предлагает инструменты для тестирования и модное семейство шрифтов Adobe Source Sans Pro.

Украшение кода

Code Beautifier основан на CSS Tidy, популярном анализаторе и оптимизаторе CSS с открытым исходным кодом. Он позволяет вставлять код CSS для обработки в текстовую область или получать его из URL-адреса.После выполнения своей работы он показывает оптимизированный код вместе со списком внесенных изменений. Вы можете скопировать измененный код в буфер обмена или сохранить его в файл для дальнейшего использования.

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

CSS Нано

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

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

# CSS Инструменты для очистки

Грязная разметка

Dirty Markup действует прямо противоположно минификаторам: он берет любой код, который вы ему скармливаете, и очищает его, облегчая чтение — пока это действительный код CSS. Полученный код прекрасно украшен.

Создатели Dirty Markup говорят, что с помощью их инструмента были улучшены почти миллиард строк кода (учитывая не только CSS, но также HTML и JavaScript).

Селекторы пыли

Dust-Me Selectors был создан для сканирования веб-сайта и поиска неиспользуемых селекторов CSS, чтобы удалить их и уменьшить размер вашего кода. Он работает как надстройка для Firefox и Opera.

Dust-Me Selectors может работать на отдельной странице или сканировать всю карту сайта, показывая вам подробную информацию обо всех найденных таблицах стилей и селекторах, систематизируя их по используемым и неиспользованным. Версия Firefox может автоматически сканировать страницы во время просмотра.Следует учитывать только то, что при этом события мутации могут запускать дополнительные проверки при изменении страницы.

CSS Линт

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

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

# Инструменты тестирования / проверки CSS

Стресс-тест CSS

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

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

Но CSS3 мог вызвать проблемы: одно свойство могло привести к видимым перерисовкам и проблемам с прокруткой страницы.Вот где может пригодиться стресс-тест CSS.

Служба проверки CSS

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

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

Ограничитель обратного хода JS 3

BackstopJS 3 автоматизирует визуальное регрессионное тестирование отзывчивых пользовательских веб-интерфейсов.Он выполняет свою работу, сравнивая серию снимков экрана DOM. Он предлагает захватывающий список функций: есть отчеты в браузере, а также настройка макета для печати и экрана, а также некоторые другие специальные функции, такие как фильтрация отображения и инспектор эталонных / тестовых / визуальных различий.

Используя сценарии Puppeteer и ChromyJS, BackstopJS 3 может моделировать взаимодействие с пользователем и может выполнять тесты с помощью Chrome Headless. Чтобы устранить проблемы кроссплатформенного рендеринга, он также имеет интегрированный рендеринг докеров.Инструмент может работать глобально или локально как отдельный пакет, и он хорошо работает с CI и системой управления версиями. BackstopJS 3 очень прост в использовании: всего с тремя командами вы можете пройти довольно долгий путь.

Заключение

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

6 онлайн-инструментов для сжатия, оптимизации и очистки CSS

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

• Усовершенствование стилей для улучшения читабельности
• Минимизация стилей для развертывания в производственной среде
• Обычная стирка и чистка в стиле тарабарщины

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

Сказав это, бывают случаи, когда вы не хотите запускать свой рабочий процесс разработки (или вы, возможно, уже не используете такой рабочий процесс), и все же вам нужна быстрая оптимизация, выполненная онлайн, поскольку вы не хотите этого делать. это вручную, конечно, потому что это громоздкая задача!

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

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

1. Оптимизатор CSSPortal
   
   

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

2. StyleNeat
   
   

   Его можно использовать в качестве альтернативы форматеру CSSPortal с красивым пользовательским интерфейсом. Вы можете вставить код или URL-адрес источника кода и отформатировать код на основе предоставленных ими наборов параметров.

3. CleanCSS
   
   

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

4. W3 CSS Validator
   
   

   Несмотря на то, что сегодня не многие разработчики заботятся о валидации, W3 CSS Validator по-прежнему является инструментом, который следует учитывать при валидации CSS. Это стандартный инструмент для проверки кода CSS путем прямого ввода, загрузки файла или URI.

5. Tabifier
   
   

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

6. YUI Compressor
   
   

   Еще один компрессор кода, который также поддерживает сжатие JavaScript.Воспользуйтесь интеллектуальными параметрами минимизации и соберите результат в виде простого текста или архива с gzip. Позволяет прямой ввод, загрузку файлов и отправку кода URI.

Все эти инструменты автоматизированы и имеют собственные методы обработки, поэтому, чтобы оставаться в безопасности, не забудьте сделать резервную копию своего кода CSS, если вы вырезать-вставить-сохранить.

7 принципов чистого и оптимизированного CSS — Smashing Magazine

Об авторе

Тони Уайт ведет персональное шоу «Спросите CSS Guy», дневной блог, посвященный изучению методов веб-дизайна на CSS и JavaScript , также как и … Больше о Тони ↬

Некоторые из вас, возможно, помнят дни, когда 30 КБ было рекомендованным максимальным размером веб-страницы, значением, которое включало HTML, CSS, JavaScript, Flash и изображения.Я считаю, что с каждым новым проектом, даже с малейшей степенью сложности, незадолго до этого идеальные 30 КБ становятся недосягаемыми. Учитывая популярность макетов CSS и веб-страниц, обогащенных JavaScript, нередко, особенно для крупных сайтов, файлы CSS выходят далеко за пределы 30 КБ.

Некоторые из вас могут вспомнить дни, когда 30 КБ было рекомендованным максимальным размером веб-страницы, значением, которое включало HTML, CSS, JavaScript, Flash и изображения. Я считаю, что с каждым новым проектом, даже с малейшей степенью сложности, незадолго до этого идеальные 30 КБ становятся недосягаемыми.

Учитывая популярность макетов CSS и веб-страниц, обогащенных JavaScript, нередко, особенно для крупных сайтов, файлы CSS значительно превышают этот потолок в 30 КБ.

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

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

1. Используйте стенографию

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

Поле , граница , отступ , фон , шрифт , стиль списка и даже контур — все это свойства, которые позволяют сокращать (и это даже не обширный список!).

Сокращение CSS означает, что вместо использования разных объявлений для связанных свойств…

  p {margin-top: 10px;
    поле справа: 20 пикселей;
    нижнее поле: 30 пикселей;
    маржа слева: 40 пикселей; }  

… вы можете использовать сокращенные свойства для объединения этих значений следующим образом:

  p {margin: 10px 20px 30px 40px; }  

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

Иллюстрация того, как сокращенные объявления интерпретируются в зависимости от того, сколько значений указано для свойства. Этот порядок также применяется к padding и border-width среди других свойств.

Шрифт — еще одно полезное сокращенное свойство, которое помогает сэкономить место и количество нажатий клавиш.

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

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

См. CSS Shorthand Guide (dustindiaz.com) и Эффективный CSS с сокращенными свойствами (456bereastreet.com) для получения дополнительной информации о сокращенных свойствах.

2. Ax the Hacks

В блоге Джона Хика используются условные комментарии

Взломы мертвых браузеров безопасны, но взломы живых — нет. Ни один из них. Всегда.

Сохраняйте простой CSS — Питер-Пол Кох (digitial-web.com)

Если вы похожи на меня, эти слова из статьи Питера-Пола Коха, написанной почти 5 лет назад, могут вас немного смутить.В конце концов, кто не использовал взломы Internet Explorer 6 и даже Internet Explorer 7? Как бы плохо мы ни хотели, чтобы IE6 располагался под шестью пикселями, на самом деле он еще далеко не мертв.

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

Вот как использовать условные комментарии для использования стилей только в Internet Explorer 6:

Для IE7 вы можете использовать указанное выше и заменить «7» на «6».

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

3. Используйте пробелы с умом

Пробелы, включая пробелы, табуляции и дополнительные разрывы строк, важны для удобочитаемости для кода CSS. Тем не менее, пробелы добавляют, даже если они незначительны, к весу страницы. Каждый пробел, перенос строки и табуляция, которые вы можете удалить, — это как если бы на один символ меньше.

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

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

Иллюстрация двух крайностей в форматировании CSS: много пробелов и очень мало пробелов

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

4. Сократить фреймворки и сбросить

CSS-фреймворк 960 Grid System Натана Смита использует правило сброса.

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

Это также относится к сбросам. YUI Grid CSS использует сброс, и сброс Эрика Мейера также очень популярен. Сброс удобен, потому что он помогает нейтрализовать стиль браузера по умолчанию. Но если вы знаете характер создаваемого вами сайта, вы можете найти некоторые декларации, которые, как вы знаете, вам никогда не понадобятся.

  и   , скорее всего, не будут использоваться в блоге рецептов моей тети Марты. В портфолио дизайна, вероятно, никогда не будет   ,   ,    и т. Д.Так что откажитесь от того, что вам не нужно. Это не только нормально, но и поощряется даже Эриком Мейером: 
 
 Как я уже сказал на странице сброса, эти стили никому не следует оставлять в покое. Они отправная точка. 
  Создаем сами - Эрик Мейер (meyerweb.com)  
 
 
 Использование фреймворка и / или набора правил сброса может помочь оптимизировать вашу работу, но они не должны приниматься в их состоянии по умолчанию. Рассмотрение каждого объявления и сокращение количества ненужных может еще больше помочь вам сохранить ваши CSS-файлы компактными и удобочитаемыми.
 
 5. Сделайте свой CSS перспективным 
 
 
  CSS Дуга Боумена раскрывает специально созданные селекторы, используемые для макета.  
 
 Другой способ оптимизации кода - отделить объявления, относящиеся к макету, от остальных правил. Я слышал о вариантах отделения типографики и цветов от правил для конкретного макета в файле CSS. Мне никогда не нравилась эта практика, поскольку я не хочу повторять селекторы только потому, что у меня есть разные типы объявлений, которые нужно связать с ними.
 
 Тем не менее, я подогреваю идею  отделения стилей макета от остальных стилей  и предоставления макету его собственного файла или, по крайней мере, его собственного раздела. Это также поддерживается в Transcending CSS Энди Кларка. В этой книге Кларк напоминает нам следующее: 
 
 Полные макеты CSS всегда были компромиссом. Текущие спецификации CSS никогда не предназначались для создания визуально насыщенных и сложных макетов интерфейса, которые требуются современной сети. Текущие методы - поплавки и позиционирование - никогда не предназначались как инструменты макета.
  Превосходя CSS - Энди Кларк.  
 
 
 Один из способов интерпретации этого состоит в том, что поплавки и позиции для установки боковых панелей и столбцов, ну,  хаки макета . И хотя у нас действительно нет альтернативы, мы надеемся, что она будет, когда будет согласован стандарт макета и браузеры начнут их поддерживать. Когда это произойдет, должно быть легко заменить эти взломанные свойства блочной модели на те, которые предназначены для макета. Хотя пройдет некоторое время, прежде чем появятся новые модули макета, использование правильных свойств для обработки макета вместо компенсации причуд нашего текущего ограниченного набора свойств наверняка поможет уменьшить вес страницы.
 
 6. Задокументируйте свою работу 
 
 
  В руководстве по разметке Дэвида Ши показано, как правильно использовать теги HTML и как они представлены на его сайте. Даже сайты без динамического HTML могут иметь это простое и эффективное руководство (конечно, с использованием собственного файла CSS!) В качестве отправной точки для документации.  
 
 Для команды дизайнеров чрезвычайно важно, чтобы  регулярно обменивался информацией с , чтобы правила разметки и стиля создавались единообразно, а также для создания стандартов сайта.Например, если кто-то придумает способ разметки интерфейса вкладок для сайта, документация будет удерживать других от дублирования этих усилий, предотвращая раздувание кода в HTML и CSS. 
 
  Документация, включая руководства по разметке и руководства по таблицам стилей , предназначена не только для групповых усилий - они не менее важны для команды дизайнеров, состоящей из одного человека. В конце концов, через год после работы над другими вещами пересмотр одного из ваших собственных проектов может показаться вам совершенно чуждым. Ваше будущее может по достоинству оценить напоминание о том, как должна работать ваша сетка CSS или на каких страницах уже есть обработка для кнопки формы вторичного действия, и это избавит вас или кого-то еще от добавления избыточных и ненужных правил в ваш CSS.
 
 Выбор использования документации имеет дополнительный побочный эффект - это отличное место для хранения объяснений, которые в противном случае должны быть включены в качестве комментариев CSS.  Комментарии CSS  отлично подходят для разделения кусков длинных файлов CSS, но подробные комментарии, которые используются для объяснения вариантов дизайна, могут увеличить размер файла и могут лучше подходить для разметки и руководства по стилю. Документирование кода с использованием комментариев CSS в рабочем файле определенно лучше, чем вообще ничего, но размещение этого материала в отдельной документации - отличный способ сохранить фокус кода и избавить его от раздувания.
 
 7. Используйте сжатие 
 
 Было создано несколько отличных приложений для сжатия и оптимизации CSS, позволяющих вам обслуживать нечитаемые человеком, но все же удобные для браузера файлы, которые составляют лишь часть исходных рабочих копий. Такие приложения, как CSSTidy и YUI Compressor, могут сжимать пробелы, обнаруживать и исправлять свойства CSS, которые перезаписывают друг друга, и искать возможности для использования сокращений CSS, которые вы, возможно, пропустили. (Эти типы приложений являются отличными источниками для чтения, хотя бы по какой-либо другой причине, чтобы узнать, что вы можете делать вручную).
 
 Даже популярные текстовые редакторы, такие как BBEdit, TextMate и TopStyle, могут помочь отформатировать файлы CSS по своему вкусу. Есть также варианты обслуживания zip-версий ваших файлов CSS с использованием PHP. Вы можете найти больше CSS-компрессоров и оптимизаторов в статье «Список инструментов CSS». 
 
 Важно отметить, что эти приложения делают все возможное, чтобы минимизировать ошибки, но они  не всегда идеальны . Кроме того, они работают лучше всего, когда взломы браузера не включены в набор файлов (что является еще одной причиной сохранить эти взломы внешними).
 
 Я хотел бы упомянуть еще один тип приложений, которые могут помочь уменьшить размер файла CSS. Он может сканировать веб-сайт и регистрировать, какие правила и объявления CSS , а не , применяются, а затем предлагать их вашему вниманию. К сожалению, этот инструмент еще не изобретен, но я бы с удовольствием заплатил за такое приложение. 
 
 Я могу вспомнить времена, когда я боялся удалить определенные правила, потому что нет документации, объясняющей мне, что эти селекторы остались от предыдущих итераций разработки.Если приложение сможет довести эти правила до моего сведения, это поможет в обслуживании и сохранении компактности файлов CSS. 
 
 Заключение 
 
 Чистый и оптимизированный код важен не только для размера файла, но и для обслуживания и удобочитаемости. Вышеупомянутые принципы хороши не только для CSS, но и могут быть применены к HTML, JavaScript и другим языкам программирования. Файлы CSS не так важны, как визуализация вашего веб-сайта для конечного пользователя, но рассмотрение вышеупомянутых принципов может помочь как с пользовательским интерфейсом (в виде файлов меньшего размера), так и с интерфейсом разработчика (более чистый код).Применяйте эти принципы к своим текущим и будущим проектам, и вы обязательно оцените приложенные усилия. 
 
 Лучшие бесплатные инструменты оптимизации CSS для настройки вашего сайта 
 
                                                 
 CSS - неотъемлемая часть современного веб-дизайна. Если вы блогер или просто управляете интернет-магазином, вы должны в полной мере использовать его преимущества. Даже если вы не разбираетесь в технологиях и не являетесь специалистом по кодированию, это не означает, что вы не можете оптимизировать CSS для повышения производительности и более быстрой загрузки страницы.Рассмотрим 10 лучших бесплатных инструментов оптимизации CSS  , которые могут  очищать, проверять, форматировать и просто настраивать ваш веб-ресурс. 

 
 Вы когда-нибудь задумывались, что такое веб-страница на самом деле? Из чего это сделано? Как лучше всего улучшить взаимодействие с пользователем и привлечь больше зрителей? Многие воспринимают веб-сайт как визуальную презентацию того или иного бизнеса, которая предлагает пользователям эстетичный опыт и содержит  аудио / видео /  текстовых данных, которые могут быть интересны аудитории.Но что скрывается за визуально привлекательной компоновкой? Существуют ли какие-либо инструменты для управления сайтом без дополнительных навыков программирования? Наш сегодняшний пост предоставит вам более глубокое представление о ключевых элементах построения сайта и предоставит вам список из  лучших бесплатных инструментов оптимизации CSS . 
 
 Когда дело доходит до проверки элементов сайта, необходимо учитывать три уровня:  контент, представление и поведение . 

 



 

 
 
 Уровень содержимого   представлен записанными данными, аудио- и видеофайлами и рядом других элементов.Вы вряд ли найдете веб-сайт с отсутствующим слоем контента. Это информация, которой автор хочет поделиться со своими посетителями, встроенная в разметку HTML или XHTML. 
 
 Уровень представления   определяет способ, которым люди будут видеть контент на нашей странице. Каскадные таблицы стилей (CSS) являются его неотъемлемой частью, и в этом посте мы уделим особое внимание изучению наиболее полезных инструментов для его оптимизации. 
 
 Поведенческий уровень   обозначает взаимодействие пользователя с вашим веб-ресурсом в реальном времени.JavaScripts - один из наиболее широко используемых языков для добавления новых слоев на сайты. 
 
  
 Ключевые преимущества CSS 
 
 
 CSS - это известный веб-стандарт. Это основа большинства дизайнов, которые можно увидеть в современной сети. Это лучший вариант для управления уровнем представления вашего сайта. Его использование дает множество преимуществ, но главное преимущество CSS перед HTML состоит в том, что вы можете хранить стили отдельно от содержимого. Например, вы можете хранить презентационные стили для тысячстраничного веб-сайта в одном файле CSS.Другие плюсы CSS: 
 
 
 Это значительно упрощает внесение изменений в дизайн вашего сайта. 
 
 Поскольку файл CSS может хранить все стили и макеты, размер страницы HTML будет намного меньше. 
 
 Благодаря возможности отделить стили от текста, ваш сайт может быть более удобным. Некоторые люди могут захотеть просмотреть только контент на вашей странице или изменить его так, как они хотят. 
 
 CSS значительно упрощает печать из Интернета. Нет необходимости разрабатывать отдельную версию каждой страницы для печати.Вы можете просто создать единую таблицу стилей, которая будет управлять тем, как будет выглядеть печатная версия страницы. 
 
  
 Лучшие бесплатные инструменты оптимизации CSS 
 
 
 Веб-ресурс с идеальным CSS будет работать как четкое представление о вашем профессионализме, подниматься выше в результатах поиска, загружаться намного быстрее, быть более удобным для пользователя и просто позволит вам выделиться среди остальных. Очистка CSS от изменений дизайна может быть утомительным и трудоемким процессом. Чтобы помочь вам сэкономить время и энергию, мы предлагаем классную подборку бесплатных инструментов оптимизации CSS, которые предоставят вам эффективную, хорошо организованную таблицу стилей CSS, которую ваши посетители оценят по достоинству.
 
 * * * 
 
 ProCSSor 
 
 
 
 ProCSSor - еще один бесплатный онлайн-инструмент для оптимизации CSS. Он очень прост в использовании - все, что вам нужно сделать, это взять файл CSS, вставить фрагмент или URL-адрес, нажать кнопку «обработать сейчас», и система сразу же украсит ваш CSS. 
 
 * * * 
 
 CSS Линт 
 
 
 
 CSS Lint поможет вам решить все ваши проблемы с кодом CSS. Он выполняет некоторые базовые действия, такие как проверка и применение набора правил к коду, которые ищут проблемные шаблоны.Все правила являются подключаемыми, поэтому вы можете написать свои собственные или опустить ненужные. 
 
 * * * 
 
 Украшение кода 
 
 
 
 Code Beautifier - это простой инструмент оптимизации CSS, в котором нет лишних элементов. Вы можете вставить свой CSS-код в соответствующее поле или просто связать CSS, и система очистит его в соответствии с выбранными параметрами. 
 
 * * * 
 
 W3C CSS Валидатор 
 
 
 
 W3C CSS Validator - это бесплатный веб-инструмент оптимизации CSS, который буквально проверяет ваш код CSS на соответствие спецификациям W3C CSS.Стоит упомянуть, что он может проверить ваш файл CSS на конкретном устройстве, будь то карманный или настольный компьютер, для печати, проецирования и т. Д. Как видите, инструмент может похвастаться интуитивно понятным интерфейсом - вам просто нужно вставить URL-адрес, выбрать один из нескольких дополнительных параметров. (если хотите) и нажмите кнопку «Проверить». Все остальное будет сделано за вас. 
 
 * * * 
 
 Селекторы пыли 
 
 
 
 Dust-Me Selectors - это инструмент разработки, используемый для сканирования вашего CSS-файла и обнаружения неиспользуемых файлов.Доступный для бесплатной загрузки, он извлекает все селекторы из всех таблиц стилей на странице, которую вы просматриваете, а затем анализирует эту конкретную страницу, чтобы определить, какие из этих селекторов не используются. 
 
 * * * 
 
 Грязная разметка 
 
 
 
 Dirty Markup поможет вам сделать чистую разметку в файлах CSS, HTML и JavaScript. Работая как агрегат и объединяя возможности таких сервисов очистки кода, как HTML Tidy, CSS Tidy, JS Beautify и Ace Editor, он предоставляет вам аккуратный код после вставки кода CSS.
 
 * * * 
 
 Верхнее покрытие 
 
 
 
 Topcoat отличается от стандартных инструментов оптимизации CSS. Это довольно гибкий фреймворк для разработки CSS. Начало разработки CSS с Topcoat избавит вас от необходимости очищать CSS. Это позволяет быть более активным и продуктивным одновременно. Попробуйте демо-версию, чтобы узнать, как она работает. 
 
 * * * 
 
 Стресс-тест CSS 
 
 
 
 Как следует из названия, стресс-тест CSS был разработан для того, чтобы вы могли определить, какой класс в вашем файле CSS не работает должным образом.Система измеряет скорость выполнения каждого класса, удаляя каждый класс по одному. 
 
 * * * 
 
 z Ошибки 
 
 
 
 zBugs - один из простейших инструментов оптимизации CSS на рынке. Благодаря поддержке JavaScrips, система автоматически сжимает и минимизирует ваш код CSS и преобразует его в файл Gzip. 
 
 * * * 
 
 Devilo.us 
 
 
 
 Devilo.us - один из самых популярных и широко используемых инструментов для оптимизации больших файлов CSS.Поддерживая CSS3, он улучшит ваш код CSS, удалив ненужные коды, сделав их аккуратными и чистыми. 
 
 * * * 
 
 Какой инструмент оптимизации CSS   вы выберете? Какой из вышеупомянутых вариантов вы бы хотели попробовать? Ваш отзыв очень важен. 

                      
 Как оптимизировать код CSS для невероятно быстрых сайтов 
 
 Проблемы с медленным веб-сайтом? Вы устали ждать, пока визуализируется визуальный дизайн вашего сайта? Миллионы веб-сайтов в Интернете с трудом справляются с требованиями пользователей и поисковых роботов к производительности.Хотя существуют десятки, если не сотни причин, по которым ваш веб-сайт может работать так медленно, когда в последний раз вы считали, что виновником может быть не ваш веб-хостинг, а, скорее, ваш файл CSS? 
 
 Для тех, кто плохо знаком с владением веб-сайтами, понимание взаимосвязи между CSS и производительностью веб-сайта не является главным в их списке приоритетов. Это особенно актуально при работе с сайтом WordPress. Поскольку многие владельцы веб-сайтов перешли в сферу автоматизации, легко забыть, что полноценная работа вашего сайта происходит не из-за какого-то одного конкретного компонента, а, скорее, благодаря сотрудничеству между различными внешними и внутренними файлами.
 
 Хотя вы можете подумать, что причиной медлительности вашего веб-сайта является какая-то другая проблема, связанная с сервером, во многих случаях причина медленной загрузки визуальных элементов связана с беспорядочной, сложной и неправильно организованной таблицей стилей CSS. Хотя оптимизация кода CSS - не самое простое, но и не самое сложное, если вы имеете общее представление о том, как этот код работает на вашем сайте. 
 
 Следующие советы по оптимизации считаются лучшими практиками для всех веб-сайтов. Используйте эту информацию, чтобы помочь улучшить и создать невероятно быстрые веб-сайты.
  
 Совет №1 | Спрайты изображений 
 
 
 Возможно, один из старейших методов оптимизации кода CSS. Спрайты изображений уменьшают размер файла CSS, что в конечном итоге увеличивает общую скорость рендеринга страницы. Итак, что же такое спрайт изображения? По сути, это метод кодирования, который помещает все ваши изображения, перечисленные в таблице стилей CSS, в один файл PNG. Хотя этот файл довольно большой, он увеличивает время отклика страницы, поскольку ограничивает количество HTTP-запросов, что является основным фактором при оптимизации ваших сайтов для невероятно быстрой загрузки веб-сайтов для мобильных и настольных компьютеров.Используйте эту технику, если на вашем сайте достаточно графики и значков. 
  
 Совет № 2 | Уменьшите файл CSS 
 
 
 С тех пор, как Google объявил о своем намерении рассматривать дизайн мобильных сайтов в качестве основной страницы для веб-сайтов, а не для настольных компьютеров, официально началась эра небольших файлов. Таким образом, один из наиболее важных способов оптимизации сайта - это минимизация кода CSS. По сути, это сжимает ваш код, создавая новый файл с минимальным (почти полным) пробелом.К счастью, этот процесс не нужно выполнять вручную. Вы можете использовать онлайн-инструмент, такой как CSSMinifier.com, для автоматического преобразования или минимизации ваших файлов CSS. 
  
 Совет № 3 | Сначала CSS - Наконец, JavaScript 
 
 
 При написании веб-сайта всегда размещайте таблицу стилей CSS в тегах HTML-документа. JavaScript всегда следует размещать последним. Причина этого в том, что, когда веб-браузер читает и отображает веб-сайт, он запускается снизу и выполняет действия по мере его закрытия.CSS должен быть первым, поскольку он определяет визуальный дизайн вашего сайта, но JavaScript всегда должен идти последним, потому что этот код часто требует значительного времени для загрузки. Неправильный порядок может помешать быстрым веб-сайтам работать наилучшим образом. 

 
 Как оптимизировать CSS для повышения производительности в Интернете 
  
   Часть 2 из серии   Blue Triangle’s Accelerator: передовые методы повышения производительности в Интернете   

 
 Когда вы начинаете оптимизировать ресурсы, загружаемые на ваш сайт, CSS может быть не первым, о чем вы думаете, но CSS влияет на все, что отображается.
 
 CSS - что означает «каскадные таблицы стилей» - форматирует страницу, которую вы видите в браузере, от положения элементов до цвета и до возможности нажатия. Другими словами,  CSS имеет решающее значение для взаимодействия с пользователем.  
  
 Как CSS может замедлить работу вашего сайта? 
 
 
 Как и неоптимизированные изображения, неоптимизированный CSS может привести к замедлению страниц и снижению коэффициента конверсии. Обратите внимание, как снижается коэффициент конверсии, поскольку страница загружается дольше: 
 
 
 
 Производительность имеет значение, поэтому не позволяйте неоптимизированному CSS замедлять работу вашего сайта.Вот как CSS может вас замедлить: 
 
 
  CSS может остановить синтаксический анализ HTML.  - Во время синтаксического анализа CSS он может блокировать загрузку других ресурсов, включая функциональность JS. Фактически, вы, вероятно, вообще не сможете взаимодействовать со страницей. 
 
  CSS может отображать блок  - первый пиксель страницы не отображается, пока не будет проанализирован весь CSS. 
 
 
 CSS критически важен для рендеринга страницы, и, как следствие, он является частью критического пути рендеринга - минимального количества информации, которое требуется веб-странице для отображения первого пикселя страницы.
 
 HTML и CSS - это два минимальных требования для критического пути рендеринга. HTML - это документ, который создает страницу, а его анализ создает объектную модель документа (DOM). CSS стилизует DOM с помощью объектной модели CSS (CSSOM). Для использования CSS страницей необходимо  загрузить , а затем  проанализировать . 
 
 
 
 Сегодня я сосредоточусь на передовых методах загрузки (не синтаксического анализа) CSS, так как  самые большие улучшения веб-производительности от оптимизации CSS обнаруживаются в его эффективной доставке. 
 
 Чтобы оптимизировать доставку CSS и ускорить работу вашего сайта, вам необходимо: 
 
 
 Уменьшить размер файла CSS и 
 
 Используйте сетевые функции, которые помогают загружать CSS быстрее и раньше. 
 
 
 Давайте посмотрим, как это сделать. 
  
 Уменьшить размер файла CSS 
 
 
 Эффективная доставка файлов CSS означает ограничение объема данных, которые необходимо передать, и умение выбирать средства доставки. 
 
 Есть три основные оптимизации, которые вы можете сделать, чтобы ограничить объем данных, передаваемых в процессе доставки: 
 
 
  Минификация CSS , 
 
  Уменьшение длины файла CSS  за счет сокращения ненужного кода и 
 
  Сжатие CSS  для предоставления файла меньшего размера, который браузер все еще может прочитать.
 
  
 Минимизировать CSS 
 
 
 Минификация удаляет все пробелы, комментарии и посторонние символы в CSS. Это превратит это  (48 символов) в : 
 
 h2 {
 цвет: черный; 
 цвет фона: синий; 
} 
 в этот  (38 символов) :
 h2 {цвет: черный; цвет фона: синий;} 
 Вот несколько инструментов для минимизации вашего CSS:
 Для минификации вручную вы можете использовать CSSNano или csso.
 Более крупные сайты, которые могут извлечь выгоду из автоматизированных рабочих процессов, могут использовать Gulp или Webpack.
 Конечно, минификация может затруднить чтение кода, поэтому, если вы застряли с минифицированным кодом, который вам нужно отлаживать, вы можете использовать инструмент улучшения, такой как Unminify.
 И если вы используете фреймворк с библиотекой CSS, такой как Bootstrap, Foundation или Susy, убедитесь, что вы используете компиляторы и уменьшенные файлы, чтобы избежать загрузки неиспользуемых стилей CSS, которые только раздувают код.
 Уменьшить длину файла CSS 
 Использование сокращений и устранение избыточности связано с минификацией, потому что некоторые инструменты минификации реализуют сокращение за вас.Возьмем этот шестнадцатеричный цветовой стиль:
 п {
 цвет: # 00000; 
} 
 Некоторые инструменты минификации превратят это в сокращенное шестнадцатеричное:
 п {
 цвет: № 000; 
} 
 Есть и другие сокращенные свойства, которые вы можете использовать, чтобы уменьшить объем необходимого кода. А когда стили в CSS перекрываются, нет необходимости переписывать стили. Это будет правильная реализация синтаксиса:
 h2, h3 {
 цвет: синий; 
} 
 Не это:
 h2 {
 цвет: синий; 
} 
 h3 {
 цвет: синий; 
} 
 Ограничение определений стилей также применяется к наследованию - некоторые свойства в CSS наследуются в HTML вложенными элементами (называемыми потомками).Вы также можете принудительно наследовать в определениях свойств, если наследование не установлено по умолчанию. Наследование означает, что это:
 
 
 
 Заголовок 
 
 
 Абзац . 
 
 
 
 это то же самое, что писать это:
 
 
  
 Заголовок 
  
 
 Абзац 
 
 
 
 Наследование применяется к CSS независимо от того, где он появляется - встроенным, встроенным или во внешней таблице стилей.Используйте синтаксис CSS, чтобы ограничить количество определений стилей в документе CSS. Плюс в том, что обычно его легче читать.
 И последнее замечание - у вас может быть более старая и громоздкая база кода CSS. Чтобы узнать, какие стили не используются в вашем CSS, вы можете использовать такой инструмент, как unCSS. Возможно, вы сможете еще больше уменьшить длину файла.
 Сжать CSS 
 Сжатие выполняется на стороне сервера и уменьшает количество байтов в файле CSS без изменения содержимого.
 Большинство современных браузеров могут читать сжатые файлы, поэтому, когда браузер запрашивает ресурс с сервера, он сообщает серверу, может ли он прочитать сжатый файл. Если доступно, сжатый файл будет доставлен в браузер. В противном случае сервер доставляет полный (несжатый) файл.
 Несжатые файлы могут быть намного больше, чем сжатые файлы, поэтому такая оптимизация не вызывает затруднений. Если вы не используете сжатие, скорее всего, ваш сайт будет медленнее, чем у конкурентов.
 Скачать CSS быстрее и раньше 
 Помните, что чем раньше загружаются ваши стили, тем быстрее может отображаться страница. Есть несколько способов управлять загрузкой стилей на вашем сайте. Для работы системы доставки вы можете воспользоваться двумя способами доставки, каждый из которых состоит из двух частей:
  Предварительная загрузка HTTP и push , которые позволяют загружать CSS раньше, чем обычно, и
  отложенная загрузка  в сочетании с  встраиванием CSS в HTML .
 Оба этих метода доставки позволяют анализировать HTML во время загрузки CSS.
 Доставить CSS с помощью HTTP / 2 push или предварительной загрузки HTTP 
 HTTP / 2 push и предварительная загрузка HTTP - это два механизма, которые несколько разными способами управляют поведением сети.
  Предварительная загрузка HTTP  
 Использование предварительной загрузки, новой функции в HTTP, позволяет стилям загружаться раньше, потому что браузер запрашивает их раньше, как только начинается синтаксический анализ HTML. Предварительная загрузка может быть обозначена в разметке или в заголовке HTTP.
 Предварительная загрузка в HTML-документе:
  
 Предварительная загрузка в заголовке ответа HTML:
 Ссылка: ; rel = предварительная нагрузка; as = style 
 Preloading также не вызывает блокирующего поведения и может использоваться для стороннего контента, что позволяет вам контролировать использование ресурса. Например, вы можете получить таблицу стилей для стороннего компонента, которая не нужна для первоначального рендеринга страницы, но будет использоваться немного позже при загрузке страницы.
  HTTP / 2 push  
 HTTP / 2 push немного отличается. Фактически, они достигают многих из тех же целей, и предварительная загрузка фактически использует API push, если он доступен по умолчанию. Чтобы предотвратить это, вы можете включить «nopush» в заголовок HTTP-ответа, например:
 Ссылка: ; rel = предварительная нагрузка; as = style; nopush 
 Когда используется HTTP / 2 push, это сервер, а не браузер при предварительной загрузке. Это важное различие означает, что отправляемый файл CSS немедленно передается вместе с HTML и другими важными файлами с помощью push.В результате push может загружать ресурсы даже быстрее, чем предварительная загрузка. Однако, если вы используете push, вы можете рискнуть переопределить использование кэшированных ресурсов и увеличить объем отправляемых данных, поэтому будьте осторожны с реализацией.
 Еще одно важное отличие состоит в том, что push может использоваться только для соединений HTTP / 2. Если на вашем сайте не включен HTTP / 2, он не сможет использовать push. Это также означает, что способ инициирования push зависит от конфигурации вашего сервера.
  Особые соображения  
 Ни предварительный натяг, ни толкание не могут использоваться повсеместно.Тем не менее, использовать их - это хорошая идея, потому что браузеры, которые не могут использовать предварительную загрузку или push, будут игнорировать эти атрибуты, а браузеры, которые могут их использовать, будут загружать страницы намного быстрее. Предварительная загрузка поддерживается большинством основных браузеров, но без поддержки в Firefox, Opera и IE, и только частичная поддержка в Edge. С другой стороны, Firefox поддерживает push, а Safari и IE - нет.
 Вставить и отложить загрузку CSS 
 Если предварительная загрузка и отправка с сервера недоступны, вы можете встроить CSS в тег