Вы хотите сжать файлы CSS, HTML и javascript в WordPress?

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

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

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

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

Читайте также нашу статью о 10 WordPress плагины для улучшения скорости вашего блога

Вот пример минимизации CSS.

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

/ * Пример CSS-файла ---------------------------------- * / .user-profile-card { маржа: 0px; background: #33E43} .user-profile-description {border: 0; положение: абсолютное; ширина: авто; margin-top: 20px; }

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

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

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

Как увеличить время, проведенное на вашем блоге WordPress? Узнайте, консультируясь с этой статьей.

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

Следуйте этим советам и используйте инструменты в вашем распоряжении.

Некоторые инструменты для выполнения сжатия

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

Смотрите также наш 6 плагинов WordPress, чтобы вдохнуть новую жизнь в ваши статьи

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

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

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

    • minifycode.com (HTML, CSS и JS) - этот веб-сайт предлагает минификаторы для JavaScript , CSS et HTML с простым и понятным пользовательским интерфейсом, который сжимает ваш код одним щелчком мыши. Он также предлагает инструмент «beautifier» для распаковки минимизированного кода, чтобы сделать его более читабельным (противоположность минификации).

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

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

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

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

Для этого примера я собираюсь использовать инструменты минификации из minifycode.com.

Смотрите также: Как добавить код CSS безопасно на WordPress проконсультировавшись по этой ссылке.

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

сжимайте файлы CSS, HTML и javascript в WordPress

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

минификация css.jpg

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

скопируйте сжатый code.jpg

Затем вернитесь к файлу CSS вашего сайта и замените код новой упрощенной версией.

Вот так!

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

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

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

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

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

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

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

Для получения дополнительной информации см. Наше руководство по:  Как установить плагин в WordPress

autoptimize.jpg

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

оптимизация css.jpg

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

css options advanced.jpg

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

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

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

сжимать файлы CSS, HTML и javascript

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

wp fasttest cache.png
WP быстрый кэш - Этот плагин WordPress Кеширование чрезвычайно популярно среди высоких отзывов. Он выполняет различные оптимизации производительности, в том числе комбинирует и уменьшает ваш HTML CSS и JavaScript для повышения производительности.

Читайте также нашу статью о 8 WordPress плагинов, чтобы добавить чат на свой блог

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

сжимать файлы CSS, HTML и javascript

Подводя итог

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

9 WordPress плагины, чтобы скрыть содержание вашего блога открыть абсолютно

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

Откройте для себя также несколько премиальных плагинов WordPress  

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

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

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

Страница ошибки 404 перенаправляет на домашнюю или настраиваемую страницу. плагин wordpress

Все страницы с ошибками 404 будут перенаправлены на домашнюю страницу или пользовательский URL. Используя это Плагин Wordpress, вы позволите Google снизить рейтинг страницы вашего веб-сайта, если на нем много страниц с ошибкой 404.

Откройте для себя тоже Как исправить ошибку 413 на WordPress

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

скачать | Демонстрация | веб-хостинг

2. Borlabs Cache

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

Плагин кеширования wordpress для Borlabs cache

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

Смотрите также наш 5 WordPress плагины очистить базу данных вашего сайта

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

Откройте для себя Как отобразить все ваши WordPress публикации на одной странице

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

скачать Демонстрация | веб-хостинг

3. Многоязычный пресс

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

Плагин для многоязычного перевода прессы плагин для WordPress

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

Откройте для себя Как добавить фрагмент кода с помощью Gutenberg на WordPress

Многоязычная пресса — отличный бесплатный вариант для добавления переводов на ваш сайт WordPress через мультисайтовой, Кроме того, если вы когда-нибудь обнаружите, что вам нужно больше вариантов, вы можете выбрать профессиональную версию, которая стоит 75 долларов.

скачать Демонстрация веб-хостинг

Другие рекомендуемые ресурсы

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

Заключение