Autoptimize настройка wordpress

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

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

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

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

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

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

Параметры  HTML

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

Опции  JavaScript

1. Оптимизация кода JavaScript — включение сжатия кода java. Позволяет сжимать код, удаляя при этом лишние пробелы и знаки. Рекомендую смело отмечать эту опцию.


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

Опции  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

Принцип работы плагина Autoptimize

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

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

Я настроил плагин таким образом, как показано на скриншотах. Ниже опишу что означает каждый пункт.

Параметры HTML

Оптимизировать код HTML – обязательно ставим галочку.

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

Опции JavaScript

Оптимизировать код JavaScript – конечно галочка нужна.

Force JavaScript in <head> — при включении первого пункта, все JS будут подгружаться не из шапки, а из подвала сайта. Таким образом, мы избавляемся от сообщения «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы». Но на некоторых темах это может создать проблему с правильностью отображения отдельных элементов. Если такая проблема возникла, тогда поставьте галочку в этом пункте. Если проблем нет – галочку не ставьте и радуйтесь.

Also aggregate inline JS – это интеграция JavaScript в HTML. Все Ява скрипты будут прописаны в ХТМЛ. По замыслу создателя, данная настройка плагина Autoptimize должна уменьшить время загрузки страниц. Лично я ее не использую. Вы как хотите.

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

Add try-catch wrapping – если один из скриптов перестает работать после включения оптимизации, то он может повлиять на работоспособность остальных скриптов. Чтобы этого не происходило, поставьте галочку и тогда ошибки будут пропущены и не повлияют на остальные скрипты. У меня все в порядке, поэтому галочку не ставил.

Опции CSS

Оптимизировать код CSS – включите.

Generate data: URIs for images – для изображений, весом менее 4 КБ отдельные запросы будут включены в файл CSS. Можно и поставить галочку.

Remove Google Fonts – заменяет шрифты Гугл на стандартные, типа Arial. Это не по мне, галочку не ставил.

Also aggregate inline CSS – часть кода CSS плагин переносит в HTML, но при этом создается больше CSS, эффекта не дает, галочку не нужно ставить.

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

Inline all CSS – если не помог пункт выше, то удалить код JavaScript и CSS, блокирующий отображение верхней части страницы можно, поставив здесь галочку. Есть одно условие: стили CSS у вас относительно легкие.

Exclude CSS from Autoptimize – здесь можно прописать CSS стили, которые необходимо исключить из оптимизации. Если это создает проблемы.

CDN Options

CDN Base URL – CDN это кэшированная версия вашего сайта, находящаяся на другом сервере. Это отдельный сервис. И если вы его не используете, то прописывать здесь ничего не нужно.

buxrabota.com

Вступление

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

Почему плагины увеличивают скорость загрузки

Почти каждый плагин WordPress при установке подключает свои стили и скрипты JS. Традиционно JS подключаются в header сайта, что увеличивает количество запросов на сервер еще до загрузки основной страницы.

