pagespeed.ok — ускорение

⚡ pagespeed.ok — зелёный PageSpeed без переделки темы

Типовой магазин на OpenCart отдаёт браузеру шесть-восемь файлов стилей, столько же скриптов и сверху пачку сторонних счётчиков и виджетов. Каждый — отдельный запрос, а чужой код ещё и выполняется ровно тогда, когда посетитель ждёт первую отрисовку. Модуль перебирает готовый HTML перед отдачей и приводит его к тому виду, которого ждёт Lighthouse: меньше запросов, правильные приоритеты, ничего лишнего в первые секунды. Шаблон, контроллеры и товары не трогаются — правится только то, что и так ушло бы в браузер.

🧩 Что делает модуль

• 🎨 Склейка стилей. Все локальные CSS собираются в один файл и встают на место первой ссылки — порядок каскада не меняется. Общая для всех страниц часть отдаётся отдельным файлом, различающийся хвост — своим: при переходе по магазину браузер качает только хвост. Внешние стили переводятся на неблокирующую загрузку на их месте в разметке, для доменов добавляется preconnect.
• 🔤 Шрифты. В @font-face дописывается font-display: swap, чтобы текст не был невидимым во время загрузки. Нужные woff2 можно запросить заранее, алфавит выбирается по языку страницы — у одного шрифта до шести файлов, а нужен один. По умолчанию это выключено: запрос шрифта вперёд стилей отбирает канал у того, что держит первую отрисовку.
• 📜 Склейка скриптов. Локальные JS собираются в один файл на месте первого тега, синхронно. Скрипты с defer или async остаются как есть.
• ⏳ Отсрочка стороннего кода. Счётчики, чаты, карты и виджеты подключаются по первому движению мыши, касанию, прокрутке или по таймеру. Поисковым ботам всё отдаётся сразу, порядок выполнения сохраняется.
• 🖼 Картинки. Проставляются width и height — из имени файла кеша, а если его там нет, размер читается из заголовка самого файла. Добавляется decoding, пустой alt там, где его нет, и отложенная загрузка ниже первого экрана — но только на длинных страницах, где ей есть что откладывать. Верхние крупные картинки, наоборот, получают высокий приоритет.
• ♿ Разметка. lang и hreflang ua меняются на uk, ссылкам-иконкам без текста дописывается aria-label, внешним ссылкам rel="noopener", ссылке без href — role="button".
• 🗂 Кеш склеенных файлов. Имя содержит хеш состава и времени правки исходников: поправили CSS — файл пересобрался сам, чистить ничего не надо. Рядом кладётся .htaccess с годовым сроком хранения.
• 🗄 Кеш долгих SQL. Запрос сначала выполняется и замеряется, и только если он оказался долгим, его ответ ложится в кеш. Ключ учитывает время последней записи в каждую задетую таблицу, поэтому правка товара обесценивает кеш мгновенно.
• 🩺 Проверка снаружи. Сервер запрашивает собственную главную так, как её видит браузер, и показывает, стоит ли перед сайтом Cloudflare, включён ли Rocket Loader, каким размером и с каким сжатием отдаётся склеенный CSS.

📈 За счёт чего растёт оценка

• 🚀 TBT — главный выигрыш. На страницах магазина 60–80 процентов времени выполнения JavaScript приходится на сторонний код. В окне замера он не выполняется вовсе.
• 🖼 LCP и FCP. Запросов до первой отрисовки становится меньше: шесть-восемь стилей превращаются в один. Верхняя картинка не откладывается и просится первым приоритетом. Шрифты запрашиваются, не дожидаясь разбора стилей.
• 📐 CLS. Размеры у картинок означают, что браузер резервирует под них место заранее. Это основной источник сдвигов в списках товаров.
• ♿ Специальные возможности и Лучшие практики. alt, aria-label, корректный язык страницы, rel="noopener" на внешних ссылках.
• 🗂 Политика кеширования. Склеенные файлы отдаются с годовым сроком хранения, повторный заход берёт их с диска.

🚫 Чего модуль не делает

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

Важное предупреждение

Модуль правит готовый HTML. Темы бывают нестандартными, поэтому после установки обойдите магазин руками: главная, категория, карточка товара, поиск, фильтр, корзина, оформление заказа. Смотрите, не разъехалась ли вёрстка и нет ли ошибок в консоли браузера.

• 📜 Склейка скриптов меняет порядок. Все локальные JS встают на место первого тега. Если тема задаёт настройки инлайном до подключения библиотеки, такой скрипт сломается. Лечится списком исключений на вкладке «Скрипты».
• 📊 Отсрочка стороннего кода откладывает и аналитику. Часть визитов без единого действия посетителя может не зафиксироваться. Регулируется задержкой; страницы корзины и оформления исключены по умолчанию.
• 💰 Кеш SQL может отдать устаревшие данные. Запись в таблицу сбрасывает его мгновенно, но переход через дату начала акции — нет, для этого предусмотрен отдельный короткий срок. Проверьте цены и остатки после установки. Работает по умолчанию, выключается одним полем.
• 🎲 Кеш запросов с RAND() означает, что случайный блок несколько минут показывает один и тот же набор товаров, пусть и в разном порядке. Нужна честная случайность — поставьте 0.
• ☁️ Cloudflare Rocket Loader уживается с модулем. Держите «Уступать» = Нет: свои теги модуль закрывает атрибутом data-cfasync, а отложенные сторонние скрипты уходят типом, который Rocket Loader не трогает. Его собственный файл всё равно добавит около 300 мс в цепочку — это цена его присутствия.

Перед установкой сделайте бэкап файлов и базы. Разработчик не несёт ответственности за простой магазина при несоблюдении этого правила.

✅ Совместимость

• OpenCart 3.0.x / ocStore 3.0.x
• PHP 7.1 и выше
• Папка image должна быть доступна на запись
• Кеш SQL работает с драйвером базы mysqli
• Проверке снаружи нужен curl и разрешённые исходящие запросы
• После установки обязательно: Расширения — Модификации — Обновить