Для чего используется сжатие файлов CSS

Обновлено: 02.07.2024

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

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

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

Не превышайте установленное количество файлов CSS

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

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

Внимание! Когда дело доходит до уменьшения количества файлов CSS, помните, что меньше не обязательно означает быстрее. На сайтах с огромным количеством файлов CSS объединение их всех в один гигантский файл размером 1 МБ может иметь более негативное влияние, чем наличие большого количества маленьких файлов. В таких случаях старайтесь быть методичным и логичным в своем подходе к объединению файлов; объединение файлов, которые предлагают аналогичные функции или приложения на вашем сайте, может быть простым способом уменьшить размеры, не смешивая все вместе. Однако для сайтов обычного размера объединение всех файлов CSS в один является разумным решением.

Уменьшите повторения и избыточность кода CSS

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

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

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

Размер вашего кода CSS имеет значение

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

Включите сжатие GZIP на вашем сервере

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

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

Сжать код CSS

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

Упростите селекторы

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

Например, если у вас есть следующий код:

вероятно, мы можем просто написать:

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

Преимущества такого рода небольших изменений двояка. мы делаем размер файла немного меньше, уменьшая количество кода CSS, но упрощение кода также дает некоторое облегчение движку браузера, которому теперь не нужно анализировать сложный селектор, который не был оптимальным, как он запрашивает многократный поиск по нескольким уровням вложенности, т.е. сначала он просматривал элемент браузера .resources-list, а затем искал элемент .resources-list-item на любом уровне вложенности в этом элементе, а когда находил, он искал еще раз на любом уровне вложенности в .resources-list-item для элемента с классом .resources-list-item-link . Если бы он был единственным в коде, влияние могло бы быть незаметным, но если бы этот конкретный faux pas превалировал в нашем коде, мы бы определенно почувствовали последствия.

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

Избавьтесь от старых и ненужных префиксов поставщиков

Технологии развиваются, и многие префиксы, которые были необходимы для более ранних версий браузеров, становятся ненужными и неиспользуемыми. Например, в Firefox 5-15 требовался префикс -moz -transition, а в более поздних версиях его не было. Поскольку на данный момент Firefox 15 исполняется 9 лет, нет необходимости включать этот префикс, что, в свою очередь, уменьшает размер файла CSS.

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

Остерегайтесь команды @extend при использовании SCSS

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

Скорость CSS и рендеринга страницы

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

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

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

Производительность CSS и интерфейса

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

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

Свойство margin-left требует выполнения вычислений для всех трех этапов отрисовки страницы: этапа макета, этапа рисования и этапа композиции. Для свойства преобразования расчеты в Chrome и Firefox выполняются только на этапе композиции. В некоторых случаях разница в текучести может быть очень большой.

CSS как способ ограничить количество запросов к серверу

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

Вкратце

Принимая во внимание все, что мы рассмотрели сегодня, мы видим, что код CSS влияет в контексте производительности сайта на следующее:

  • количество запросов к серверу (иногда помогает ему быть оптимальным)
  • Время загрузки сайта (чем быстрее мы загрузим необходимый код, тем быстрее появится содержимое сайта)
  • производительность браузера (плохо написанные селекторы, плохо выбранные свойства или большое количество кода CSS могут замедлить работу браузера)

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

Отправить информационный бюллетень по электронной почте

Создайте свой собственный блог сегодня

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

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

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

  1. Включить сжатие
  2. Минимизировать ресурсы
  3. Оптимизировать изображения
  4. Оптимизировать доставку CSS
  5. Отдайте предпочтение видимому контенту

Включить сжатие

Проблема: большие файлы страниц, которые приводят к низкой производительности рендеринга

Решение. Используйте gzip для сжимаемых ресурсов!

Общие .htaccess — включите параметры zip в файле .htaccess. Ниже приведен пример:

Сервер Apache — включите параметры zip в файле .htaccess. Ниже приведен пример:

NGINX Server — включите сжатие, добавив следующий код в файл конфигурации:

Litespeed Server — в разделе конфигурации сервера перейдите в раздел «Настройка» и убедитесь, что включен параметр «Включить сжатие».

И последнее предостережение: прокси-серверы и антивирусное программное обеспечение могут отключать сжатие при загрузке файлов на клиентский компьютер.

Ссылки

Минимизировать ресурсы

Проблема: большие файлы CSS, JavaScript и HTML увеличивают скорость загрузки

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

