Метка: wordpress

  • WebP для картинок на сайте

    WebP для картинок на сайте

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

    В чём же фишка и почему Google рекомендуют переходить на него?
    – JPG, GIF и PNG используют алгоритмы компрессии изображений, разработанные в прошлом веке.
    – WebP основан на эффективном видеокодеке VP8, который разработали для сжатия потоков видео.
    – Кодек пытается предсказать, какого цвета будут следующие пиксели и кодирует только отклонения от предсказания. Он просто старается не записывать информацию обо всех пикселях.
    – Лучше учитывает несовершенство человеческого зрения и делает картинку проще для кодирования с разницей незаметной для зрителя.
    – Поддерживает полупрозрачность, как PNG.
    – Компактнее хранит метаданные и меньше места тратит на технические заголовки файлов.

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

    Чтобы WebP заработал на моём WordPress сайте, нужно проверить несколько вещей:
    – WebP поддерживается веб-сервером — для Caddy ничего делать не нужно, в NGINX или Apache2 я бы проверил поддержку mime-type.
    – WebP поддерживается сайтом — WordPress умеет распознавать WebP-файлы при загрузке.
    – Конвертировать уже загруженные картинки в WebP — я использую плагин EWWW Image Optimizer. Он бесплатно конвертирует все старые JPG прямо на сервере за пару минут.
    – Подменить старые форматы на новый в опубликованных постах. Для этого включаю автозамену картинок в том же плагине.

    Всё, на сайте работает WebP!

  • Превью для пересылаемых ссылок

    Превью для пересылаемых ссылок

    Пересылал в телеграме ссылку на свой блог fullstackfounder.ru и обратил внимание, что ссылка голая — в чате не отображается картинка и описание. Я хочу, чтобы ссылки были привлекательными, вдруг кто-то в чате поделится статьёй.

    За эти улучшения отвечает протокол Open Graph. Чтобы он заработал, нужно добавлять в HTML-код страницы дополнительные поля, которые пользователь не увидит на сайте. Зато их прочитает робот социальной сети, когда кто-то перешлёт ссылку.

    В WordPress из коробки Open Graph почему-то нет, поэтому ставлю плагин. Так сложилось, что в экосистеме WordPress за это отвечают сеошные плагины. Лидер — перегруженный старичок Yoast SEO. Но его я ставить не хочу — там слишком много невостребованных мной функций, он снижает производительность сайта и грубо вставляет куски своего интерфейса в админку.

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

    • Автоматическое добавление Open Graph нескольких видов
    • Поля с мета-тегами при редактировании страниц в админке
    • Шаблоны для автоматического формирования мета-тегов
    • Управление редиректами
    • Управление индексированием разделов
      Всё бесплатно, ненавязчиво, большинство настроек применились автоматически. Нет AI-помощников, слежения за позициями и трансляции ошибок из консоли поиска. Да мне и не надо, я улучшаю технические факторы.

    Поставил и включил плагин. Протестировал как работает Open Graph в удобном онлайн-тестировщике. Всё заработало, ссылки стали полноценными! Попробуйте переслать эту статью.

    Частая проблема — социальная сеть не обновляет ссылку, после того как мы поменяли картинку или текст. Нужно попросить соцсеть сбросить кэш.
    Бот для сброса кэша в Telegram
    Обнулятор от Callibri
    Сброс кэша для LinkedIn

  • Добро пожаловать!

    Добро пожаловать!

    Наконец, выдался свободный день и я развернул блог по адресу https://fullstackfounder.ru.

    Блог работает на WordPress:
    – Сборка Bedrock с composer
    – Тема оформления TwentyTwentyFive, идущая в комплекте к WordPress в этом году
    – Тёмная цветовая палитра Dracula, популярная у разработчиков
    – Шрифты Roboto и Roboto Mono через Google Fonts
    – Фавиконка робота
    – Docker для локальной работы, адаптировал привычный мне пакет Sail из Laravel

    На копирование сборки, разворачивание WordPress на сервере и настройку блога ушла пара часов. Предстоит ещё много работы, чтобы я был доволен, но сайт уже заработал.
    Код сайта выложил на Github.

    Чтобы не копировать контент вручную, навайбкодил небольшое консольное приложение для импорта постов на питоне. Также придумал названия категорий и тегов для постов, положил их в качестве справочника. Приложение берёт экспорт постов с моего телеграм-канала в формате JSON. Обрабатывает текст, вырезает из поста лишние строчки с “Жми на эмозди”, заливает картинку, пробует определить категорию и теги, отделяет заголовок от текста. И отправляет всё это в WordPress по API. Справился за полтора часа от идеи до протестированного кода, который залил все мои посты. Категории и теги скрипт присвоил кое-как, поэтому их всё равно нужно будет переопределить вручную. Зато тексты уже опубликованы!

    Код импортёра тоже выложил на Github.

  • Модель RDB — инструмент для мышления маркетолога

    Модель RDB — инструмент для мышления маркетолога

    Все коммерческие предложения, лендинги, ТЗ на рекламные плакаты и вообще всю маркетинговую коммуникацию я уже много лет проектирую на основе модели RDB. Про неё я узнал из выступления Ильи Балахнина и тут же применил на одном из клиентских проектов. Удалось вырастить конверсию лендинга в 3 раза не прибегая к редизайну — я просто блоки переставил местами в соответствии с моделью.
    Модель даёт отличные результаты на практике, потому что позволяет выстраивать повествование про ваш бренд или предложение в понятном потребителю порядке.

    Resonance
    В резонансе нужно русским по белому написать ваше предложение на понятном клиенту языке. Запуск интернет-магазина для бренда одежды за 30 дней.
    Клиент узнаёт себя, чётко и ясно понимает вашу услугу. Важно, чтобы всё окружение резонанса транслировало сопутствующую атмосферу и атрибуты. Картинка с котятами не подойдёт — нужны картинки интерфейсов современных интернет-магазинов с одеждой, фэшн-фотографии и процесса оформления заказа. Шрифты, цветовая палитра, Tone of Voice — должны соответствовать резонансу. Не стесняемся лепить самую банальщину. Клиника — врачей в белых халатах, а не яблоки на тарелке или здоровых пациентов.

    Differentiation — отличие от других.
    Для B2C брендов нужно говорить про потребителя и как его индивидуальность будет подчёркивать этот продукт или услуга. Чем он будет отличаться от других после покупки.
    Для B2B рынка мы делаем ровно наоборот — доказываем, что мы такие же, как и все: соблюдаем стандарты, имеем лицензию, делаем по методологии. Корпоративный клиент не хочет рисковать, поэтому предпочтёт проверенное решение. Магазин на WordPress, а не самопис от нашей студии. Бухучёт по международному стандарту, а не по авторской методике.

    Belief — создаём доверие и внушаем веру в продукт или компанию. Размещаем логотипы и отзывы клиентов. Показываем производство и работников. Публикуем реквизиты компании. Даём значимые цифры, подтверждающие наш опыт и компетенции. 3 тысячи сайтов сделано, 20 тысяч клиентов выздоровело, 300 миллионов рублей потрачено.

    В ходе применения RDB и обратной связи я немного модифицировал формулу. Мой порядок применения модели: RBDB, — два раза используется Belief. Первый раз мы создаём доверие сразу после резонанса. Внимание покупателя захвачено, нужно сказать, что мы норм, чтобы следующий блок был встречен с предварительно сформированным доверием. Достаточно краткой полоски логотипов, фотографий людей и значимые цифры. Второй раз мы будем использовать весь арсенал — отзывы, фотографии, сертификаты и награды, видео-ролики и демонстрацию внутрянки. Этот Belief может быть огромным лонгридом для самых недоверчивых Осликов по матрице Винни-Пуха.

    Применение этой модели сильно снижает предстартовую фрустрацию и позволяет мне сразу создавать скелет эффективного КП или лендинга.

  • WordPress устарел, но это легко исправить

    WordPress устарел, но это легко исправить

    Я считаю, что многое в подходе WordPress безнадёжно устарело. При этом я всё ещё использую WordPress для блогов. Потому что WordPress, с которым я работаю, сильно отличается от обычного!

    Чего не хватает в WordPress?
    – Поддержку git каждый придумывает самостоятельно, потому что нет общих рекомендаций. Держать в репозитории только тему или всю папку? Что делать с плагинами? Должно ли быть ядро в репозитории? Непонятно.
    – Нет поддержки composer — нет управления зависимостями. Чтобы воспроизвести такой же сайт, нужно выписать все названия и версии плагинов, а затем устанавливать их вручную. Нет способов поставить внешнюю библиотеку. Разные плагины тянут за собой зависимости, которые могут конфликтовать друг с другом.
    – Конфигурация задаётся через файл. Нет поддержки переменных среды ENV, нет поддержки нескольких окружений. Работать с CI/CD и контейнерами практически невозможно.
    – Весь код находится в публичной папке сервера. В зависимостях WordPress много кода, который можно было бы спрятать в папку vendor ради безопасности.

    В общем, упущены все базовые вещи, которые есть в популярных фреймворках Laravel, Symfony, Next, Django, Ruby on Rails.

    Все эти упущения исправляет бесплатная сборка Bedrock от коллектива разработчиков Roots. Это тот же WordPress, но он уже больше похож на фреймворк. В нём есть git, composer, env, поддержка Docker и CI/CD. Он использует те же плагины, темы оформления и тот же базовый WordPress в качестве ядра. Изменена структура папок и метод загрузки конфигурации. Всё остальное работает точно так же.

    Я использую Bedrock уже несколько лет, он отлично себя зарекомендовал в продакшине. Обновления с локальной среды разработчика оказываются на тестовом сервере после git push. Сразу устанавливаются те же версии WP и плагинов, обновляется тема оформления, сбрасывается кэш, импортируются настройки.

    Bedrock может открыть WordPress с другой стороны для разработчиков, которые привыкли к “взрослому” миру фреймворков. Более того, у Roots есть пакет Acorn, который добавляет в WordPress пакеты из Laravel. Как тебе такое, Илон Маск Мэтт Мулленвег?

  • Попробовал модный веб-сервер Caddy вместо Nginx

    Попробовал модный веб-сервер Caddy вместо Nginx

    Попробовал модный веб-сервер Caddy вместо Nginx.

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

    NGINX (Engine X) — самый популярный веб-сервер (33% рынка), написанный на C. Изначально был написан 20 лет назад программистом из Rambler.
    Раньше Nginx многие использовали как обратный прокси для Apache2, чтобы его ускорить. Nginx занимался статичными файлами (картинки, CSS), а Apache2 запускал PHP-скрипты. Постепенно Apache2 стали убирать и всю работу переносить на Nginx, потому что он быстрее и лучше держит большие нагрузки. Есть большая экосистема дополнений, отличная документация и множество примеров использования. Стабильный продукт, с которым я работаю на всех проектах.

    А тут в инфополе стал мелькать Caddy. Чем же он покоряет разработчиков?
    – Более лёгкая конфигурация SSL-сертификатов. Точнее, её нет, Caddy делает всё сам — пользователю больше не нужно настраивать стандартные сертификаты Let’s Encrypt.
    – Поддержка HTTP/2 и HTTP/3 из коробки.
    – Поддержка компрессии gzip и zstd из коробки.
    – Простой синтаксис конфигурационных файлов. Очень похож на Nginx, но проще и яснее. Конфиги сокращаются в размере, вероятность ошибки ниже.
    – Caddy — это всего один исполняемый файл без зависимостей. Его легко устанавливать и обновлять.
    – Новый плагин можно подключить к Caddy без перезагрузки и простоя в работе.
    – После установки Caddy показал симпатичную страницу по-умолчанию с небольшой инструкцией.

    Есть у него и минус:
    – Caddy на предельной нагрузке может обработать меньше запросов, чем Nginx. Приоритет Caddy на простоте использования и автоматизации. На этом бенчмарке разница начинается от 10 тысяч запросов в секунду, что практически недостижимо для маленьких проектов.

    Мои впечатления — мне понравилось с ним работать. Действительно легкая установка и конфигурация. Видно, что авторы много работали с другими веб-серверами и свой продукт сделали удобным и современным.

    На моём сайте пока что висит статическая заглушка, вот весь конфиг:

    fullstackfounder.ru {  
           root * /var/www/fullstackfounder.ru/public  
           file_server  
           encode zstd gzip  
    }  
      
    www.fullstackfounder.ru {  
           redir https://fullstackfounder.ru{uri} permanent  
    }

    Аналогичный конфиг у Nginx выглядел бы вот так:

    server {
        listen 80;
        server_name fullstackfounder.ru www.fullstackfounder.ru;
    
        # Redirect all HTTP to HTTPS
        return 301 https://$host$request_uri;
    }
    
    server {
        listen 443 ssl http2;
        server_name fullstackfounder.ru;
    
        ssl_certificate     /etc/letsencrypt/live/fullstackfounder.ru/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/fullstackfounder.ru/privkey.pem;
        include             /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam         /etc/letsencrypt/ssl-dhparams.pem;
    
        root /var/www/fullstackfounder.ru/public;
        index index.html index.htm;
    
        # Enable gzip
        gzip on;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    
        # Canonical redirect: www → non-www
        if ($host = 'www.fullstackfounder.ru') {
            return 301 https://fullstackfounder.ru$request_uri;
        }
    
        location / {
            try_files $uri $uri/ =404;
        }
    }

    Очевидно, что при работе с Caddy будет проще всё настроить. Мой вывод: дружелюбный сервер для разработки, DevOps, небольших проектов и соло-разработчиков. Сомневаюсь, что он завоюет высокие нагрузки, но свой вклад в улучшение веб-серверов он уже внёс.

    Буду запускать на нём WordPress, посмотрим, что из этого выйдет.

  • Почему я выбираю VDS?

    Почему я выбираю VDS?

    Логично для блога выбрать минимальный тариф на обычном дешёвом хостинге — на так называемом Shared. На таких тарифах на одном сервере размещены сотни клиентских сайтов. Админ хостинга уже настроил все службы и программы, чтобы обычный пользователь мог про это не думать.
    Но я для блога беру минимальный виртуальный сервер примерно за те же деньги. Для меня это полная свобода действий.

    Вот что я смогу сделать на VDS и не смогу на обычном хостинге:
    – Разместить на одном сервере сколько угодно сайтов и привязать к ним любое количество доменов.
    – Динамически менять ресурсы на сервере.
    – Не переживать, что мой сайт перенесли на другой сервер, поэтому нужно поменять IP-адрес в DNS. На шаред хостингах это могут делать несколько раз в год, нужно следить за уведомлениями, чтобы сайт не перестал работать.
    – Настроить сервер под меня с помощью пары ansible-скриптов.
    – Поставить нужный мне веб-сервер Caddy или кастомную сборку NGINX. Избежать Apache2, который до сих пор часто работает на шаред хостингах.
    – Разместить публичную папку сайта в любой папке, а не только в предварительно за меня выбранной public_html. Для моей сборки WP или Laravel это важно.
    – Установить git, composer, WP-CLI нужных мне версий и обновлять их самому.
    – Поставить любую версию PHP с нужными расширениями и оптимизировать все настройки, включая OpCache.
    – Настроить все параметры для базы данных MySQL.
    – Добавить сборщики для фронта (npm, pnpm).
    – Добавить memcached для кэширования в оперативной памяти — пригодится для ускорения WordPress.
    – Управлять логами, менять их формат, включать дополнительные логи для медленных скриптов и запросов. Размещать логи в нужной мне папке.
    – Поставить CI-агента от GitLab, который будет автоматически обновлять сайты после внесения изменений в Git.
    – Отключить FTP-протокол, чтобы сайт не взломали через утечку FTP-паролей.

    Создал VDS у Beget за 290 рублей в месяц.
    Конфигурация: CPU 1 core, 2 GB RAM, 10 GB NVMe, Ubuntu 24.04.

    Посты по теме:
    – План запуска блога
    – Удобный SSH-доступ
    – Выбор хостинга для сайта

  • План запуска блога

    План запуска блога

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

    У блога по сравнению с каналом куча преимуществ:
    – Посетители смогут найти эти статьи в обычном поиске.
    – Этим же посетителям я предложу подписаться на социальные сети.
    – Можно будет публиковать статьи на сайт и автоматически кросс-постить в разные каналы: Телеграм, ВК, Дзен, E-mail-рассылку.
    – Если какую-то социальную сеть забанят или удалят мой аккаунт, контент останется у меня.
    – Нейросети будут обучаться на моих статьях, внесу вклад в общие знания.
    – На сайте можно будет размещать рекламу.

    Чтобы зафиксировать достижение, поставлю себе измеримую цель:
    – через 1 месяц — запустить блог и начать кросс-постинг
    – через 12 месяцев — получать больше 10 000 читателей на сайте ежемесячно

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

  • Безопасность веб-сервера

    Безопасность веб-сервера

    Безопасность сайта начинается с уменьшения площади возможной атаки.

    Чеклист, который выработал и применяю у себя:
    – IP-адрес реального сервера никогда не был прописан в DNS домена. В DNS попадает proxy или балансер — от Cloudflare, Fortes, Qrator или вашего другого сервера.
    – Отключена возможность зайти под root пользователем. Вначале сделали нового пользователя, дали ему sudo-права, потом запретили вход из-под root.
    – SSH-логин возможен только по ключу, пароли отключены совсем.
    – SSH работает на нестандартном порте — 22-й слишком очевиден, меняем.
    – Стоит и настроен firewall. Закрыты все порты, кроме нужных: 80 и 443 для сайта, порт для SSH, порт под метрики для мониторинга. Мой выбор ufw, его вполне хватает всё перекрыть.
    – Установлен fail2ban — чтобы не донимали сервер брутфорсом.
    – Операционная система и системные программы периодически обновляются.
    – На сервере отключена возможность отправки почты. Совсем. Если взломают — сервер не станет рассадником спама и не нужно будет его IP вычищать из блеклистов. Вся почта отправляется через внешний SMTP.
    – Не ставим или удаляем FTP — протокол устаревший и через него часто ломают серверы.
    – Во всех папках для загрузки файлов через сайт стоит запрет на выполнение кода. В nginx и apache прописывается запрет. WordPress и Битрикс чаще всего ломают именно так — заливают исполняемый PHP-файл в загрузки и запускают по прямой ссылке.
    – PHP позволяет запретить вызов некоторых функций. Вам точно нужен eval()?
    – В идеале — код движка размещён выше корня веб-сервера. Так сделано во всех “взрослых” фреймворках. WP и Битрикс требуют ухищрений, но тоже можно кое-что сделать.
    – Движок обновлён до свежей версии. Тут у клиентов зачастую беда, потому что поддержкой не занимаются.
    – Код сайта в git. Всегда можно посмотреть и откатить любые заражения за одну минуту. git reset --hard и всё почистили.
    – Минимум раз в сутки делается бэкап базы данных и загруженных файлов.
    – На сервере установлены и периодически запускаются руткит-сканеры.

    Это базовые действия. Опытные сисадмины добавят ещё пару десятков пунктов.
    У меня большая часть этих действий происходит автоматически, потому что прописана в ansible-плейбуке. Но и руками делается тоже быстро.

    А что я забыл и вы бы добавили в этот чеклист?

  • Почему WordPress — это хорошо

    Почему WordPress — это хорошо

    Почему WordPress — это хорошо.

    Идут баталии React vs Vue, у новичков стоит вопрос выбора Python/TypeScript/PHP/Rust/Go.

    В это же время из 200 миллионов активных сайтов 43% работают на WordPress. Нет более популярной CMS.

    На WordPress работают сайты NASA, New York Times, Techcrunch и каждый второй сайт, который вы открываете.

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

    Самые частые жалобы:
    – Медленный? Посмотрите на лидеров рынка с огромной посещаемостью и настройте кэширование.
    – Взламывают? Надо было приложить небольшие усилия, настроить сервер и обновить плагины.
    – Неудобный? Большая часть удобства состоит из привычки, а не из “интуитивности”.

    WordPress действительно несколько опоздал на фестиваль современных технологий. Но догоняет всеми силами.
    Под капотом вы найдёте привычные и любимые разработчиками инструменты. React и REST API — из коробки. Консольную утилиту WP-CLI. Поддержку продвинутого кэширования с помощью Redis, memcached и php-op.
    Пара шагов чуть глубже и появится возможность использовать git, composer, s3, CI/CD, пре-процессоры и сборщики JS/CSS. А как насчёт использования blade-шаблонизатора от Laravel и классов Symfony?

    Старичок живой, весёлый и развивается, несмотря на скандалы, брюзжание и выход из моды.

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

    Если ваш сайт можно сделать с помощью WordPress — скорее всего, это будет оптимальным выбором.