Ускорение сайта на WordPress — разгоняем максимум скорости

Итак решил немного заняться ускорением сайта на примере ok2web.ru. Для начала я сниму несколько показателей, которые определяют его скорость, далее проведу некоторые эксперименты по разным направлениям и после этого сравню результаты. Для проведения экспериментов по ускорению сайта установлена тема NewsPaper, которая очень качественно сделана и популярна среди разхработчиков информационных сайтов на WordPress. Но по умолчанию в PageSpeed у меня показывает 69 скорость для мобильных и 80 скорость для компьютеров. Вроде бы неплохой результат, но тем не менее попробуем добиться большего.

Начало снимаем результаты скорости сайта

Итак для начала мы проверим сайт на трёх сервисах оценки скорости сайта, это гугл PageSpeed, gtmetrix, pingdom. Как правило этих трёх сервисов хватает чтобы оценить скорость работы сайта. Ну и конечно в консоли снимем результаты. 

Результаты проверки в сервисах перед началом ускорения

Gtmetrix результаты проверки

Ускорение сайта на WordPress - разгоняем максимум скоростиУскорение сайта на WordPress - разгоняем максимум скорости

Мы видим, что показатели мягко говоря слабоваты. Оценка 78% по PageSpeed и 59% по Yslow, а общая загрузка идёт за 6.3 секунды, при весе сайта в 1.61 мб и 140 запросов. Попробуем просто повторить еще раз. После повтора результаты одинаковы.

Теперь проверим через Pingdom 

Ускорение сайта на WordPress - разгоняем максимум скорости

Оценка тоже слабовата. на уровне 75% и время открытия 2 секунды. Сайт быстрее 71% других сайтов, что явно маловато. Но пингдом кстати дал неплохую оценку я считаю 

Гугл pageSpeed оценка скорости

Делаю тест и получаю вот такие результаты. 

Ускорение сайта на WordPress - разгоняем максимум скоростиУскорение сайта на WordPress - разгоняем максимум скорости

Для компьютера пишет:

Отличная работа! При создании этой страницы вы учитывали наши рекомендации, поэтому она будет удобной для пользователей.
 
  • Предложения по оптимизации;
  • Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы Сократите CSS
  • Оптимизируйте изображения
  • Используйте кеш браузера

 Мифы и практика скорости сайтов на WordPress

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

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

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

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

Этапы ускорения и результаты

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

Шаблон NewsPaper позволяет добавить в function темы строчку, которая отрегулирует размер. Мы помним, что вес сайта был 1.6 мегабайта и из них графика это 31% веса. 

Для оптимизации я вставляю в function темы следующую строку кода.

add_filter( 'jpeg_quality', create_function('', 'return 75;' ) );

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

После обхода Force Regenerate — картинки наоборот стали весить больше. Пришлось снова их оптимизировать Image Optimizer. Строку оставил, но сделал 2 прохода Image Optimizer, после чего прошёлся снова с проверкой.

Ускорение сайта на WordPress - разгоняем максимум скоростиУскорение сайта на WordPress - разгоняем максимум скорости

Результаты заметно увеличились. Теперь загрузка мобильной вышло на зеленое и стала на уровне 90%, а для компьютеров 85%. Уже неплохо. Особенно хороший рост у мобильных. Но пойдём дальше и сейчас попробуем перекинуть загрузку всех скриптов и стилей в футер страницы.

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

remove_action( 'wp_head', 'wp_print_styles', 8 );

remove_action( 'wp_head', 'wp_print_head_scripts', 9 );

который добавил в function.php темы. Посмотрим что покажет теперь загрузка. Результаты практически не изменились. Так что решать каждому стоит это делать или нет.

А вот какие результаты стали в pingdom после этих оптимизаций.

Ускорение сайта на WordPress - разгоняем максимум скорости

Статью еще буду дополнять по мере проведения новых экспериментов. И конечно хотелось бы услышать ваши рекомендации и пожелания.

Дополнение к статье от 16 ноября 2017.

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

После переборов плагинов и вариаций, я остановился на варианте использования Fastest cache и Autoptimise. C помощью первого я делаю все основные настройки, а второй добивает некоторые мелочи. В итоге мои показатели выросли.

Ускорение сайта на WordPress - разгоняем максимум скорости

А вот какие показатели скорости зафиксировал в панели

Ускорение сайта на WordPress - разгоняем максимум скорости

 

Пока вот. Загрузка на уровне 0.190 миллисекунды. Но в целом я еще думаю займусь этим более детальнее и на уровне сервера возможно установлю varnish.

Еще немного скринов по скорости как стало. Сначала pingdom затем gtmetrix 

Ускорение сайта на WordPress - разгоняем максимум скорости

 

Ускорение сайта на WordPress - разгоняем максимум скорости

