Некоторые файлы javascript не выглядят минимизированными
Обновлено: 01.07.2024
Ищете самый быстрый и простой способ минимизировать CSS и JavaScript в WordPress и ускорить работу вашего сайта? Продолжайте читать, и вы найдете всю необходимую информацию.
Оглавление
Вы ищете способ минимизировать CSS и JavaScript вашего сайта WordPress? Если вы недавно проводили аудит производительности с помощью PageSpeed Insights, возможно, вы заметили следующие рекомендации: «Сократите CSS» и «Сократите JavaScript».
PageSpeed Insights помечает весь ваш контент, если считает, что ваши файлы CSS и JS больше, чем должны быть.
В этой статье объясняется, что означает минимизация CSS и JavaScript, почему это важно для производительности и какие онлайн-инструменты и плагины можно использовать для минимизации файлов.
Что такое минификация?
Минификация буквально означает удаление ненужных частей файлов CSS и JavaScript, чтобы сделать их более компактными. Когда разработчики пишут код, они будут включать разрывы строк, пробелы и комментарии, которые облегчают чтение кода, но не нужны вашему браузеру для обработки кода. Этот метод оптимизации выполняется без изменения основной функции и поведения общего кода при значительном уменьшении размера файла.
Основными преимуществами минимизации являются сокращение использования полосы пропускания, размера страницы и времени загрузки.
Какие ресурсы можно минимизировать? И JavaScript, и каскадная таблица стилей (CSS) — это ресурсы, которые можно минифицировать. Давайте рассмотрим обе оптимизации.
Что такое минимизация CSS?
Минификация CSS означает уменьшение размера CSS от исходного до наименьшего без ущерба для его основной функциональности и нарушения дизайна страницы.
Пример минимизированного CSS – Источник: WP Rocket
Что такое минификация в JavaScript?
Минификация JavaScript – это процесс, позволяющий сделать код JS более компактным, чтобы файлы анализировались и доставлялись как можно быстрее.
Пример минимизированного JS – Источник: WP Rocket
Примечание. HTML также можно минимизировать. Результирующая HTML-страница будет уменьшенной версией исходного файла, и ее код останется полностью корректным.
В чем разница между минификацией и сжатием?
Основное различие между минификацией и сжатием заключается в том, как уменьшается размер файла. Сжатие (GZIP) означает замену повторяющегося кода указателем, в котором используется меньше пробелов, чем в тексте. Например, после сжатия GZIP вы не увидите все до единого
Сравнение размера файла. Сжатие GZIP и минимизация. Источник: хитрости CSS
Сжатие – это действие по архивированию файлов меньшего размера для более быстрого выполнения запросов и сокращения времени передачи данных. Таким образом, перед выполнением сжатый код необходимо распаковать, а минимизированный код по-прежнему является допустимым кодом, который можно запустить немедленно.
| Важное примечание: при минификации и сжатии на странице будет меньше ресурсов, состоящих из меньшего количества кода, но посетитель увидит тот же контент. |
Почему важна минимизация CSS и JS
Минификация CSS и JS важна для уменьшения размера файла, повышения производительности страницы и прохождения соответствующих проверок PageSpeed Insights. Давайте рассмотрим основные преимущества минификации.
Минификация помогает повысить производительность
Минификация CSS и JS повышает производительность вашего сайта WordPress на четырех разных уровнях:
Минификация JS и CSS повышает производительность страницы и сокращает время загрузки вашего сайта. Например, при минимизации JavaScript вы получаете меньшую полезную нагрузку файла JS, что сокращает время, затрачиваемое на синтаксический анализ скриптов. Это приводит к более быстрой загрузке страниц и улучшению качества страниц.
- Улучшить отрисовку с наибольшим содержанием (LCP)
Самая большая отрисовка контента (LCP) – это показатель Core Web Vitals, который измеряет, когда самый большой элемент страницы становится видимым для пользователя. Минификация может помочь устранить причины плохого LCP. Оба метода рекомендуются Web.dev, чтобы сократить время отклика сервера, сократить время блокировки JS и CSS и сократить время загрузки ресурсов.
- Уменьшите размер файла для более быстрой доставки.
Согласно приемам CSS, сжатие Gzip уменьшает размер файла примерно в пять раз по сравнению с минимизацией. Минификация рекомендуется, чтобы дать вашему сайту небольшой импульс и ускорить доставку данных.
- Уменьшить использование пропускной способности сети CDN, взимаемой за оплату.
Минификация сокращает время загрузки и оптимизирует файлы скриптов, снижая потребление пропускной способности CDN для ваших веб-страниц. CDN обычно взимает плату за объем данных, переданных с серверов клиенту. Поскольку минимизированному коду требуется меньшая пропускная способность, это снизит ежемесячную стоимость CDN.
Минимизация предназначена для конкретных аудитов PageSpeed Insights
При проведении аудита производительности в PageSpeed Insights вы можете увидеть некоторые рекомендации, связанные с минимизацией.
В приведенном ниже примере PSI рекомендует «минифицировать CSS и JS», чтобы сэкономить 2,47 с и 2,4 с. Он также помечает приоритетными URL-адреса, которые необходимо оптимизировать. PageSpeed Insights запускает следующие правила, потому что вы можете уменьшить размер своих ресурсов с помощью минимизации:
Рекомендации по минимизации – Источник: PSI
Как было показано ранее, минимизация также влияет на оценку наибольшего отрисовки содержимого (LCP).
Core Web Vitals (LCP) – Источник: PSI
Теперь, когда мы объяснили, что такое минимизация необходима для повышения производительности, давайте рассмотрим методы минимизации CSS и JavaScript на вашем сайте.
Как минимизировать CSS и JavaScript в WordPress
Минимизировать CSS и JS можно с помощью онлайн-инструментов и инструментов разработки или с помощью подключаемого модуля WordPress (согласно рекомендациям Google).
Как минимизировать CSS и JS без плагина
Давайте рассмотрим основные методы минимизации JS и CSS.
Онлайн-инструменты
И это также работает с CSS:
Инструменты разработки и серверы
-
— NodeJS имеет множество библиотек CLI для минимизации кода, и UglifyJS — одна из них. , XCode (пользователи Apple), Netbeans — все это IDE (интегрированная среда разработки), которые помогают минимизировать JS или CSS вручную. Большинство IDE и редакторов кода имеют расширения для автоматической минификации. Например, это магазин расширений для Visual Studio:
- Минификация на стороне сервера. Некоторые серверы Nginx или Apache можно расширить для минимизации с помощью специального модуля. Давайте рассмотрим два примера.
- Пользовательский модуль для Nginx: Nginx Minify (из Github)
- Пользовательский модуль для Apache: Apache также может автоматически минифицировать с помощью «mod_ext_filter» с библиотекой.
- Сети доставки контента (CDN). Многие из них поддерживают минимизацию активов на периферии. Популярным примером является Cloudflare и его «автоматическая минимизация»:
⚠️ Если вам неудобно манипулировать файлами JavaScript и CSS и повторно загружать их на сервер, вы можете предпочесть использовать плагин WordPress, который сделает эту работу за вас.
Как минимизировать CSS и JS с помощью плагина WordPress
PageSpeed рекомендует использовать плагин WordPress для минимизации CSS или Javascript.
PSI рекомендует плагины WordPress – Источник: раздел диагностики PSI
Среди лучших плагинов для минимизации вы найдете:
После завершения минификации мы рекомендуем выполнить две следующие проверки:
- Убедитесь, что страница не повреждена во внешнем интерфейсе (процесс может иногда нарушать работу скриптов или рендеринг стилей).
- Убедитесь, что минификация работает правильно.
Как проверить, работает ли минификация?
- Пропустите свой URL через Google PageSpeed Insights и прокрутите до области «диагностики». Если Lighthouse не отмечает никаких проблем, ваш сайт выполняет минимизацию кода.
- Перейдите на страницу SEO проверки сайта и выполните быструю проверку своего сайта. Если CSS минимизирован, вы пройдете так же, как в нашем примере ниже:
Как минимизация реально влияет на скорость?
Мы видели, как минимизация может помочь повысить производительность сайта WordPress (даже Google рекомендует проводить такую оптимизацию).
Чтобы понять, как минимизация влияет на производительность, проведем аудит PageSpeed Insights. Всего будет три шага:
Рекомендации, которые я получаю от Lighthouse, связаны с оптимизацией моих CSS и JS, включая их минимизацию:
Рекомендации по кэшированию и оптимизации кода. Источник: PSI
CSS и JS — это ресурсы, блокирующие рендеринг. Источник: PSI
Общая производительность также не так высока, с оценкой 69/100:
Общая производительность – без оптимизации
После активации WP Rocket я заметил некоторые мгновенные улучшения в производительности и аудите PSI, а именно:
- Проблемы "Minify CSS" и "Minify JS" были решены и перемещены в раздел "пройдено аудит".
- Мои предупреждения о кэшировании и сжатии также исправлены, поскольку WP Rocket автоматически включает кэширование страниц и браузера, а также сжатие GZIP:
- Благодаря минимизации моя общая производительность увеличилась с 69/100 до 82/100, что является заметным улучшением.
- Мой LCP теперь оранжевого цвета (2,1 с с минификацией) против 5,4 с раньше.
Благодаря дополнительной оптимизации WP Rocket мне также удалось исправить проблему аудита «Устранить блокировку рендеринга».
| Производительность без WP Rocket | Полная оптимизация производительности с помощью WP Rocket 🚀 |
За счет минимизации JS и CSS, а также других операций сжатия и оптимизации кода, WP Rocket также улучшил мою общую оценку производительности и поставил мои основные веб-жизненные показатели в зеленую зону:
| Производительность без WP Rocket | Минификация и сжатие GZIP с помощью WP Rocket | Полная оптимизация производительности с помощью WP Rocket 🚀 |
Если вы хотите минимизировать свой код и ускорить свой сайт WordPress, вот функции WP Rocket, которые вам следует использовать:
- Минимизируйте JS и CSS:
- Сжатие GZIP. WP Rocket автоматически включает сжатие HTML, CSS и JS для более быстрой обработки файлов, отправляемых в браузер.
Подведение итогов
Сегодня мы создаем все более сложные сайты, которым требуется больше функций, больше кода (а иногда и больше подключаемых модулей). Что очень важно в минимизации CSS и JavaScript, так это то, что они оба являются ресурсами, блокирующими отрисовку — без оптимизации они будут влиять на производительность.
Минимизация кода — один из лучших способов уменьшить размер файлов JS и CSS. Файлы меньшего размера повышают скорость загрузки, которая может существенно зависеть от размера вашего веб-сайта.
Один из самых простых способов минимизировать CSS или JS — использовать WP Rocket. Плагин также может оптимизировать доставку CSS, откладывать JS и откладывать выполнение JS. Мы не рискуем: у вас есть 14-дневная гарантия возврата денег, если вы не заметите улучшения скорости.
Хотите узнать, что означает «Максимальная отрисовка контента» и как она может повлиять на эффективность вашего UX и SEO? Продолжай читать! Вы узнаете, что такое LCP, как его можно протестировать и какие факторы влияют на его оценку. Вы также узнаете, как оптимизировать производительность WordPress и исправить плохую оценку LCP для мобильных и настольных компьютеров (наибольшая отрисовка содержимого дольше 2,5 или 4 с). Все на простом английском!
Что такое задержка первого ввода и как она влияет на эффективность UX и SEO? На этой странице вы узнаете, что такое FID, как его можно протестировать и какие факторы влияют на его класс. Вы также поймете, как исправить плохую оценку с мобильных и настольных компьютеров (FID дольше 100 или 300 мс) и повысить производительность WordPress. Все на простом английском!
Интересно, что означает кумулятивное смещение макета и как оно влияет на производительность вашего UX и SEO? Продолжай читать! Вы узнаете, что такое CLS, как его можно протестировать и какие факторы влияют на его оценку. Вы узнаете, как избежать больших смещений макета и исправить плохую оценку с мобильных и настольных компьютеров (совокупное смещение макета более 0,25 или 0,1 с). Все на простом английском!
Будьте в курсе последних обновлений WordPress и веб-производительности.
Прямо в ваш почтовый ящик каждые две недели.
Когда вы минимизируете файлы CSS, HTML и Javascript на своем веб-сайте, вы можете сократить ценное время на скорость загрузки страницы вашего сайта. Мы не говорим о снижении скорости загрузки вашей страницы вдвое или о чем-то еще, но когда дело доходит до скорости вашего сайта, любая мелочь может помочь. Скорость загрузки вашего сайта важна не только для новых посетителей, но и для повышения рейтинга в поисковых системах.
Термин «уменьшить» — это жаргон программирования, который описывает процессы удаления ненужных символов в исходном коде. Эти символы включают пробелы, разрывы строк, комментарии и разделители блоков, которые полезны для нас, людей, но не нужны для машин. Мы минимизируем файлы веб-сайтов, содержащие код CSS, HTML и Javascript, чтобы ваш веб-браузер мог читать их быстрее.
Вот пример того, как выглядит минимизация CSS.
CSS перед минификацией
CSS после минификации
Очевидно, что это всего лишь небольшой пример использования фрагмента кода CSS, но вы можете себе представить, сколько места это сэкономит при минимизации тысяч строк кода. Итак, если вы хотите сделать это вручную вручную, технически вы можете это сделать. Но вы сильно рискуете ошибиться и напрасно отнять драгоценное время или свою жизнь!
Послушайтесь моего совета и используйте имеющиеся в вашем распоряжении инструменты.
Онлайн-инструменты для ручной минимизации файлов
К счастью, вам не нужно быть разработчиком или знать какой-либо язык программирования, чтобы минимизировать файлы сайта. Минификация стала стандартной практикой в мире веб-дизайна, поэтому вас не должно удивлять, что существует множество замечательных (и бесплатных) инструментов, которые сделают всю работу за вас.
Вот список некоторых полезных инструментов для начала работы. Поскольку многие из них могут минимизировать несколько типов кода, я включил параметры типа кода в круглые скобки.
Если вам нужны автономные инструменты для локального минимизации HTML CSS или JavaScript, вот несколько вариантов:
Как минимизировать CSS, HTML и Javascript вашего сайта
Как минимизировать свои HTML, CSS и JavaScript с помощью онлайн-инструмента
Многие из этих онлайн-инструментов имеют схожий процесс, состоящий из следующих шагов:
Вставьте исходный код или загрузите файл исходного кода.
Оптимизируйте настройки для определенного вывода (если параметры доступны).
Нажмите кнопку, чтобы уменьшить или сжать код.
Скопируйте уменьшенный вывод кода или загрузите файл уменьшенного кода.
Сначала найдите файл css (обычно называемый style.css) в файлах вашего сайта и откройте его с помощью редактора страниц. Затем скопируйте весь код CSS в буфер обмена.
После создания нового уменьшенного кода скопируйте его.
Затем вернитесь к файлу css вашего веб-сайта и замените код новой уменьшенной версией.
Повторите тот же процесс, чтобы также минимизировать файлы JavaScript и HTML вашего сайта.
Как минимизировать HTML, CSS и JavaScript в WordPress с помощью плагинов
Самый простой способ минимизировать HTML, CSS и JavaScript в WordPress — это использовать плагин. Это позволяет автоматически оптимизировать файлы сайта WordPress для уменьшения времени загрузки страниц несколькими нажатиями кнопки.
Существует множество подключаемых модулей, которые справятся с этой задачей, но я кратко упомяну несколько наиболее выдающихся.
Автооптимизация (БЕСПЛАТНО)
Autoptimize, вероятно, самый популярный плагин для минимизации. Он популярен, потому что он прост в использовании и обладает мощными функциями производительности. Он может агрегировать (комбинировать скрипты), минимизировать и кэшировать ваш код. В качестве бонуса у вас есть дополнительные возможности для оптимизации шрифтов Google, изображений и многого другого.
Чтобы использовать Autoptimize, вы можете загрузить, установить и активировать плагин на панели инструментов WordPress, выбрав «Плагин» > «Добавить новый».
После активации плагина перейдите в «Настройки» > «Автооптимизация». Затем на вкладке основных настроек отметьте код, который вы хотите оптимизировать (HTML, CSS и/или JavaScript), и нажмите Сохранить изменения.
Вы также можете нажать кнопку "Показать дополнительные настройки" в верхней части страницы, чтобы дополнительно настроить оптимизацию кода.
Вот и все! Довольно просто и мощно.
Fast Velocity Minify (БЕСПЛАТНО)
Чтобы использовать подключаемый модуль, сначала установите и активируйте его с панели управления WordPress, выбрав «Плагины» > «Добавить новый». Затем выполните поиск по фразе «быстрая скорость минимизации» и, как только она появится в результатах поиска, нажмите, чтобы установить и активировать ее.
После активации плагина ваши файлы будут автоматически уменьшены и оптимизированы для максимальной производительности. Это было легко!
Перейдите на страницу настроек плагина (Настройки > Fast Velocity Minify), чтобы увидеть все доступные параметры. На вкладке «Статус» вы можете увидеть полезный список ваших файлов JavaScript и CSS, которые были обработаны.
На вкладке "Настройки" вы можете настроить способ оптимизации файлов. Поскольку минимизация HTML, CSS и JavaScript уже активна, вы можете использовать эти настройки, чтобы настроить параметры по умолчанию или отключить минимизацию для определенных типов кода. Есть даже варианты оптимизации Google Fonts и Font Awesome.
Общий кэш W3 (БЕСПЛАТНО)
W3 Total Cache – отличный плагин для кэширования, который включает возможность минимизации HTML, JS и CSS.
Самый быстрый кэш WP (БЕСПЛАТНО)
WP Fastest Cache — этот БЕСПЛАТНЫЙ плагин для кэширования WordPress чрезвычайно популярен и имеет высокие отзывы. Плагин выполняет различные оптимизации производительности, включая объединение и минимизацию HTML CSS и JavaScript для повышения производительности.
После установки плагина просто щелкните вкладку WP Fastest Cache на боковой панели панели управления WordPress (со значком удивительного гепарда). На вкладке настроек вы найдете параметры для объединения и минимизации файлов HTML и CSS. Хотя минимизация JavaScript доступна только в профессиональной версии.
Заключительные мысли
Если вам нужно ускорить загрузку страниц и улучшить показатели производительности, вам следует минимизировать файлы HTML, CSS и Javascript. Со всеми доступными онлайн-инструментами вы можете легко минимизировать свой код для любого веб-сайта. А для вас, пользователей WordPress, есть несколько мощных плагинов, которые автоматически минимизируют эти файлы несколькими щелчками мыши. Приведенные выше плагины — это лишь некоторые из замечательных плагинов, которые выполняют минимизацию наряду с другими оптимизациями производительности. На самом деле у вас уже может быть плагин типа производительности, в котором уже доступна минификация. Например, многие плагины кэширования включают опцию минификации. Я надеюсь, что этот пост поможет вам решить, какой вариант подходит вам лучше всего.
Я с нетерпением жду ваших комментариев ниже.
Джейсон Шампань
Джейсон начал карьеру в сфере образования, а затем стал соучредителем веб-агентства, специализирующегося на веб-сайтах Divi.Сейчас он старший создатель контента в Elegant Themes, где ему нравится публиковать сообщения в блогах, учебные пособия и документацию обо всем, что связано с Divi и WordPress.
Для оптимизации у меня есть два бесплатных плагина: Autoptimize и WP Fastest Cache. Нужен ли мне специальный плагин для минимизации файлов Javascript или плагин премиум-класса?
Благодарим вас за обращение в Rank Math.
Это внешние файлы, и у вас может не быть возможности уменьшить их размер на вашем сайте. В этом случае вам, возможно, придется проигнорировать этот тест.
Пожалуйста, имейте в виду, что эти тесты являются всего лишь рекомендациями, и вам не нужно следовать им неукоснительно.
Надеюсь, это поможет. Спасибо, и, пожалуйста, не стесняйтесь обращаться к нам в любое время, если вам нужна дополнительная помощь с чем-либо еще.
Файл JavaScript представляет собой код отслеживания Google Analytics. Установлен ли код Google Analytics на обоих этих сайтах?
Надеюсь, это поможет. Будем рады помочь вам.
Если вы хотите использовать уменьшенную версию кода аналитики, вам следует удалить код аналитики из темы и добавить уменьшенную версию с помощью подключаемого модуля.
После этого перейдите в WP Dashboard > Rank Math > Status & Tools > Database Tools > Flush SEO Analysis Data и снова запустите SEO-анализ.
Сообщите нам, как это происходит. С нетерпением жду вашего обновления.
Но «Глобальный тег сайта (gtag.js)» я оставил в теме. Я передал код отслеживания в плагин.
«Gtag.js» все еще в теме.
Не могли бы вы указать URL своего веб-сайта в разделе "Конфиденциальные данные", чтобы мы могли более внимательно изучить его?
С нетерпением ждем возможности помочь вам с этим. Спасибо.
Я обновил конфиденциальные данные в соответствии с запросом. Не могли бы вы проверить дальше?
Если вы по-прежнему видите файл, и он исходит из вашей темы, мы рекомендуем вам связаться с поставщиком темы и запросить инструкции о том, как его удалить.
У нас нет никакого контроля над разметкой, создаваемой темами, и поэтому мы не можем предоставить дополнительную информацию о том, как отключить этот конкретный файл JS.
Не стесняйтесь обращаться к нам, если у вас есть какие-либо вопросы, связанные с Rank Math.
В моей теме сейчас нет кода Google Analytics, но проблема остается.
Пожалуйста, очистите кеш SEO-анализа, выбрав Rank Math > Статус и инструменты > Инструменты базы данных > Очистить SEO-анализ
После этого очистите кеш веб-сайта и браузера и повторно запустите SEO-анализ.
Вы хотите минимизировать файлы на своем сайте WordPress?
Минимизация файлов WordPress CSS и JavaScript может ускорить их загрузку и ускорить работу вашего сайта WordPress.
В этом руководстве мы покажем вам, как легко минимизировать файлы CSS/JavaScript в WordPress, чтобы повысить производительность и скорость.
Что такое минификация и когда она вам нужна?
Термин "уменьшить" используется для описания метода, позволяющего уменьшить размер файлов вашего веб-сайта. Для этого из исходного кода удаляются пробелы, строки и ненужные символы.
Вот пример обычного кода CSS:
После минификации код будет выглядеть так:
Обычно рекомендуется минимизировать только те файлы, которые отправляются в браузеры пользователей. Сюда входят файлы HTML, CSS и JavaScript.
Вы также можете минимизировать файлы PHP, но это не улучшит скорость загрузки страниц для ваших пользователей. Это связано с тем, что PHP — это серверный язык программирования, то есть он запускается на серверах до того, как что-либо будет отправлено в веб-браузер посетителя.
Преимущество минимизации файлов заключается в улучшении скорости и производительности WordPress, поскольку компактные файлы загружаются быстрее.
Однако некоторые эксперты считают, что повышение производительности для большинства веб-сайтов очень незначительно и не стоит затраченных усилий. Минификация удаляет только несколько килобайт данных на большинстве сайтов WordPress. Вы можете сократить время загрузки страницы, оптимизировав изображения для Интернета.
Если вы пытаетесь набрать 100/100 баллов в Google Pagespeed или GTMetrix, минимизация CSS и JavaScript значительно улучшит ваш результат.
Сказав это, давайте посмотрим, как легко минимизировать CSS/JavaScript на вашем сайте WordPress.
Мы рассмотрим 3 различных варианта, которые вы можете выбрать:
Готовы? Давайте начнем с нашего наиболее рекомендуемого метода.
Способ 1. Минимизация CSS/JavaScript в WordPress с помощью WP Rocket
Этот метод проще и рекомендуется для всех пользователей. Он работает независимо от того, какой хостинг WordPress вы используете.
Во-первых, вам необходимо установить и активировать плагин WP Rocket. Подробнее см. в нашем пошаговом руководстве по установке плагина WordPress.
WP Rocket — лучший плагин для кэширования WordPress на рынке.Это позволяет легко добавить кеширование в WordPress и значительно повысить скорость сайта и время загрузки страницы.
Подробнее см. в нашем руководстве по установке и настройке WP Rocket в WordPress.
Здесь вам нужно установить флажок «Минимизировать файлы CSS».
WP Rocket затем покажет вам предупреждение о том, что это может привести к поломке вашего сайта. Нажмите кнопку «Активировать Minify CSS». Вы всегда можете отключить эту опцию, если она вызывает какие-либо проблемы с вашим сайтом.
Далее вам нужно прокрутить вниз до раздела «Файлы JavaScript» ниже.
Здесь просто установите флажок рядом с параметром "Минимизировать файлы JavaScript".
И снова вы увидите предупреждение о том, что это может привести к поломке вашего сайта. Нажмите кнопку «Активировать Minify JavaScript».
После этого не забудьте нажать кнопку Сохранить изменения, чтобы сохранить настройки.
Теперь WP Rocket начнет минимизировать ваши файлы CSS и JavaScript. Вы можете очистить кеш в настройках плагина, чтобы убедиться, что он начинает использовать минимизированные CSS и JavaScript для следующего посетителя веб-сайта.
Способ 2. Минимизация CSS/JavaScript в WordPress с помощью SiteGround
Если вы используете SiteGround в качестве хостинг-провайдера WordPress, вы можете минимизировать файлы CSS с помощью SiteGround Optimizer.
SiteGround Optimizer – это подключаемый модуль для оптимизации производительности, который работает на собственной платформе. Он хорошо работает с их сверхбыстрым PHP, чтобы сократить время загрузки вашего сайта.
Просто установите и активируйте плагин SiteGround Optimizer на своем сайте WordPress. Подробнее см. в нашем пошаговом руководстве по установке плагина WordPress.
После этого вам нужно щелкнуть меню SG Optimizer на боковой панели администратора WordPress.
Это приведет вас к настройкам SG Optimizer.
Здесь вам нужно нажать кнопку «Перейти к внешнему интерфейсу» в разделе «Другие оптимизации».
На следующем экране вам нужно включить переключатель рядом с параметром «Минимизировать файлы CSS».
Затем вам нужно перейти на вкладку JavaScript и включить переключатель рядом с параметром "Минимизировать файлы JavaScript".
Вот и все! Теперь вы можете очистить кеш WordPress и посетить свой веб-сайт, чтобы загрузить уменьшенные версии файлов CSS и JS.
Способ 3. Минимизация CSS/JavaScript с помощью автооптимизации
Этот метод рекомендуется для пользователей, которые не находятся на SiteGround и не используют WP Rocket.
Во-первых, необходимо установить и активировать подключаемый модуль Autoptimize. Подробнее см. в нашем пошаговом руководстве по установке плагина WordPress.
Сначала вам нужно установить флажок «Оптимизировать код JavaScript» в разделе «Параметры JavaScript».
После этого прокрутите вниз до параметров CSS и установите флажок рядом с параметром "Оптимизировать код CSS".
Не забудьте нажать кнопку "Сохранить изменения", чтобы сохранить настройки.
Затем вы можете нажать кнопку «Очистить кэш», чтобы начать использовать свои мини-файлы. Плагин также можно использовать для устранения блокировки рендеринга JavaScript и CSS в WordPress.
Мы надеемся, что эта статья помогла вам минимизировать CSS и JavaScript на вашем сайте WordPress. Вы также можете ознакомиться с нашим руководством по оптимизации основных веб-ресурсов в WordPress и следовать нашему полному руководству по производительности WordPress.
Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоруководств по WordPress. Вы также можете найти нас в Twitter и Facebook.
Минификация – это простая концепция, которую часто рекомендуют в качестве шага к ускорению работы вашего веб-сайта. Но реальность такова, что многие владельцы сайтов бесконечно разочаровываются, когда пытаются минимизировать свои файлы и в конечном итоге ломают свой сайт.
Минификация часто требует большого количества экспериментов. Хотя существует множество доступных решений, их поведение будет различаться от сайта к сайту в зависимости от того, какую тему и подключаемые модули вы используете.
В этом посте мы рассмотрим, что такое минификация, ее преимущества и некоторые из наиболее популярных доступных решений для минимизации — как вручную, так и с помощью плагинов, — чтобы помочь вам найти правильное решение для вашего сайта.
Что такое минификация?
Веб-сайты состоят из множества разных файлов. Если вы проверите скорость своего сайта с помощью Google PageSpeed Insights, вы можете получить рекомендацию по минимизации файлов HTML, CSS и JavaScript.
Проблема? Как люди, мы пишем код, содержащийся в этих файлах, чтобы мы могли их читать, но компьютеры не заботятся о таких символах, как комментарии, форматирование, пробелы и новые строки. Поэтому, когда они сталкиваются с этими ненужными символами в файлах веб-сайта, они игнорируют их.
Именно здесь на помощь приходит минимизация. Минификация — это термин программирования, который в основном означает удаление любых ненужных символов, которые не требуются для выполнения кода. Минификация работает путем анализа и перезаписи кода, чтобы уменьшить общий размер ваших файлов, тем самым уменьшая общий размер вашего сайта, чтобы он быстрее загружался в браузере пользователя.
Например, вот некоторые элементы CSS, которые вы можете найти в таблице стилей:
А вот уменьшенная версия приведенного выше примера CSS:
Видите, насколько сжат код?
Минификация выполняется на веб-сервере перед отправкой ответа. После минимизации веб-сервер использует уменьшенные файлы меньшего размера и гораздо более быстрые вместо исходных, что снижает пропускную способность без ущерба для функциональности.
Как объясняет эксперт по поисковой оптимизации Йоаст, минимизация файлов может сэкономить до 30–40 %, а в некоторых случаях даже 50 % размера файла.
Почему следует минимизировать файлы HTML, CSS и JavaScript
Наличие быстрого веб-сайта не только радует Google и помогает вашему веб-сайту занимать более высокие позиции в поиске, но и обеспечивает лучший пользовательский интерфейс для посетителей вашего сайта.
Существует множество статистических данных, которые ясно показывают, почему скорость сайта имеет решающее значение: 40 % людей не будут ждать 3 секунды, пока загрузится главная страница, а Google рекомендует, чтобы сайты загружались в течение 2–3 секунд.
Минификация имеет много преимуществ:
- Меньшие файлы означают, что общий размер загрузки вашего сайта уменьшается,
- Посетители сайта смогут быстрее загружать и получать доступ к вашим страницам,
- Посетители сайта будут иметь идентичный пользовательский интерфейс без необходимости загружать файлы большего размера и
- Владельцы сайтов получат меньшую плату за пропускную способность, поскольку по сети передается меньше данных.
Как минимизировать файлы HTML, CSS и JavaScript
Прежде чем минимизировать файлы вашего сайта, рекомендуется создать резервную копию. А еще лучше уменьшите файлы на тестовом сайте, чтобы вы могли убедиться, что все в рабочем состоянии, прежде чем вносить изменения в ваш рабочий сайт.
Также важно измерить скорость страницы до и после минимизации файлов, чтобы вы могли сравнить результаты и посмотреть, повлияло ли минимизация на какое-либо влияние.
Мой любимый сайт для тестирования скорости — GTmetrix. Он анализирует производительность вашей страницы с помощью Google PageSpeed Insights и YSlow, инструмента тестирования производительности с открытым исходным кодом. Затем он подсчитывает баллы и предоставляет рекомендации по оптимизации сайта.
Другие отличные инструменты для проверки скорости, которые я могу порекомендовать, включают Pingdom Website Speed Test и WebPageTest и Test your mobile speed.
Минимизация файлов вручную
Минимизация файлов вручную требует значительного количества времени и усилий. В смысле, у кого есть время удалять из файлов отдельные пробелы, строки и ненужный код? Скучный! Кроме того, это дает больше возможностей для человеческой ошибки. Поэтому я бы не рекомендовал этот метод для минимизации файлов.
К счастью, существует множество бесплатных онлайн-инструментов для минимизации, которые позволяют копировать и вставлять код с вашего сайта и на него. Вот краткий список инструментов, и я рекомендую вам изучить другие варианты, которые могут лучше подойти для вашего сайта.
1. HTML-минификатор Уилла Пиви
Инструмент Minifier Уилла Пиви.
HTML Minifier – это бесплатный онлайн-инструмент для минимизации HTML, созданный с помощью PHP. Чтобы использовать этот инструмент, просто вставьте свой HTML-код в текстовую область, включая любой CSS-код JavaScript в вашей разметке, и нажмите кнопку «Minify».Чтобы ваши скрипты работали после минимизации, рекомендуется завершать операторы JavaScript точкой с запятой и использовать синтаксис * * для комментариев.
2. Минимизатор CSS
Онлайн-инструмент CSS Minifier.
Еще один бесплатный инструмент, CSS Minifier, минимизирует CSS, который вы копируете и вставляете в текстовую область «Ввод CSS». Существуют варианты загрузки уменьшенного вывода в виде файла. Для разработчиков этот инструмент также предоставляет API.
3. JCompress
Инструмент JCompress.
JSCompress – это онлайн-компрессор JavaScript, который позволяет сжимать и уменьшать размер файлов JS до 80 % от их исходного размера. Чтобы использовать его, скопируйте и вставьте свой код или загрузите и объедините несколько файлов, а затем нажмите «Сжать JavaScript». Этот инструмент основан на UglifyJS 3 и babili-standalone.
Инструменты ручной минимизации для разработчиков
Для разработчиков, которым нужны дополнительные возможности, Google рекомендует следующие ресурсы для минимизации HTML, CSS и JavaScript:
-
– Компрессор/минификатор HTML на основе Javascript (с поддержкой Node.js). – Модульный минификатор, построенный поверх экосистемы PostCSS. - Минификатор CSS со структурной оптимизацией. - Парсер JavaScript, менеджер, компрессор и набор инструментов для «улучшения».
Компилятор Closure от Google – это инструмент оптимизации для JavaScript. Вместо того, чтобы компилировать исходный язык в машинный код, он компилируется из JavaScript, чтобы сделать JavaScript лучше. Он разбирает ваш код, анализирует его, удаляет мертвый код, переписывает и минимизирует то, что осталось. Этот инструмент также проверяет синтаксис, ссылки на переменные и их типы, а также предупреждает о распространенных ошибках JavaScript.
Минимизация файлов с помощью плагинов
Существует несколько потрясающих подключаемых модулей, как бесплатных, так и платных, которые могут минимизировать ваши файлы без необходимости выполнять действия вручную.
Примечание. В этот список я включил только те бесплатные плагины, которые доступны в репозитории плагинов WordPress, являются актуальными и протестированы на совместимость с последними версиями WordPress. Чтобы просмотреть премиум-опции, прокрутите вниз./
1. Сокращение HTML
Подключаемый модуль HTML Minify.
Этот простой, легкий и удобный плагин позволяет минимизировать вывод HTML вашего сайта. Чтобы использовать его, все, что вам нужно сделать, это установить и активировать плагин, и он автоматически уменьшит вашу разметку без необходимости настраивать какие-либо параметры.
2. Сократить HTML
Подключаемый модуль Minify HTML.
В отличие от подключаемого модуля HTML Minify, этот инструмент предоставляет больше возможностей. Он включает в себя дополнительную минимизацию для JavaScript и CSS, но не затрагивает текстовые области или предварительно отформатированный текст. Существуют также варианты удаления комментариев HTML, CSS и JavaScript (оставление условных комментариев MSIE), удаление ненужных закрывающих тегов XHTML из пустых элементов HTML5 и удаление ненужных относительных схем и доменов из ссылок.
3. Объединение + Сокращение + Обновление — Плагины WordPress
Подключаемый модуль Merge + Minify + Refresh.
Этот плагин делает больше, чем просто минимизирует ваш код. Он объединяет файлы CSS и JavaScript и затем минимизирует сгенерированные файлы с помощью Minify (для CSS) и Google Closure (для JavaScript). Минификация выполняется через WP-Cron, поэтому она не влияет на скорость вашего сайта.
При изменении содержимого файлов CSS или JS они обрабатываются повторно, поэтому нет необходимости очищать кеш. Пользователи нескольких сайтов будут рады узнать, что этот плагин хорошо работает в сетях.
4. Оптимизация JCH
Подключаемый модуль JCH Optimize.
JCH Optimize имеет множество приятных функций для бесплатного плагина: он объединяет и минимизирует CSS и JavaScript, минимизирует HTML, имеет сжатие GZip для объединения файлов, создание спрайтов для фоновых изображений, и вы можете исключить определенные файлы из объединения для разрешения конфликты.
Доступна профессиональная версия с дополнительными функциями оптимизации, включая асинхронную загрузку JavaScript, оптимизацию доставки CSS для устранения блокировки рендеринга, поддержку доменов без CDN и файлов cookie, а также отложенную загрузку и оптимизацию изображений.
5. Сокращение CSS
Подключаемый модуль CSS Minifier.
Минимизировать CSS с помощью этого плагина проще простого: просто установите, активируйте, перейдите в Настройки > Сокращение CSS, чтобы активировать только одну опцию: Оптимизировать и минимизировать код CSS.
Код этого подключаемого модуля был создан на основе популярного подключаемого модуля Autoptimize (подробнее об этом подключаемом модуле ниже). У автора плагина Питера Пфайффера есть аналогичный плагин для JavaScript, Minify JavaScript.
6. Быстрое сокращение скорости
Подключаемый модуль Fast Velocity Minify.
С более чем 20 000 активных установок и пятизвездочным рейтингом это один из самых популярных вариантов минимизации файлов. Чтобы использовать его, установите и активируйте плагин и перейдите в раздел Настройки > Fast Velocity Minify. Там вы найдете множество параметров для настройки плагина, включая расширенные параметры для разработчиков, исключения JavaScript и CSS, параметры CDN, а также информацию о сервере. Однако настройки по умолчанию прекрасно подходят для большинства сайтов.
Плагин выполняет минимизацию в реальном времени на внешнем интерфейсе и только во время первого запроса без кэширования. После обработки первого запроса все остальные страницы, для которых требуется такой же набор CSS и JavaScript, будут получать тот же файл статического кэша.
7. Автооптимизировать
Подключаемый модуль Autoptimize.
С более чем 400 000 активных установок Autoptimize является самым популярным инструментом минимизации в репозитории плагинов WordPress.
Автооптимизация может объединять, минимизировать и кэшировать сценарии и стили, по умолчанию вставлять CSS в верхний колонтитул страницы, а также перемещать и откладывать сценарии в нижний колонтитул. Существует множество расширенных возможностей для разработчиков и обширный API, поэтому вы можете настроить автооптимизацию в соответствии с конкретными потребностями вашего сайта.
8. Оптимизация скорости страницы Hummingbird
Плагин оптимизации Hummingbird.
Hummingbird – относительно новый плагин в репозитории плагинов WordPress, который начинался как плагин премиум-класса. В бесплатной версии есть большой набор инструментов для оптимизации сайта, включая минимизацию, позволяющую минимизировать, размещать и комбинировать файлы для максимальной производительности.
Есть также отличная функция сканирования, которая позволяет вам проверить производительность вашего сайта и получить действенные рекомендации по его улучшению прямо из подключаемого модуля.
Минификация как функция плагинов кэширования WordPress
Минификация обычно является стандартной функцией, которую вы найдете в подключаемых модулях кэширования. Вот плагины, которые я тестировал и могу порекомендовать:
Заключение
Я надеюсь, что эта статья прояснила для вас минификацию и дала четкое представление о том, что это такое и как вы можете применить ее на своем веб-сайте.
Важно помнить, что минимизация — это скорее шаг тонкой настройки: вы можете увидеть небольшое улучшение скорости вашего сайта, но оно не будет значительным. Тем не менее, это лучшая практика, которую стоит внедрить в дополнение к другим методам повышения производительности и оптимизации, таким как объединение файлов.
Кроме того, убедитесь, что вы настраиваете, тестируете, перенастраиваете, повторно тестируете, настраиваете и проверяете, что лучше всего подходит для вашего веб-сайта при минимизации файлов, потому что каждый веб-сайт отличается.
Если вам понравился этот пост, ознакомьтесь со сравнением 6 лучших плагинов кэширования WordPress, чтобы получить дополнительные советы о том, как ускорить работу вашего сайта.
Вы пробовали минимизировать код? Какие еще методы ускорения работы вашего сайта вы использовали? Дайте нам знать в разделе комментариев ниже!
Похожие записи
О Раэлин Мори
Раэлин – главный писатель DesignBombs. Ранее управляющий редактор WPMU DEV. Выпускник компьютерных наук стал газетным журналистом. Когда она не приручает вкладки браузера, ей нравится завтракать и гулять по лесу.
Читайте также: