35 оптимизаций производительности для сайта на WordPress
Страница, созданная с помощью Canvas, загружает CSS и JavaScript только для тех блоков, которые выводит, и ничего больше. Сверх этого есть 35 оптимизаций, каждая из которых включается отдельным переключателем, с осторожными настройками по умолчанию и понятным описанием того, что она делает.
Обновлено
Загрузка ресурсов по блокам
Большинство тем поставляют один большой файл стилей и один большой скрипт, и каждая страница загружает каждую функцию темы. Canvas сопоставляет каждый из 314 блоков с CSS и JavaScript, которые нужны именно этому блоку, а затем подключает объединённый набор того, что страница действительно вывела.
- Страница с тарифами никогда не загружает скрипт слайдера
- Страница без формы никогда не загружает обработчик форм
- Редактор загружает стили блоков так же
- Ничего не нужно настраивать, и его нельзя случайно выключить
Указано, а не угадано
Каждый блок объявляет собственные ресурсы. Карта ресурсов хранится в самом блоке, поэтому нет центрального списка, который кто-то может забыть обновить.
Работает с базовыми блоками
Базовые блоки и блоки сторонних разработчиков сохраняют собственное поведение загрузки. Canvas не берет их ресурсы под свой контроль и не спорит с WordPress о них.
Шаблоны тоже считаются
Шапки, подвалы, заголовки страниц и слайдеры тоже являются блоками, поэтому страница с простой шапкой не загружает код мега-меню.
Ничего докупать не нужно
Условная загрузка не является премиум-функцией или дополнением. Так библиотека работает на каждом тарифе и при истёкшей лицензии.
Оптимизации (35), сгруппированные по затрагиваемой области
Здесь нет ничего волшебного и ничего скрытого. Каждый из них делает конкретное, проверяемое изменение в странице, которую отправляет WordPress.
Загрузка 7
Уберите CSS и JavaScript, которые блокируют первую отрисовку, и начните загрузку следующей страницы заранее.
- Асинхронная загрузка некритичных таблиц стилей
- Отложенная загрузка некритичного JavaScript
- Откладывать JavaScript до первого взаимодействия
- Предзагрузка самого крупного изображения в первом экране
- Предварительное подключение к источникам, которые использует страница
- Префетчинг DNS для сторонних хостов
- Опережающая загрузка: следующая страница загружается до того, как по ней нажали
3 шрифта
Текст остаётся читаемым, пока веб-шрифт ещё загружается, а шрифты Google вообще не обязаны быть сторонним запросом.
- Добавьте font-display swap для ваших веб-шрифтов
- Предзагрузите шрифты, нужные для первого экрана
- Отдавать шрифты Google с собственного сервера
Медиа 6
Изображения — самая тяжёлая часть большинства страниц и одновременно то, что чаще всего настраивают неправильно.
- Отложенная загрузка изображений вне первого экрана
- Ленивая загрузка iframe и встраиваемых элементов
- Задайте качество JPEG, которое создаёт WordPress
- Ограничить максимальную ширину загружаемых изображений
- Управляйте наборами адаптивных изображений, которые создаёт WordPress
- Управляйте тем, какие размеры изображений вообще создаются
Очистка 8
WordPress по умолчанию включает функции, которые нагружают каждый сайт, хотя нужны немногим.
- Удаление строк запроса из статических ресурсов
- Отключение скриптов и стилей эмодзи
- Отключите поиск oEmbed и скрипт встраивания
- Отключить Dashicons в публичной части сайта
- Отключить XML-RPC
- Отключить RSS-ленты
- Remove jQuery Migrate
- Отключить самопингбэки
База данных 5
Административная часть медленного сайта: ревизии, автосохранения и Heartbeat, который никогда не останавливается.
- Ограничение числа ревизий, которые сохраняет запись
- Настройте интервал автосохранения
- Ограничивайте или отключайте Heartbeat в админке
- Очистка ревизий, транзиентов и спама в базе данных
- Ограничение REST API для авторизованных пользователей
WooCommerce 5
Магазин загружает свои скрипты на каждой странице сайта, в том числе на тех, что ничего не продают.
- Удаление JavaScript WooCommerce на страницах без вывода магазина
- Отключите отслеживание атрибуции заказов
- Отключение опроса скрипта cart fragments на каждой странице
- Не загружайте библиотеку проверки надёжности пароля вне страниц аккаунта
- Отключить встроенную библиотеку Select2 вне оформления заказа
Переписывание для сети доставки контента 1
Направьте таблицы стилей, скрипты, изображения и шрифты на сеть доставки, за которую вы уже платите, переписав их адреса в момент отрисовки страницы. Canvas не продаёт сеть доставки и не пропускает ваш трафик через наши серверы.
Всего их 35 переключателей, и пять из них для WooCommerce появляются только при активном WooCommerce. Подробнее об интеграции с магазином.
Каждая из них — переключатель, и значения по умолчанию выбраны осторожно
Canvas включает то, что безопасно для любого сайта, а остальное оставляет на ваше усмотрение, а рядом с каждым переключателем указана причина. Единственная настройка, которая обычно плохая идея, отмечена прямо в панели, там же, где вы принимаете решение.
Основы SEO и доступности
Страница, которая быстро загружается, но которой нельзя прочитать, просканировать или управлять с клавиатуры, не считается готовой. Всё это есть в самой теме на каждом тарифе, и ничего не закрыто за платным обновлением.
Метаданные из вашего контента
Заголовки, описания, карточки для соцсетей, канонические URL, правила для роботов и карта сайта формируются из страницы в том виде, в котором она отображается. Вторая копия вашего контента для обновления не нужна.
16 типов разметки Schema
Organization, WebSite, WebPage, Person, хлебные крошки, Product, Brand, Offer, отзывы и рейтинг, адрес, географические координаты, часы работы и поиск по сайту выводятся там, где они применимы.
Семантические ориентиры
Ориентиры для шапки, навигации, основной части и подвала, ссылка для перехода к содержимому, заголовки, которые идут по порядку, и видимый фокус у всех элементов, до которых можно добраться.
Меню с поддержкой клавиатуры
Меню, мега-меню, боковые панели и модальные окна открываются, перемещаются и закрываются с клавиатуры, а анимация учитывает настройку уменьшения движения у посетителя.
Доступность, безопасность и экспорт данных никогда не являются премиум-функциями. Они остаются доступными при истёкшей лицензии, потому что сайт, который перестаёт работать, — это проблема поддержки, а не решение о лицензировании.
Как мы это проверяем
Заявления о скорости и доступности легко сделать и легко проверить. Мы проверяем свои, и вот как именно.
Страницы сравниваются с их макетами в настоящем браузере
Каждая страница демо отрисовывается в браузере и сверяется с дизайном, из которого она взята: высота документа, ширина секций, вычисленные отступы и всё, что управляется JavaScript, измеряется после его выполнения, но никогда при первой отрисовке.
Этот сайт проверяется при трёх ширинах экрана
Каждая страница здесь проверена через axe-core на соответствие WCAG 2.1 (уровни A и AA) при ширине 1440, 1024 и 390 пикселей, а также на проверки, которые axe не выполняет: один h1, уровни заголовков без пропусков, четыре ориентира, рабочая ссылка пропуска к содержимому, отсутствие горизонтальной прокрутки, ни одного текста меньше 12 пикселей, ссылки, которые читаются как текст, и области нажатия не менее 24 пикселей.
Что нужно для работы Canvas
WordPress
Canvas построена на редакторе блоков, поэтому требует WordPress с Редактором сайта. Версия 7.1 или новее.
PHP
PHP 7.4 или новее. Актуальный релиз PHP — самое дешёвое ускорение, которое может сделать большинство сайтов.
Протестировано до
Canvas тестируется на совместимость с WordPress 7.1; после каждого релиза WordPress выходит обновление.
О производительности
Включая тот вопрос, который нам задают чаще всего; именно поэтому на этой странице нет оценок.
Нужен ли всё ещё плагин кэширования?
Вероятно, да, и это честный ответ. Canvas управляет тем, чем обычно управляют тема и WordPress: какие ресурсы загружает страница, как работают шрифты и изображения и сколько работы выполняет база данных. Кэширование страниц и объектов, а также доставка с периферийных серверов относятся к хостингу или плагину кэширования. Это разные задачи, поэтому использовать оба решения — обычная практика.
Сломает ли мой сайт включение этих функций?
Каждый переключатель обратим, а те, что с наибольшей вероятностью конфликтуют с другим плагином, по умолчанию выключены. Каждый переключатель объясняет, что он делает и когда его лучше не трогать, а настройка, которая действительно рискованна, прямо говорит об этом в панели. Включайте их по одному и после каждого перезагружайте публичную часть сайта.
Нужно ли отдельно настраивать загрузку ресурсов для каждого блока?
Нет, искать и включать ничего не нужно. Так работает библиотека блоков. Каждый блок объявляет CSS и JavaScript, которые ему нужны, а страница подключает объединение того, что на ней действительно отрисовано.
Демо поставляются уже оптимизированными?
Импорт демо на весь сайт применяет настройки темы демо, а переключатели производительности входят в них, поэтому демо запускается с теми параметрами, с которыми его собирали и проверяли. Измените любой из них позже.
Почему на этой странице не публикуются оценки скорости?
Оценка, полученная в синтетическом тесте на нашем оборудовании, ничего не говорит о вашем хостинге, плагинах, изображениях или посетителях. Мы публикуем именно то, что делает каждая оптимизация, поэтому включите её и измеряйте свой сайт на собственной инфраструктуре.
Быстрый сайт, который можно редактировать
Каждый тариф включает одну и ту же библиотеку блоков, одни и те же 35 оптимизаций и одинаковую условную загрузку ресурсов. Отдельного уровня производительности нет.