Как ускорить сайт на Вордпрессе?

9 советов, как ускорить работу сайта на WordPress

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

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

Оптимизация WordPress — советы

Выбор темы для WordPress

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

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

Без изображений ваш сайт вряд ли обойдется, поэтому важно, чтобы они были оптимизированы.

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

Удаляйте всю лишнюю информацию из фотографий (дата создания, камера, GPS- координаты и прочее, что можно найти в свойствах файла). С этим вам поможет плагин для оптимизации изображений WordPress WP Smush.it.

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

Существует множество плагинов, которые помогут вам уменьшить размер изображений. Например, EWWW Image Optimizer или уже упомянутый WP Smush.it. Можно использовать и сторонние сервисы для уменьшения размера картинок. Например, сервис Tinyjpg отлично уменьшает размер изображений без потери качества.

Покажем, как обработать все ваши изображения С EWWW Image Optimizer всего в несколько кликов:

После того, как вы установили и активировали плагин, зайдите в администраторскую панель WordPress и перейдите в меню Медиафайлы >> Массовая оптимизация:

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

Если вам нужно оптимизировать изображение вне библиотеки медиафайлов (например, графические элементы активной темы), воспользуйтесь кнопкой “Сканировать и оптимизировать”.

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

Сжатие файлов

Оптимизация сайта WordPress возможна и через сжатие файлов. Если вы пользуетесь хостинговой панелью cPanel, то можете воспользоваться меню “Оптимизировать веб-сайт”.

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

Кэширование браузера

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

Откройте .htaccess файл, расположенный в корневой директории сайта, и добавьте следующий код:

ExpiresActive on
ExpiresByType image/jpg «access plus 60 days»
ExpiresByType image/png «access plus 60 days»
ExpiresByType image/gif «access plus 60 days»
ExpiresByType image/jpeg «access plus 60 days»
ExpiresByType text/css «access plus 2 weeks»
ExpiresByType image/x-icon «access plus 2 weeks»
ExpiresByType application/pdf «access plus 1 month»
ExpiresByType audio/x-wav «access plus 1 month»
ExpiresByType audio/mpeg «access plus 1 month»
ExpiresByType video/mpeg «access plus 1 month»
ExpiresByType video/mp4 «access plus 1 month»
ExpiresByType video/quicktime «access plus 1 month»
ExpiresByType video/x-ms-wmv «access plus 1 month»
ExpiresByType application/x-shockwave-flash «access 1 month»
ExpiresByType text/javascript «access plus 2 weeks»
ExpiresByType application/x-javascript «access plus 2 weeks»
ExpiresByType application/javascript «access plus 2 weeks»

Срок хранения можно изменить в зависимости от ваших требований.

Важно: перед внесением любых правок в .htaccess сделайте бэкап этого файла. Если с файлом .htaccess что-то пойдет не так, сайт не будет работать.

Кэширование WordPress

Такие плагины значительно улучшат скорость загрузки страниц. Самые популярные — W3 Total Cache и WP Super Cache. Главное отличие между ними — это то, что W3 Total Cache поддается более гибкой настройке.

Рассмотрим пример настройки W3 Total Cache:

После того, как вы установили плагин, в панели управления WordPress перейдите в меню Плагины >> Установленные >> W3 Total Cache >> Settings.

Важно: если вы являетесь пользователем виртуального хостинга, помните, что все возможные варианты кэширования не должны быть включены одновременно (избегайте использовать опцию Toggle all caching types on or off (at once)). Если Object caching и Database caching включены, они могут вызвать проблемы с использованием ресурсов вашего хостингового аккаунта без улучшения скорости загрузки страницы. Но если ваш сайт находится на VPS или выделенном сервере, то вас это не коснется.

В меню Settings включите следующие опции:

И после этого нажмите на кнопку “Save All Settings”.

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

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

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

Одним из самых популярных сервисов CDN является Cloudflare. Именно его мы и советуем использовать нашим клиентом и предлагаем вместе со всеми пакетами виртуального хостинга.

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

Оптимизация домашней страницы

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

1. Не добавляйте слишком много виджетов. Используйте только те, которые вам действительно нужны. Также они не должны быть слишком тяжелыми.
2. Если у вас блог, то не выводите на главную страницу полное содержание новых постов. Делайте превью поста со ссылкой “Читать далее”.
3. Не выводите больше десяти постов на главную страницу.

