Autoptimize — плагин для сжатия скриптов, стилей и html на WordPress. Оптимизация скриптов сайта вордпресс


Оптимизация CSS и JS в WordPress

Оптимизация CSS и JS в WordPress

Несколько дней подряд работаю над шаблоном, который недавно поменял. До этого стоял фиксированный шаблон, как бы я не бился с ним, адаптированным сделать я его не смог, поэтому пришлось поступить иначе – установить уже адоптированный шаблон и переделать его под себя. Сделал всю работу и решил проверить скорость загрузки сайта в PageSpeed, результаты меня, мягко говоря, поразили. Счетчик скорости показывал всего лишь 22/100, так никуда не годиться, что-то надо делать и я начал все оптимизировать. В итоге результат смог улучшить до 65/100, но и на этом я не собираюсь останавливаться. Своими методами, я с радостью поделюсь с вами, так что подписывайтесь на обновления в низу статьи и будьте всегда в курсе.

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

Проходим стандартный процесс установки, после чего в настройках у вас появиться новый пункт Консоль > Настройки > Autoptimize

Основные настройки.

Отмечаем обязательно эти пункты:

  • Оптимизировать код HTML
  • Оптимизировать код JavaScript
  • Оптимизировать код CSS

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

Generate data: URIs for images – что делает эта настройка, я так до конца не понял, какие-то изображения станут фоновыми, что в свою очередь тоже должно ускорить сайт.

Можно отметить, но толку большого не будет.

autoptimize

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

В вверху страницы есть кнопочка под названием “Show advanced settings”, после ее нажатия, всплывут дополнительные настройки.

Force JavaScript in <head> – плагин подключает JavaScript в конце страницы, но из-за этого могут появляться различные ошибки, при подобных проблемах просто отметьте этот пункт.

Look for scripts only in <head> — работать только со скриптами в <head> . Использовать желательно с предыдущей настройкой.

Exclude scripts from Autoptimize – список скриптов которые нужно исключить. Эти настройки лучше вообще не трогать.

Add try-catch wrapping – исключать нерабочие скрипты. Если вы не уверены в работоспособности скриптов на вашем сайте, отметьте этот пункт, и они будут исключены.

Look for styles only in <head> — производить работу только со стилями расположенными в <head>. Не понимаю, зачем вообще данная опция.

Inline and Defer CSS – стили CSS будут загружаться после загрузки HTML. Опять что-то странное, естественно не отмечаем.

Inline all CSS – встраивает стили CSS в HTML документ. Вес HTMLстраниц очень сильно увеличиться, активировать, тоже не стоит.

Exclude CSS from Autoptimize – та же история что и с исключением скриптов, только на этот раз со стилями. Как и в прошлый раз, советую вам ничего не изменять.

CDN Options – это тоже лучше не трогать.

Информация о КЭШе – при активации дополнительных настроек вылезает еще и статистика. Показывается место хранение кеша, сколько файлов храниться в кеше (на скрине подчеркнул). Если их количество превышает 80, то советую насторожиться, хорошо проверить ваш сайт и удалить плагин.

Save aggregated script/css as static files – отметить если у вас есть подозрение что сервер не правильно обрабатывает и сжимает файлы. Было отмечено по умолчанию, так решил и оставить.

Ну и самое веселое это странный вопрос – “Начнем?” И ответ “Да”. Конечно, я понимаю, что это, скорее всего информация, что плагин работает, но все равно выглядит забавно.

autoptimize2

Создавайте хорошие сайты. До встречи.

httpmaster.ru

плагин для сжатия скриптов, стилей и html на WordPress

Описание работы плагина Autoptimize

плагины вордпресс

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

Как сообщает разработчик плагина, 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 на своем ресурсе или удалить.

(Visited 33 times, 1 visits today)

prt56.ru

Оптимизация и ускорение WordPress

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

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

Для решения задачи ускорения и оптимизации WordPress я использую три плагина:

  1. Hyper Cache — один из самых важных плагинов, позволяющий настроить кэширование;
  2. Better WordPress Minify — позволяет объединять все стили и скрипты плагинов и темы WordPress в один файл, что значительно ускоряет скорость загрузки блога;
  3. WPLANG Lite — позволяет создать более легкую версия языкового файла.

Кэширование? Нет, не слышал!

Давайте рассмотрим, как формируются страницы блога, которые вы видите на своем мониторе:

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

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

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

В связи с тем, что плагин Hyper Cache фактически «замораживает» содержание блога на время жизни кэша, случайные записи выводимые плагином Easy Random Posts или случайные изображение, создаваемые с помощью NextGEN Gallery, будут меняться только после обновления кэша.

Установка и настройка плагина Hyper Cache

Установка плагина Hyper Cache несколько отличается от стандартной. Скачайте последнюю версию Hyper Cache, распакуйте архив и загрузите папку с файлами плагина на сервер в директорию wp-content/plugins, используя ftp клиент FileZilla. Найдите на сервере файл wp-config.php (его вы создавали при установке WordPress) и откройте на редактирование, для этого можно использовать один из редакторов с подсветкой кода html, например Notepad++.

В этот файл, на следующий строчке после

необходимо вставить код:

define('WP_CACHE', true);

Сохраните внесенные изменения и активируйте плагин в админке WP. Теперь можно приступать к его настройкам, которые располагаются в разделе «Параметры» — «Hyper Cache».

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

очистка кэша

В разделе Состояние кэша:

  • файлы в кэше (актуальные и устаревшие) — показывает количество кэшированных страниц.
  • cleaning process — показывает время очистки кэша.

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

Конфигурация

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

Сжатие. Лишним не будет, поэтому поставьте обе галочки.

сжатие

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

  • Кэширование Домашней — запретить или разрешить кэширование главной блога;
  • Кэширование перенаправлений — запретить/разрешить кэширование редиректов.

Остальные опции вам вряд ли пригодятся, поэтому оставьте галочки, проставленные по-умолчанию.

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

Better WordPress Minify — оптимизация скриптов и стилей

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

Скачайте свежую версию Better WordPress Minify, распакуйте архив и перекиньте его содержимое на ftp в папку wp-content/plugins. Установите для директории wp-content/plugins/bwp-minify/cache права доступа 755 или 777 — это можно сделать с помощью все того же ftp клиента FileZilla. Активируйте плагин через админку WordPress. Настройки плагина располагаются в разделе «Параметры» — «BWP Minify».

Better WordPress Minify

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

WPLANG Lite — оптимизация файла русской локализации

Плагин создает более легкую версию файла русской локализации ru_RU. Из него исключается та часть, что отвечает за локализацию админки WP, что позволит сократить нагрузку на сервер при создании страниц блога.

Порядок установки WPLANG Lite:

  • скачайте свежую версию плагина WPLANG Lite;
  • разархивируйте архив и перекиньте папку с фалами плагина на сервер в директорию wp-content/plugins;
  • установите права доступа 777 для директории /wp-content/languages/;
  • активируйте WPLANG Lite через панель администратора WP

Не имеет никаких настроек и формирует оптимизированный файл локализации ru_RU_lite автоматически сразу после активации.

На этом все. Всем пока и до скорых встреч! Всегда ваш, Дмитрий Афонин. :)

Лучший способ выразить благодарность автору - поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

fairheart.ru

Оптимизация производительности сайта на WordPress

Оптимизация производительности сайта на WordPress

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

Насколько медленный мой сайт?

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

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

GTmetrix

YSlow

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

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

Google PageSpeed Insights

Pingdom

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

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

Выберите хороший хостинг

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

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

Не так давно SitePoint заключил соглашение с SiteGround. Теперь SiteGround является официальным рекомендуемым хостингом сайта SitePoint. Серверы провайдера раскиданы по нескольким континентам, и на них используются новейшие SSD-накопители, а также встроенное кэширование. Также есть бесплатный CDN. SiteGround много инвестирует в ускорение. Их гибкие серверы постоянно обновляются как программно, так и аппаратно, а также поддерживают PHP7 и HTTP/2.

Оптимизируйте тему

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

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

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

Thesis и Schema – еще две темы, которые ставят в приоритет производительность.

Наконец, WordPress Base Theme, которая стоит на SitePoint, также отличный пример для начала. Эта легкая и очень быстрая тема, 98/100 на Pingdom Page Speed Test.

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

Адаптивные сайты нравятся Google, так что ожидайте небольшого прироста в SEO при переходе на адаптивный дизайн.

Следите за своими плагинами

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

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

Оптимизируйте свои виджеты

Виджеты должны быть легкими и максимально просто загружаться. Некоторые из них при отрисовке подгружают внешний JS и CSS. Внешние ресурсы обычно загружают виджеты социальных сетей типа Facebook, Twitter и Google+.

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

Оптимизируйте статичный контент

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

Если сервер общий, лучше всего включить gZip-сжатие прямо через cPanel (если ваш хостинг провайдер предлагает такую панель).

Включить gZip-сжатие можно через плагин типа W3 Total Cache. Плагины мы разберем в следующей статье.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

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

В идеале, ищите хостинг, предлагающий в своих тарифах CDN, как SiteGround. Существует множество CDN-сетей: Amazon S3, MaxCDN, Media Temple CDN, Cloudflare, Free CDN.

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

Оптимизируйте изображения

Изображения – один из самых тяжелых элементов на сайте – они составляют 65% всего контента в сети. Существует несколько способов оптимизировать загружаемые изображения.

Первый, определить максимальное разрешение изображения для превью, средних и больших размеров. Эти опции расположены в Settings/Media. Если вы загрузите изображение 1024px, а контентная область составляет 604px, то изображение уменьшится через CSS. Полученное изображение 604px в ширину намного проще загрузить.

Во-вторых, сжимайте! Эта техника уменьшает размер файлов без потери качества и изменения размеров. Yahoo убили сервис Smush.it пару лет назад, но в сети есть и другие сервисы типа reSmush.it, а также ряд плагинов, о которых мы поговорим в следующей статье.

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

В-четвертых, подбирайте лучший формат изображений для своего сайта. С некоторыми форматами изображений легче работать, но другие меньше весят. Например, SVG мало весят, особенно если оптимизировать их для веба и сжать через gZip. Изучите плюсы и минусы разных форматов.

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

Оптимизируйте базу данных

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

Базу данных можно оптимизировать напрямую через phpMyAdmin или с помощью плагинов. О плагинах мы поговорим в следующей статье.

Ускорьте высоконагруженные сайты с помощью кэширования

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

Кэширование сохраняет эти HTML-файлы, экономя время посетителям. Плагины кэширования мы рассмотрим в следующей статье.

Обслуживайте WordPress

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

обновляйте WP и плагины;

удаляйте старые ревизии постов;

удаляйте спам в комментариях.

Дополнительные советы

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

Минифицируйте JS и CSS-файлы, удалив из них ненужные данные. На CSS Minifier есть несколько инструментов минификации.

Отключите трекбэк и пингбэк. Они задействуют сервер и базу данных каждый раз, когда кто-то упоминает ваш сайт. Отключение (настройки WordPress Discussion ) не поломает обратные ссылки.

Пробуйте!

А насколько ваш сайт медленный? Узнайте это с помощью одного из вышеперечисленных инструментов. Потом попробуйте одну-две стратегии и снова оцените скорость. И так еще раз.

Как мы и сказали, в сети полно WP-плагинов по оптимизации. В следующей статье мы подробно разберем их, следите за выходом новых статей!

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

А какая стратегия оптимизации дала вам максимальный прирост производительности на сайте? Пишите в комментариях.

Автор: Adrian Try

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

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

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

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

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

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

Научиться

webformyself.com

WordPress SEO, базовая оптимизация | WP Magazine

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

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

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

Отвечая сразу на вопрос «А что это такое вообще — базовая оптимизация?»: базовая оптимизация — это такая полезная штука, которая позволит вам сэкономить кучу времени, ресурсов и сил в дальнейшем в независимости от выбранной вами стратегии оптимизации и продвижения.

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

Не мудрствуя лукаво перейдем к сути.

Ссылки

Пермалинки или ЧПУ

По умолчанию (Настройки → Постоянные ссылки) WordPress дает постам адреса, например, в виде ?p=123. Не слишком информативная запись, не так ли?

Настройка постоянных ссылок

Не мучайте посетителей и поисковые системы — придайте смысл своим ссылкам и повысьте значимость ключевых слов, которые вы в них используете. Я, к примеру, предпочитаю использовать такой вид:

Категория и название записи в ЧПУ

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

Кириллица

Для начала, если вы работаете с сайтом с кириллическим контентом, то и названия у вас по умолчанию кириллические, равно как и URL. И все бы ничего, мы можем даже забыть про эстетическую сторону (http://www.mycoolbigshopoftea.com/зеленый-чай/в-пакетиках/ — «Привет, dear Василий! How are ты?»), но поисковики до сих пор понимают кириллицу далеко не так хорошо, как нам бы хотелось.

Плюс кириллические символы при перекодировании дают большее количество символов в URL, нежели латиница. Облегчать ли поисковикам и тем, кто не использует UTF-кодировку, задачу или нет — решать вам, но я бы рекомендовал воспользоваться, например, плагином Cyr to Lat Enhanced и перевести-таки кириллицу в латиницу автоматически, либо писать ссылки на английском вручную.

«Твоя моя понимать?»

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

Проверка транслитерации в Google

Проверка транслитерации в Яндексе

Причем положительный результат в одном не является гарантией положительного результата в другом. К сожалению ГОСТ здесь не работает и поисковые системы используют собственное понимание транслитерации.

Определитесь с основным зеркалом

Проблема стара как сами поисковики, тем не менее она до сих пор требует внимания, так как они все так же иногда ошибаются, а терять из-за этого вес не очень-то хочется. Определяем для WordPress (Настройки → Общие) какой именно вариант представления нам нужен — с www или без.

Настройка адреса сайта в WordPress

После того как определились, обязательно проверьте результат, введя адрес с www и без оного. Если перенаправления не происходит, либо ваш хостер перемудрил с настройками, либо какой-то из плагинов вам придется удалить/переписать самому. В худшем случае допишите 301 редирект в .htaccess вручную, но не оставляйте этот момент без внимания.

Канонические ссылки

Так как канонические ссылки уже c 2009 года пользуются поддержкой таких компаний как Google, Yahoo и Microsoft, да и Yandex c 2011 года, было бы не правильно их игнорировать. К вопросу о том, что это такое: канонические ссылки — это маяки, которые показывают поисковым системам, какая из страниц с одинаковым контентом настоящая. Например для человека страницы с адресами:

  • http://somesite.ru/page/
  • http://www.somesite.ru/page/
  • http://www.somesite.ru/?p=1234

Могут казаться одним и тем же, но для поисковика все эти адреса — разные страницы с одинаковым контентом.

Для того, чтобы подсказать поисковой системе правильную ссылку и не потерять при склеивании безвозвратно ссылочный вес, проставляем канонические ссылки на каждой странице в виде такой вот записи в разделе <head>:

<link rel="canonical" href="http://ваш_сайт.ru/нужная_страница" />

Облегчить жизнь в данном плане и проставить все верно и автоматом могут такие плагины, как, например: WordPress SEO by Yoast или All in One SEO Pack.

Таксономии в разрезе WordPress SEO

WordPress по умолчанию предлагает вам таксономии с вертикальной (рубрики) и горизонтальной (теги/метки) иерархией. Не гнушайтесь использовать их на всю катушку.

Продумайте вертикальную структуру таким образом, чтобы пользователям было легко находить необходимый контент (чтобы вложенные категории были логично расставлены) и пользуйтесь тегами/метками везде, где можно, продумывайте их, чтобы не возникло ситуации «каждая метка — всего один пост, а всего нас 300».

WordPress подсказывает часто используемые на вашем сайте метки — пользуйтесь его помощью. Ну и, конечно, не спамьте ненужными метками там, где они не к месту.

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

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

Дублирование контента

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

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

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

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

Еще один шаг на пути базовой оптимизации, который вы можете предпринять — не выводить в ленты (loop) записи целиком. Используйте функцию the_excerpt() вместо the_content().

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

Усилить последний эффект вы можете путем написания в Цитату (Excerpt) краткого содержания поста, вместо его первого параграфа (как было бы, используй вы the_content() с отрезающей строкой <!--more--> в контенте).

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

Robots.txt

Данный небезызвестный файл в WordPress представлен в виртуальном виде. То есть по адресу http://ваш_сайт/robots.txt он появляться будет, но по факту на сервере такого файла по умолчанию нет.

В настройках по умолчанию WordPress предлагает только включить или выключить индексацию сайта полностью. Если же вы хотите более тонких настроек — все просто:

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

В плане работы с robots.txt помогут, например, такие плагины, как DL Robots.txt, WordPress SEO by Yoast или All in One SEO Pack.

Sitemap.xml

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

  • воспользоваться плагином (например: Google XML Sitemaps, WordPress SEO by Yoast, All in One SEO Pack), настроить и генерировать автоматически;
  • воспользоваться любым онлайн сервисом (просто вбейте в поисковике XML Sitemap), генерировать по запросу и размещать у себя;
  • написать вывод самому.

HEAD-поля

Из обычной троицы (Title, Description, Keywords) WordPress по умолчанию для постов и страниц поддерживает только Title (функция wp_title()), который воспроизводит название поста/страницы. Для всего остального вам понадобятся специализированные плагины, либо использование произвольных полей.

Помочь в данном случае могут следующие плагины:

Не будем забывать и про другие поля, которые могут помочь выделить наш сайт из серой массы конкурентов. В частности про Google+ Author Link. Создайте страницу в Google+ и разместите ссылку в раздел <head>, даже если у вас не авторский блог — достаточно крупный логотип вашей фирмы с дополнительно выводимыми информационными полями в поисковой выдаче явно лишним не будет.

И напоследок — Favicon, та самая, давно всем знакомая иконка. По умолчанию в ядре WordPress не поддерживается, поэтому размещаем в корень сайта сами и добавляем ссылку в раздел <head>, либо используем плагин, например: Heroic Favicon Generator.

HTML код

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

Проверьте и убедитесь, что на странице/посте вы используете только один заголовок h2, либо автоматический с использованием wp_title(), либо прописанный руками в контенте страницы. Данный совет также относится к категориям, архивам и к главной странице, если на сайте не используется разметка HTML5, и заголовки не разделены тегами <section>. Это зависит от выбранной темы оформления.

Оптимизируйте теги изображений — пропишите все атрибуты (alt, title). WordPress по умолчанию дает такую возможность. Не ленитесь и ключевые слова в атрибутах изображений приятно удивят вас повышением тематического веса ваших страниц. Главное — без спама почем зря.

Атрибуты изображений в WordPress

Сообщи всем (ping)

Хотите, чтобы поисковые системы быстрее реагировали на появление у вас свежего контента? Добро пожаловать в замечательные Сервисы обновления (Настройки → Написание), доступные в WordPress по умолчанию. Здесь вы можете добавить адреса ресурсов, которые вы бы хотели оповещать о каждой новой публикации.

По умолчанию в WordPress прописан только один сервис — Ping-O-Matic. Для многих этого достаточно, но для эстетов я бы рекомендовал добавить пару сервисов дополнительно:

  • http://ping.blogs.yandex.ru/RPC2
  • http://blogsearch.google.ru/ping/RPC2

Настройка Ping-сервисов

В заключение

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

wpmag.ru

Оптимизация сайта на WordPress для Google PageSpeed

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

 

Google pagespeed 100%

Google pagespeed 100%

 

Как улучшить показатели скорости загрузки сайта в Google PageSpeed

 

Ошибка - "Используйте кеш браузера"

На некоторых хостингах возникает ошибка "Используйте кеш браузера". Для исправления этой ошибки нужно вставить следующий код в файл .htaccess (находится в корневой директории WordPress, еще к нему можно получить доступ с помощью плагина Yoast SEO):

# BEGIN EXPIRES <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 10 days" ExpiresByType text/css "access plus 1 week" ExpiresByType text/plain "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 week" ExpiresByType application/x-icon "access plus 1 year" </IfModule> # END EXPIRES

 

Если у вас стоит Яндекс.Метрика, или Google Analytics - то исправить данную ошибку не получится. Но ничего страшного, так как данные сервисы не тормозят работу вашего сайта.

Ошибки - "Сократите HTML, Сократите CSS, Сократите JavaScript"

Эти ошибки поможет исправить плагин Autoptimize. В настройках включаем:

  • Оптимизировать код HTML
  • Оптимизировать код JavaScript
  • Оптимизировать код CSS

Ошибка - "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы"

Решается с помощью плагина Autoptimize. Для этого нужно поставить галочку в пункте Inline all CSS

Также эта проблема может возникнуть, если на сайте используются шрифты Google fonts. Подключать их нужно в footer.php в таком виде:

 

<link href="https://fonts.googleapis.com/css?family=Jim+Nightshade" rel="stylesheet">

 

Ошибка - "Оптимизируйте изображения"

Чтобы оптимизировать изображения, установите плагин WP Smush. Если неоптимизированные изображения находятся в папках темы, либо внутри плагинов - Google предлагает скачать оптимизированные изображения на странице проверки сайта PageSpeed. Ими нужно заменить "тяжелые" картинки.

Ошибка "Включите сжатие" и ошибка "Сократите время ответа сервера"

Чаще всего с ними помогает бороться плагин WP Super Cashe. После установки необходимо в настройках плагина включить кеширование и включить опцию - "Сжимать файлы кэша чтобы ускорить работу"

 

inprocess.by

Оптимизация WordPress сайта, советы и рекоммендации по оптимизации

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

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

Увы, каждый сайт нужно оптимизировать отдельно, в зависимости от структуры, типа и целей. Но можно выделить несколько важных моментов, которые подойдут под любой сайт. Вы можете задать вопрос: «Если можно выделить общее, почему не сделать это стандартом». По ходу описания материала, я буду немного останавливаться на этом вопросе, и постараюсь внести ясность, почему нельзя делать все по шаблону и почему разработчики не вносят конкретные дополнения к CMS WordPress.

О чем забыли разработчики WordPress, или как происходит оптимизация WordPress сайта

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

На какие моменты стоит обратить внимание в первую очередь:

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

Robots.txt для WordPress

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

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

Ускорение загрузки страниц

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

Адаптация под мобильные устройства

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

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

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

yrokiwp.ru