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


Оптимизация JavaScript без знаний языка программирования – SEO

Как оптимизировать JS скрипты для увеличения скорости загрузки страниц без знаний JavaScript программирования.

 

Оптимизация JavaScript кода – это процесс редактирования самого кода JS путем замены функций, массивов и циклов более упрощенными аналогами с целью максимально сократить «тяжесть» восприятия кода браузерами.

 

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

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

Когда браузер получает ответ в виде HTML страницы на свой HTTP запрос к серверу, он начинает читать и обрабатывать код в определенной последовательности:

  1. Сначала проводит загрузку всех внешних исполняемых файлов (JS, CSS, Flash и др.) в порядке их очереди расположения на странице (сверху вниз). В этот момент пользователь видит белую страничку.
  2. Затем он начинает выполнение файлов в том же порядке очереди. Посетителю начинают «вырисовываться» элементы дизайна.
  3. По мере обработки CSS и JS отображается весь сайт в целом.
  4. Загрузка страницы заканчивается, когда все файлы загружены, обработаны и отображены посетителю.

 

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

 

 

Удаление лишних скриптов.

Для большинства новичков, скачать скрипт для uCoz и «влепить» его на сайт не составляет труда, если скрипт оказался нерабочим, то некоторые новички даже не удосуживаются удалить его со страниц, так как не понимают его роль, независимо от того – рабочий он или нет. Это же касается и скачанных шаблонов, в которых часто можно встретить бесполезные скрипты.

Вы должны определить, какие JS скрипты присутствующие в коде шаблона лишние и не влияют на работоспособность каких-то важных функций сайта.

Сделать это очень легко. В коде шаблона – «вырезаете» скрипт (Ctrl + X) и сохраняете шаблон, затем обновляете страницу и смотрите, какие произошли изменения. Если ничего страшного и критического не произошло, значит данный скрипт был лишним, а если пропали какие-то функции, то в коде шаблона «вставляем» вырезанную часть на место (Ctrl + V) и снова сохраняем. Такую процедуру проводим со всеми скриптами и во всех шаблонах модулей в панели управления.

 

 

Загрузка всех исполняемых файлов (скриптов) на свой сайт.

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

