О наболевшем: ускорение и оптимизация WordPress
Неделя заказов на ускорение сайта WordPress дала о себе знать. Хороший временный эксперимент для дополнительного заработка с положительным опытом.
Иногда оптимизация WP занимает много времени, сил/нервов и денег клиента, поэтому данными услугами я больше НЕ занимаюсь!
В статье речь пойдет о сайтах на CMS WordPress, в основе которых лежат шаблоны из ThemeForest/TemplateMonster и nulled темы.
Кто обратился
• Владельцы микробизнеса, которые самостоятельно создали себе сайт по урокам на YouTube.
• Владельцы микробизнеса или интернет-блога, которые заказали сайт у фрилансеров за 150$ или меньше.
Основные моменты
WordPress — это система управления содержимым сайта с динамическим контентом и базой данных. Это не конструктор для создания веб-сайтов. И от слова «WordPress» не зависят Ваши позиции в ПС или скорость работы сайта.
При верном подходе к разработке — никто и никогда не пользуется плагинами, чтобы ускорить сайт на WordPress!
Зачем писать заранее лишний код под дизайн шаблона, чтобы его потом сжимать 3-4 плагинами?
Код — это набор символов,его минимум нужно писать грамотно и под дизайн, максимум — сжать в одну строчку.
Популярная проблема
Если у сайта есть проблемы со скоростью, скорее всего, он создан на шаблоне из Themeforest неопытным фрилансером или вами самостоятельно по урокам на YouTube.
А дизайн уникальный? — Да!
Многие владельцы сайтов даже не знают, что у них nulled-шаблон с Themeforest в основе сайта. Как показала практика, исполнители часто переименовывают название тем и убирают ссылки на реальных разработчиков, выставляя работу «за свою».
Themeforest и другие аналогичные маркетплейсы не являются злом. Я ничего не имею против! Там всегда можно найти гениальные дизайнерские решения и качественные шаблоны для запуска сайта в пару кликов/для проверки идей.
Но. Проблематика таких шаблонов в том, что они рассчитаны обычно на 15 и более универсальных демо-конструкций на все случаи жизни. То есть CSS/JS библиотеки шаблона содержат в себе 70% кода, который владельцами сайтов на деле не используется. (У некоторых популярных шаблонов возможно удалять неиспользуемые библиотеки через настройки.)
Помимо данного факта, в любой шаблон встроены 20+ плагинов — от слайдеров и контактных форм до конструкторов или билдеров и интернет-магазинов на Woo.
Даже для виджета фильтра товаров — отдельный плагин. Да и вообще часто встречаю тенденцию у владельцев WP: по всем задачам всегда установка плагина. Иконки в меню — плагин. Поменять цвет иконок — второй плагин. Перевести плагин на русский язык — третий плагин.
Вот так и копится хлам, лишние библиотеки в коде. Иногда до смешного доходит: 3 одинаковых JQuery библиотеки в хедере от разных модулей.
Банальный пример. Contact Form 7 для форм не используется на большинстве страниц, при этом загружает везде свои библиотеки глобально. Тем самым замедляя загрузку страниц сайта.
Разработчики WordPress-тем Themeforest пытаются сделать продукт универсальным для всех сфер бизнеса. Поэтому и имеем 100+ демо страниц после нажатия кнопки «импорт демо», которые глубоко осядут в БД даже после их удаления.
Вот и главные источники проблем со скоростью: визуально сайт простой, а в коде DOM вложенность на 2500+ классов, 200+ скриптов и стилей. Все это «добро» динамически генерируется с помощью базы данных, когда пользователь пытается зайти на ваш сайт.
По советам из интернета, или «как жигули не тюнингуй — мерседесом он не станет»
Десятки тысяч статей на тему: «как ускорить WordPress», «тесты модулей оптимизации и кэширования».
Плагин — это инструмент. Я считаю, что установить себе на сайт маленький модуль для чистки мусора в БД или модули для импорта или экспорта, автопостинга в соцсети — это нормально.
Но все известные бесплатные, платные плагины оптимизации максимум могут: сжать код, изменить очередь загрузки скриптов/стилей, включить кэширование и lazy load. Все! WP Fastest Cache, Autoptimize, WP Rocket и т.д — плюс минус одно и тоже.
А кто имеет административные права работать с версткой шаблона? DOM-деревом? Исправлять ошибки валидации кода? Человек!
В шаблоне всегда основная проблема. Как он сделан, на каком фреймворке построен, откуда подгружает шрифты и библиотеки. Возьмите стандартную тему WordPress из коробки, она работает молниеносно.
- Банальный пример № 1. В шаблоне через wp_enqueue_style() настроена подгрузка 5 библиотек иконок, при этом на деле используется всего 1. Плагинам оптимизации это по-барабану, удалить лишние они не могут. В итоге на вашем сайте загружаются 4 лишних бесхозных библиотеки. Мейнстримом бесхозности в коде являются библиотеки встроенного редактора Gutenberg (block_scripts_and_styles).
- Банальный пример № 2. Гражданин А. решил настроить у себя на сайте кэширование и устанавливает для этого плагин. Плагин в свою очередь вносит записи в. htaccess, добавляет свою рекламу в комментарий кода и создает отдельную папочку в корне сайта для статических файлов. Вставить код в. htaccess можно самостоятельно или попросить поддержку хостинга (в худшем случае) проделать тоже самое. В ips manager и вовсе это решается почти одной кнопкой.
Количество HTTP запросов — да, можно сократить плагином за счет объединения библиотек, но это может сделать программист на этапе разработки сайта.
Мошенники и супер-оптимизаторы с $5-бирж
Как накручивают 100 баллов на Google PageSpeed описано в этой статье.
Большинство фрилансеров с дешевых бирж удаленной работы вешают на ваш сайт те самые плагины оптимизации и пытаются задушить шаблон сайта кэшированием и сжатием.
Безусловно это дает прирост к скорости в тестах, уменьшает время до первого взаимодействия с сайтом, но по факту основные проблемы не искореняются.
Какой в здравом уме человек будет работать 3 дня за 500 рублей с кодом сайта? За 500 рублей Вам в течение часа поставят парочку модулей, попивая кофе! А кто-то за аналогичную работу возьмет и 1500 рублей. Вот и вся «оптимизация».
Что имеем по итогу
На выходе имеем франкенштейна с тоннами плагинов и мусора в коде. С чрезмерной DOM-вложенностью, высокой нагрузкой на сервер. А еще хуже — задушенный сжатием и кэшированием сайт. Подобные сайты могут иметь ответ от сервера ниже 0,2 секунды, но пока из SQL базы «выковыриваются» блоки билдера, слайдера, контактных форм, товаров и второстепенных плагинов — проходит вечность.
Некоторые фрилансеры умудряются создавать лендинги на тяжелых шаблонах интернет-магазинов, использовать сразу два билдера на сайте (Elementor + Visual Composer).
Банальный пример. Ради одного слайдера на главной странице, горе-вебмастеры устанавливают тяжелый Slider Revolution. На Slider Revolution с его функциональностью легко создать отдельный сайт, а использовать его ради парочки слайдов и 1 строчки текста — верх безумия. Возьмите с гитхаба или codepen качественные решения. Быстро. Бесплатно. Без рекламы.
Интересный факт. Большинство людей думают, что Yoast SEO — это кнопка «SEO-продвижение», установил и завтра в топ. Господа, у Yoast SEO есть еще 200+ инструментов, например: анализ текста и микроразметка для соцсетей. А простые метаописания легко вывести в шаблоне руками и работать с function.php без Yoast и его рекламы в комментарии кода.
Как нужно делать
Все просто и равнодушно. Скупой — платит дважды. Заказчик 500-рублевых бирж — платит шестнадцатикратно. Есть конечно исключения, но в основном это так.
Для долгосрочной перспективы разрабатывать сайт необходимо c нуля из дизайна верстать под WordPress.Собирать семантическое ядро и писать контент. И будет здесь, и зеленая зона в PageSpeed Insights, и поисковой трафик.
Либо, если нет денег, тщательно подбирать качественный шаблон, на основе которого возможно запустить хороший проект. Оптимизировать шаблон руками и максимально снижать количество используемых плагинов.
Если необходимо проверить идею и совсем нет денег — лучше воспользуйтесь конструктором сайта. Поверьте, на тяжелых сборках из трех десятков плагинов — результатов в поиске не будет.
Что выгодно для разработчика — не всегда выгодно для вас. К сожалению, но многие удаленные исполнители обещают золотые горы и уникальные дизайны, а на самом деле скачивают nulled из бесплатных файлообменников шаблон WordPress и собирают подобные «солянки».
Фрилансер, веб-студия — заработали, вы в будущем будете переделывать сайт, переходить на «Битрикс» или OpenCart и говорить: «WordPress — хлам, ужас, не очень:(»
Фрилансер/веб-студия - заработали, вы в будущем будете переделывать сайт/переходить на Битрикс или OpenCart и говорить: "WordPress - хлам, ужас, не очень:(".
Но ведь WordPress именно хлам, ужас и не очень. Он как раз сидит в нише «500 рублевых бирж». Есть исключения, но за годы наблюдения видно, что там 99% проектов именно из говна и палок или темы темфореста собраны. И собирают именно так, как вы описали, на каждую задачу ставится новый плагин, а потом плагины, чтобы пофиксить другие плагины. Если почитать популярные WP чаты, даже по ним видно, что разработчиков, кто реально сможет сам собрать на ВП качественный проект — единицы. Но там бюджеты начнут расти быстро, и потребность в ВП там становится ещё более сомнительной.
Это неплохо, это позволяет быстро и дёшево обкатать свои идеи и попробовать получить сайт не вливая бюджеты. Но сейчас, попробовать проще, дешевле и быстрее будет на конструкторе. Понять свои потребности, составить требования к сайту и идти делать на чём-то более серьезном.
Почти все, если не все проблемы что вы описали, это следствие того что "WordPress - хлам, ужас, не очень:(". WordPress сам побуждает делать всё криво и косо, просто потому что он не предоставляет практически никакого API для разработчика. Из-за чего каждый разработчик плагинов и сайтов делает как он считает нужным и переизобретает велосипед. Вы же сами приводите последствия данной проблемы:
Банальный пример. Contact Form 7 для форм не используется на большинстве страниц, при этом загружает везде свои библиотеки глобально. Тем самым замедляя загрузку страниц сайта.
Что это, как не полное отсутствие внятного API для работы с библиотеками проекта? Это ведь одна проблема. А если дальше рыть? Как убрать эту библиотеку со страниц, где нет Contact Form, со всеми её зависимостями и мусором, что она подключает? Это не тривиальная задачка, я видел как такие задачи решают в WP, это костыли, а не решение. В нормальных системах такая проблема будет отсутствовать в принципе. Это уже давно научились автоматизировать.
Раз вы упомянули Contact Form. У WordPress полностью отсутствует Form API. В итоге каждый плагин, которому нужна форма, делает свои велосипеды, чтобы создавать формы. Кто-то сразу html хардкодит, кто-то тянет вообще сторонние библиотеки, кто-то придумывает свой From API и юзает его, и больше никто им не пользуется. Это приводит к полнейшему хаосу на проекте и неразберихе. Нет единой точки входа и выхода. Из-за чего также часто хакают плагины и делают полный копипаст всего, чтобы поправить формочку.
И таких проблем очень и очень много. Если почитать вопросы по WP на том же тостере, почитать их телеграм чаты очень продолжительное время (или пройтись по хистори за год, например), вы поймете, что там решают одни и те же проблемы из года в год каждый день. Наверное там каждый день задают вопрос связанный с тем, что после переноса проекта сайт развалился, потому что WP до сих пор хранит домен сайта в БД. Подавляющее большинство вопросов является причиной того, что нет внятного API. И судя по всему, решать этот вопрос никак не хотят.
Не говоря уж о том, что современных техник, инструментов и подходов там крайне мало, ибо они держатся за легаси код и защищают его всеми силами, по непонятным для меня причинам. Рынок уже поменялся, сейчас не 2010, а они все примерно там, с проблемами тех лет.
Я бы посоветовал смотреть вообще в другую сторону от WordPress, с точки зрения разработчика, если вы не тот самый исполнитель за 500 рублей. Ибо о проблемах, что ежедневно решают в WP и на каждом проекте, в современных системах даже не думают, ибо уже годами отлажено и работает как часы. Вы не только перестанете воевать с надуманными проблемами в 2020, узнаете множество новых техник, лучших практик, подходов и будете расти как специалист.
Да нету альтернатив вп. При всех недостатках есть один, очень существенный плюс. Стоимость разработки. На любую задачу уже есть плагин вп. Да, иногда он решает не идеально. А нам и не надо идеально. И так сойдет.
Ваш вариант — чем заменить WP?
Вы серъезно про отсутствие внятного API у WP или просто неделя выдалась тяжелой?)))
Contact Form... Ну один из первых плагинов, поэтому и такое дикое кол-во установок, количество не всегда переходит в качество... За 6 лет ребята так и не дошли до 5 звезд. Из 1800 отзывов 22% - это отзывы тройка, двойка и кол. Как по мне полный провал для плагина.
Для любых вещей, где с одной стороны хочется готовую админку, с другой стороны хочется оставить возможность дописывать в нормальном современном окружении (это чтобы не было проблем с деплоем, чтобы была куча вариантов docker-окружений с отладкой и лдогироавнием, чтобы внутри фреймворк типа Symfony) мы используем Drupal. В тогде - быстрый старт и цельное api, где нет такого как в WP - где каждый плагин живет своей жизнью.
Для интернет-магазинов и нагруженных сайтов WP явно не идеал.
Но для информационного, корпоративного сайта с услугами или для сайта-визитки WP вполне подходит. Соглашусь с автором, что при создании сайта лучше сразу сделать нормально с нуля, чем на шаблоне. Выгоднее один раз пройтись по стандартным этапам цели-структура-прототип-дизайн-верстка-наполнение, чем выгребать лишнее из шаблонов, добавлять кучу плагинов, оптимизировать, допиливать, подкручивать и так далее.
В статьях я описывал создание и продвижение корпоративных сайтов. Они на WP с уникальным дизайном и трафик постоянно растет (ежемесячный seo трафик за год с нуля до 20тыс).
Так что поисковики любят нормальные сайты на WP.