Минимизация JavaScript-файлов


Содержание

Объединение и минимизация CSS и Javascript файлов

Объединение и минимизация CSS-файлов

В макете сайта все дополнительные CSS-файлы добавляются с использованием метода Core_Page::instance()->css() и показываются с использованием метода showCss() , например:

Объединение и минимизация Javascript-файлов

В макете сайта все Javascript-файлы добавляются с использованием метода Core_Page::instance()->js($js, $mode = FALSE) и показываются с использованием метода showJs() , например:

При использовании объединения и минимизации Javascript-файлов асинхронная загрузка указывается для Core_Page::instance()->showJs(‘async’), например:

Для асинхронной загрузки указывается опция ‘async’ или TRUE, для загрузки в режиме defer указывается ‘defer’.

Обновление минимизированных файлов

Объединенные файлы размещаются в директории hostcmsfiles/css/ и hostcmsfiles/js/, файлы обновляются при редактировании макетов через центр администрирования. В случае, если вы правите CSS/JS вручную, то необходимо самостоятельно удалять сохраненные файлы в hostcmsfiles/css/ и hostcmsfiles/js/.

Как уменьшить размер CSS, JS и HTML файлов

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

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

  • Символы пробелов;
  • Комментарии;
  • Разрывы строк;
  • Разделители блоков.

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

Чтобы различать минифицированные файлы, в их имена добавляется расширение .min ( например: foobar.min.css ).

Разница между минификацией и сжатием

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

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

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

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

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

Пример минификации

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

ДО CSS минификации:

ПОСЛЕ CSS минификации:

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

Минификация CSS

Онлайн

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

Инструменты разработки

  • yui.github.io : позволяет осуществлять процесс сборки в среде разработки, которая уменьшает, переименовывает и сохраняет оптимизированный файл в рабочем каталоге;
  • phpied.com : инструмент использует возможности минификации CSS и YUI Compressor, но он применяет JavaScript вместо Java.

Минификация JS

Онлайн

  • closure-compiler.appspot.com : можно использовать как онлайн-инструмент и как API-интерфейс. Этот инструмент позволяет настроить оптимизацию и форматирование:
  • jscompress.com : позволяет минимизировать JS путем копирования/вставки кода. Дополнительно можно загрузить JavaScript-файл и выполнить процесс минификации нескольких файлов одновременно:
  • javascript-minifier.com : создан теми же разработчиками, что и cssminifier . JS Minifier позволяет скопировать минимизированный код или скачать его в виде файла. А также осуществить сжатие CSS и JS онлайн :

Инструменты разработки

  • yui.github.io : предоставляет возможность минимизировать JS файлы для веб-проектов.

Минификация HTML

  • htmlcompressor.com : предоставляет возможность выбора между различными уровнями минификации HTML и встроенного в него кода CSS и JS :
  • minifycode.com : представляет собой текстовое поле, куда нужно вставить код HTML и сгенерировать его уменьшенную версию:

Существует множество инструментов для минификации файлов. Многие CMS также предлагают плагины и расширения для минификации CSS , JS и HTML — файлов.

WordPress плагины для минификации

  • Better WordPress Minify ;
  • Autoptimize .

Многие плагины кэширования также предлагают возможность минификации. Например, Cache Enabler поставляется с возможностью включения минификации HTML и JS . Использование этой функции позволяет уменьшить время загрузки веб-страниц, но в некоторых случаях это может привести к конфликту с другим плагином сжатия CSS WordPress .

Drupal модуль минификации

В сообществе Drupal популярным вариантом для минификации является модуль Minify . Он позволяет минимизировать HTML , JavaScript файлы и использует компилятор Google Closure , чтобы проанализировать минификацию. Конфигурация данного модуля проходит быстро.

Joomla! Расширение для минификации

CMS Joomla также предлагает расширение для оптимизации сайта под названием JCH Optimize , которое уменьшает размер JavaScript и производит сжатие CSS файлов . Оно также предоставляет возможность включить GZIP сжатие для агрегированных файлов.


Преимущества уменьшения файлов

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

Данная публикация представляет собой перевод статьи « How To Minify CSS, JS, and HTML » , подготовленной дружной командой проекта Интернет-технологии.ру

Как оптимизировать CSS и JS для более быстрой загрузки сайтов

Дата публикации: 2020-02-06

От автора: для чего нужно оптимизировать CSS и JavaScript? Когда дело касается онлайн-бизнеса, пользовательское восприятие является ключевым фактором. Неважно, ведете ли вы нишевый блог, SaaS сайт или интернет-магазин. Если вы не заботитесь о том, как пользователи воспринимают ваш продукт, не надейтесь, что они когда-либо что-нибудь купят.

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

Увеличение скорости загрузки интернет-страницы с восьми до двух секунд может увеличить коэффициент конверсии до 74 процентов. Это значит, что медленный сайт может стоить вам практически половины потенциальных клиентов.

Полная картина с помощью PageSpeed Insights

Чтобы выявить проблемы вашего веб-сайта, которые влияют на скорость загрузки страницы, можно использовать Google PageSpeed Insights. Это бесплатный инструмент, который автоматически сканирует и стационарную, и мобильную версии сайта.

Илон Маск рекомендует:  Что такое код asp iisipsecurity

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

Определить код, который нужно минимизировать

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

При минимизации мы убираем эти лишние символы и тем самым уменьшает траффик и увеличивает скорость загрузки страницы. С помощью PageSpeed Insights вы легко можете определить, какой код нужно минимизировать. Просто нажмите ссылку «Показать, как исправить» и найдите данный ресурс через систему управления контентом (CMS) или через FTP.

Например, если веб-сайт работает на WordPress, тогда весь код должен быть доступен для редактирования в панели «Редактор». Ее можно найти в разделе «Внешний вид» панели администрирования.

Оптимизация кода

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

Использование CSS Minifier

CSS Minifier – это бесплатный и простой инструмент для сжатия CSS-ресурсов. Все, что вам нужно сделать, это вставить код в поле ввода, задать уровень сжатия и нажать кнопку «Minify».

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

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

Чтобы проверить, сработала ли минимизация, выполните еще один тест через PageSpeed Insights. CSS файл, который недавно был сжат, не должен больше выдавать сообщение «минимизируйте CSS».

Использование асинхронной загрузки для JavaScript

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

Асинхронную загрузку часто называют «отложенной загрузкой», но, в контексте JavaScript, такой вид загрузки работает посредством функций динамической загрузки.

Чтобы осуществить асинхронную загрузку, просто добавьте тэг async в код вызова .js-файла. Это можно сделать в исходном HTML-коде вашего веб-сайта. Ниже приведен пример того, как это сделать:

Как минимизировать файлы CSS/JavaScript в WordPress

Главное меню » Блог-платформа wordpress » Как минимизировать файлы CSS/JavaScript в WordPress

Что такое Минимизация и зачем она вам нужна?

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

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

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

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

Ниже приведен пример обычного кода CSS:

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

Если вы пытаетесь достичь 100/100 счет на Google PageSpeed или GTMetrix, то минимизация CSS и JavaScript позволит значительно улучшить ваши очки.

Сказав, давайте посмотрим, как легко минимизировать CSS/JavaScript на вашем WordPress сайте.

Минимизация CSS/Javascript в WordPress

Первое, что вам нужно сделать, это установить и активировать плагин Better WordPress Minify . Для получения более подробной информации, см наш шаг за шагом руководство о том, как установить плагин в WordPress плагин.

После активации плагин добавит новый пункт меню с надписью ‘BWP Minify’ в вашу админку WordPress. При нажатии на нее, вас приведет к странице настроек плагина.