Настройка LazyLoad — отложенная загрузка изображений

LazyLoad — плагины, которые помогают осуществлять отложенную загрузку изображений. Это актуально для сайтов, на которых изображений очень много. Загрузка изображения начинается только тогда, когда пользователь долистывает до определенного места на странице. Следовательно, если на странице есть изображение в самом конце, а пользователь просто не долистал до этого места, то загрузка изображения не произойдет. Пример такого плагина — jQuery Image Lazy Load.

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

Включение защиты от хотлинкинга

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

Если вы являетесь пользователем cPanel, вы можете воспользоваться встроенной опцией “Защита Hotlink”.

Также вы можете включить защиту от хотлинкинга при помощи .htaccess кода:

RewriteEngine On
RewriteCond % !^http://(.+.)?yourdomain.com/ [NC] RewriteCond % !^$
RewriteRule .*.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

При помощи этого кода ваш сервер проверяет, откуда именно пришел запрос: если со страниц вашего сайта, то он отдаст изображение пользователю без проблем; если же с чужого сайта – то сервер показывает изображение с ошибкой (nohotlink.jpg – любое изображение, которое вы захотите использовать с этой целью).

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

Если нужен хороший хостинг для сайта на WordPress с чистыми SSD, бесплатным доменом и другими приятностями, вам сюда:

hostiq.ua

Как ускорить сайт на WordPress в 17 раз. Пошаговая инструкция

Представляю наиболее полную инструкцию с способами по ускорению работы сайта на WordPress. Благодаря описанным ниже способам я ускорил загрузку своего сайта с 24,40 секунд до 1,41 секунды. Увеличил скорость загрузки в 17,3 раза! Хороший результат. Чтобы узнать как — читайте полную статью.

Замеры скорости работы сайта я проводил сервисом Pingdom Speed Test. Тестировал главную страницу сайта. Смотрите ниже показатели сайта «до» и «после» улучшений, и короткую и полную инструкцию по ускорению сайта.

Показатели сокрости загрузки сайта

Скриншот замера скорости ПЕРЕД оптимизацией блога:

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

Короткое резюме по ускорению сайта на WordPress

Основное влияние на скорость оказали такие факторы как смена хостинга с использованием SSD дисков, оптимизация изображений, включение плагина кеширования W3 Total Cache, оптимизация БД сайта, удаление старых ревизий, включение сжатия файлов на стороне сервера, включение кеша для статичных файлов на стороне браузера. Далее следует полная развернутая инструкция по ускорению сайта на WordPress.

Полная инструкция как ускорить сайт на WordPress

1. Качественный SSD хостинг, быстрый пинг

Хостинг должен быть на SSD дисках. Желательно чтобы сервера хостинга располагались в вашей географической зоне, на которую ориентирован сайт. Если хостинг будет на SSD, но в США, а ваш блог ориентирован на Россию и страны СНГ, то толку от такого SSD будет мало. Так как будет идти долгий пинг для связи с сервером. Поэтому месторасположение дата центра хостинга также важно. Это важный параметр хостинга — быстрый пинг, отклик серверов. И чтобы хостер не делал оверселлинг услуг. Про тип хостинга — конечно лучше брать как VDS (виртуальный выделенный сервер) с необходимыми для вашего сайта параметрами, вместо обычного shared хостинга. Какую именно конфигурацию VDS выбрать — это зависит от нагрузки которую ваш сайт создает не сервер и от размера его суточной аудитории. Я бы советовал брать минимум 1Gb Ram, 1 ядро процессора и 10 Гб SSD. В начале у меня был VDS на обычных HDD дисках, затем я поменял его на SSD VDS хостинг.

Хостинг «До»:

VPS хостинг FreeHost.com.ua
Размер диска: 30 Gb HDD
Память: 2 Gb RAM
Частота CPU: 2,2 Ghz
Количество CPU: 1
Расположение серверов: Киев, Украина
Стоимость: 12,8 $/месяц

Хостинг «После»:

VDS хостинг от ihor.ru
Размер диска: 20 Gb HDD
Память: 1 Gb RAM
Частота CPU: 2,4 Ghz
Количество CPU: 1
Расположение серверов: Москва, Россия
Стоимость: 250 руб/месяц (примерно 5$/месяц)

По скриншотам теста скорости загрузки сайта, видно что на старом хостинге время ответа сайта достигало 12,3 секунды. Что непомерно много. На новом хостинге от ihor.ru время ответа сайта составляло 1,2 секунды, что в разы быстрее, по сравнению со старым хостингом. На этот показатель повлияли SSD диски, и более лучший дата центр с лучшим и более быстрым каналом.

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

2. Оптимизировать изображения

Проверьте используете ли вы оптимизированные jpg файлы изображений. Которые занимают небольшой размер и при этом обладают хорошим качеством. В Photoshop сохранять такие изображения можно командой Save for Web (Ctrl + Shift + Alt + S), или через функцию export assets если вы используете Photoshop CC. Не стоит сохранят большие непрозрачные картинки в .png формате, он занимает слишком много места, и для этого лучше использовать jpeg формат. Формат png подходит для небольшой графики которая используется в оформлении сайта, в шаблоне, это могут быть изображения кнопок, буллеты, изображения с прозрачным фоном.

Некоторые миниатюры к записям у меня были сохранены в .png формате, и размер изображения достигал 300 Кб. Пересохранив изображения в jpg формат, каждая миниатюра стала занимать 60-90 Кб в среднем. Таким образом вес некоторых изображений уменьшился в 3-4 раза, без потери качества.

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

3. Настройка wp-config.php для ускорения работы сайта на wordpress

Небольшой способ снизить загрузку на хостинг — отредактировать файл wp-config.php, который находится в коревой директории вашего сайта.

Находим в файле wp-config.php строку:

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

4. Настройка Robots.txt — запрет на индексацию ненужным сайтам.

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

Например, помимо роботов от Yandex и Google на сайт также заходит поисковый робот от поисковика Yahoo. Таким кодом можно запретить Yahoo роботу просматривать сайт:

Я прописал следующие запрещающие директивы:

Вот пример моего файла robots.txt

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

5. Настройка файла .htaccess для снижения нагрузки на сервер.

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

Настройка №1. Часто с сайтов копируют информацию вместе с картинками, не изменяя адреса картинок. И когда такое происходит картинки лежащие на нашем хостинге загружаются на других сайтах, и это создает ненужную нагрузку на хостинг.

Следующим кодом можно запретить загружать изображения нашего сайта на сторонних сайтах:

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

Настройка №2. В файле .htaccess можно и следует указать кэширование для некоторых объектов сайта (изображений, css и js фалов) чтобы браузер кешировал их на своей стороне и не загружал их каждый раз. Для этого в .htaccess ниже первого кода добавляем следующий код:

Настройка №3. Включим gzip сжатие страниц перед отправкой их пользователю. Вставим в .htaccess следующий код:

Настройка №4. Ограничение спама в комментариях. Большинство спам комментариев отправляются автоматически. Этим кодом мы запретим напрямую отсылать комментарии минуя форму комментирования. Теперь спам боты не смогу отправлять комментарии.

Настройка №5. Если вы пользуетесь системой FeedBurner, то у вас явно установлены плагины, которые отправляют RSS-контент на сайт FeedBurner. Сегодня вы можете их удалить, потому что перенаправить контент можно и без плагинов, уменьшив нагрузку на хостинг.

ВНИМАНИЕ. Не забудьте в примерах выше заменить адрес yourdomain.ru на адрес своего сайта.

6. Оптимизация базы данных

Важное значение в скорости работы сайта имеет База Данных. При сохранении постов по нескольку раз WordPress создает ревизии записи — состояния постов в разные моменты их редактирования. В результате со временем база данных содержит большое количество ненужных ревизий постов, и их необходимо очищать и оптимизировать. Сделать это можно с помощью плагина Optimize DB. Установить его можно из админки WordPress. Например запустив его на своем сайте я удалили более 1200 ревизий постов. Что значительно улучшило скорость работы БД.

7. Оптимизация кода шаблона (темы)

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

Настройка №1. Найти код, который отвечает за стили в файле header.php:

Внимание. Не забудьте изменить yoursite.ru на ссылку своего сайта.

Настройка №2. Изменить код пинбеков:

Заменить с исправлением yoursite.ru на свою ссылку:

Настройка №3. Изменение кода RSS ленты:

Заменить с исправлением yoursite.ru на свою ссылку:

Настройка №4. Довольно часто в подвале сайта (footer.php), разработчики тем оставляют совершенно ненужные запросы к Базе данных. Например:

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

Некоторые маленькие советы, которые позволят ускорить загрузку сайта:

1) Если ваш сайт не использует комментарии, не стоит их скрывать с помощью плагинов, это создает совершенно ненужную нагрузку. Так как вам комментарии совершенно не нужны, просто удалите следующий код из файла темы (single.php):

2) Старайтесь не использовать внешние скрипты, такие как, комментарии от Вконтакте, различные виджеты социальных сетей. Да, это выглядит красиво и эффектно, но создает приличную нагрузку на сайт. Из примеров могу сказать что мой сайт значительно грузил код веб-визора от ЯндексМетрики, виджет Add.This. Кнопки соц сетей я поменял на отельный JS плагин.

3) Почистите весь код вашего сайта от комментариев, данные комментарии вставляются с помощью тегов и /*код/. Оставьте только нужное, так как сайту приходится тратить лишние силы на их загрузку…

4) Старайтесь размещать все скрипты в конце страницы перед закрвающим тегом

rightblog.ru

Как ускорить сайт на WordPress — базовые рекомендации

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

Как измерить скорость сайта

В этой статье для анализа скорости загрузки сайта я буду пользоваться парой популярных сервисов — https://developers.google.com/speed/pagespeed/insights/ и https://gtmetrix.com/.

Наша задача минимум — это попасть в зеленую зону обоих тестов.

Что тормозит ваш сайт

На скорость загрузки сайта влияет следующее:

Остановлюсь подробно на каждом пункте

Быстрый хостинг для сайта на WordPress

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

Список базовых рекомендаций:

• Используйте PHP версии 7. Эта версия заметно быстрее предыдущих. Не забудьте про Zend OPcache.
• В качестве веб-сервера используйте NGINX и режим работы PHP — PHP-FPM. WordPress поддерживает такой режим работы «из коробки».
• Если не можете отказаться от веб-сервера Apache, то обязательно используйте NGINX в качестве Front-End.

По моему опыту связка NGINX плюс PHP-FPM работает заметно быстрее чем Apache плюс NGINX в качестве Front-End.

Как изображения тормозят ваш сайт

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

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

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

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

Все вышеописанное хорошо, когда вы только готовите статью к публикации. Но если нужно оптимизировать существующие изображения на работающем сайте, то могу порекомендовать WordPress плагин — WP Smush (Smush Image Compression and Optimization).

Оптимальная загрузка JavaScript

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

Размещать JavaScript лучше в конце HTML документа перед закрывающим тегом BODY. Такой способ не тормозит загрузку видимой части сайта.

Чтобы это реализовать в WordPress используйте следующий код в файле functions.php для загрузки файлов JavaScript (это условный пример для рекламной сети Google.Adsense):

В этом случае (последняя опция в значении true), ссылка на файл JavaScript будет размещаться перед закрывающим тегом BODY:

А в секции HEAD появится код:

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

Если загрузка файла JavaScript необходима в начале HTML документа (актуально для jQuery), то используйте асинхронную загрузку. Примеры моей реализации метода асинхронной загрузки скриптов в WordPress — https://moonback.ru/page/wordpress-javascript-async

Что не так с CSS стилями у WordPress

Реализация WordPress такова, что темы (шаблоны) до сих пор не подключают автоматически файл стилей по умолчанию style.css, который является обязательным.

Но проблема даже не в этом. Если вам необходимо подключить несколько файлов стилей, то не используйте оператор @import для подключения дополнительных стилей. Так как в таком случае браузер будет последовательно загружать все файлы стилей и объединять их в один.

Вместо этого используйте тег link для каждого файла стилей:

И браузер будет пытаться их загрузить разными потоками, что чаще всего быстрее.

Подробно как это сделать в WordPress описано в моей статье здесь.

Промежуточные результаты оптимизации

Применение этих простых правил позволит вам попасть в «зеленую» зону теста https://developers.google.com/speed/pagespeed/insights/

Можно ли получить еще большие значения, например 95/100 и выше? На wordPress это сложно, но так же реализуемо.

Скорость загрузки на мобильных является фактором ранжирования в Google

Для чего эта статья и почему все описанное важно. Дело в том, что с июля 2018 скорость загрузки является фактором ранжирования в поисковой выдаче Google для мобильных устройств. Это официальная информация — https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

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

moonback.ru