оптимизация js кода wordpress
Как ускорить загрузку JS скриптов, CSS и HTML сайта WordPress: плагин Autoptimize
Вступление
Плагины WordPress, отличные инструменты улучшить функционал сайта, имеющие один существенный недостаток. Плагины увеличивают, а в некоторых случаях, значительно увеличивают, скорость загрузки страниц сайта.
Почему плагины увеличивают скорость загрузки
Почти каждый плагин WordPress при установке подключает свои стили и скрипты JS. Традиционно JS подключаются в header сайта, что увеличивает количество запросов на сервер еще до загрузки основной страницы.
Особенно «ругается» на это поисковик Google. На сервисе проверок скорости загрузки сайта ( https://developers.google.com/speed/pagespeed/insights/ ), не оптимизированные скрипты и стили относит к серьезным ошибкам, требующим немедленного устранения.
Как решается проблема стилей и JS на WordPress
Теоретически, проблему нескольких JS скриптов и нескольких стилей CSS можно решить их объединением. На практике, можно использовать популярный и работающий плагин Autoptimize.
Плагин Autoptimize «обучен» сжимать JS скрипты стили объединив их в один файл.
Принцип работы плагина Autoptimize (оптимизировать JS и CSS WordPress)
Плагин Autoptimize помогает оптимизировать JS и CSS WordPress следующим образом. Перед выводом страницы, плагин обходит HTML код страницы и находит все js файлы. Найдя их, он их вырезает и пишет их в общий файл. Ссылку на этот файл плагин размещает в конце страницы. То же действо плагин проводит с фалами стилей css, но ссылки на них плагин ставит в начале страницы.
Недостатки плагина Autoptimize
Более того, по умолчанию размер кеш-памяти плагина ограничена и приходится её часто чистить. На особо посещаемых сайтах я увеличил эту папку до 10Гб (об этом чуть ниже), увеличение скорости загрузки не вижу.
Кроме этого, автор плагина рекомендует его использование и отсутствие конфликтов с плагинами: WP Super Cache, HyperCache, Comet Cache, KeyCDN’s Cache Enabler, WP Fastest Cashe и WP Speed of Light.
Настройка плагина Autoptimize
Я уверен, вы знаете, как установить плагин. Страница плагина: https://ru.wordpress.org/plugins/autoptimize. Настройки плагина элементарные, но всё-таки пройдемся по ним.
Вся настройка заключается в выделении чек боксов. В принципе, все дополнительные настройки плагина, выставлены в максимально приемлемом режиме. Поэтому они и скрыты. Я выделяю три основных чекбокса JS, HTML, CSS и сохраняюсь. В манипуляциях с дополнительными настройками эффекта в ускорении не заметил.
Важно понимать! Дополнительные настройки помогут вам, если вырезка JS из header приводит к неправильной загрузки шаблона и после установки плагина ваш сайт отражается некорректно.
Это может быть важно! Я не привожу советов по тонким настройкам плагина, потому что, на каждом шаблоне, сервере плагин может вести себя по-разному. Экспериментировать с настройками придется самостоятельно. В экспериментах, не забывайте чистить кеш плагина и учитывать, что ускорение не моментальное, кеш должен накопиться.
оптимизировать JS и CSS WordPress: Настройки плагина Autoptimize
Как увеличить размер cash хранилища Autoptimize
Недавно обнаружил, что размер cash хранилища Autoptimize, мягко сказать, небольшое. На 500 Mb, значок плагина в toolbar начинает желтеть, а к 750 Mb, начинает мигать красным. Для большой посещаемости сайта, хранилища хватает на 2-3 дня. Это значит, что вся работа плагина сводится к нулю.
Решение проблемы вы можете найти на сайте автора. Я его озвучу и подтвержу из практики.
Чтобы увеличить, размер cash хранилища плагина Autoptimize, я делаю следующее:
С помощью плагина вставляю один из следующих Snippet (на выбор):
Размер кеша 1Гб
Размер кеша 10Гб
Этим я увеличиваю размер cash хранилища Autoptimize до 1 Gb или до 10 Gb.
Проблема чистки кэш плагина Autoptimize
08-04-2020. Со времени написания статьи плагин значительно изменился. Добавлена функция ленивой загрузки изображений и работа по оптимизации изображения не стороннем сервере. Плагин стал вновь радовать работой, но осталась проблема автоматической читки кеша.
Решить её можно так. Рекомендую, пока работает, использовать плагин «Autoclear Autoptimize Cache». Он чистит именно кеш этого плагина по настройкам объёма. Работает гарантированно.
Второй вариант можно попробовать через код. Опять используем описанный выше плагин Code Snippet и делаем с его помощью такой сниппет:
Альтернативные плагины оптимизировать JS и CSS WordPress (плохо обновляются)
Оба плагина: This plugin hasn’t been tested with the latest 3 major releases of WordPress.
На этом всё! Я надеюсь вам удалось оптимизировать JS и CSS WordPress и ускорить его загрузку.
Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на WordPress
Оптимизация HTML и удаление неиспользуемого кода CSS, JavaScript на сайте WordPress — это комплексный подход к работе. Занимает немало времени, сил, терпения, поиска необходимой информации.
А цель одна — ускорить работу сайта, загрузку его страниц, повысить его производительность.
Еще раз напомню о требованиях Google PageSpeed, которые вступят в силу в марте 2021 года.
Читайте в статье — Оптимизация сайта под требования PageSpeed Insights.
Не все мы программисты. Но, это один из способов прокачать свои навыки и знания в сайтостроении. Поглубже узнать — где и какой код или скрипт находится, и за какие функции отвечает.
WordPress постоянно обновляется, а сейчас довольно кардинально — все ждут выхода, заключительной на данный момент, версии 5.7.
Обновление и оптимизация кода CMS WordPress происходит регулярно, пополняется его функционал.
Но это только движок.
Немаловажную роль играют темы (шаблоны), которые мы устанавливаем.
От их выбора зависит, как будет выглядеть наш сайт, выполнение тех или иных задач, запланированных нами. Скорость его загрузки и производительность.
Да, в депозитарии WordPress вы можете найти легкую, оптимизированную тему, но ее функционал будет ограничен.
Разработчики же Премиум-тем и таких же Премиум-плагинов, стараются максимально расширить их функции. Дать в руки пользователей множество инструментов, удовлетворить их творческие потребности.
Все это достигается насыщением кода различными Java-скриптами и стилями CSS.
Вот тут-то и возникает множество проблем при тестировании страниц сайта на PageSpeed Insights.
Неминуемо появляются предупреждения:
Но это только верхушка айсберга. Если вносить какие-либо изменения в Редакторе темы-шаблона — минимизировать HTML или CSS, удалять неиспользуемые коды — проку от такой оптимизации будет мало.
Тема сайта и плагины часто обновляются и все изменения окажутся напрасными.
А обновлять их необходимо обязательно.
Можно, конечно, поставить, в дополнение, дочернюю (Child) тему.
В ее Редакторе имеются две вкладки — Таблица стилей общая (style.css) и Функции темы (functions.php).
Кое-что сделать можно, но очень осторожно, необходимы определенные знания.
Кардинально что-то изменить здесь вряд ли получиться — только дополнить определенными функциями.
Проблема многофункциональных тем-шаблонов и Премиум-плагинов в том, что их некоторые коды CSS и JavaScript могут подгружаться на всех страницах сайта, а не только там, где это необходимо.
Наша задача, на каждой отдельной странице или записи сайта:
Вот этим мы и займемся. Для этого будем использовать плагин для WordPress Asset CleanUp Pro.
Плагин WP Asset CleanUP Pro для оптимизации HTML и удаления неиспользуемого кода CSS, JavaScript.
Плагин Asset CleanUP Pro позволяет избирательно удалять неиспользуемые стили CSS и Java-скрипты с любой страницы или поста, размещенных на сайте.
Минифицировать (сократить) и объединить загруженные файлы CSS и JS, чтобы уменьшить общий размер страницы и количество HTTP-запросов.
Производить очистку исходного кода HTML, настроить предварительную загрузку локальных и Google шрифтов. Выгрузку общих файлов CSS и JS по всему сайту.
Есть функция кеширования. Но, как для меня, лучше бы ее не было.
WP Asset CleanUP Pro отлично взаимодействует с более мощным плагином для кеширования — WP Rocket. Возможно, для некоторых легких сайтов и Asset CleanUP будет достаточно.
Проблема в том, что при предварительном тестировании сайта в PageSpeed Insights, файлы кеша очень мешают. Приходится делать полную очистку.
Есть две версии этого плагина. Бесплатная — Asset CleanUp, которую можно скачать с депозитария WordPress, и платная версия — Asset CleanUp Pro.
Минимальная цена базовой версии на один сайт начинается от трех с половиной тысяч.
Их отличие, друг от друга, заключается в том, что в версии Pro можно настраивать асинхронную (async) или отложенную (defer) загрузку кода CSS и JavaScript. Производить более тонкую настройку скриптов и стилей.
В бесплатной — только удаление кода.
Установка плагина Asset CleanUp Pro.
Установка плагина Asset CleanUp Pro не должна вызвать каких-либо осложнений. Все делается из Админ-панели WordPress.
Есть некоторые нюансы при установке Pro-версии. В скачанном архиве могут быть дополнительные файлы. Архив нужно распаковать в отдельную папку, и уже устанавливать, непосредственно, архив самого плагина.
А теперь, самое главное, что нужно сделать на сайте перед использованием плагина:
Обязательно посмотрите, чтобы не дублировались функции Webcraftic Clearfy и Asset CleanUp Pro.
Общие настройки Asset CleanUp Pro для HTML, CSS, JavaScript.
В Панели Общих настроек Asset CleanUp Pro для HTML, CSS, JavaScript необходимо активировать нужные нам пункты.
Плагин на английском языке — это не проблема. Открываете его в браузере Google Chrome. Правой кнопкой вызываете Контекстное меню — Перевести на русский.
Самый точный и адекватный перевод.
Я буду исходить из своих настроек — думаю, они подойдут большинству.
Stripping the «fat» (Удаление «жира»).
Читаете внимательно советы по использованию.
Принимаете соглашение.
Plugin Usage Preferences (Настройки использования плагина).
Активируем следующие пункты:
Test Mode (Тестовый режим).
Подходит для отладки, когда вы проходите методом проб и ошибок при удалении ненужных CSS и JavaScript на своем веб-сайте.
Изменения видны только вам — в том же браузере (внимательно читайте инструкцию).
Optimize CSS (Оптимизировать CSS).
Активация следующих опций:
Optimize JavaScript (Оптимизировать JavaScript).
Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.
Сообщите мне, когда будут добавлены новые комментарии.
Сайт на WordPress VS PageSpeed Insights
В это статье мы расскажем как оптимизировали конкретное WordPress веб приложение. Какие действия были выполнены чтобы попасть из красной зоны оценки PageSpeed Insights в зеленую, тут будет мало общих рекомендаций универсальных для любых платформ и приложений, которыми пестрит поисковая выдача, a большe описание действий, которые повлияли на результат в рамках конкретной задачи.
PageSpeed Insights — противоречивый инструмент по оптимизации скорости загрузки веб страниц от Google, который за свою семилетнюю историю много раз менял свои алгоритмы, интерфейсы, все время дорабатывался, нещадно хейтился и даже закрывался, но в 2021 году по прежнему более чем актуален и находится в особом почете и уважении у SEO специалистов. И вовсе не потому что является самым объективным и точным, есть много других отличных инструментов 1, 2, 3, а потому что за ним стоит сам “великий и ужасный” Google.
Итак, у нас задача оптимизировать сайт на CMS WordPress до зеленой зоны.
Сайт несложный с обычной судьбой, был сверстан под нужды заказчика и натянут на wp+woocommerce, в процессе нагружен 40+ плагинами ( что для сайтов на wp обычное дело ).
PSInsights оценивает ваш сайт отдельно для мобильных и десктопных устройств и делит их на три зоны.
Изначально наш сайт имеет такие грустные оценки.
Для тех кто хочет 100/100
Эта статья для вас не подойдет, можно поискать в разделе фантастика, если такой есть на хабре. Современные сайты, а тем более сделанные на CMS обвешаны огромным количеством js и css библиотек, в случае с WP — это почти всегда много плагинов, каждый из которых может что-то добавлять свое на ваш фронт, все это делает сайт огромной неповоротливой махиной и ждать от нее космических скоростей не стоит.
Хотя пустая установка стандартной темы WP twentytwentyone еще выдает желаемую сотню.
Но если помимо этого вы ещё захотите добавить на страницу хоть что-то, то это что-то будет нуждаться в оптимизации.
Этапы оптимизации
Удалим лишние плагины
Современный WP это зоопарк различных плагинов, каждый из них это отдельный мир и экосистема. Любой плагин потенциально может добавлять свой функционал на фронт, даже если изначально он задуман только для административной части сайта. Изучать код всех плагинов и оценивать потенциальную угрозу для производительности займет слишком много времени, поэтому действуем от простого к сложному. Удаляем по максимуму все плагины, доводим сайт до нужной зеленой отметки и потом ставим по одному обратно, отслеживая как каждый из них влияет на оценку PSInsights, если влияние присутствует, то думаем над заменой плагина аналогом или отказаться от него.
В нашем случае мы удалили 22 из 40 плагинов и наши цифры чуть повеселели, хотя по прежнему далеки от поставленной цели.
Поработаем с изображениями
Наш проект имеет три разных предупреждения касающихся изображений на сайте.
К сожалению это три разных проблемы и одной серебряной пули, которая решит все скопом я найти не смог. Поэтому решаем их поэтапно.
Этап 0. Добавим lazy load для изображений
PSInsights оценивает только те изображения, которые смог увидеть, так зачем ему видеть лишнее? Давайте отложим загрузку изображений, которые находятся ниже начальной загрузки экрана.
WP версии 5.4 добавил поддержку lazy load изображений из коробки, в теории просто добавляем атрибут loading=»lazy» к тегу изображений и должно работать, на практике для PSInfights срабатывает не всегда, поэтому ставим плагин autoptimize, который нам еще пригодится ниже для оптимизации js и css кода, и активируем в нем lazy load загрузку изображений.
Этап 1. Настройте эффективную кодировку изображений
По факту это значит что изображения недостаточно оптимизированы.
У PSInsights свой алгоритм по которому он определяет что такое достаточно. К сожалению, все топовые плагины оптимизации изображений до конца не могут оптимизировать изображение под их алгоритм.
Я воспользовался этим решением, оно позволяет в бесплатной версии оптимизировать все изображения сразу по нажатию одной кнопки. У нас еще могут остаться предупреждения про кодировку после этого, но вес основной части изображений будет меньше.
Этап 2. Используйте современные форматы изображений
Тут все не так просто, взять и заменить форматы изображений на webp скопом не получиться, поддержка этого формата браузерами все еще оставляет желать лучшего.
Для конвертации всех изображений в webp формат я воспользовался этим плагином, который в папке uploads рядом с существующими изображениями создает новые с расширением webp. То есть, если раньше у вас было изображение foo.jpeg, то сейчас рядом с ним появилось foo.jpeg.webp
В теории в таких плагинах есть настройка, которая сама подменяет изображения на webp и показывает нужный формат в зависимости от браузера, на практике у меня предупреждения про формат все равно остались даже после активации настройки.
Поэтому, в тех местах где lazy load не смог скрыть изображения, я вручную заменил тег img на тег picture, как это работает хорошо описано тут.
Код замены привожу ниже, все php переменные естественно должны быть объявлены перед тегом.
Этап 3. Настройте подходящий размер изображений
Это предупреждение появляется если вы пытаетесь загрузить изначально очень большое изображение, а показываете его как маленькое. Тут опять действовать придется точечно и в тех местах где lazy load не смог скрыть изображения, пробовать подключать другие размеры картинок из существующих.
На практике может оказаться так, что существующих недостаточно, тогда придется еще создавать свои отдельные. Для этого объявляем новый размер в functions.php вашей темы.
Затем любым плагином, который может ресайзить изображения, создаем новые размеры и подгружаем их в тег picture, который вы вставляли выше.
После проведенных оптимизаций с изображениями, наши балы заметно повеселели, а для десктопа мы уже попали в желаемую зеленую зону.
Переходим к следующему этапу оптимизации.
Сократим количество js и css на страницах
У нас осталась группа рекомендаций по оптимизации скорости загрузки, все из них относятся к js и css файлам.
Как видим основные рекомендации это размер js и css библиотек. Нужно определить кто эти библиотеки нам на фронт добавляет. Открываем вкладку network панели хрома, выбираем отображение только js файлов, затем обновляем страницу через ctrl + F5. После этого сортируем по размеру файлов, чтобы выявить самые тяжелые, от которых потенциально исходит самая большая угроза.
В итоге видим что самые тяжелый файл нам добавляют:
К сожалению лишние тут выявить сложно, современный веб ресурс сложно представить без этих сервисов, но тем не менее что-то мы должны предпринять.
Отключаем плагин оператора, он добавляет критично много, его в дальнейшем на продакшене либо заменим на другой, либо добавим таймаут на загрузку.
Следующий потенциальный враг это фейсбук пиксель, добавляем таймаут на его загрузку, да наверное это может сказаться на объективности его данных в дальнейшем, но тут уже нужно искать компромисс, что вам больше нужно, скорость загрузки ресурса или объективность данных этого сервиса.
Также отключаем всякие мелочи по типу эмоджи wp, которыми мы не пользуемся на нашем фронте
После этого останется устранить ресурсы блокирующие отображение.
Если все ваши стили и скрипты в теме и плагинах подключены правильно через wp_enqueue_style и wp_enqueue_script соответственно, то устранить блокировку поможет ранее установленный плагин autoptimize, просто активируйте соответствующие галочки.
После этого может возникнуть проблема с отображением ресурса в первые секунды загрузки, для этого нужно критично важный css отображать выше. В нашем случае мы просто возмем из bootstrap.css часть стилей отвечающих за отображение сетки и добавим их в соответствующее окно настроек.
Под капотом плагин соберет все подключаемые файлы js и css в два больших файла, минифицирует их и отдаст на фронт.
После оптимизаций связанных с js и css наши цифры стали совсем близки к цели.
У нас 80+ для мобильных, и стабильно зеленая зона для десктопа.
Предупреждения по сокращению размеров js и css кода по прежнему висят, но их мы больше оптимизировать не будем, потому-что это будет очень трудозатратно по времени, и не нужно в рамках нашей задачи.
Остался последний рывок и тут уже не обойтись без специфических оптимизаций для конкретного проекта.
Специфические оптимизации для конкретного проекта
На самом деле такие спец оптимизации мы уже приводили выше, все проекты уникальны по своему и в вашем ошибки выдаваемые PSInsights могут существенно отличаться, тогда вам нужно вырабатывать свой алгоритм их решения.
В нашем случае для финальной оптимизации мы обратим внимание на результаты “Имитация загрузки страницы”, эти параметры очень важны. Нужно понимать что вы можете выполнить все рекомендации из раздела “Оптимизация” и “Диагностика”, но если при этом параметры имитации загрузки страницы остаются в красной зоне, то высоких оценок вы все равно не получите. Ваш сайт должен стать реально быстрее в процессе оптимизации, согласитесь что это довольно справедливое требование.
Итак в рамках нашего проекта мы видим, что одним из факторов отмеченных красным является “Largest content paint”
Логически глядя на страницу можно легко догадаться какой элемент является самым большим на странице, в нашем случае есть подозрение, что это верхний слайдер запускаемый slick библиотекой. Но мы не будем полагаться только на интуицию, а доверимся инструментам. Открываем панель хрома, вкладку “Performance” и запускаем тест, затем кликаем по кладке “LCP”. В итоге виновник найден. Подозрения подтвердились — это наш верхний слайдер.
При загрузке страницы юзеру неважно слайдером будет наше первое изображение изначально или картинкой. Поэтому для решения проблемы мы заменяем слайдер на картинку, ждем полной загрузки страницы и затем запускаем скрипт инициализации слайдера, а после этого прячем изображение.
В коде это будет выглядеть примерно так. Добавляем параллельно c html слайдера тег изображения и вставляем в его src первое изображение слайдера
Затем в js помещаем инициализацию слайдера в таймаут и скрываем изображением после инициализации
После этих оптимизаций юзер видит при загрузке вначале изображение, a потом через время слайдер. PSInsights видит только изображение, которое грузится гораздо быстрее чем весь слайдер. В итоге все счастливы и наши балы оценки сияют зелеными цифрами.
Подведем итоги. Задача выполнена, все страницы нашего проекта в зеленой зоне. Конечно еще можно провести много всякий оптимизаций:
И еще много чего, но на сегодня цель достигнута, сайт действительно стал грузиться быстрее и PSInsights оценивает его высоко.
Ускорение сайта WordPress в 2021 году
Пришло время для актуализации информации и полного обновления статьи с учетом полученного опыта, потому, размещаю новую версию, актуальную для 2021 года. По крайней мере, приведённые здесь способы до сих пор работают.
Ускорение сайта на WordPress — задача довольно сложная и нетривиальная, например, если требуются хорошие результаты для PageSpeed Insights. Причин для возникновения сложностей довольно много:
Довольно сложно настроить кэширование. Например, Drupal в этом плане дает гораздо больше возможностей, к тому же из коробки.
Отсутствие встроенных методов асинхронной и отложенной загрузки скриптов. Постоянно приходится выдумывать костыли.
Для расширения функционала может потребоваться немалое количество плагинов, которые также замедляют веб-приложение.
Встроенный функционал довольно велик, очень трудно обрезать лишнее, не порушив структуру системы управления содержимым, на Drupal, несмотря на большую универсальность, отключать лишние функции проще.
Еще куча всякой мелочёвки, которою рассмотрим в процессе. Итак, пора перейти к делу. В данной статье мы рассмотрим ускорение для ПК, а также оптимизацию WordPress для мобильной версии сайта. Кстати, рекомендую не концентрироваться только на PageSpeed Insights, лучше замерять с помощью GTmetrix или Pingdom Tools.
Нужна помощь? Не проблема, напишите мне на почту: admin@workinnet.ru
Начало ускорения
Оптимизация WordPress начинается с теста скорости. Тут все довольно просто, есть такие инструменты, как PageSpeed Insights от Google, также Pingdom Tools, GTmetrix. Рекомендую использовать все, они покажут, какие слабости есть у сайта. Ниже скриншоты тестов. Вроде все неплохо, за исключением гугловского инструмента. К сожалению, вы запросто можете оказаться в ситуации, что от вас требуют высоких результатов в данном тесте, не понимая даже, что он собой представляет. Конечно, можно улучшить сильнее, но тогда пострадает дизайн. В целом, в мобильной версии у меня от 60 до 64, в ПК от 87 до 93. Когда как. Но в основном проблема заключается в партнерках, счетчиках и частично с файлами js и css. В общем, многое исправить будет нелегко, да и не нужно.
Неоднократно наблюдал, что «зеленые» сайты грузятся визуально долго, а «желтые» прогружаются заметно быстрее. Так что относитесь к результатам инструмента с некоторой долей скептицизма.
И небольшое предостережение. Не старайтесь добиться самых высоких результатов. Иногда полезнее пожертвовать производительностью, но сделать красивый сайт и дать пользователям необходимое, чем размещать голую страницу без красивых шрифтов и с минимумом изображений. Делайте все в меру, не гонитесь за цифрами.
Кстати, специально для тех, кто решит протестировать мой сайт, публикую результаты теста без использования рекламы от Яндекс.
А на скриншоте ниже наглядно демонстрирую, что реклама творит со скоростью сайта. К сожалению, это так. Кстати, Adsense меньше замедляет сайт.
Так что, если у вас на сайте реклама, то скорость будет на порядок ниже. И ничего с этим поделать не сможете.
Без плагинов
В первую очередь стоит настроить все, что возможно, без плагинов, дальше все это придется залакировать кешированием и прочими веселыми элементами. Для начала определимся с выбором хостинга.
Хостинг
Раньше я держал сайт на Fozzy, но сейчас решил переехать на Beget, это самый шустрый хостинг из всех, что я пробовал. По крайней мере претензий к данному хостингу нет. Так что рекомендую.
К выбору хостинга стоит отнестись серьезно. Простые сайты размещал на Reg.ru, вполне хватало. Конечно, ходят легенды о том, какой хостинг плохой. Но на деле он такой же как все. Но есть несколько но:
При аналогичной мощности у других хостеров чуть дешевле.
Малое количество процессорной мощности, тот же Fozzy предлагает 120cp (процессорные минуты, учтите, это очень неинформативное понятие, но хостинги используют именно его) вместо 58. А цена даже чуть ниже.
Невозможно настроить исходящие письма без костылей в виде плагинов для WordPress. Впрочем, «коробочный» функционал у ВП не очень, так что плагины лучше всего ставить по умолчанию.
В общем, вот пара скриншотов для сравнения.
Честно говоря не впечатляет. Одни и те же сайты у меня шустрее работают на Макхост.
Есть еще один интересный хостинг: https://fozzy.com/. Fozzy интересен тем, что использует веб-сервер LiteSpeed. Соответственно, это отличное кеширование, шустрое реагирование на запросы. Данный хостинг способен обеспечить максимальную производительность на ресурсах с большим количеством повторных посещений. В общем, если рассчитываете, что к вам будут возвращаться люди, то он быстрее любой другой связки. Но для новых посетителей Apache+Nginx будет пошустрее. Из панелей есть cPanel, ISP и DirectAdmin. Все вполне удобны. Цена за месяц на тариф «5 быстрых сайтов» — 199 рублей, короче, самый дешевый вариант. Если решите, что вам данный хостинг подходит больше, то вот промокод на скидку: 0f42e170-1599-4410-8934-83f003aa61df
Кстати, когда-то сидел на McHost, но в итоге я с Макхоста переехал на Fozzy. Производительность чуток получше оказалась, а цена на 50 рублей ниже. К тому же панель DirectAdmin мне больше нравится, чем самописная панель на Макхост.
Ладно, с хостингом определились, на самом деле выбирайте любой наиболее удобный, где есть поддержка PHP версии 7.4 (а вскоре и 8.0, но пока что полноценная поддержка в WP не реализована), Apache+Nginx или LSAPI. Не обязательно выбирать то, что предложил я. По крайней мере, наиболее шустрый вариант для первоначальной загрузки — Apache + Nginx. А вот если есть постоянные посетители (причем много), то эффективней окажется LSAPI, ибо он значительно ужимает байты при повторной загрузке и лучше подходит для формирования статического кеша. В любом случае, чистый Apache проигрывает обоим вариантам.
Итак, добавляем следующее содержимое:
Версия PHP и обновление WP
Потому лучше обновить WP и плагины. Если есть серьезно устаревшие, которые давно не актуализировались, то заменить на другие. Но учтите, существуют плагины, которые не обновлялись по несколько лет, а с кодом у них все в порядке. Смотрите внимательнее. Кстати, актуальная версия WordPress работает стабильнее и шустрее, чем предыдущая ветка, потому рекомендую не откладывать переход. Если у вас версия 4 с копейками, то самое время задуматься о переходе на 5.8. Чем дольше ждете, тем сложнее будет обновиться.
Контент
Не все обращают внимание на данную сторону оптимизации, а она крайне важна. Контент имеет определенный вес. Изображения, разные файлы, видеозаписи, текст в конце концов. И если видео можно загрузить на Youtube и выдавать оттуда, а разные файлы не будут ничего весить до запроса пользователя к ним, то изображения вызывают большую проблему.
Сколько раз наблюдал несжатые картинки с весом более мегабайта. Когда таких накопится критическая масса, то страница может весить под 15 МБ. Итак, что рекомендуется делать:
Менять размер картинок на оптимальный. Например, 1024 X768 пикселей вместо 4K.
Использовать сжатые форматы. Например, JPEG. PNG весит значительно больше. Также повсеместно внедряется поддержка Webp, который гораздо лучше сжат, чем PNG, полноценная поддержка данного формата есть уже у большинства браузеров, к сожалению, пока что у многих устаревшие версии, а подключение Webp с помощью плагинов очень кривое. В общем, лучше пока не рыпаться и остановиться на JPEG.
Дополнительно сжимать, с помощью утилиты FileOptimizer на компьютере. Также есть плагины, позволяющие сделать это. Тот же Smuсsh. Но я предпочитаю сжимать сначала на компе. Но если на сайте куча неоптимизированных изображений, смело ставьте.
Использовать миниатюры и открывать полноразмерную картинку в лайтбоксе.
Так что, позаботьтесь, чтобы на страницах не было ничего «тяжеловесного», особенно изображений. И дополнительно рекомендую воспользоваться функциями ленивой загрузки ( Lazy Load ), кликайте по ссылке, там все подробно описано.
Сеть доставки контента. Фактически, весь статический контент размещается на сторонних серверах, а посетителю выдается из наиболее близкой к нему точки. Можно отправлять посредством CDN:
предварительно c генерированные html
Система проста: ваш контент дублируется на множество разных серверов и при запросе к сайту, все ресурсы выдаются пользователю с наиболее близкого по местонахождению. Значительно сокращает пинг, но удовольствие недешевое. Подойдет только крупным площадкам, способным окупать такие затраты (если в CDN вообще будет смысл), а также организациям, желающим плотно застолбить регионы. Если желает двигаться по Европе и США, то вам подойдёт бесплатный CDN от Fozzy или Cloudflare.
Ускорение сайта WordPress на уровне Back-end
Т еперь пришло время улучшить работу WP, для этого понадобятся минимальные знания, ибо я предоставлю готовые решения, способные значительно упростить жизнь. Начнем, конечно же, не с самого простого.
Выбор темы
Это ключевой момент. На самом деле движок WordPress довольно-таки шустрый. Его ругают за то, что из «коробки» ничего нет, но я считаю это правильным. Такой подход дает большую вариативность последующей кастомизации. Поставил плагин для SEO какой нужно, добавил функционал, который необходим именно для целевого проекта.
Но не только плагины грузят сайт. Частенько, основным фактором нагрузки становится тема. Стандартные темы WP практически не содержат в себе ничего лишнего, соответственно, не требуют колоссальных ресурсов для генерации страниц. Но ведь функционал данных тем может показаться недостаточным?
И тогда начинается поиск. Рекомендую следующее. По возможности не брать темы с большим количеством скриптов, где все элементы построены на AJAX. Да, они выглядят красиво, но чтобы обеспечить широкий функционал, могут быть подключены сотни разнообразных скриптов, которые будут с трудом грузиться. Да и подход к SEO при использовании AJAX несколько сложнее.
Чем чище тема, тем лучше. Обращайте внимание при выборе платных премиальных тем. Часто разработчики стараются удовлетворить максимально широкие потребности конечного потребителя, так что в них будет понапихано всего и побольше. Например, Avada, JupiterX. Там будут конструкторы тем, разнообразные функции для поддержки встроенных слайдеров, некоторые вообще не будут работать без тяжеловесных плагинов.
Лично предпочитаю брать темы из официального репозитория. Простые, без излишеств и слишком широкого функционала. Все, что нужно будет добавить, решу с помощью плагинов или собственного кода.
Плагины
Существует распространенная болезнь среди новичков в WP – плагинобоязнь. Все стараются накодить самостоятельно. Даже когда в этом нет необходимости. С одной стороны правильно, лишних инструментов стоит избегать. Многие популярные плагины включают в себя множество излишеств, становятся очень тяжелыми.
Если нужна только одна функция и плагина под нее нет, то тогда есть смысл создать нужный код самому. На самом деле, не важно, куда внесете код. В виде плагина или в functions.php он будет требовать одинаковое количество ресурсов. Перебарщивать с плагинами тоже не стоит. Чем их больше, тем больше ресурсов потребуется на работу, что может заметно замедлить сайт.
Но использовать можно, если они закрывают ваши потребности. Не бойтесь плагинов, но по возможности урезайте их количество. Чтобы ускорить сайт, уберите лишние. Ищите замены, в которых функционал консолидирован. Тестируйте, пробуйте альтернативы.
Оптимизация JS и CSS
Скрипты, порой, основная часть нагрузки на сайт. Каждый скрипт генерирует запросы, имеет определенный вес, соответственно, притормаживает сайт. Многие рекомендуют объединить скрипты в один файл и построить зависимости для него. Это очень сложный метод, способный впоследствии принести массу проблем.
В отдельно файле придется самостоятельно обновлять код, а после обновлений плагинов и темы все зависимости будут слетать и их придется строить заново. В общем, муторный метод. Поговорим лучше о тех, что более просты в реализации и не требуют огромных затрат времени на поддержку.
Отложенная и асинхронная загрузка JS
Самый простой вариант ускорить сайт WordPress — сделать загрузку скриптов более динамичной. Для этого отличным решением станет отложенная и асинхронная загрузка. Если раньше я обходился простым универсальным кодом, то со временем задача усложнилась и пришлось принять волевое решение и распределить скрипты ручками.
Как правильно все это настроить я рассказал в отдельной статье. Рекомендую ознакомиться, ведь там размести наиболее правильные с точки зрения WordPress методы оптимизации. Кликайте по заголовку.
Оптимизация CSS
В данном случае все несколько сложнее, чем с JS, для данной задачи лучше использовать плагины, о которых рассказал по ссылке. Но тут все сводится к объединению и минификации файлов стилей. Есть, конечно, и кастомные решения, но в отличии от скриптов, решение с помощью плагина получается гораздо более эффективным.
Оптимизация HTML
Все тоже сводится к минификации и удалению некоторых тегов и атрибутов. Задачу также целесообразнее доверить специальным плагинам, ведь прописать все необходимые алгоритмы довольно трудоемко. По ссылке в заголовке о CSS есть информация об этом.
Перенос скриптов в подвал
Да, убрать скрипты из head и перенести в подвал тоже можно. Достаточно добавить в файл functions.php такой код:
Плагины для ускорения WordPress
Этим «исчадиям ада» решил посвятить отдельную статью. Там много сложных настроек, к которым стоит ответственно относиться, потому, переходите по ссылке в заголовке и вникайте. Функционал попросту огромен, лично я использую PageSpeed Ninja. Мой любимый инструмент.
Полетели!
Как видите, методы для ускорения сайта на WordPress есть, главное, грамотно их использовать и не перебарщивать. Будем надеяться, что зайдя к вам на сайт, я моментально получу страницу, а не буду ожидать пол часа, пока подгрузится все.
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 4.5 / 5. Количество оценок: 13