На странице настроек необходимо проверить первые два варианта, чтобы автоматически минимизировать JavaScript и CSS файлы на WordPress сайте.

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

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

Далее, вам нужно, зайти на свой веб-сайт. Щелкните правой кнопкой мыши в любом месте, а затем выберите ‘View Page Source “из меню браузера.

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

Это уменьшенная версии исходного CSS и JavaScript файлов. Плагин Better WordPress Minify будет держать их в кэше и передавать минимизированную версию для браузеров.

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Минимизация HTML, CSS, JS-файлов на WordPress

Тема об улучшении скорости загрузки сайта поднималась неоднократно потому, что это очень важный аспект. Он оценивается как поисковиками, так и пользователями, о чем говорилось многократно. И чтобы добиться положительного результата придется немного потрудиться. В предыдущих статьях по данном материале речь шла о кэшировании WordPress, gzip сжатии и несколько полезных советов. Это все можно назвать «комплексным процессом». А сегодня поговорим еще об одном действие, которое также поможет оптимизировать скорость сайта.

Абсолютно любой сайт включает в себя дополнительные файлы такие как CSS, JavaScript, HTML. Все они изначально написаны с удобством для редактирования и понятным отображением. То есть отступы, комментарии, перенос строки и прочее. Но это важно только человеку. Так как браузер хорошо обрабатывает код и без всех этих пробелов. И даже было бы лучше убрать их и сократить весь код. Сейчас как раз этим и займемся.

Что такое минимизация?

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

Работает ли?

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

Илон Маск рекомендует:  Пример работы с сокетами (socket) для windows

Установка

Для платформы WordPress было создано немало специальных расширений (плагинов), позволяющих сократить файлы JS, HTML, CSS без особых затруднений. В принципе, это суть всех плагинов — упрощать вашу работу по оптимизации. Из всех мной практикующих плагинов я остановился лишь на одном: WP Minify Fix. Не потому, что остальные не справляются со своими обязанностями, а из-за большого количества настроек, которые попросту не посчитал необходимыми, во всяком случае для меня.

Первым делом скачиваем и устанавливаем плагин WP Minify Fix. Затем переходим на вкладку «Настройки- WP Minify Fix». Здесь всего одна страница параметров.

Первые две строчки – вкл/выкл копирайт (ссылка в футоре на плагин)

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

И последние два поля ввода – исключение не желаемых файлов в сокращении.

Чуть не забыл: в плагинах для кэширования имеется свой встроенный инструмент минимизации файлов (в большинстве).

Минимизация JavaScript-файлов

После публикации статьи на тему архивирования JS/CSS-файлов для последующей выдачи клиенту, я задумался на тему, какой же метод минимизации (minify) следует использовать. В докладе на конференции ClientSide’2007 не удалось установить четкого критерия, чем и как лучше всего сжимать JavaScript-файлы. Данная заметка посвящена рассмотрению как раз этой проблемы.

Задача

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

  • Имеет ли смысл пользоваться каким-либо минимизатором JS-кода?
  • Есть ли среди них универсальное средство, показывающее лучшие результаты в подавляющем большинстве случаев?
  • Если такого средства нет, то каковы критерии использования набора инструментов?


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

Инструменты и методика

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

  1. JSMin. Наиболее широко распространенный минимизатор, основывается на простых правилах, портирован на множество языков, в том числе, и на сам JavaScript.
  2. JavaScript::Minifier. Отдельный перловый модуль, по степени сжатия очень близок к JSMin, однако генерирует отличный от первого синтаксис.
  3. Dojo ShrinkSafe aka Rhino. Первоначально разрабатывался как Rhino, затем был включен в состав Dojo. Запускается как jar-модуль.
  4. Dean Edwards Packer. Достаточно широко известный инструмент от не менее известного Dean Edwards. Портирован на некоторые языки, в том числе, на PHP4/5.
  5. YUI Compressor. В представлении также не нуждается, именно на его основе проведена оптимизации сайтов Yahoo. Для анализа использовалась версия 2.2.5. Запускается как jar-модуль.

