WordPress для чайников и настройка Autoptimize

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

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

Прежде всего, войдите на свой сайт WordPress. Затем перейдите в  плагины и добавьте новый плагин Cache Enabler. Затем, установите его.

Вот настройки Cache Enabler, которые работают идеально:

При необходимости, можете установить срок действия кэша. Установите срок действия кэша 1 или 2 часа. Однако, это зависит от вашей частоты публикации статей.

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

В разделе « Cache Behavior (Поведение кэша)» выберите первый и третий параметры.

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

После установки и активации плагина Cache Enabler, вы также можете оставить его параметры по умолчанию.

Настройки кэширования по умолчанию – прекрасно работают с большинством сайтов.

Если вы хотите улучшить производительность вашего сайта WordPress, вы можете использовать плагин Autoptimize на своем сайте. Который является одним из лучших плагинов для оптимизации CSS, JS, HTML.

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

10 советов по ускорению загрузки сайта на WordPress.

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

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

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

Совет 1. Ускорение WordPress с помощью GZip сжатия.

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

Как проверить включено ли gzip сжатие.

Для того что бы проверить включено ли сжатие на вашем сервере можно воспользоваться сайтом whatsmyip.org который покажет сжимаются ли ваши данные и на сколько эффективно.

Если по результатам проверки вы получите следующее:

Значит ваши данные сжимаются и у вас все правильно работает.

Как использовать qzip сжатие, можно прочитать в отдельной статье.

Совет 2. Уменьшение CSS и JavaScript.

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

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

Совет 3. Уменьшайте количество http запросов.

Чем больше у нас на загружаемой странице компонентов, тем медленнее она грузиться. Ведь правило протокола HTTP/1.1 ставит ограничение одновременной загрузки компонентов с одного хоста на уровне 2 штук. Таким образом у наши части страницы грузятся медленно и частями. Решение этой проблемы так же есть, и его мы детально разберем в следующей публикации.

Совет 4. Очистка базы данных от мусора.

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

Загрязненная БД приведет к огромным задержкам при загрузке, из-за того что количество переборов будет очень велико. Правильно настроена корректировка внесения данных в базу и своевременная очистка ее от “шлака” поможет вам сохранить скорость и чистоту, позволит неплохо ускорить сайт на wordpress.

Совет 5. Убрать лишний JavaScript.

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

Совет 6. Использование кэширования позволит как ускорить сайт на WordPress.

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

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

Для кэширования можно использовать плагин WP Super Cache, или другой понравившийся вам плагин.

Совет 7. Правильно располагайте ваши css и JavaScript включения.

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

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

Совет 8. Пользуйтесь поддоменами для параллельного скачивания.

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

Совет 9. Откажитесь от ненужных плагинов.

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

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

Статья по данной теме представлена отдельно.

Совет 10. Выберите быстрый хостинг для своего сайта.

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

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

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

Правильная настройка плагина Autoptimize, позволит сократить HTML, JS и CSS и уменьшить количество запросов. Все это поможет нам увеличить скорость загрузки сайта, а так же рейтинг в Page Speed Insights(PSI). В начале будет немного теории, она необходима для корректной настройки плагина, т.к. для каждого проекта настройка может быть индивидуальной.

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

Скорость загрузки сайта

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

Например, используя сервис webpagetest.org это может выглядеть так:

Слева на скриншоте файлы/запросы, которые необходимо подгрузить серверу для загрузки страницы, большинство из них могли бы быть, как раз те самые JS и CSS файлы. На картинке их мало, потому что Autoptimize у меня уже активирован и все файлы объединены. Так же у меня активирован плагин Wp Super Cache, который прекрасно работает вместе с Autoptimize. И именно эти плагины помогли достичь такого количества запросов, без них было 94, сейчас 39.

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

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

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

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

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

Таким образом, мы получим ускоренную «полную загрузку» сайта. В данном случае Page Speed Insights(PSI) должен нас похвалить увеличением рейтинга. Но мы можем и немного уменьшить скорость «отрисовки» для посетителей нашего сайта, что не есть хорошо.

Обычно это 0.1 — 1 сек. Все зависит от размеров и количества CSS файлов. Я бы хотел акцентировать на этом ваше внимание: если файлов очень много, время отрисовки может значительно вырасти. Однако, есть усредненные способы решения этой проблемы, которые мы обязательно рассмотрим дальше.

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

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

В дальнейшем в статье название сервиса Page Speed Insights будет использоваться довольно часто, для простоты — PSI.

Параметры HTML

«Оптимизировать код HTML?»

В PSI мы можем наблюдать вот такую картину:

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

В моей теме HTML был сокращен, данный пункт я не использую вообще. Т.к. никакой производительности он мне не добавит.

В итоге в PSI мы должны получить:

В коде могут присутствовать пометки, которые выглядят так:

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

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

Поэтому галочку можно не ставить, т.к. это лишние килобайты.

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

Опции JavaScript