Как ускорить сайт на WordPress
Медленная загрузка страниц — это большая проблема для любого сайта. Из-за этой причины сайты редко получают большую посещаемость, имеют низкую конверсию и частенько возникают проблемы с продвижением в поисковиках.
Однако если ваш сайт установлен на WP, то эта статья будет очень полезна для вас. Я раскрою все секреты, как ускорить сайт на WordPress за 10 шагов. Но прежде, чем приступать к ускорению сайта, давайте посмотрим, какая у нас скорость загрузки страниц?
Несколько отличных сервисов для проверки скорости сайта:
- Google Page Speed — простой инструмент от Гугл, который показывает все ошибки, мешающие загрузить сайт быстро. Он нам нужен, только для того, что бы узнать основные ошибки для исправлений.
- WebPageTest — навороченный инструмент, который наглядно показывает, как загружается каждый элемент вашего сайта и сколько времени на это затрачивается. А так же вы узнаете, как пользователи видят ваш сайт по секундам.
Многие проверяют скорость только главной страницы — это ошибка! Всего 10% посетителей увидят вашу главную страницу, все остальные люди будут читать статьи.
А в статьях часто подключаются дополнительные скрипты и код, который так же влияет на загрузку страницы. Поэтому проверяйте не только главную страницу, но и одну из последних статей.
Результат Google Page Speed:
Результат WebPageTest:
В сервисе WebPageTest обязательно нажимайте на кнопку waterfall, что бы получить все данные в форме водопада. Это даст нам данные о TTFB (скорости передачи первого байта от хостинга) и путь рендеринга (когда пользователь получает отображенный сайт).
10 шагов по ускорению WordPress
Содержание статьи:
- Скорость хостинга — TTFB;
- Настройка WordPress;
- Настройка шаблона;
- Оптимизация базы данных;
- Удаление лишних и тяжелых плагинов;
- Настройка кэширования сайта;
- Сжимаем картинки + спрайты;
- Критический путь рендеринга;
- Ускорение загрузки шрифтов;
- Защита сайта от взломов.
1. Скорость хостинга — TTFB
Быстрый и качественный хостинг позволяет молниеносно передавать мегобайты данных о вашем сайте пользователям. Но как определить скорость и качество хостинга?
Переходим к анализа скорости сайта на WebPageTest. Стрелочкой я показал, за какой промежуток времени мой хостинг начинает передавать данные (первый байт информации или TTFB).Время составило 0,303 секунды, что достаточно хороший результат. Быстрый хостинг всегда показывает результаты от 0,2 до 0,4 сек — идеальные показатели!
Плохой же хостинг может начать передачу данных через пол секунды и даже через секунду, что совершенно не допустимо! Поэтому рекомендую перенести сайт на Sprinthost, где перенос делают бесплатно.
Ну а если вам не подходит данный хостинг, то всегда можно посмотреть список лучших хостингов 2016, где я добавил специальную графу «скорость», которая означает «скорость передачи первого байта» .
2. Настройка WordPress
WordPress по какой-то причине передает много лишней информации из-за чего сайт не реально тормозит, особенно при большой посещаемости. Наша цель правильно настроить WP и убрать всё лишнее.
Первые делом переходим в административную панель > «настройки» > «написание» и убираем 2 галочки.Потом переходим во вкладку «обсуждение» и убираем галочки так же с двух пунктов. При желание в этой вкладке можно отменить пункт «показывать аватарку» это дает ускорение страниц на 10%, где есть аватарки.
А теперь установите плагин Disable All WordPress Updates, который позволяет не проверять сайт на наличие обновлений шаблонов, плагинов и самого WP. Почему плагин, а не вручную? Да потому что это очень удобно, захотел обновиться — деактивировал плагин, а потом включил его заново!
3. Настройка шаблона
От выбора шаблона будет зависеть скорость работы сайта, потому что шаблоны используют разные количество скриптов, а так же по разному их подключают. К примеру, внешние скрипты требуют ответа от стороннего сервиса, что может оттягивать загрузку сайта.
Рекомендую изначально выбирать легкий и простой шаблон, который не перегружен скриптами и стилями. То есть при выборе шаблона, обязательно прогоняйте его с помощью Google Page Speed (должно быть более 80 баллов).
Лучшие шаблоны 2016 года — на данной странице я собрал 10 SEO оптимизированных шаблонов, которые включают в себя сжатие и ускорение. Результаты Page Speed можно увидеть под шаблоном.
И даже если у вас классный шаблон, который использует сжатые файлы, вы все равно можете улучшить его, убрав лишние запросы с помощью файлов header и functions. Найти их можно через «Внешний вид» > «редактирование шаблона» .
В header.php я переписывал готовые результаты запросов (к сожалению не помню изначальный вид запросов), но вот что у меня получилось:
Получается так, что не нужно обрабатывать лишние запросы к серверу для того, что бы получить данные, а мы сразу выдаем готовые строчки для посетителя.
В functions.php дописываем несколько строк, что бы в коде сайта убрать лишние строчки. Кстати, таким образом мы так же улучшаем безопасность сайта! Вот скрин:
А с 7 строчки по 22 мы убираем смайлы, которые создают нагрузку 3-10% на сайт.Как вариант можно полазить по шаблону и заняться удалением лишних функций и оптимизацией нужных. Но я не разу этого не делал, поэтому не могу дать такой совет.
4. Оптимизация базы данных
Одной из причин долгой передачи информации может быть тяжелая база данных, к которой много обращений. А если у сайта есть хорошая посещаемость, то есть высокий риск того, что сайт начнет сильно тормозить и может отключиться, а хостинг будет требовать повысить тарифный план.
Установим несколько крутых плагинов, которые сильно облегчат работу с базами данных:
1. WP-DBManager — он оптимизирует базу данных и вес базы становится в 10 раз меньше! Кроме этого он делает автоматические бекапы вашей базы и может удалять лишний мусор, который накапливается.
2. WPBase Cache — это плагин кэширования базы данных, который помогает ускорить работу запросов в 3 раза. То есть люди обращаться не к базе, а к готовому файлу, что не только ускоряет действия, но и снижает нагрузку на базу данных.
Вот как сильно упала нагрузка после установки двух плагинов:
5. Удаление тяжелых и лишних плагинов
Если вы используете более 10 плагинов, тогда вам обязательно стоит проверить, сколько создает нагрузки каждый из них. Для этого устанавливаем P3 plugin profile, который покажет сколько нагрузки приходится на каждый из плагинов.
Постарайтесь избавиться от тяжелых плагинов, либо заменить альтернативным вариантом, которые будет легче и быстрее работать. Это может сэкономить вам не только скорость загрузки, но и ресурсы вашего сервера.
Некоторые плагины могут подключать внешние стили и скрипты, что еще влияет на отображение сайта. К примеру DS Blog Map подключает скрипт в head «tw-sack.min.js» , который оттягивает загрузку сайта на 0,1 секунды.
6. Настройка кэширования WordPress
Изначально любой сайт весит около 600 — 3 000 КБ и имеет около 80-200 обращений к MySQL базе. Однако если мы включим кэширование определенных элементов, подключим gzip сжатие, объединим лишние css и скрипты, то нам удастся снизить вес страниц в 10 раз, а обращение к базе станет в 2-3 раза меньше.
Для того, что бы провести все настройки вручную без плагинов, потребуется много времени, поэтому я рекомендую решить все проблемы одним плагинов — W3 Total Cache. Очень мощный плагин с большим количеством настроек, но я пробегусь по основным из них.
1. Вкладка «Page Cache» , ставим галочки под этими пунктами:
2. Вкладка minify (оптимизация js и css файлов), сначала сделайте резервное копирование, потом ставим галочки!
3. Вкладка «Browser Cache» (включение кэширования браузером, gzip сжатие и другие плюшки). Вот где я расставил галочки:
И последним делом переходите в General setting и ставите нужные галочки. После чего ваш сайт начнет очень быстро работать при повторном обращение к сайту.
7. Сжатие картинок и Спрайты
Картинки в хорошем качестве весят 300-800 КБ их можно обрабатывать без потери качества и сократить их вес в 2-4 раза, то есть вес станет 100-200 КБ. Это сильно поможет сайту быстрее загружаться т.к. нужно передавать меньшее количество информации.
Для того, что бы сокращать вес картинок, рекомендую скачать PhotoShop, где будем выбирать строчку «сохранить для Web». Данная функция работает лучше, чем любой другой онлайн сервис по сокращению веса!
Если у вас на сайте уже море не оптимизированных картинок, тогда можно установить плагин tinygrab, который сможет переработать png и jpeg в объеме до 500 картинок в месяц бесплатно. Либо найти альтернативный плагин.
Кроме этого, если у вас предполагается целая строчка с картинками, например набор социальных сетей. То получается, что на загрузку каждой из картинок будет посылаться отдельный запрос, что очень долго.
Поэтому изобрели спрайты, которые объединяют все картинки в одну и с помощью style.css можно указать стиль определенного места для картинки и ее обозначение. Об этом можно написать отдельную статью, поэтому не буду детально описывать как и зачем это делается.
8. Критический путь рендеринга
Критический путь рендеринга — это минимальный набор обращений к сайту, который необходим для начала отрисовки страницы. То есть мы переделываем запросы так, что бы сайт максимально быстро отобразился для посетителя. Что для этого нужно?
Смотрим на график waterfall в WebPageTest!
Для быстрой отрисовки страницы необходимо, что бы css файлы загрузились в первую очередь. Обычно их загрузки могут мешать js файлы, которые иногда стоят выше и загружаются первыми. В теории мы уже объединили все css в один файл, а js файлы убрали в body с помощью w3 Total Cache плагина.
Вы можете не знать, но виджет Вконтакте подключенный с помощью скрипта в header.php создает запрос, который отодвигает загрузку страницы на целых 2 секунды! А что если у вас несколько социальных скриптов подключается первым css файлов? — Тогда загрузка будет ну очень долгой.
Еще существуют плагины могут подключать дополнительные js файлы, которые отправляются в head и загружаются первыми. Ваша задача избегать таких плагинов, либо искать им альтернативный вариант. Иначе сайт из-за них будет отрисовываться дольше, чем мог бы.
9. Ускорение загрузки шрифтов
Частенько дизайнеры подключают внешние шрифты от Гугл под названием «Google Fonts». А для того, что бы они отобразились на сайте, браузер должен соединиться с сервером, тот с другим, где идет загрузка css-файла и только потом получаем этот файл обратно.
Потом наш сервер обрабатывает полученный css-файл, вынимает нужную часть и отдает ее посетителю сайта, что бы он увидел наш текст. А без этого страницы не покажется посетителю. Такой процесс заставляет тормозить загрузку сайта на 0,2-1 секунду в зависимости от сервера.
Зачем нам такой долгий путь, если мы можем загрузить шрифты себе на сервер и не запрашивать их у Гугла. Однако процесс загрузки шрифтов, оптимизации и внедрение на сайт не простой. Наверное скоро напишу отдельную статью, а пока читаем классный гайд — здесь.
10. Защита сайта от взломов
Последнее, что осталось сделать это защитить сайт от различных атак, которые могут сильно нагружать сервер и заставлять тормозить сайт. А владелец сайта может даже не подозревать, что сайт тормозит из-за постоянных атак. Плагин All In One WP Security позволит отвести практический любую угрозу от вашего сайта. Он может предотвращать спам в комментариях, поменять страницу входа, установить файрволл, защитить файлы от взлома, защитить базу данных и поменять пароли и доступы к самым нужным файлам.
Ну а если вас заинтересовала тема полной защиты сайта, тогда рекомендую прочитать — Как защитить WordPress в 2016 году.
Надеюсь, что данная статья будет полезна не только новичкам, но и профессионалам, которые решили значительно ускорить свой сайт. А какие результаты вышли у меня? Изначально сайт загружался за 12 секунд, мне удалось это время сократить до 3-ех секунд (загрузка последующих страниц менее секунды).
Облачные сервизы очень дорогие для обычных блогеров.
Сперва нужно ускорить сам сайт,снизив нагрузку и удалить все то лишнее которые грузит сайт и не имеет право жить
Вот мой вердикт,ускоряйте внутри а потом уже проверите и можете ускорить из вне через облако!
Здравствуйте! Скажите пожалуйста, есть ди смысл устанавливать эти плагины
1, WP-DBManager
2. WPBase Cache
Если уже установлен и настроен W3 Total Cache. Там же есть настройка по сжатию базы данных. Или же они помогут еще ускорить сайт?
И еще у меня установлен плагин wp-Optimize? он заменит их или там есть что лучшее?
Можно CDN подключить и решить большую часть проблем. Лично для своих сайтов использовал w.tools, т.к. они кешируют динамический контент. За счет этого страница не генерится постоянно CMSкой, а отдается из кеша уже подготовленной. В итоге и нагрузка на сервер минимальна, и сайт в разы быстрее. + У них охват по регионам РФ хороший.
а вы не сможете сделать ускорение сайта за оплату?