Для анализа были найдены несколько достаточно больших и широко используемых JS-файлов (возможно, вы их загружали в этом месяце или даже используете из кеша каждый день) разных размеров и степеней изначального сжатия. Далее их размеры со ссылками на источники: 853, 5857, 8867, 9580, 21414, 22015, 39686, 43099, 83879, 95285, 124136, 289446.

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

Результаты

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

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

JSMin:

JavaScript::Minify:

Dojo ShrinkSafe:

Dean Edwards Packer:

YUI Compressor 2.2.5:

Далее все инструменты на одном графике (без архивирования). Заметен явный выигрыш Packer’а без архивирования.

При архивировании, однако, все минимизаторы ведут себя примерно одинаково.

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

Тут уже хорошо видно, что YUI Compressor ведет себя, в целом, лучше остальных скриптов.

Выводы

Во-первых, стоит указать на практически идентичное поведение JSMin и JavaScript::Minifier, скорее всего, они действуют по достаточно похожему алгоритму, однако, последний обладает скрытым потенциалом (при более подробном рассмотрении файлов, полученных вследствие работы второго, оказалось, что они могут быть уменьшены еще), но он работает в несколько раз дольше аналогов (3–5 секунд против 0,3–0,5 для Packer’а на PHP).

Во-вторых, файлы, которые меньше 1Кб или при архивировании дают выигрыш меньше 70%, смысла минимизировать не имеет. Минимизация дает в таком случае результат, сравнимый с нулем. Если с сервера отдаются небольшие (до 20Кб в несжатом виде) архивированные файлы (.gz), то имеет смысл по умолчанию их минимизировать с помощью JSMin.

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

В-четвертых, во всех остальных случаях (сервер отдает достаточно большие gzip’ованные файлы, которые хорошо архивируются) стоит использовать YUI Compressor (в среднем, показал 6% преимущество относительно простого gzip).

Все полученные файлы можно также скачать единым архивом здесь (всего 12х12 = 144 файла).

В качестве послесловия

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

Минимизация JavaScript-файлов

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

Нажав кнопку «Принять и продолжить», вы соглашаетесь с Политики конфиденциальности

Мы запустили рейтинг зарплат интернет-маркетологов! Прими участие в анонимном опросе.

How-to – Читать 5 минут – 24 апреля 2020

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

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

Еще одним популярным инструментом сокращения кода скриптов считается Closure Complier от Google. Интерфейс сервиса состоит из двух вертикальных полей. Вставлять код JS нужно в левое поле:

Оптимизировать JavaScript с целью сокращения его размера можно вручную и с помощью онлайн-инструментов. Каждая манипуляция по сжатию должна сопровождаться параллельной проверкой страниц сайта.

Илон Маск рекомендует:  Проверка информации введенной в форму

После удаления пробелов, комментариев, лишних строк замените обычные переменные на их сокращенные версии. Оптимизация кода JS для сайтов на WordРress и других СMS может проводиться с помощью встроенных плагинов.

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

Способы сжатия/минимизации файлов javascript

Duplicate:

До сих пор я видел эти инструменты для сжатия файлов javascript

На странице Packer есть раздел «Packer versus JSMin», в котором говорится, что JSMin может быть более эффективным, чем Packer. На странице Yahoo Compressor говорится, что компрессор Yahoo более эффективен, чем JSMin, поэтому похоже, что компрессор Yahoo может стать лучшим кандидатом.

Каков наилучший вариант сжатия файлов javascript?

Компрессор Yahoo, для комбинации безопасности и достойного сжатия.

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

У Packer есть функция кодирования, которая генерирует еще меньший файл. Однако он эффективен только в том случае, если ваш веб-сервер не поддерживает сжатие gzip или deflate. С помощью gzip/deflate YUI и Packer генерируют файлы размером примерно того же размера.

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