Особенно «ругается» на это поисковик Google, а на сервисе проверок скорости загрузки сайта (https://developers.google.com/speed/pagespeed/insights/), не оптимизированные скрипты и стили относит к серьезным ошибкам, требующим немедленного устранения.

Как решается проблема стилей и JS на WordPress

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

Плагин Autoptimize «обучен»  сжимать JS скрипты стили объединив их в один файл.

Принцип работы плагина Autoptimize (оптимизировать JS и CSS WordPress)

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

Недостатки плагина Autoptimize

Все слепки с оптимизируемых файлах плагин хранит в кэше плагина [wp-content/cache/autoptimize]. Со временем эта папка разбухает и может наблюдаться обратный эффект, скорость загрузки начинает расти. Я такую проблему не замечал, но читал на некоторых сайтах.

Более того, по умолчанию размер кеш-папки плагина ограничена и приходится её часто чистить. На особо посещаемых сайтах я увеличил эту папку до 10Гб (об этом чуть ниже), увеличение скорости загрузки не вижу.

Кроме этого, автор плагина рекомендует его использование и отсутствие конфликтов с плагинами: WP Super Cache, HyperCache, Comet Cache, KeyCDN’s Cache Enabler, WP Fastest Cashe.

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

Я уверен, вы знаете, как установить плагин. Страница плагина: https://ru.wordpress.org/plugins/autoptimize. Настройки плагина элементарные, но всё-таки пройдемся по ним.

• После активации плагина, для удобного доступа к настройкам плагина в меню консоли «Настройки» появиться отдельный пункт.
• Вверху страницы есть маленькая ссылка, она откроет дополнительные настройки.

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

Важно понимать! Дополнительные настройки помогут вам, если вырезка JS из header приводит к неправильной загрузки шаблона и после установки плагина ваш сайт отражается некорректно.

• Если у вас много комментариев, есть кнопка сохранения HTML комментариев.
• Особо интересна, бесплатное использование CDN Options. Если вы используете CDN технологии, можно указать ваш //cdn.example.com/.

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

Как увеличить размер cash хранилища Autoptimize

Недавно обнаружил, что размер cash хранилища Autoptimize, мягко сказать, небольшое. На 500 Mb, значок плагина в toolbar начинает желтеть, а к 750 Mb, начинает мигать красным. Для большой посещаемости сайта, хранилища хватает на 2-3 дня. Это значит, что вся работа плагина сводится к нулю.

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

Чтобы увеличить, размер cash хранилища плагина Autoptimize, я делаю следующее:

Устанавливают плагин «Code Snippets» (https://ru.wordpress.org/plugins/code-snippets/). Он нужен для простого добавления произвольного кода на свой сайт WordPress, без добавления пользовательских фрагментов в файл functions.php.

С помощью плагина вставляю один из следующих Snippet (на выбор):

Размер кеша 1Гб

add_filter('autoptimize_filter_cachecheck_maxsize','change_maxsize');  function change_maxsize() {  return 10*1024*1024;  }

Размер кеша 10Гб

add_filter('autoptimize_filter_cachecheck_maxsize','change_maxsize');  function change_maxsize() {  return 10*1024*1024*1024;  }

Этим я увеличиваю размер cash хранилища Autoptimize до 1 Gb или до 10 Gb.

Альтернативные плагины (плохо обновляются)

• JS & CSS Script Optimizer (https://wordpress.org/plugins/js-css-script-optimizer/)
• Better WordPress Minify (https://wordpress.org/plugins/bwp-minify/)

На этом всё! Я надеюсь вам удалось оптимизировать JS и CSS WordPress и ускорить его загрузку.

©www.wordpress-abc.ru

www.wordpress-abc.ru

---

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

 

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

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

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

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

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

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

 

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

 

 

После установки и активации плагина, перейдите на страниц: Настройки — 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

Скорость сайта с плагином 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», но там точно ничего менять не надо, так что можете её даже не открывать, всё оставляйте по-умолчанию.

biznessystem.ru

Принцип работы

Как сообщает разработчик плагина, Autoptimize используется для оптимизации сайтов и делает он это очень легко и просто. Он объединяет все скрипты и стили, сжимает их, кэширует и перемещает всё в верхнюю часть документа. Кроме того, он объединяет все .js файлы и встроенные скрипты (<script>) и помещает их в конец документа. Он также оптимизирует сам HTML-код, что делает страницы сайтов более легкими, а значит он увеличивает скорость загрузки его страниц. Для того, что бы производительность Autoptimize была более высокой, необходимо (или желательно) в «довесок» к нему использовать плагины кэширования, такие как WP Super Cache или HyperCache.

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

<script type=«text/javascript» defer src=«http://ogend.ru/wp-content/cache/autoptimize/autoptimize_ca5ef19f1f6407e7e07eaff51df2fe80.js»></script>

Аналогичная операция проводится и с .css файлами, только помещаются они в начало страницы.

<link type=«text/css» media=«all» href=«http://ogend.ru/wp-content/cache/autoptimize/autoptimize_62f7bd2b0c59ec523a3ee58f4b4afc5b.css» rel=«stylesheet» />

 

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

Настроек у плагина две. Основная и дополнительная. Разберем вначале основную настройку.

Основная настройка

После загрузки и активации плагина, из контекстного меню «Настроек» в админке выбираем наш плагин и открываем окно настроек.

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

1. Оптимизировать код HTML
2. Оптимизировать код JavaScript
3. Оптимизировать код CSS
4. Пожалуй еще Generate data: URIs for images (этот параметр используется для включения небольших фоновых изображения в самой CSS, а не в отдельной загрузке).

 

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

Дополнительная настройка

Для того, чтобы открыть окно дополнительной настройки, вверху окна нужно кликнуть на «Show advanced settings». Теперь в основном окне настроек Autoptimize появятся дополнительные опции. Разберемся в них.

 

Force 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?

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

Look for styles only in <head>?

Опция предлагает искать стили только в <head>? Это означает, что плагин обработает стили встречающиеся только в <head> части документа. Здесь я не устанавливал галочку.

Inline and Defer CSS?

Отложить загрузку css? — стили будут загружены после полной загрузки HTML. Зачем? Галочку не устанавливал.

Inline all CSS?

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

Exclude CSS from Autoptimize:

Исключить CSS из обработки: в окне по умолчанию (так же как и для скриптов — Exclude scripts from Autoptimize)  нужно указать тут часть названия файла, которые не нужно объединять. Ничего не изменял.

CDN Base URL

«Введите ваш корневой URL блога каталогов CDN, если вы хотите, чтобы CDN для изображений, упоминаемых в CSS». Ничего не понял, ничего не вводил.

Save aggregated script/css as static files?

По умолчанию файлы сохраняются как статические CSS / JS, снимите этот флажок, если ваш веб-сервер не правильно обрабатывать сжатие и окончания срока действия. Решайте сами. Я снял эту галочку.

 

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

Испытайте плагин некоторое время. Но через время просмотрите, что происходит в информации о кэше.

Достоинства и недостатки плагина Autoptimize

1. Дело в том, что, как отмечают некоторые вебмастера, Autoptimize, обладает не только положительными качествами, но и недостатками и некоторые из них отказались от него. А причина в том, что динамические скрипты создают сборную копий для каждого изменения. В итоге для каждого динамического скрипта создается огромный js файл до тех пор, пока не очистится кэш.  Это, конечно же, «грузит» сайт.

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

2. Давайте обратимся к сервису Google Developers — «PageSpeed Insights». Уточните, как ваш сайт будет лучше работать (скорость загрузки страниц) — если у вас установлен и настроен  плагин Autoptimize или без него. Но вот беда, если плагин не работает, появляются предупреждения о необходимости сжатие ресурсов. Блокирующие ресурсы — коды JavaScrip, тпа _http://ogend.ru/…-includes/js/jquery/jquery.js?ver=1.11.1  и CSS — _http://ogend.ru/…wp-content/themes/ipin/css/bootstrap.css.

Если плагин активирован, появляются сообщения уже не о необходимости сжатия не  кодов JS и CSS, а страниц. Тех самых страниц, которые образуются в кэше.

_ http://ogend.ru/…ize_11cda2a8246e25006d08cf7eb77571da.php и т.п.

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

Результаты исследований на одном из моих сайтов, показали, что скорость загрузки его страниц немного лучше, когда Autoptimize активирован. Но незначительно.

Вывод, о том — лучше будет вашему сайту с этим плагином или хуже, нужно сделать после небольших экспериментов длительностью сутки-двое. А затем решить: оставлять плагин Autoptimize на своем ресурсе или удалить.

prt56.ru

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

 

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

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

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

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

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

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

 

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

 

 

После установки и активации плагина, перейдите на страниц: Настройки — 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, стили и скрипты будут сохранены как статичные файлы. Не включайте данную функцию, если ваш сервер не правильно обрабатывает сжатия и истечения файлов.

 

Сохраните все сде

wdfiles.ru

От автора: сайты, которые работают на WordPress, могут замедляться по ряду причин. Это может быть что угодно: раздутый код, некачественный плагин или низкая производительность хостинга. Выяснить, что замедляет вас, достаточно сложно. Еще труднее разобраться в инструментах, предназначенных для увеличения скорости (например, плагинов кэширования), полных загадочных настроек.

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

И тут вам на помощь придем мы. Существуют инструменты, предназначенные для того, чтобы помочь утолить вашу жажду скорости (WordPress). Ниже мы привели список плагинов, которые ни в малейшей степени не требуют от вас наличия докторской степени в области ракетостроения. В то же время они помогут вам настроить молниеносный сайт. Кроме того, мы предложим советы для достижения максимальной производительности на вашем веб-сайте на WordPress.

Плагины оптимизации WordPress

WP Rocket

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

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

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

Fast Velocity Minify

Fast Velocity Minify берет файлы CSS и JS вашего сайта и объединяет их в меньшие группы файлов. В конце концов, каждый из этих файлов может содержать тысячи строк.

Сжатие и объединение ресурсов действительно может сократить время загрузки. Это особенно справедливо для сайтов, на которых запущено множество плагинов. Fast Velocity Minify довольно прост в настройке: установки по умолчанию подходят для большинства случаев. Есть также расширенные опции, если вы чувствуете в себе желание поэкспериментировать.

BJ Lazy Load

Отложенная загрузка контента может стать серьезным подспорьем для сокращения количества запросов к серверу. BJ Lazy Load позволяет загружать изображения, текстовые виджеты и iframe-контент (например, видео YouTube), только когда они входят в окно просмотра пользователя.

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

Autoptimize

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

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

Speed Booster Pack

Speed Booster Pack использует несколько методов для ускорения сайта. Он минимизирует HTML / JavaScript / CSS, но не только. Например, он сжимает изображения, загружает JS-библиотеки с серверов Google (а не с вашего собственного сервера), откладывать парсинг скриптов, удаляет «нежелательные» заголовки и другой лишний мусор.

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

Optimize Database after Deleting Revisions

База данных сайта может со временем стать невероятно загроможденной. Это может привести к медленной работе сайта. Optimize Database after Deleting Revisions предназначен для того, чтобы стать решением «одного клика», удаляя ревизии постов (при желании вы можете сохранить указанное количество ревизий и отправить их на почту), спамные комментарии, неиспользуемые теги, пингбэки / трекбэки и элементы-сироты пост-мета.

Плагин также оптимизирует таблицы базы данных, чтобы сделать БД чище. Оптимизация может запускаться каждый час, один раз в день, два раза в день или еженедельно. Он совместим с WordPress multisite.

Советы по увеличению скорости

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

Вот несколько вещей, которые нужно учитывать, если вы хотите ускорить свой сайт:

Избегайте тяжелых тем

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

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

Вам действительно нужен этот плагин?

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

Обратите внимание на удаленные скрипты и стили

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

Отслеживайте отсутствующий контент

Независимо от того, внутренние или удаленные это ресурсы, обращайте внимание на любые скрипты или таблицы стилей, которые не загружаются. Отсутствующий файл может привести к тому, что ваш сайт будет реагировать невероятно медленно, а также возможны последствия для отображения и функциональности. Используйте такие инструменты, как Pingdom или GTmetrix для анализа сайта. Оба инструмента предлагают представление «водопад», которое показывает, сколько времени требуется для загрузки со страницей каждого файла. Если один из этих файлов генерирует ошибку 404, вы нашли виновника проблем.

Узнайте об ограничениях хостинга

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

Увеличение скорости сайта

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

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

Автор: Eric Karkovack

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

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

webformyself.com