5 КОММЕНТАРИИ

  1. Для улучшения скорости сайта ok2web.ru можно применить следующие меры:

    1. Оптимизировать изображения: уменьшить размер файлов изображений, использовать форматы с меньшим весом (например, JPEG вместо PNG), установить атрибуты width и height для изображений.
    2. Включить кэширование: настроить правильные заголовки кэширования на сервере, чтобы браузер сохранял ресурсы на дольше и не загружал их заново при повторных посещениях.
    3. Минифицировать и объединить CSS и JavaScript файлы: удалить неиспользуемый код и комментарии, объединить файлы, чтобы уменьшить количество запросов к серверу.
    4. Оптимизировать базу данных: очистить устаревшие данные, оптимизировать таблицы, использовать кэширование запросов.
    5. Использовать Content Delivery Network (CDN): разместить статические файлы (CSS, JavaScript, изображения) на серверах CDN, чтобы пользователи получали контент из ближайшего по географии сервера.
    6. Установить кеширование на стороне клиента: использовать Local Storage и IndexedDB для хранения и кеширования данных на стороне пользователя.
    7. Оптимизировать серверную конфигурацию: настроить компрессию данных (GZIP), использовать HTTP/2 протокол, вынести статический контент на отдельный домен.

    Применение этих мер может значительно улучшить скорость загрузки и общую производительность сайта ok2web.ru.

  2. Дополнение:
    Для повышения скорости сайта ok2web.ru можно использовать несколько методов. Во-первых, оптимизировать изображения, уменьшив их размер и выбрав оптимальный формат (например, JPEG для фотографий и PNG для логотипов). Также стоит обратить внимание на минификацию HTML, CSS и JavaScript кода для сокращения его размера. Другой полезной техникой является кэширование страниц и ресурсов, чтобы уменьшить количество запросов к серверу. Также можно использовать CDN (Content Delivery Network) для более быстрой доставки контента на разных серверах по всему миру. Наконец, важно удалить все неиспользуемые или устаревшие плагины и скрипты, которые могут замедлять загрузку сайта. Применение этих методов поможет увеличить скорость загрузки и повысить удобство использования ок2web.ru.

  3. Итак, для начала проведения экспериментов по ускорению сайта была выбрана тема NewsPaper на популярной платформе WordPress. Однако, по умолчанию сайт имеет скорость 69 для мобильных устройств и 80 для компьютеров в оценке PageSpeed. Хотя этот результат уже неплохой, мне хочется достичь большего ускорения.

    Для начала я решил снять несколько показателей, которые определяют скорость сайта. Для этого я использовал три сервиса: Google PageSpeed, gtmetrix и pingdom. Также были записаны результаты в консоли.

    После проведения проверки, я обнаружил, что показатели скорости сайта оставляют желать лучшего. Оценка PageSpeed составляет всего 78%, а Yslow — 59%. Время загрузки сайта составляет 6,3 секунды, при этом его размер составляет 1,61 Мб и есть 140 запросов. Мне стало ясно, что необходимо продолжить работу по улучшению скорости.

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

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

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

+ 64 = 72

OK2WEB
OK2WEB
Более 12 лет занимаюсь разработкой и продвижением сайтов. Городские порталы, информационные и новостные сайты. Сейчас в основном разрабатываю интернет магазины и коммерческие сайты. Если у вас есть вопросы пишите, стараюсь оперативно ответить и помочь.

Решение ошибки: WordPress database error Duplicate entry ‘0’ for key ‘wp_posts.PRIMARY’ for query INSERT INTO `wp_posts`

Делал сайт и столкнулся с такой ошибкой. Почитал, поискал, никто не дает решения. Ошибка проявляет себя так, что при добавлении записи на сайте Wordpress у вас нет интерфейса для добавления статьи и по сути исчезает возможность добавлять статьи. Решение оказалось простым. Зашел в базу данных...

Справочник по Fastpanel вопросы и ответы (обновляется)

Fastpanel - это веб-панель управления для хостинга и управления виртуальными серверами. Эта панель предоставляет администраторам серверов и владельцам веб-сайтов набор инструментов для упрощения управления серверами, приложениями и веб-сайтами. Вот основные возможности и предназначение Fastpanel: Управление серверами: Fastpanel позволяет администраторам легко создавать, настраивать и удалять...

Вывод товаров случайным образом — полезные сниппеты Woocommerce

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

Вывод похожих товаров по атрибуту — полезные сниппеты Woocommerce

По умолчанию Woocommerce товары выводятся в виде похожих из товаров в категории. Это неудобно, так как не позволяют вывести в каталоге товаров правильно похожие. Решаем задачу просто с помощью сниппета. Вставляем в function.php или в место для кода вот такой сниппет: В данном варианте выведен...

Seo практики использования возможностей ИИ для работы с сайтом

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

Плагин Wordfence: как настроить сканирование сайта для проверки файлов и страниц

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