После этого мы обслуживаем HTTP-соединение GZip и voila!

Как ускорить сайт, минимизируя HTML, CSS и JavaScript

Скорость загрузки сайта является важным показателем как для поисковой системы, так и для пользователя. Доля мобильного интернета растет вместе с количеством мобильных устройств, и люди предъявляют к сайтам все больше требований – в том числе касающихся быстрой загрузки контента. А запуск нового алгоритма ранжирования Google для мобильного поиска – Speed Update – обязует уделять больше внимания скорости загрузки мобильных сайтов.

Рассмотрим два способа ускорить сайт – ручной и с помощью программ-минимизаторов.

Что такое минимизация кода

В инструменте Google для проверки скорости загрузки PageSpeed в результате проверки страницы сайта можно встретить следующие рекомендации:

«minify HTML» — сократить код HTML;
«minify CSS» — сократить код CSS;
«minify JavaScript» — сократить код JavaScript.

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

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

Ручная минимизация кода

Рассмотрим для примера простую HTML-страницу:

Библиотека Minify – работа с CSS и JavaScript

Здравствуйте, друзья! Два года назад я рассказывал о сжатии JavaScript, а в прошлый раз затронул тему оптимизации CSS. И вот настало время, когда можно объединить знания, накопленный опыт и двигаться дальше.

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

Сжимая CSS и JS различными онлайн инструментами мы несомненно получаем плюс к производительности сайта, даже можем объединить файлы для снижения http запросов, но все эти действия приводят к условно большим затратам труда… Пришло время раскрыть карты и предложить Вам более универсальное решение — пользоваться библиотекой Minify для минимизации, объединения файлов и их кэширования.

Наглядный пример, взятый со страницы проекта на Google Code, демонстрирующий результаты использования библиотека Minify, из которого видно насколько сократилось число http запросов к серверу и уменьшился размер отправленных данных:

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

Подключение и использование библиотеки Minify

Перехожу к основному вопросу — как пользоваться скриптом Minify. Для начала необходимо скачать архив с последней версией на этой странице. Затем сохранить папку /min/ , находящуюся в архиве, на сервер в корневую директорию сайта.

Теперь практически все готово. Осталось заменить стандартные вызовы файлов css и js на минимизированные скриптом. Приведу пример, на нем проще понять. В файле header.php нахожу строку с указанием файла стилей:

и заменяю ее на:

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

В качестве помощника Вы можете использовать Minify URI Builder на своем сайте, после распаковки архива он будет расположен по адресу: ../min/builder/ . Для того чтобы включить Builder необходимо в папке /min/ найти файл config.php и найти в нем строку:

Обратите внимание, по-умолчанию он отключен! Для задействования необходимо заменить значение false на true . Для доступа Вам потребуется пароль, задается он в этом же файле, в строке:

Смените пароль на свой, если намерены активировать Minify URI Builder. Логин для входа — admin.

Подключать сжатие с таким помощником еще проще — достаточно указать путь к файлу в текстовом поле, при необходимости добавить еще несколько кнопкой Add file+

Затем после нажатия Update получите ссылки, которыми следует заменить исходные:

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

Плагин Better WordPress Minify и его особенности

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

Раньше у меня был установлен плагин WP-Minify, однако он давно не обновлялся и более не поддерживается автором, пришлось удалить.

Better WordPress Minify работает аналогично, перехватывая на странице JS/CSS файлы, минимизирует их, а затем подключает объединенные скрипты и стили в заголовке WordPress. Основные особенности:

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

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

Неважно какой Вы выберите метод, будь то прямое подключение библиотеки Minify на сайт или установка плагина BWP-Minify — в любом случае подобная оптимизация положительно скажется на быстродействии сайта, ускорении загрузки страниц. Желаю успехов, до скорой встречи на Блоге Свободного Вебмастера!

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL