Контрольный список оптимизации WordPress

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

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

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

Тесты в Amazon показали аналогичные результаты: каждые 100 мс увеличения времени загрузки Amazon.com снижали продажи на 1% (Kohavi and Longbotham 2007).

Источник: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

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

Но мой сайт загружается очень быстро!

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

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

Есть много вещей, которые могут улучшить скорость вашего сайта WordPress, давайте начнем.

Минифицирующие скрипты

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

Каждый файл загружается по очереди. Браузер обычно имеет ограничение в 2-4 «канала», что означает, что браузер будет загружать только до 2-4 файлов одновременно с сервера, на котором размещены файлы.

Если вы просмотрите свой HTML-код своего веб-сайта WordPress, вы заметите множество различных файлов .css и .js. Каждый из них, как правило, из разных плагинов, каждый из которых добавляет в микс файлы .js или .css.

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

Это всего лишь пример с обычного веб-сайта WordPress. В HTML-коде есть ссылки на несколько других файлов. В этом простом примере загружаются 4 файла JavaScript один за другим.

<script type="text/javascript" src="https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type="text/javascript" src="https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type="text/javascript" src="https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type="text/javascript" src="https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2"></script >

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

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

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

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

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

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Примечание. В примере кода я сохраняю URL-адрес темы в переменной, а затем анализирую ее с помощью функции wp_enqueue_script. Это уменьшает количество необходимых вызовов PHP и/или базы данных, увеличивая скорость.

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

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

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

Это объединяет 4 файла в один «файл»/запрос для вашего браузера.

Я сталкивался с веб-сайтами на основе WordPress, на которых было загружено 22 файла .css, а также 15 файлов .js. Все на титульном листе. Изменение скорости может быть удивительным, если вы сможете уменьшить количество внешних файлов.

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

Оптимизировать header.php

Файл header.php в вашей теме вызывается на каждой странице вашего сайта WordPress. В этом файле обычно много элементов, которые можно оптимизировать.

Классический пример — bloginfo('template_directory'), который обычно вызывается несколько раз в заголовке, чтобы вернуть URL-адрес темы для включения внешних файлов.

Более эффективный метод — сделать один запрос URL-адреса, а затем сохранить его как переменную.

$template_directory = get_bloginfo('template_directory'); 

URL-адрес каталога темы теперь хранится в переменной $template_directory.

Дополнительные примеры того, как повысить эффективность header.php, можно прочитать в блоге WordPress header.php Optimization Tips.

Уменьшение количества плагинов

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

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

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

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

Не используйте изображения — используйте CSS3

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

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

[box]Примечание. Большинство этих эффектов совместимы не со всеми браузерами, в частности со старыми версиями Internet Explorer (да, это всегда проблема для любого веб-разработчика). Если вы хотите оптимизировать скорость своего веб-сайта, использование эффектов CSS может быть быстрым и быстрым решением, но не лучшим выбором, если основная аудитория клиента использует устаревшие браузеры.[/box]

Если вы работаете с клиентом, ориентированным на B2C (от бизнеса к потребителю), вам следует проверить их Google Analytics или спросить их о том, какие клиенты у них есть (или на кого они хотят ориентироваться). Это может повлиять на то, можете ли вы использовать эффекты CSS3, если аудитория клиентов обычно использует устаревшие браузеры.

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

Папка шорткодов/изображений, которая раньше содержала 90 изображений, теперь имеет один спрайт PNG, что уменьшило общий размер со 140 КБ до 15 КБ!
(Это примерно 90% уменьшение размера.)

Изображения в спрайты

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

Спрайт — это отдельное изображение, обычно в формате .PNG, которое имеет несколько элементов вашего визуального дизайна/макета. Вместо того, чтобы загружать каждый графический элемент по отдельности, все изображения объединяются в один или как можно меньше спрайтов.

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

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

SpriteMe.org — отличный ресурс для создания спрайтов. Лучший способ — заранее спланировать и сначала создать свои спрайты, но если вам нужно исправить существующий веб-сайт, на сайте spriteme.org есть букмарклет, который значительно упрощает этот процесс.

Пример стилей CSS в сочетании со спрайтом:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Каждый стиль css ссылается на один и тот же файл, но положение фона отличается, показывая разные части изображения.

Распространяйте — используйте CDN

Есть два основных преимущества использования CDN (сети распространения контента) для размещения файлов вашей темы и элементов WordPress.

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

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

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

Правильный сервер для вашего сайта

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

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

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

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

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

Исправить ошибку 404

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

Совет: Проверьте этот фрагмент кода для автоматической переадресации 301 ненайденных страниц.

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

Некоторые или большинство приемов будет сложно реализовать, если вы не разработчик, но каждый из них заставит ваш сайт WordPress работать быстрее.
[/коробка]

Контрольный список

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