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

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

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

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

CSS до минификации

/* Layout helpers

----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

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

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

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

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

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

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

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

• Closure Compiler (только JS) - Closure Compiler является частью Closure Tools, набора инструментов от разработчиков Google. Это позволяет вам минимизировать ваш Javascript вместе с другими полезными оптимизациями. Вы можете загрузить свой Javascript с помощью, введя URL-адрес местоположения файла js, а затем выбрать, как вы хотите, чтобы код был оптимизирован и отформатирован. Например, вы выбираете оптимизацию своего кода для Whitespace, только если хотите. Как только вы нажмете кнопку компиляции, он минимизирует (или скомпилирует) код за вас, а также проверит ваш код на наличие ошибок.
• cssminifier.com и javascript-minifier.com (CSS и JS) - эти два минификатора от Эндрю Чилтона просты в использовании. Просто вставьте свой код и нажмите кнопку «Свернуть», чтобы вывести минимизированный код. Для удобства вы даже можете загрузить выходной код в виде файла.
• csscompressor.net (только CSS) - этот онлайн-компрессор CSS быстрый, простой и бесплатный.
• jscompress.com (только JS) - этот инструмент сжатия JavaScript позволяет сжимать код JavaScript с помощью копирования и вставки, но вы также можете загружать несколько файлов JavaScript одновременно. Это отлично подходит для объединения файлов JavaScript в один файл для повышения скорости загрузки страницы.
• refresh-sf.com (HTML, CSS и JS) - этот компрессор минимизирует типы кода JavaScript, CSS и HTML. Он также включает в себя все параметры компрессора для каждого типа кода, если они вам нужны.
• htmlcompressor.com (HTML, CSS и JS) - этот онлайн-инструмент для сжатия / минификсации поддерживает типы кода HTML, CSS и JS. Он даже поддерживает различные комбинации типов кода, такие как CSS + PHP и JavaScript + PHP. И вы даже можете проверить сжатый код на наличие ошибок.
• minifycode.com (HTML, CSS и JS) - этот сайт предлагает минификаторы для JavaScript, CSS и HTML с простым и чистым пользовательским интерфейсом, который минимизирует ваш код одним нажатием кнопки. Он также включает в себя инструмент «beautifier» для распаковки минифицированного кода, чтобы его было легко читать (в основном противоположность минификации).
• Dan's Tools - Dan's Tools предлагает минификатор CSS и минификатор JavaScript. Оба инструмента имеют действительно чистый пользовательский интерфейс, которым легко пользоваться. Они не предлагают никаких дополнительных опций, но идеально подходят для общих целей минификации.

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

• Меньше (HTML, CSS и JS)
• phpied.com/cssmin-js/ (только CSS)
• yui.github.io/yuicompressor (JS и CSS)

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

Подпишитесь на наш канал Youtube

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

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

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

В этом примере я собираюсь использовать инструменты minify с minifycode.com.

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

Перейдите на minifycode.com и щелкните вкладку CSS minifier. Затем вставьте код CSS в поле ввода и нажмите кнопку «Сократить CSS».

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

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

Вот и все!

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

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

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

Есть много плагинов, которые сделают эту работу, но я кратко упомяну несколько выдающихся.

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

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

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

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

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

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

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

Fast Velocity Minify - еще один популярный, бесплатный и мощный плагин WordPress, который делает больше, чем просто минимизирует. Он минимизирует и объединяет ваши CSS и Javascript, чтобы уменьшить количество HTTP-запросов к вашему серверу, тем самым оправдывая свое название, чтобы обеспечить быстрое время загрузки страницы. Доступны дополнительные параметры оптимизации, но настройки по умолчанию прекрасно подходят для большинства сайтов.

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

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

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

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

Вот и все!

W3 Total Cache (БЕСПЛАТНО)

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

WP Fastest Cache (БЕСПЛАТНО)

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

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

Последние мысли

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

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

Ваше здоровье!