Для этого:

  1. Cкопируйте ссылку из скрипта в новое окно браузера и перейдите по ней (например, http://leviy-sajt/sript/fail.js).
  2. Выделите весь JS код (Ctrl + A) и скопируйте его в новый txt документ (создать его с помощью стандартного блокнота Windows).
  3. Данный файл сохранить с тем же именем, каким он был в исходном варианте (для вышеуказанного примера – это fail.js). Чтобы файл автоматически получил нужный формат – заключите имя в кавычки (“fail.js”), а так же выберите «Тип файла» – все файлы, «Кодировка» – UTF-8.
  4. После этого загрузите полученный файл через файловый менеджер на свой сайт (например, в паку JS).
  5. Подключите к скрипту в коде новый файл со своего сайта, заменив внешнюю ссылку в скрипте на внутреннею (http://ваш-сайт.ru/js/fail.js или просто /js/fail.js)

 

 

Вынос объемных скриптов во внешние файлы.

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

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

Чтобы вынести код скрипта во внешний файл вам нужно:

    1. Скопировать содержимое скрипта от открывающего тэга <script type=”text/javascript”> до закрывающего </script>
    2. Вставить в блокнот и сохранить в кавычках с именем, придуманным вами и разрешением js (например, “new-script.js”). Опять же выбрать «Тип файла» – все файлы, «Кодировка» – UTF-8.
    3. Залить полученный файл в файловый менеджер.
    4. В HTML коде шаблона замените старый объемный код на новый:

      <script type=”text/javascript” src=”http://ваш-сайт.ru/js/new-script.js”></script>

Где http://ваш-сайт.ru/js/new-script.js и будет ссылкой на исполняемый файл, находящийся в файловом менеджере вашего сайта.

 

 

Вынос кода скриптов в самый низ страницы.

Как я уже говорил, браузер обрабатывает скрипты в порядке очереди сверху вниз, и он не сможет сначала открыть весь дизайн (чтобы посетитель начал получать контент, не дожидаясь полной загрузки страницы), не обработав скрипт находящийся перед основным содержимым страницы. Поэтому все скрипты необходимо размещать перед закрывающим тэгом BODY или в глобальном блоке – «Нижняя часть сайта».

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

  1. Заголовок страницы (тайтл)
  2. Описание (дескрипшон)
  3. Кодировка страницы
  4. Подключение основных стилей
  5. Иконка сайта (фавикон)
  6. Все остальные мета-тэги и данные
  7. Скрипты

 

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

 

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

 

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

seo-for-ucoz.com

Несколько способов оптимизировать CSS и JavaScript для ускорения загрузки сайта

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Кроме обнаружения проблемных моментов, 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-коде вашего веб-сайта. Ниже приведен пример того, как это сделать:

<script src="yourscript.js" async></script>

<script src="yourscript.js" async></script>

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

Объединение JavaScript-файлов

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

Например, вместо того, чтобы вызывать несколько .js файлов в исходном коде:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

<script src="http://www.yoursite.com/menu.js"></script> <script src="http://www.yoursite.com/tools.js"></script> <script src="http://www.yoursite.com/footer.js"></script>

<script src="http://www.yoursite.com/menu.js"></script>

<script src="http://www.yoursite.com/tools.js"></script>

<script src="http://www.yoursite.com/footer.js"></script>

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

<script src="http://www.yoursite.com/all.js"></script>

<script src="http://www.yoursite.com/all.js"></script>

Чтобы еще больше ускорить время обработки скриптов, попробуйте опустить тэги http и type. Например, вместо:

<script src="http://www.yoursite.com/all.js" type="text/javascript"></script>

<script src="http://www.yoursite.com/all.js" type="text/javascript"></script>

Просто введите:

<script src="//www.yoursite.com/all.js"></script>

<script src="//www.yoursite.com/all.js"></script>

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

Наконец, JSCompress так же прост в использовании, как и CSS Minifier. Просто вставьте код в область ввода и нажмите на кнопку «Compress JavaScript».

Дальше перейдите к вкладке «Output», чтобы просмотреть сжатый JavaScript:

Удаление ненужного кода

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

Найти ненужный код очень легко, если использовать встроенные инструменты для разработчиков в Google Chrome. Для этого нужно открыть главное меню, выбрать «Дополнительные инструменты» и затем «Инструменты для разработчиков».

Не забудьте, что вам нужно находиться на той странице, которую вы хотите оптимизировать. В открывшейся панели инструментов для разработчиков, нажмите на «Coverage» в подсекции «More Tools» меню настроек.

Так вы откроете вкладку «Coverage» в Developer Console. Дальше нажмите на «Instrument Coverage», чтобы начать проверку.

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

Если вы проверяете код в первый раз, то найдете в этом списке сочетание ресурсов CSS и JavaScript. Ознакомьтесь с этим списком внимательно, чтобы узнать, используются они или нет.

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

Заключение

Процесс оптимизации CSS и JavaScript кода может показаться на первый взгляд очень сложным. Но, если использовать правильные инструменты и web host, то вам не нужно быть продвинутым веб-разработчиком, чтобы сделать это.

Автор: Gary Stevens

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

webformyself.com

Плагин Autoptimize обзор и настройка

Подробное руководство с обзором и инструкциями по настройке плагина AutoptimizeОптимизируем наш сайт с плагином Autoptimize. Всем привет!) В этом обзоре я расскажу Вам о плагине Autoptimize! Это превосходный вариант для оптимизации сайта на WordPress. Который обладает множеством преимуществ перед своими конкурентами. При этом он показывает прекрасные результаты в сочетании и с другими плагинами по оптимизации.

Но не стоит радоваться, внимательность и осторожность в использовании плагинов. Залог прекрасной работы вашего проекта. Это касается к примеру последних обновлений этого плагина на дату 03.08.2017. Которые к примеру затронули на моем сайте, всю структуру меню и рубрик. Разбираться в чем же причина пришлось часов шесть.И еще часа три, подстраиваться под это обновление. Кстати скорость работы сайта  значительно выросла и в течении двух дней все стабилизировалось.

Содержание статьи:

Плагин Autoptimize обзор

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

Изображение содержит вывод визуальной информации о плагине Autoptimize

Плагин Autoptimize настройка

Установка Autoptimize стандартная и не займет  у вас много времени. Далее регистрировать плагин нет необходимости. И можно переходить непосредственно к настройке! Параметры плагина разделены на разделы, каждый из которых, отвечает за ряд определенных опций.Для перехода к  настройкам, вам нужно в левом меню выбрать вкладку «Настройки«. Затем вкладку «Autoptimize«. Для более детальной настройки, нажмите на кнопку в правом углу окна настройки. Смотрите изображение ниже.

Параметры  HTML

Изображение иллюстрирует последовательность действий при настройке параметров HTML

  1. Оптимизации кода HTML — сжимает основной код сайта, при этом удаляя пустые пробелы и т.д . Опция крайне полезна, вес страницы при ее включении значительно уменьшается. Смело оставляйте.
  2. Сохранение комментариев в коде HTML — предоставляет Вам выбор, оставлять комментарии в коде или нет. Поясню, некоторые плагины не могут работать без комментариев в коде. Хотя это редкость. Важно то, что отключение комментариев в HTML значительно уменьшает его размер. Тем не менее выбор остается за вами.

Опции  JavaScript

Иллюстрация последовательности действий при настройки опций JavaScript

  1. Оптимизация кода JavaScript — включение сжатия кода java. Позволяет сжимать код, удаляя при этом лишние пробелы и знаки. Рекомендую смело отмечать эту опцию.
  2. Загрузки JavaScript в начале кода сайта — включает исполнение скриптов в начале кода загрузки сайта. Иногда это необходимо, но в большинстве случаев не стоит включать эту опцию.
  3. Создание агрегатного JS — опция извлекает скрипты из HTML. При этом создается статический файл, но размер кеша в таком случае будет расти на много быстрее.
  4. Исключение определенных скриптов из Autoptimize — в этом поле вы можете указать через запятую, те скрипты которые не хотите оптимизировать.
  5. Активируйте эту опцию в случае, если у вас появились ошибки отображения на сайте.

Опции  CSS

Иллюстрация действий при настройке параметров оптимизации стилей CSS

  1. Оптимизация кода CSS — включение, оптимизирует и сожмет стилевые файлы вашего сайта.
  2. Включение небольших фоновых образов в самом стилевом файле. Это уменьшит количество отдельных загрузок стилей.
  3. Удаление Google Fonts  — позволяет удалить шрифты Google, при условии, если они вам не нужны.
  4. Единый файл стилей в коде HTML — объединяет все стилевые файлы в один и внедряет в код HTML. Это способствует  сокращению запросов и ускорению загрузки стилей.
  5. Линейные CSS — я честно не тестировал эту опцию. Но могу сказать, что она откладывает загрузку стилей.
  6. Встроенные CSS — отлично влияют на производительность сайта. При этом оказывают влияние на оценку PageSpeed,  убирая из шапки сайта стили замедляющие работу.
  7. В этом Вы можете указать, те стили которые вы не хотите включать в оптимизацию Autoptimize.

Общие настройки  CDN и Кеш

Последовательность действий определяющая настройку нескольких параметров

  1. Опция CDN — позволяет указать адрес CDN, для оптимизации сайта. Это позволит значительно ускорить загрузку сайта.
  2. Информация о кеше — показывается с момента установки плагина. Содержит краткую информацию о количестве страниц находящихся в кеше.
  3. Параметр сохраняющий агрегаты CSS  и JS  в отдельные статические файлы, тем самым значительно увеличивая скорость сайта.
  4. Оптимизация файлов, даже если пользователь зарегистрирован. Этот параметр по крайней мере на моем сайте вызывает ошибки. По этому будьте осторожны отмечая его.

Заключение

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

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

Спасибо, что читаешь Nicola Top

nicola.top

Плагин для оптимизации CSS, JS и HTML кода на Wordpress Autoptimize - настройка, тесты, описание

Добрый день, друзья. Быстрый сайт с минимальной нагрузкой на хостинг – идеал для любого вебмастера. Чтобы его достичь приходится немало потрудиться. В посте о том, как ускорить загрузку сайта одним из пунктов я упоминал оптимизацию CSS, JS и HTML кода, там же давал сервисы, где можно это сделать. А сегодня я расскажу о WordPress плагине Autoptimize, который всё это может делать прямо на вашем сайте в автоматическом режиме, и покажу, как его оптимально настроить.

Содержание:

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

Скорость сайта с плагином Autoptimize

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

Для примера я специально взял сайт, который и в чистом виде (без плагина) показывал высокий рейтинг оптимизации в PageSpeed Insights от Google и сервисах проверки скорости наподобие tools.pingdom.com.

Для оценки производительности используем сервис Pingdom – он измеряет время загрузки, количество запросов к сайту, объем данных страницы и каждый запрос можно изучить в подробностях.

Там ситуация следующая:

Субъективный рейтинг скорости от Google Pagespeed Insign здесь тоже присутствует и видно, что по нему сайт с 77 баллов поднялся до 86. Но интересны более объективные показатели, а именно:

  1. Уменьшился вес страницы с 931 кб до 914 кб;
  2. Снизилось число запросов к сайту с 70 до 55;
  3. Как итог, снижение скорости загрузки в полтора раза с 1,48 с, до 0,968 с.

Польза однозначно есть и видна невооруженным взглядом.

Что делает плагин Autoptimize с сайтом

Основных функций выполняемых данным плагином две:

  • чистка кода;
  • объединение нескольких файлов в один.

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

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

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

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

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

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

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

Настройка плагина Autoptimize

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

После активации, в левой панели, в категории настройки появится вот такая вкладка:

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

Я расскажу о них подробнее.

Настройка HTML сжатия

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

Первая галочка «Optimize HTML code?» включает сжатие.

Вторая «Keep HTML comments?» позволяет отключить удаление комментариев в тексте. Поставите галочку — комментарии будут сохраняться, но код будет весить больше.

Оптимизация JavaScript

Следующий блок настроек Autoptimize отвечает за JS-скрипты.

Первая галка по традиции включает оптимизацию.

Второй пункт «Force JavaScript in <head>» позволяет все скрипты сайта перенести из файлов в раздел <head> HTML кода сайта. Это избавит от лишних запросов к файлам и, иногда, поможет избавиться от сбоя. Но размещать скрипты в верхней части кода страницы не рекомендуют поисковики, поэтому я этот пункт не использую.

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

Строчка «Exclude scripts from Autoptimize» содержит те скрипты, которые плагин трогать не будет. В ней через запятую перечисляются файлы с указанием пути до них. Когда один из скриптов закапризничает и работать после оптимизации не захочет – добавляйте его сюда.

Последняя галочка «Add try-catch wrapping» — это способ отладки. Может помочь наладить работу через плагин некоторым капризным кодам, если они не захотят правильнофункционировать.

Настройка оптимизации CSS стилей

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

Вторая галочка «Generate data: URIs for images» преобразует маленькие изображения из CSS файла в их коды.

Третий пункт «Also aggregate inline CSS» объединяет стили, находящиеся непосредственно в HTML коде страницы.

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

«Inline all CSS» — это выбор, не имеющий однозначного решения. Выбор функции избавляет страницу от CSS файла, а все стили встраивает прямо в HTML код. За счет этого становится меньше запросов к серверу, но данные из CSS файла не кэшируются и каждая новая страница, просмотренная пользователем, вынуждает загружаться полностью все таблице стилей. Если в среднем пользователь сайта смотрит несколько страниц, то выгоднее галочку не ставить, пусть стили грузятся из кэша в отдельном файле. Если же просмотром на одного пользователя мало, то выбор может немного увеличить скорость.

Последний пункт «Exclude CSS from Autoptimize» — поле для установки исключений (какие CSS файлы обрабатываться не будут).

Остальные важные настройки Autoptimize

«CDN Options» — заполняется, если сайт включен в сеть CDN. Не знаете что это такое? – значит, он у вас не включен туда – пропускайте смело.

«Misc Options» имеет 2 пункта:

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

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

Есть еще вкладка «Extra», но там точно ничего менять не надо, так что можете её даже не открывать, всё оставляйте по-умолчанию.

Резюме

WordPress плагин для оптимизации CSS, JS и HTML кода не нацелен на ускорение всех элементов сайта, он занимает свою конкретную нишу. Благодаря этому настройка Autoptimize проста, с возложенными функциями он справляется на «отлично», а его работа не приводит к конфликтам с другими плагинами или скриптами.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(8 голосов, в среднем: 5 из 5)

biznessystem.ru

Оптимизация скорости загрузки сайта на WordPress с помощью плагина Autoptimize

Первое что нужно сделать для оптимизации скорости загрузки страницы - это уменьшить количество http запросов. Один из способов сделать это в WordPress - это собрать все подключаемые скрипты и стили в один. Такая операция называется конкатенация (объединение, сцепление). Сделать такое объединение поможет плагин Autoptimize или его аналог. Об этом поговорим ниже.

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

Вам рекомендую поставить Autoptimize. По прошествии пары дней, зайти в настройки и посмотреть сколько там файлов в кэше. Если мало, то все отлично! Если много (100+), то рекомендую поискать другой плагин.

Еще одна альтернатива: Better WordPress Minify. Поделились в комментариях, я его не пробовал.

Autoptimize объединяет все .css стили на странице в один файл и помещает его вверх документа. Также, объединяет все .js файлы и встроенные скрипты (<script>) и помещает их в конец документа. И есть возможность сжать саму HTML страницу (удалить лишние пробелы и переносы строк).

Принцип работы плагина: перед тем как вывести HTML код страницы плагин находит и вырезает все .js файлы, оптимизирует и уменьшает вырезанные файлы, записывает их в единый файл, сохраняет файл на сервере и размещает ссылку на этот единый файл в самом конце страницы, пред тегом </body>. Аналогичная операция проводится и с .css файлами, только помещаются они в начало страницы. Результат выглядит так:

<link type="text/css" media="all" href="http://wptest.ru/wp-content/cache/autoptimize/autoptimize_62f7bd2b0c59ec523a3ee58f4b4afc5b.css" rel="stylesheet" /> <script type="text/javascript" defer src="http://wptest.ru/wp-content/cache/autoptimize/autoptimize_ca5ef19f1f6407e7e07eaff51df2fe80.js"></script>

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

Плагин в каталоге WordPress →

После установки плагин ничего не сжимает, все функции нужно включать отдельно. Для этого нужно зайти на страницу настроек плагина (Настройки > Autoptimize). Она переведена на русский, правда, почему-то, частично, но этого достаточно чтобы разобраться. Настроек у плагина не много:

Страница настроек autoptimize

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

Решения проблем

Если возникли проблемы с работой скриптов или стилей, то можно попробовать настроить плагин. Для этого на странице настроек нажимаем на кнопку "Show Advansed Settings" и нам откроются дополнительные настройки.

autoptimize1

Forse javascript in <head>?

Помещать javascript в <head>? - для лучшей производительности нужно помещать скрипты в конец HTML документа, но иногда из-за этого скрипты не работают. Опция полезна для тем на jQuery.

Look for scripts only in <head>?

Искать скрипты только в <head>? - особенно полезная опция в комбинации с предыдущей, когда используются темы на основе jQuery.

Exclude scripts from Autoptimize

Исключить скрипты из обработки - часть названия скрипта или часть кода скрипта, если это встроенный в HTML скрипт. Например, если указать captcha, то подобные скрипты не будут затронуты:

<script src='http://site.ru/my_captcha.js'></script> <sctipt> var foo; function foo_captcha(){ // код } </script>

Add try-catch wrapping?

Добавить обертку try-catch? - обернет каждый добавляемый в единый файл скрипт в комбинацию try{ }catch(e){ }. Нужно это чтобы нерабочий скрипт (с ошибкой) не прерывал работу нижеследующего кода.

autoptimize2

Genegate data: URLs for images?

Создавать data:УРЛы для картинок? - при включении маленькие background картинки в CSS будут встроены в создаваемый CSS файл в виде data: строки. Это позволит уменьшить запросы к серверу из css файла. Что-то у меня эта функция не заработала...

Look for styles only in <head>?

Искать стили только в <head>? - плагин обработает стили встречающиеся только в <head> части документа.

Defer CSS loading?

Отложить загрузку css? - стили будут загружены после полной загрузки HTML. Сложно представить в каких случаях это может пригодится...

Inline all CSS?

Встроить все CSS? - стили будут встроены в HTML документ. Если у сайта средняя просматриваемость страниц на пользователя равна 1, это есть смысл включить эту опцию, так как не будет лишнего запроса на получения css файла, но при этому увеличится размер HTML документа.

Exclude CSS from Autoptimize:

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

П.С. Автор плагина работает над своим детищем постоянно и совсем скоро ожидается новая версия 1.9.0.

wp-kama.ru

Настройка плагина Autoptimize оптимизация wordpress сайта — ТОП

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

 

— Объединяет все скрипты и стили, минимизирует и сжимает их.

— Кэширует и добавляет заголовки Expires.

— Перемещает скрипты в футер для ускорения сайта.

— Минимизация HTML кода.

— Совместим с популярными плагинами WP Super Cache и HyperCache

— Имеет достаточно простые настройки.

 

Установить плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

плагин wordpress

 

После установки и активации плагина, перейдите на страниц: Настройки — Autoptimize. Здесь рекомендуется поставить везде галочки, чтобы оптимизировать CSS, JavaScript и HTML коды. После чего сохраните изменения и очистите кэш.

 

настройка плагина

 

У плагина имеются дополнительные настройки, чтобы увидеть их нажмите на кнопку — Show advanced settings.

 

— Force JavaScript in <head>, добавить JavaScript в хедер сайта для уменьшения вероятности возникновения ошибок в JS.

— Also aggregate inline JS, объединение JS и HTML кода.

— Exclude scripts from Autoptimize, можно перечислить через запятую скрипты, которые вы хотите исключить из оптимизации.

— Add try-catch wrapping, включите данный параметр, если возникают ошибки в скриптах.

 

— Generate data: URIs for images, включите данный параметр, чтобы оптимизировать загрузку изображений.

— Remove Google Fonts, не загружать шрифты google, если вы не пользуетесь ими, для ускорения.

— Also aggregate inline CSS, включите данный параметр, чтобы объединить CSS и HTML.

— Inline and Defer CSS, оптимизация загрузки CSS, прежде чем включать данную опцию, стоит ознакомиться с дополнительными сведениями, по имеющейся ссылки. Может не подойти некоторым сайтам.

— Inline all CSS, включение данной опции только для сайтов с низкой посещаемостью !

— Exclude CSS from Autoptimize, можно исключить некоторые CSS стили из оптимизации.

 

— CDN Base URL, оставьте без изменений. Здесь можно указать URL адрес для функции CDN — сеть доставки контента. Данная функция подключается отдельно в стороннем сервисе. Не обязательно.

— Save aggregated script/css as static files, стили и скрипты будут сохранены как статичные файлы. Не включайте данную функцию, если ваш сервер не правильно обрабатывает сжатия и истечения файлов.

 

Сохраните все сделанные изменения. Остались вопросы ? Напиши комментарий !

 

info-effect.ru

info-effect.ru

Увеличиваем скорость работы сайта при помощи оптимизации JavaScript — «Веб Креатор»

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

Если без каких-то скрип­тов сайт функционален, то загрузку этих JS-скрип­тов осуществлять после отри­совки стра­ницы (для этого надо поме­стить код в конец сек­ции body). Некото­рые скрипты нужны для созда­ния эффек­тов, кото­рые ини­ци­и­ру­ются не сразу после загрузки стра­ницы или их отло­жен­ная загрузка не вли­яет на пер­вое впе­чат­ле­ние от сай­та. Авто­ма­ти­че­ское про­ли­сты­ва­ние слай­дера или скрипт для сбора ста­ти­стики посе­ще­ний, напри­мер, легко могут быть ини­ци­и­ро­ваны уже после отри­совки стра­ницы в бра­у­зе­ре. Пусть лучше поль­зо­ва­тель побыст­рее уви­дит стра­ни­цу, а не ждёт тра­тит при загрузке лиш­нее время ради того, чтобы через 5 секунд кра­сиво пере­лист­нулся реклам­ный бан­нер или чтобы его посчи­та­ли.

Загру­жайте скрипты с под­до­ме­нов, с дру­гих доме­нов или исполь­зуйте CDN — даже у самых про­дви­ну­тых браузеров файлы с одного домена загру­жа­ются в огра­ни­чен­ное число пото­ков. Если изоб­ра­же­ний, сти­лей и скрип­тов на стра­нице доста­точно мно­го, то обра­зу­ется оче­редь на загрузку дан­ных. Коли­че­ство исполь­зу­е­мых пото­ков лими­ти­ру­ется только для доме­на, поэтому если JS-файлы будут загру­жаться с дру­гого домена (или под­до­мена), то их загрузка про­изой­дёт быст­рее за счёт парал­лель­но­сти.

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

JS надо сжать, мини­ми­зи­ро­вать и опти­ми­зи­ро­вать. Уда­ле­ние про­бе­лов, пере­но­сов строк, сокра­ще­ние назва­ний пере­мен­ных и дру­гие опти­ми­за­ции зна­чи­тельно умень­шают раз­мер фай­лов скрип­тов и уско­ряют загрузку. При исполь­зо­ва­нии сто­рон­них биб­лио­тек — под­клю­чайте мини­ми­зи­ро­ван­ную вер­сию в production-окру­же­нии. Для соб­ствен­ных скрип­тов исполь­зуйте спе­ци­аль­ные биб­лио­теки, сжи­ма­ю­щие и опти­ми­зи­ру­ю­щие JavaScript, — UglifierJS, JSMin, Closure Compiler, YUI Compressor. При исполь­зо­ва­нии агрес­сив­ных опти­ми­за­ций обя­за­тельно про­чтите реко­мен­да­ции для исполь­зу­е­мого ком­прес­сора и про­те­сти­руйте рабо­то­спо­соб­ность полу­чен­ных фай­лов.

Сов­местно исполь­зу­е­мые скрипты должны быть объ­еди­нены в один файл. Загрузка одного файла в 50 Kb осу­ществ­ля­ется быст­рее загрузки 10 фай­лов по 5 Kb, отдача таких фай­лов меньше гру­зит сер­вер, да и сжа­тие эффек­тив­нее рабо­тает на боль­ших фай­лах.

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

Кэши­руйте скрипты на сто­роне кли­ента — не застав­ляйте поль­зо­ва­те­лей мно­го­кратно ска­чи­вать один и тот же скрипт: исполь­зуйте соот­вет­ству­ю­щие заго­ловки в ответе веб-сер­вера (Expires или Cache-Control max-age, Last-Modified или ETag).

Не исполь­зуйте боль­шие биб­лио­теки без надоб­но­сти — напри­мер, ради какого-то эле­мен­тар­ного эффекта на глав­ной стра­нице сайта не стоит на всех стра­ни­цах под­клю­чать jQuery. Если для реа­ли­за­ции всей интер­ак­тив­но­сти сайта может хва­тить 30 стро­чек про­стого js-кода, то исполь­зо­ва­ние объ­ём­ной биб­лио­теки про­сто нерационально.

web-creator.ru