Ниже приведен пример того, как минимизация уменьшает файл CSS.

Ниже приведен несвернутый текст файла CSS:

Ниже приведен свернутый текст CSS-файла, обратите внимание на разницу: нет пробелов и все в одной строке:

Решение. Используйте инструменты для минимизации файлов CSS, JavaScript и HTML!

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

Ссылки

Оптимизировать изображения

Проблема: файлы изображений слишком велики и влияют на производительность

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

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

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

Решение. Используйте инструменты для сжатия файлов изображений!

Хотя оптимизация изображений по-прежнему является скорее «искусством», чем наукой, при оптимизации изображения необходимо учитывать три ключевых момента:

Ссылки

Оптимизировать доставку CSS

Проблема: таблицы стилей, блокирующие визуализацию, приводят к медленной загрузке страницы

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

В идеальном и несложном мире настройка CSS может выглядеть примерно так:

  • Будет использоваться одна внешняя таблица стилей размером менее 75 КБ.
  • Для контента, отображаемого в верхней части страницы, используйте встроенный CSS в атрибуте стиля HTML-тегов, чтобы ускорить отрисовку страницы контента, который будет просматриваться первым.
  • Вызовы @import в CSS не выполняются.
  • Нет CSS в HTML-коде, таком как div или h1 внизу страницы, так как этот контент может загружаться медленнее, чем код вверху страницы, который обычно читается пользователем в первую очередь.

Однако на практике часто бывает сложнее, и каждое усложнение приводит к задержке рендеринга страницы.

Решение. Оптимизируйте файлы CSS, чтобы сделать их более эффективными!

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

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

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

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

), потому что это часто приводит к дублированию кода. Кроме того, включение стилей в наш код противоречит политике безопасности контента консорциума World Wide Web (W3C), которая по умолчанию блокирует стили любых уровней элементов. Дополнительные рекомендации можно найти в Рекомендации W3C 2016 Content Policy Level 2 или в рабочем проекте W3C Content Security Level 3 2018.

Если у вас есть более одного файла CSS, их следует объединить в один файл. Если вы используете несколько внешних файлов CSS, объедините их в один файл, чтобы ускорить загрузку за счет сокращения круговой загрузки файлов.

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

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

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

Ссылки

Приоритет видимого контента

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

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

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

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

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

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

Загружайте компоненты в порядке важности. Перечислите свои компоненты и расположите их в порядке от наиболее важного к наименее важному, а затем найдите способ загрузить их в порядке приоритета. Например, если у вас есть основной контент и боковая панель, которая включает в себя рекламу Google AdSense, кнопку Twitter, кнопку Facebook и кнопку Google Plus, было бы наиболее выгодно загрузить главную страницу, а затем менее важную боковую панель, а затем любой нижний колонтитул. такой контент, как местонахождение компании и контактная информация. Наконец, попробуйте оставить любую обработку JavaScript до конца после загрузки страницы, чтобы сэкономить время. Загружая вещи в порядке приоритета, пользователь может начать просмотр видимого содержимого или верхней части страницы, пока загружается остальная часть страницы, и он сообщит об отличной загрузке страницы, даже если вся страница на самом деле не загружена.

Ссылки

(Все ссылки на определенные бренды, продукты и/или компании используются только в иллюстративных целях и не подразумевают одобрения со стороны федерального правительства США или какого-либо федерального правительственного учреждения.)

Присоединяйтесь к 60 000 других представителей правительства и подпишитесь на нашу рассылку — сводку лучших цифровых новостей правительства и других областей.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

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

Но эти две вещи совершенно разные. Если вы этого еще не знали, это стоит понять.

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

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

Минификация создает новый файл, который вы в конечном итоге используете. Например, вы должны создать `style.css`, с которым будете работать. Затем вы можете уменьшить его до `style.min.css`.

Gzip находит все повторяющиеся строки и заменяет их указателями на первый экземпляр этой строки.

Джулия Эванс создала замечательный способ понять это (см. ее пост и видео). См. этот первый абзац стихотворения:

Однажды в тоскливую полночь, когда я размышлял о слабости
Над многими < a >причудливыми < и >любопытными томами забытых знаний,
W кивнул, n ly дремал, солнце n th ca at
Как < of >so ne gent r у двери моей комнаты.
«Это <какой-то>посетитель», му р`т –
О есть, <и >нет м.

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

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

Вы можете создать сжатую версию файлов (например, style.css.zip), но вы редко делаете это, и браузер не будет знать, что с этим делать.

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

Вот как включить его на серверах Apache, где он использует модуль mod_deflate. А H5BP предлагает конфигурации серверов для всех популярных серверов, которые включают gzip.

Мы будем использовать файл CSS из Bootstrap, так как это очень распространенный ресурс.


Вы сэкономите около 17 %, уменьшив CSS, 85 % – с помощью gzip или 86 %, если сделаете и то, и другое.

Вот идеальная ситуация, когда можно проверить, все ли работает из DevTools:


Сжатие гораздо эффективнее. Лучше всего делать и то, и другое.

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

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

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

Microsoft также начинает оптимизировать для этого свои парсеры:

Поэтому в Windows 10 и Microsoft Edge мы добавили новые быстрые пути, улучшили встраивание и оптимизировали некоторые эвристики в JIT-компиляторе Chakra, чтобы минимизированный код работал так же быстро, если не быстрее, чем неминифицированные версии. . Благодаря этим изменениям производительность отдельных шаблонов кода, минимизированных с помощью протестированного нами UglifyJS, повысилась на 20–50 %.

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

Комментарии

Существует третий вариант, заслуживающий обсуждения: сжатие файлов javascript с помощью javascript.

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

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

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

Как минимизировать CSS вашего сайта , HTML и Javascript

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

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

Вот пример того, как выглядит минимизация CSS.

CSS перед минификацией

CSS после минификации

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

Послушайтесь моего совета и используйте имеющиеся в вашем распоряжении инструменты.

Онлайн-инструменты для ручной минимизации файлов


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

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

Если вам нужны автономные инструменты для локального минимизации HTML CSS или JavaScript, вот несколько вариантов:

Как минимизировать CSS, HTML и Javascript вашего сайта

Как минимизировать свои HTML, CSS и JavaScript с помощью онлайн-инструмента

Многие из этих онлайн-инструментов имеют схожий процесс, состоящий из следующих шагов:

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

Сначала найдите файл css (обычно называемый style.css) в файлах вашего сайта и откройте его с помощью редактора страниц. Затем скопируйте весь код CSS в буфер обмена.

minfy html css javascript

minfy html css javascript

После создания нового уменьшенного кода скопируйте его.

minfy html css javascript

Затем вернитесь к файлу css вашего веб-сайта и замените код новой уменьшенной версией.

Повторите тот же процесс, чтобы также минимизировать файлы JavaScript и HTML вашего сайта.

Как минимизировать HTML, CSS и JavaScript в WordPress с помощью плагинов

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

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

Автооптимизация (БЕСПЛАТНО)

minfy html css javascript


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

Чтобы использовать Autoptimize, вы можете загрузить, установить и активировать плагин на панели инструментов WordPress, выбрав «Плагин» > «Добавить новый».

minfy html css javascript

После активации плагина перейдите в «Настройки» > «Автооптимизация». Затем на вкладке основных настроек отметьте код, который вы хотите оптимизировать (HTML, CSS и/или JavaScript), и нажмите Сохранить изменения.

minfy html css javascript

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

minfy html css javascript

Вот и все! Довольно просто и мощно.

Fast Velocity Minify (БЕСПЛАТНО)

minfy html css javascript

Чтобы использовать подключаемый модуль, сначала установите и активируйте его с панели управления WordPress, выбрав «Плагины» > «Добавить новый». Затем выполните поиск по фразе «быстрая скорость минимизации» и, как только она появится в результатах поиска, нажмите, чтобы установить и активировать ее.

minfy html css javascript

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

Перейдите на страницу настроек плагина (Настройки > Fast Velocity Minify), чтобы увидеть все доступные параметры. На вкладке «Статус» вы можете увидеть полезный список ваших файлов JavaScript и CSS, которые были обработаны.

minfy html css javascript

На вкладке "Настройки" вы можете настроить способ оптимизации файлов. Поскольку минимизация HTML, CSS и JavaScript уже активна, вы можете использовать эти настройки, чтобы настроить параметры по умолчанию или отключить минимизацию для определенных типов кода. Есть даже варианты оптимизации Google Fonts и Font Awesome.

minfy html css javascript

Общий кэш W3 (БЕСПЛАТНО)

minfy html css javascript


W3 Total Cache – отличный плагин для кэширования, который включает возможность минимизации HTML, JS и CSS.

minfy html css javascript

Самый быстрый кэш WP (БЕСПЛАТНО)

minfy html css javascript


WP Fastest Cache — этот БЕСПЛАТНЫЙ плагин для кэширования WordPress чрезвычайно популярен и имеет высокие отзывы. Плагин выполняет различные оптимизации производительности, включая объединение и минимизацию HTML CSS и JavaScript для повышения производительности.

После установки плагина просто щелкните вкладку WP Fastest Cache на боковой панели панели управления WordPress (со значком удивительного гепарда). На вкладке настроек вы найдете параметры для объединения и минимизации файлов HTML и CSS. Хотя минимизация JavaScript доступна только в профессиональной версии.

minfy html css javascript

Заключительные мысли

Если вам нужно ускорить загрузку страниц и улучшить показатели производительности, вам следует минимизировать файлы HTML, CSS и Javascript. Со всеми доступными онлайн-инструментами вы можете легко минимизировать свой код для любого веб-сайта. А для вас, пользователей WordPress, есть несколько мощных плагинов, которые автоматически минимизируют эти файлы несколькими щелчками мыши. Приведенные выше плагины — это лишь некоторые из замечательных плагинов, которые выполняют минимизацию наряду с другими оптимизациями производительности. На самом деле у вас уже может быть плагин типа производительности, в котором уже доступна минификация. Например, многие плагины кэширования включают опцию минификации. Я надеюсь, что этот пост поможет вам решить, какой вариант подходит вам лучше всего.

Я с нетерпением жду ваших комментариев ниже.

Джейсон Шампань

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

Colt McAnlis

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

TL;DR: Контрольный список сжатия текстовых данных

  1. Сначала думайте о мобильных возможностях пользователей
    1. Каков ресурс вашей страницы? Можно уменьшить?
    2. Сколько времени потребуется пользователям, чтобы загрузить вашу страницу при среднем подключении?
      1. Минификаторы CSS и Javascript являются мощными, простыми в использовании и подходят для существующих конвейеров сборки.
      2. Предварительно обработайте данные как можно тщательнее.
        1. Убедитесь, что на вашем сервере включено сжатие GZIP.
        2. Создавайте лучше сжатые данные GZIP в автономном режиме с помощью Zopfli или 7zip.

        Почему малое — большое

        Существует огромный рынок для мобильных устройств, и с увеличением количества подключений по всему миру технологические компании вступают в новую борьбу за предоставление контента и данных следующим 5 миллиардам людей, которые скоро подключатся к сети. Книга Эрика Шмидта «Новая цифровая эра» хорошо раскрывает тему:

        В Африке уже более 650 миллионов пользователей мобильных телефонов, а в Азии – около 3 миллиардов. Большинство из этих людей используют телефоны с базовыми функциями — только голосовые вызовы и текстовые сообщения — потому что стоимость услуг передачи данных в их странах часто непомерно высока, так что даже те, кто может купить телефоны или смартфоны с доступом в Интернет, не могут ими пользоваться. доступно. Это изменится, и когда это произойдет, революция смартфонов принесет огромную пользу этим группам населения.

        Согласно отчету Cisco, это не новая информация: количество пользователей, использующих только мобильные устройства, уже растет и к 2015 году приблизится к 788 миллионам мобильных пользователей. Конечно, для таких крупных компаний, как Cisco, это большое озабоченность, так как в 2012 году через их оборудование проходило 597 петабайт в месяц.

        Скорость мобильного подключения и производительность устройства. За последние несколько лет в мире наблюдается значительное улучшение скорости сети. Однако важно понимать, что это улучшение неодинаково с точки зрения цифр или геолокации. В Google Analytics есть фантастическая диаграмма, показывающая тенденции в подключении по всему миру. Легко заметить, что идея улучшения неоднородна; например, в Китае среднее время загрузки страницы для настольных компьютеров увеличилось на 8% (все стало медленнее), в то время как их время работы на мобильных устройствах снизилось на 33% (все стало быстрее), по-прежнему приземляясь со временем загрузки> 3,5 секунды; что довольно много, учитывая, что 42 % их 1,53 миллиардного населения находятся в сети.

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


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

        Типы алгоритмов сжатия

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

        До После
        aaaaabbbbbcccdddddeeeefffffaaaaabb a5b4c2d4e4f4a5bb
        Рисунок 1. Пример сжатия без потерь. Серии значений кодируются как символ, за которым следует длина серии. Мы можем правильно восстановить исходный поток. Обратите внимание, что если длина пробега

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

        До После
        0,123, 1,2345, 21,2165, 21,999, 12,123 0,0,20,20,10< /td>
        Рисунок 2 — Пример сжатия с потерями. Значения квантуются до наименьшего кратного 10, которое они занимают. Это преобразование нельзя отменить.

        Форматы сжатия текста

        Большая часть современных систем сжатия текста работает путем объединения различных преобразований данных для достижения успеха. Целью каждого этапа в системе является преобразование данных таким образом, чтобы следующий этап мог их потреблять и эффективно сжимать. В результате суммирования этих этапов получается небольшой восстанавливаемый без потерь файл. Существуют буквально сотни форматов/систем сжатия, каждая из которых имеет свои плюсы и минусы в отношении разных типов данных. Вы никогда не слышали о большинстве из них, потому что они либо не так надежны (обрабатывают несколько типов данных), либо не обеспечивают желаемой экономии. Для наших целей давайте рассмотрим три наиболее популярных формата: GZIP, BZip2 и 7zip.

        Поддерживаемые веб-форматы: GZIP и Deflate

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

        Создание собственных GZIP-файлов меньшего размера
        Большинство разработчиков просто загружают несжатое содержимое и полагаются на веб-сервер для сжатия данных на лету. Это дает отличные результаты для большинства разработчиков и прост в использовании. Но большинство людей не знают, что уровень GZIP по умолчанию на большинстве серверов установлен на уровень 6, тогда как максимальный уровень на самом деле равен 9. Этот параметр выбран намеренно: он позволяет серверам быстрее сжимать данные за счет увеличения выходного файла. .

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

        Чтобы воспользоваться преимуществами этой экономии, сжимайте файлы в автономном режиме и загружайте сжатые файлы на свой сервер. Вам нужно настроить сервер для правильной доставки предварительно сжатого контента (вот как это сделать в Apache, nginx и Amazon Web Services). Когда клиент запрашивает вашу страницу, она будет доставлена ​​и распакована как обычно, без каких-либо изменений в коде на стороне клиента.

        Другие форматы сжатия


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

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

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

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

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

        Например, BZIP2 построен на преобразовании Берроуза-Уилера в сочетании с преобразованием "Переместить на передний план". Оба этих преобразования ничего не делают для уменьшения фактического размера данных, а вместо этого преобразуют данные таким образом, чтобы следующий кодировщик Хаффмана/арифметический кодер мог выполнить фактическое сжатие. BZIP часто критикуют за большие потребности в памяти (BWT может быстро потреблять память с наивными реализациями), но если сравнивать, то он может легко сжимать меньше, чем gzip.

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

        Предварительная обработка текста для лучшего сжатия

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

        Минификация

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

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

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

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

        Большинство этих систем работают путем компиляции вашего Javascript в какое-то представление абстрактного синтаксического дерева и повторного создания более компактного JavaScript из ASK. Примеры оптимизации, включая минимизацию пробелов, сокращение имен переменных и переписывание выражений в более коротких формах. Например, foo.bar вместо foo[“bar”])

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

        Обработка контента

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

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

        < td width="50%">"123456780234212"
        До После
        “1,2,3,4,5,6,7,8,0,2,3,4,2,1,2”
        Рисунок 3. Пример удаления известного лишнего текста. В этом примере мы знаем, что все значения представляют собой однозначные байты, мы можем удалить запятые и восстановить их позже.

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

        < /tr>
        До После
        0,123, 1,2345, 21,2165, 21,999, 12,123 0,0,20,20,10
        Рисунок 4 — Пример сжатия с потерями. Значения квантуются до наименьшего кратного 10, которое они занимают. Это преобразование нельзя отменить.

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

        До После
        [8,2,1,5,3,7,6,3,2,9,0,4] отсортировано = [0,1,2,3,4,5,6,7,8,9]
        закодировано дельта = [0,1,1,1,1,1,1,1,1 ,1]
        Рисунок 5 – Пример сортировки и дельта-кодирования. Сначала мы сортируем данные, а затем кодируем их так, чтобы каждый элемент представлялся как разница между предыдущим элементом. Обратите внимание, что форма с дельта-кодированием содержит много повторяющихся символов.

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

        Читайте также: